jQuery的功能

目录

1. jQuery 如何获取元素
2. jQuery 的链式操作是怎样的
3. jQuery 如何创建元素
4. jQuery 如何移动元素
5. jQuery 如何修改元素的属性

正文

一、jQuery 如何获取元素

jQuery的主要用法就是选择网页上的某个元素，对它进行想要的操作。所以想要使用jQuery，必须先选择页面中的一个元素。

• 选择整个文档对象

$(document)

• 选择ID为myID的元素

$('#myId')

• 选择class为myClass的元素

$('.myClass')

• 选择class为myClass的div元素

$('div.myClass')

• 选择name属性等于red的div元素

$('div[name=red]')

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

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

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

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

.eq(2) //选择第3个h3元素

.html('Hello'); //将它的内容改为Hello

只要你想，你就可以一直链下去。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

三、jQuery 如何创建元素

创建新元素只要把新元素直接传入jQuery的构造函数就行了：

　$('<div><span>我是div中的span</span></div>');

四、jQuery 如何移动元素

先思考，想要将苹果和梨换个位置，怎么办？会有两种方法，一是移动苹果，二是移动梨。jQuery的移动元素也是这样的，一是直接移动该元素，另二是移动其他元素，使得目标元素达到我们想要的位置。
假定我们选中了一个div元素，需要把它移动到span元素后面

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

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

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

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

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

jQuery提供了attr() 方法用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：

$("button").click(function(){
  $("#w3s").attr("href","http://XXXX");
});

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：

$("button").click(function(){
  $("#mybutton").attr({
    "href" : "http://XXX",
    "title" : "jquery"
  });
});