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