天天看点

锋利的jQuery--jQuery与DOM对象的互相转换,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>完善的处理机制

锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

运行上面的代码浏览器就会报错!

但是如果这么写的话:

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

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

5.jquery选择器

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

jquery过滤选择器与css中的伪类选择器相似。

<1>偶数与奇数选择器

偶数:$("tr:even")

奇数:$("tr:odd")

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

锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

<2>表单类型选择器

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

锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

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元素的属性。

如:

只能用于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()方法

<4>position()

<5>scrolltop()和scrollleft()

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

 转载:http://www.cnblogs.com/zqzjs/p/4918841.html

继续阅读