JQuery选择器部分

源自：慕女郎

1、JQuery中常用的函数方法：

1）.html()、.text()：设置或获取元素中显示的内容;使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容

2）.css()、addClass()：设置或获取元素的某种样式属性；通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中

3）.attr()：设置或获取元素的某项属性值；分为attr(属性名)格式返回元素属性值；attr(属性名,属性值)格式是设置元素属性名的值

4）.addClass()：为元素添加指定的样式类别名称；使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名

.text()：获取或设置元素的文本内容

2、JQuery中的选择元素的方法：$("arg")；

其中arg包括id选择器（#id）、标签选择器、类选择器（.class）、*选择器、sele1,sele2,...,seleN；

层次选择器：ance desc：其中ance参数表示父元素，desc参数表示后代元素即包括子元素和孙元素；

1）parent>child选择器：child参数获取的元素都是parent选择器的子元素，通过">"符号来表示一种层次关系，第一代子辈元素；

2）prev+next选择器：查找与“prev”元素紧邻的下一个“next”元素，“+”表示一种上下层次关系，只返回唯一的一个元素

3）prev~siblings选择器：返回prev元素后面全部相邻的同辈元素；“~”表示一种层次关系

以上为jQuery基础选择器

4）(:first )、(:last)：根据过滤选择进行元素匹配，书写时以“：”号开头，用于查找集合元素中某一位置的元素

5）(:eq(index))：其中参数index表示索引号(即：一个整数),它从0开始,如果index的值为3，表示选择的是第4个元素。

6）(:contains(text))：是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

7）(:has(selector))：过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

8）(:hidden)、(:visible)：:visible过滤选择器获取的是全部可见的元素,hidden与visible相反

9）[attribute=value]属性选择器、[attribute!=value]属性选择器：是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

10）[attribule*=value]属性选择器：*为任意匹配字符串，可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值

11）:first-child子元素过滤选择器：可以获取每个标签素中返回的首个元素，它是一个集合，常用多个集合数据的选择处理;:last-child子元素过滤选择器的功能是获取每个标签元素中返回的最后一个元素，它也是一个集合，常用多个集合数据的选择处理。

以上为jQuery过滤性选择器

以下为jQuery表单选择器

12）( :input)表单选择器：返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素

13）( :text)表单文本选择器、( :password)表单密码选择器、( :radio)单选按钮选择器、( :checkbox)复选框选择器、( :submit)提交按钮选择器、( :image)图像域选择器、( :button)表单按钮选择器、( :checked)选中状态选择器、( :selected)选中状态选择器

以下是jQuery操作DOM元素

1）使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

2）使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：

$(content).appendTo(selector)；参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

3）使用before()和after()在元素前后插入内容

使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：

$(selector).before(content)和$(selector).after(content)

其中参数content表示插入的内容，该内容可以是元素或HTML字符串

4）使用clone()方法复制元素

调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

5）替换内容

replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：

$(selector).replaceWith(content)和$(content).replaceAll(selector)

参数selector为被替换的元素，content为替换的内容。

6）使用wrap()和wrapInner()方法包裹元素和内容

wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

7）使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：

$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。this：用于指定当前控件

8）使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。