jQuery基础

jQuery

什么是 jQuery?

一种javaScript的辅助开发的类库，宗旨是用最少的代码写出最多的效果

如何在代码中引入这个类库

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js" type="text/javascript"></script>

我这里导入的版本是v3.2.1的，其它版本同理，在网上找资源下载就好

核心函数

$是jQuery的核心函数，大部分的功能都是通过它来实现的

jQuery对象和DOM对象的相互转换：将DOM对象放入$（）中就可以转换成jQuery对象，而jQuery对象实际上就是一个DOM对象的容器加上一系列功能函数，通过遍历jQuery对象一一取出DOM对象就相当于是将jQuery对象转换成了DOM对象

基础选择器

• .class–根据class属性选择标签

•  *--匹配所有标签
  

• #id–根据id选择标签
• 复合选择器–前后顺序相当于是逐一筛选的过程，从前一个筛选结果中继续筛选下一个符合选择器内容的标签
• element–根据标签名选择标签

层级选择器

- 标签名 标签名—匹配所有prev标签中的next子元素

例如：查找form中的所有input标签

$("form input")

- 标签名+标签名—匹配所有紧跟在prev元素后的next元素
例如：匹配所有跟在label后面的input元素

$("label+input")

- 标签名~标签名—匹配prev元素后的同级next元素
例如：匹配所有跟在label后面的同级input元素

$("label~input")

基本过滤选择器

• 元素:first —选取第一个元素
• 元素:last — 选取最后一个元素
• 元素:not(selector)—去除所有与给定选择器匹配的元素
• 元素:even —选取所有索引为偶数的元素，索引从0开始
• 元素:odd —选取所有索引为奇数的元素，索引从0开始
• 元素:eq(index)—选取索引等于index的元素，索引从0开始
• 元素:gt(index)—选取索引大于index的元素，索引从0开始
• 元素:lt(index) —选取索引小于index的元素，索引从0开始
• 元素:header —选取索引的标题标签

内容过滤选择器

• :contains(text)—匹配包含给定文本的元素
  例如：查找所有包含"John"的div标签

$("div:contains("John")");

• :empty—匹配不包含文本的元素标签
  例如：查找不包含文本的td标签

$("td:empty");

• :parent—匹配包含文本的元素标签（非空标签）
  例如：查找包含文本的td标签

$("td:parent");

• :has(selector)—匹配包含给定元素的元素标签
  例如：查找所有包含p标签的div标签并添加一个text类

$("div:has(p).addclass("text")");

基本过滤选择器

• Element[attribute]—选取拥有此属性的选择器

• Element[attribute=value]—选取指定属性值为value的元素

• Element[attribute!=value]—选取指定属性值不等于value的元素

• Element[attribute^=value]—选取指定属性值以value开始的元素

• Element[attribute$=value]—选取指定属性值以value结束的元素

• Element[attribute*=value]—选取指定属性值中含有value的元素

表单对象属性过滤选择器

• :enabled—选取所有可选的元素
• :disabled—选取所有不可选中的元素
• :checked—选取所有被选中的元素（单选框，复选框）
• :selectd—选取所有被选中的选项元素（下拉列表）

jQuery属性操作

• html()—可以设置和获取起始标签和结束标签中的内容
• text()—可以设置或获取起始标签和结束标签中的文本
• val()—设置或获取表单项value属性值
• attr()—设置或获取属性的值，不推荐操作checked,readOnly,selected,disabled，还可以操作自定义属性
• prop()—设置或获取属性的值，只推荐操作checked,readOnly,selected,disabled