初识jQueryjQuery 如何获取元素使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery

jQuery 如何获取元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器

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

$("*") //选取所有元素

$("div, p, li") //选取多个标签元素

$("#myID") //选择id为myID的网页元素

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

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

$("ul>li") //使用>号，获取亲儿子层级的元素；

$("ul li") //使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

选择表达式可以是jQuery特有的筛选表达式

$("li:first"); //获取第一个li元素

$("li:last"); //获取最后一个li元素

$("li:eq(2)"); //获取到的li的元素中，获取index值为2的元素

$("button:odd"); //获取到的button元素中，选择index值为奇数的元素

$("p:even"); //获取到的p元素中，选择index值为偶数的元素

$("div:visiable"); //选择所有可见的div元素

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

jQuery 的链式操作

jQuery设计思想的独特之处在于，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，只要使用得当可以一直链下去，比如：

$("div").find("input:first").addClass("red").css("background", "purple")

//等价于
$("div") //找到div元素
        .find("input:last") //找到其中的最后一个input元素
        .addClass("red") //给它添加一个red类
        .css("background", "purple") //然后再把它的background的css属性变成紫色

其原理在于：每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

$("div").find("input:first").addClass("red").end().css("background", "purple")

jQuery 如何创建元素

只要把新元素直接传入jQuery的构造函数就行，比如：

$("<a href='http://google.com'>链接</a>")

$("<button class="red">warning</button>")

$("ul").append("<li>new item</li>")

//
let $h1 = $("<h1>Hello</h1>")
$("body").append($h1)

jQuery 如何移动元素

insertAfter()函数，比如把div元素移动p元素后面
```
$("div").insertAfter($("p"))
```
after()函数，比如把p元素加到div元素前面
```
$("p").after($("div"))
```
insertAfter()函数和after()函数从表面上看，效果相同。但重大差别在于返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。可以根据需要，选择到底使用哪一种方法。

类似这种模式的，共有四对操作：

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

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

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

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

jQuery 如何修改元素的属性

attr() 方法用于获取/改变属性值

attr()函数获取标签的某个属性值

$("#search").attr("href") //获取id为search标签的href属性值

attr()函数修改标签的某个属性值

//设置修改单个属性
$("button").attr("href", "www.google.com")

//同时设置修改多个属性
$("button").attr({
		href: "www.google.com",
		title: "external link",
	})

prop()函数和attr()函数类似，但区别在于：对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

removeAttr()函数删除属性

//删除name属性
$("div").removeAttr("name")

初识jQuery

jQuery 如何获取元素

jQuery 的链式操作

jQuery 如何创建元素

jQuery 如何移动元素

jQuery 如何修改元素的属性

相关链接