牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作


Posted in Javascript onOctober 29, 2015

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。

1.jQuery对象就是通过jQuery包装DOM对象后产生的对象。

2.jQuery对象和DOM对象的相互转换。

良好的书写风格:

var $input=$("input")

jQuery获取的对象在变量前面加上$。

<1>jQUery对象转成DOM对象,两种方法:[index]和get(index)

a:var $cr=$("#cr")    //jQuery对象
    var cr=$cr[0]    //DOM对象
b:var $cr=$("#cr")    //jQuery对象
    var cr=$cr.get(0);    //DOM对象

<2>DOM对象转成jQuery对象

var cr=document.getElementById("cr");    //DOM对象
var $cr=$(cr);

3.解决与其他库的冲突

jQuery.noConflict()。
jQuery用$作为自身的快捷方式。

4.使用jQuery的优点

<1>简洁的写法
<2>支持CC1到CCS3
<3>完善的处理机制

运行上面的代码浏览器就会报错!
但是如果这么写的话:

$('#tt').css("color","red");

浏览器不会因为没有这个元素而报错!

5.jQuery选择器

jQuery选择器是jQuery的重中之重!

jQuery过滤选择器与CSS中的伪类选择器相似。

<1>偶数与奇数选择器

偶数:$("tr:even")
奇数:$("tr:odd")

<2>CSS3 伪类选择器奇偶数

p:nth-child(odd)

{

background:#ff0000;

}

p:nth-child(even)

{

background:#0000ff;

}

<2>表单类型选择器

<3>转义选择器防止出错

6.DOM操作分类(1:DOM Core 2.HTML-DOM 3.CSS-DOM)

1.DOM Core

DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并不仅限于处理网页。也可以用来处理任何一种使用标记语言编写出来的文档,例如:XML。

2.HTML_DOM

在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML——DOM的属性。
HTML_DOM提供了一些更加简明的记号来描述各种HTML元素的属性。
如:

document.forms

element.src

只能用于WEB

3.CSS_DOM

CSS_DOM是针对CSS的操作。主要是获取和设置style对象的各种属性。
通过改变style对象的各种属性。改变不同效果。

element.style.color=“red”;

7.遍历节点

1.children()
2.next()
3.prev()
4.siblings()
5.closest()

8.jquey的css

<1>可以使用opacity设置透明度,jQuery已经处理好了兼容性问题。

$("p").css("opacity","0.5");

<2>$("p").height(100)    //100默认单位是px,如果要用别的单位,必须要用字符串

<3>offset()方法

返回相对视窗的偏移

var offset=$("p").offset();

var left=offset.left;

var top=offset.top;

<4>position()

//返回相对最近一个position样式的偏移。

var position=$("p").position();

var left=position.left;

var top=position.top;

<5>scrollTop()和scrollLeft()

//返回滚动条距离顶端的距离与距离左侧的距离。

var $p=$("p");

var top=$p.scrollTop();

var left=$p.scrollLeft();

//同样可以设置滚动到指定位置:

$("ab").scrollTop(300);

<6>pageX与pageY,获取鼠标在页面上的位置

$(document).mousemove(function(e){

  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);

});
Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
JAVASCRIPT对象及属性
Feb 13 Javascript
JavaScript 不只是脚本
May 30 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 #Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 #Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 #Javascript
You might like
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python如何调用字典的key
2020/05/25 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
端午节活动总结报告
2015/02/11 职场文书
暂停营业通知
2015/04/25 职场文书
导游词之青岛崂山
2019/12/27 职场文书
Python中常见的导入方式总结
2021/05/06 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android