jQuery基础选择器的使用（一）

1.1jQuery介绍及概念

jQuery 是一个快速、简洁的 JavaScript 库，封装了很多定义好的函数，我们可以非常方便的调用和使用它，从而提高开发效率。

1.2jQuery环境的搭建

方法一（下载引用）：jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。 例：<script src="jquery.min.js"></script>
方法二：cdn 资源库 引入的 路径 优化访问的速度 (推荐的)
例：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

1.3jQuery的入口函数

写法一：$(document).ready(function(){})

写法二：jquery(document).ready(function(){})

写法三：$(function(){})   推荐

1.4jQuery的选择器

1.4.1基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 

名称	用法	描述
ID选择器	$('#id')	获取指定的ID元素
类选择器	$('.class')	获取同一类名为class的元素
标签选择器	$('div')	获取同一类标签的所有元素
通配符选择器	$('*')	匹配所有元素
群组选择器	$('div，p,span')	选取多个元素

1.4.2层级选择器

名称	用法	描述
子代选择器	$('ul>li')	获取亲儿子层级元素，不能获取孙子层级元素
后代选择器	$('ul li')	获取ul下的所有li元素包括孙子
相邻选择器	$('span+p')	获取当前span下面相邻的p标签
兄弟选择器	$('span~p')	获取当前span下面的所有兄弟p标签

1.4.3筛选选择器

名称	用法	描述
反选择器	$('input:not(:checked)')	获取input中没有添加checked属性的元素
后代选择器	$('ul li')	获取ul下的所有li元素包括孙子
:even选择器	$('tr:even')	获取表格中所有的奇数行
odd选择器	$('tr:odd')	获取表格中所有的偶数行
:eq(index) 选择器	$('tr:eq(0)')	按索获取获取表格的第一行
:gt(index)选择器	$('tr:gt(0)')	获取所有大于索引的行
: lang 选择器	$('li:lang(en)')	匹配语言为en的所有li元素
last选择器	$('p:last')	获取p的最后一个元素
:lt(index) 选择器	$('tr:lt(3)')	匹配所有小于索引的元素
:header 选择器	$('：header')	匹配所有的标题元素
:root 选择器	$(':root')	选中所有html元素
:contains(text) 选择器	$('div:contains("01")')	匹配含有指定文本的元素
:empty 选择器	$('p:empty')	匹配所有不包含子元素或者 文本的空白元素
:has(selector) 选择器	$('div:has(p)')	匹配div中的p标签的元素
: parent 选择器	$('li:parent')	匹配含有子元素或者文本的li元素
:hidden 选择器	$('tr:hidden')	匹配所有不可见元素
:visible 选择器	$('tr:visible')	匹配所有可见元素

1.4.4属性选择器

名称	用法	描述
[attribute] 选择器	$('div[class]')	匹配包含给定的属性的元素
[attribute=value] 选择器	$('div[class="two"]')	匹配给定的属性是某个特定值的元素
[attribute!=value]	$('div[class!="two"]')	匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute ^= value] 选择器	$('div[class ^="f"]')	匹配给定的属性是以某些值开始的元素
[attribute$=value] 选择器	$('div[class $="e"]')	匹配给定的属性是以某些值结尾的元素
[attribute*=value] 选择器	$('div[class *="o"]')	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 选择器	$('input[id][name="n1"]')	匹配input中含有id属性且name=n1的元素

1.4.5结构伪类选择器

名称	用法	描述
:first-child 选择器	$('.cs_02:first-child')	匹配类名为cs_02的第一个子元素
[attribute=value] 选择器	$('div[class="two"]')	匹配给定的属性是某个特定值的元素
:first-of-type 选择器	$('span:first-of-type')	匹配第一个span的标签元素
:nth-child 选择器	$('li:nth-child(3)')	匹配元素下的第三个子元素
:nth-last-child() 选择器	$('li:nth-last-child(3)')	匹配li元素中的倒数第三个子元素，计数从最后一个li开始
:nth-last-of-type() 选择器	$('li:nth-last-of-type(3)')	匹配li元素的倒数第三个元素，计数从最后一个开始
:nth-of-type() 选择器	$('li:nth-of-type(3)')	匹配同一个父元素之下，标签名相同的第n个元素
:only-child选择器	$('ul li:only-child')	匹配ul中只含有唯一一个li的元素
: only - of - type	$('ul li:only-of-type')	匹配：1.某个元素是父元素唯一的子元素则会被匹配 2，某个元素名称在父元素中是唯一的则会被匹配

1.4.6表单选择器

名称	用法	描述
:input 选择器	$(':input')	匹配所有的input,textarea,select,和button元素
:text 选择器	$(':text')	匹配所有的文本框
:password 选择器	$('div[class!="two"]')	匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute ^= value] 选择器	$(':password')	匹配所有的密码框
: radio 选择器	$(':radio')	匹配所有的单选按钮（单选按钮不能设置背景颜色）
: checkbox 选择器	$(':checkbox')	匹配所有的复选按钮（复选按钮不能设置背景颜色）
: submit 选择器	$(':submit')	匹配所有的提交按钮和button元素
: image选择器	$(':image')	匹配所有的图像提交按钮
: reset选择器	$(':reset')	匹配所有的重置按钮
:button 选择器	$(':button')	匹配所有button按钮
:file 选择器	$(':file')	匹配所有文件域
:enabled 选择器	$('input:enabled')	匹配所有没有被禁用的input元素
: disabled 选择器	$('input:disabled')	匹配所有被禁用的input元素
:checked 选择器	$('input:checked')	匹配所有的属性值为checked的input元素
:selected 选择器	$('input:selected')	匹配所有匹配所有选中的option元素