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元素

jQuery的链式操作是如何工作的？

jQuery的第三个设计思想是，网页元素最终选定后，可以对其进行一系列的操作，并且所有的操作都可以链接在一起，写成一条链，比如：

 $('div').find('h3').eq(2).html('Hello');

分解后，它看起来像这样：

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

这是jQuery最值得称赞和方便的功能。 它的原理是每个jQuery操作返回一个jQuery对象，因此不同的操作可以连接在一起。

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

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

如何使用 jQuery 创建元素

创建新元素的方法非常简单，只需将新元素直接传递到 jQuery 的构造函数中即可：

　　$('
Hello
');
　　$('
new list item
');
　　$('ul').append('
list item
');

如何使用 jQuery 连接元素

jQuery的第五个设计思想是提供两套方法来操作网页中元素的位置。 一组方法是直接连接元素，另一组方法是连接其他元素jquery获取页面元素，使目标元素到达我们想要的位置。

假设我们选择一个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 更改元素的属性

在操作网页元素时，最常见的需求是获取它们的值或者向它们提供形式参数。

jQuery的第四个设计思想是用同一个函数来完成值（getter）和形参（setter），即“值getter”和“值setter”合二为一。 是值还是形参是由函数的参数决定的。

　　$('h1').html(); //html()没有参数，表示取出h1的值
　　$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

常见的值获取和赋值函数如下：

　　.html() 取出或设置html内容
　　.text() 取出或设置text内容
　　.attr() 取出或设置某个属性的值
　　.width() 取出或设置某个元素的宽度
　　.height() 取出或设置某个元素的高度
　　.val() 取出某个表单元素的值

需要注意的是jquery获取页面元素，如果结果集包含多个元素，则使用参数时会将所有元素参数化； 获取值时，只会取出第一个元素的值（.text()例外，它取出所有元素的文本内容）。

jQuery设计思想阮一峰的博客