jQuery主要用法

1.jQuery如何获取元素

jQuery的主要用法就是，选中网页上的某个元素，并对它进行你想要的操作。

实现代码非常简单，就是将选择表达式放入构造函数jQuery()（简写为$），然后就获得了这个元素。

所谓的选择表达式，它可以是CSS选择器：

$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素，除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

2.jQuery的链式操作是怎样的

链式操作是jQuery最令人感到舒适的特点，因为它带来了极大的方便。

它的原理就是，每进行一次jQuery操作，都会返回一个jQuery对象，通过返回的jQuery对象又可以再次进行jQuery操作，这样就把不同的操作串联了起来，形成一个链条的形式：

$('div').find('h3').eq(2).html('Hello'); //获得div元素，选择其中的h3元素，选择第3个h3元素，将它的内容改为Hello

3.jQuery如何创建元素

将新元素传入jQuery构造函数即可：

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

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

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

4.jQuery如何移动元素

根据操作视角的不同，有以下两种方法。

1. 直接移动该元素

   使用.insertAfter()，将div元素移动到p元素后面：

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

2. 移动其他元素，使目标元素到达想要的位置

   使用.after()，将p元素加到div元素前面：

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

这两种方法看似没有区别，实际上返回的元素不一样。第一种方法的返回元素是div元素，第二种方法的返回元素是p元素。所以，应根据自己的实际需求选择使用哪一种方法。

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

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

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

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

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

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

使用.attr()方法可以轻松实现元素属性的读取、增加和修改。

当只传入属性名一个参数时，即可实现元素属性的读取：

$('selector').attr('attributeName')

当传入属性名和属性值两个参数时，可实现元素属性的增加和修改：

$('selector').attr('attributeName', value)

也可通过.attr(map)来实现设置多个属性：

$("selector").attr({
    attributeName1: value1,
    attributeName2: value2,
    ...
    attributeNameN: valueN
})

删除元素属性则通过removeAttr()来实现：

$('selector').removeAttr('attributeName')

值得注意的是.attr()方法只获取第一个匹配元素的属性值，如果你需要每个单独的元素的属性值，需要依靠jQuery的.each()或者.map()方法来实现。