jQuery的一些笔记

Posted 2020-08-15 natsu07

1.区别jQuery对象和DOM对象。

var text1=document.getElementByTagName("div")

var $text2=$("div")

虽然获取的html元素相同，但在js中这是两种对象。它们对应不同的方法，第一个是DOM对象就不能使用jQuery提供的方法，而第二个就可以使用jQuery的方法。

jQuery对象是一个合集，相当于可以批量操作。text1也是一个对象的合集，但它是数组变量，无法批量同时操作，如果要添加事件，必须使用for循环逐个添加，但jQuery则可以$("div").click(function(){})，这个语句可以为一批div元素同时添加点击事件。

 

2.$("div,p")这是群组选择器；$("div",this)这是在this范围中查找div。

 

3.jQuery中创建节点有一些类似innerHTML属性。

$node=$("<li><a>12345</a></li>")//嵌套多少标签都可以

$("div").append($node)//添加新创建的对象，对于append()方法，里面的参数可以是创建的jQuery对象，也可以直接是html字符串，还可以是DOM对象。

类似于div.innerHTML+=<li><a>12345</a></li>

在具备着简洁嵌套的优点的同时，它又具有DOM的优点，可以插入到任意的位置，有append,prepend,insertBefore,insertAfter

 

4.jQuery的对象在调用方法后会返回原对象，这使得一个对象可以链式连续调用方法。如：$("div").append($node1).append($node2)

 

5.jQuery封装的动画方法中，没有定义预先清除累积动画。所以有需要时需要自己写$().stop再写动画，或需要用$().is(":animated")判断动画状态，没有动画时添加。

 

6.查找方法本质上也是选择器，它可以补充更多选择方式。比如层次选择器的$("div p")选取div的后代元素中的p元素，但它只适用于两个条件都是标签的情况。而$().find()则可以嵌套进任何选择器。选取在xx的后代元素中符合xx的对象。

 

7.$().hover(fn1,fn2) 唯一一个可以同时设置两个不同类型事件（鼠标移入和鼠标移出）的事件。

 

8.jQuery的$()函数，传入选择器表达式时返回已有的符合条件的jQuery对象；传入Html字符串时新建DOM对象并包装成jQuery对象后返回；传入DOM对象时原样封装成jQuery对象后返回，如$(this)