jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

下面介绍jQuery的功能实现

一、获取元素

"选择某个网页元素，然后对其进行某种操作"。用‘$’符号代替jQuery构造函数。可以是id，也能是css选择器。




二、jQuery 的链式操作是怎样的

jQuery 的链式：终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来。



$('div').find('#child').addClass('red')



展开的话就是



$('div') //找到div元素

　　　.find('#child') //选择其中的child元素

　　　.addClass('red')//添加红色样式



jQuery 提供end（）可以返回上一级元素



$('div').find('#child').addClass('red').end().addClass（'yellow'）



展开的就是



$('div') //找到div元素

　　　.find('#child') //选择其中的child元素

　　　.addClass('red')//添加红色样式
      .end()//回到div元素
      .addClass('yellow') 添加黄色样式



三、jQuery 如何创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了



$('<p>Hello</p>');

　　$('<li class="new">new list item</li>');

　　$('ul').append('<li>list item</li>');



四、jQuery 如何移动元素

有2种方法：一是直接移动该元素，另一种是方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：



$('div').insertAfter($('p'));



第二种方法是使用.after()，把p元素加到div元素前面：



$('p').after($('div'));



表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。

使用这种模式的操作方法，一共有四对：

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

.appendTo()和.append()：在现存元素的内部，从后面插入元素

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

五、jQuery 如何修改元素的属性

先要获取元素

addClass()为元素添加样式

removeClass()移除样式

六、遍历元素

利用each(fn)遍历元素