JQuery选择器大全、常用方法和常见事件

目录

（一）选择器

1、基本选择器

2、层级选择器

3、基本过滤选择器

4、内容选择器

5、可见选择器 

6、属性选择器

7、子元素选择器 

8、表单选择器

（二）常用方法

（三）事件

---

（一）选择器

1、基本选择器

【1】元素名选择器 

$("div") – 匹配所有的div元素

【2】class选择器 

$(".c1") – 匹配所有class值为c1 的元素

$("div.c1") – 匹配所有class值为c1的div元素

【3】id选择器 

$("#d1") – 匹配所有id值为d1的元素

$("div#d1") – 匹配所有id值为d1的div元素

【4】‘*’号匹配符 

$("*") – 匹配所有的元素

【5】多元素选择器

$("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素

2、层级选择器

$("div span") – 匹配div下所有的span元素

$("div>span") – 匹配div下所有的span子元素

$("div+span") – 匹配div后面紧邻的span兄弟元素

$("div~span") – 匹配div后面所有的span兄弟元素

3、基本过滤选择器

$("div:first") – 匹配所有div中的第一个div元素

$("div:last") – 匹配所有div中的最后一个div元素

$("div:even") – 匹配所有div中索引值为偶数的div元素，0开始

$("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始

$("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始

$("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始

$("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始

$("div:not(.one)") – 匹配所有class值不为one的div元素

4、内容选择器

$("div:contains('abc')") – 匹配所有div中包含abc内容的div元素

$("div:has(p)") – 匹配所有包含p元素的div元素

$("div:empty") – 匹配所有内容为空的div元素

$("div:parent") – 匹配所有内容不为空的div元素

5、可见选择器 

$("div:hidden") – 匹配所有隐藏的div元素

$("div:visible") – 匹配所有可见的div元素

6、属性选择器

$("div[id]") – 匹配所有具有id属性的div元素

$("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素

$("div[id!='d1']") – 匹配所有id属性值不为d1的div元素

$("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素

$("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素

7、子元素选择器 

$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。

$("div:first-child") –匹配div中第1个子元素。

$("div:last-child") –匹配div中最后一个子元素

8、表单选择器

$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。

$(":password") – 匹配所有的密码框

$(":radio") – 匹配所有的单选框

$(":checkbox") – 匹配所有的复选框

$(":checked") – 匹配所有的被选中的单选框/复选框/option

$("input:checked") – 匹配所有的被选中的单选框/复选框

$(":selected") – 匹配所有被选中的option选项

（二）常用方法

parent()             

$("#d1").parents() – 获取id为d1元素的祖先元素

parents()            

$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素

$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素

next()

$("div").next() – 获取所匹配元素后面紧邻的兄弟元素

$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素

nextAll()

$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素

$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素

prev()

$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素

$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素

prevAll()

$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素

$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素

siblings()

$("div").siblings() – 获取所匹配元素前后所有的兄弟元素

$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素

append()

$("div").append("<span></span>") –为所匹配元素追加一个span子元素

remove()

$("div").remove() – 删除所匹配元素

html()

$("div").html() – 获取所匹配元素的html内容

$("div").html("xxx") – 为所匹配元素设置html内容html()

append是附加，html是覆盖

text()

$("div").text() – 获取所匹配元素的文本内容

$("div").text("xxx") – 为所匹配元素设置文本内容

attr()

$("div").attr("id") – 获取所匹配元素的id属性值

$("div").attr("id", "xx") – 为所匹配元素设置id属性

css()

$("div").css("width") – 获取所匹配元素的width样式属性值

$("div").css("width", "200px") – 为所匹配元素设置width样式属性

$("div").css({"width":"200px", "color":"red","font-size":"24px" }) ; – 为所匹配元素设置width样式属性

（三）事件

click()

$("div").click(function(){}) – 为所匹配元素绑定点击事件

blur()

$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

focus()

$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

change()

$("select").change(function(){}) – 为所匹配元素绑定选项切换事件

ready()

$(document).ready(function(){}) – 文档就绪事件其作用相当于: window.onload = function(){}

简写形式为:$(function(){}) – 在整个文档加载完成后立即执行

show()

$("div").show() – 将隐藏元素设置为显示(底层操作的是display);

hide()

$("div").hide() – 将显示元素设置为隐藏(底层操作的是display);

toggle()

$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见