jQuery的基本功能

1.jQuery如何获取元素

jQuery的基本设计思想，就是获取某个网页元素，然后对其进行某种操作（通过返回jQuery对象来实现）

jQuery获取一个网页元素：就是将一个选择表达式，放进构造函数jQuery()（简写为$()），然后得到被选中的元素。选择表达式常用CSS选择器。

let $element1 = $(div)              //获取所有div元素      
let $element2 = $(".className")     //获取类名为 className 的元素
let $element3 = $("#idName")        //获取id名为 idName 的元素

2.jQuery的链式操作

jQuery的又一设计思想，就是最终选中网页元素以后，对它进行一系列操作且将所有操作连接在一起，以链条的形式写出来。

$("div").find("p").eq(1).html('hello');
// 以上代码拆分后如下 ↓
$('div') //找到div元素
    .find('p') //选择其中的p元素
    .eq(1) //选择第2个p元素
    .html('Hello'); //将它的内容改为Hello

jQuery还提供了.end()方法，使得获取的元素可以返回上级：

$('div')
　　　.find('p')
　　　.eq(1)
　　　.html('Hello')
　　　.end() //退回到选中所有的p元素的那一步
　　　.eq(2) //选中第三个p元素
　　　.html('World'); //将它的内容改为World

3.jQuery 如何创建元素

创建新元素的方法十分简单，只要把新元素（HTML格式）直接传入jQuery的构造函数就行了：

//创建ul元素
$('<ul>ul element</ul>');    
//创建class为new的li元素
$('<li class="new">new list item</li>');
//将li元素添加为ul元素的子元素
$('ul').append('<li>list item</li>');

4.jQuery 如何移动元素

jQuery为移动元素提供了两组方法。一组方法是直接移动该元素到指定位置，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

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

$('div').insertAfter($('p'));   //return div元素

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

$('p').after($('div'));         //return p元素

两者的区别在于.insertAfter()返回div元素，.after()返回p元素
使用这种模式的操作方法，一共有四对：

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

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

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

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

5.jQuery 如何修改元素的属性

jQuery为修改元素提的属性提供.attr()方法。

//设置被选元素的属性/值
$(selector).attr(attribute,value)   
//设置被选元素的多个属性/值对
$(selector).attr({attribute1:value1, attribute2:value2 ...})