DOM对象与jQuery对象转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="user"></div>
<script src="js/jQuery3.4.1.js" type="text/javascript"></script>
<script>
// DOM 转 jQuery
var user = document.getElementById("user");
var $user = $(user);
// jQuery 转 DOM
var $user = $("#user");
var user = $user.get(0);
</script>
</body>
</html>jQuery选择器
1.id选择器
var a = $("#id");2.类选择器
var a = $(".class")3.元素选择器:根据给定（html）标记名称选择所有的元素
var a = $("element");4.全选择器：
var a = $("*");5.层级选择器
| 选择器 | 描述 |
|---|---|
| $(" parent > child ") | 子选择器：选择所有指定“ parent ”元素中指定的“ child ”的直接子元素 |
| $(" ancestor descendant ") | 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子、孙子、曾孙等。 |
| $(" prev + next ") | 相邻兄弟选择器：选择所有紧接在“ prev ” 元素后的 " next "元素 |
| $(" prev ~siblings ") | 一般兄弟选择器：匹配” prev“ 元素之后的所有兄弟元素，具体相同的父元素，也匹配过滤” siblings“选择器 |
6.基本筛选选择器
| 选择器 | m描述 |
|---|---|
| $(" :first ") | 匹配第一个元素 |
| $(" :last ") | 匹配最后一个元素 |
| $(" :not(selector) ") | 一个用于过滤的选择器，选择所有元素去除不匹配给定的选择器元素 |
| $(" :eq(index) ") | 在匹配的集合中选择索引值为index的元素 |
| $(" :gt(index) ") | 选择匹配集合中所有索引值大于给定index的元素 |
| $(" :even ") | 选择索引值为偶数的元素，从0开始计数 |
| $(" :odd ") | 选择索引值为奇数的元素，从0开始计数 |
| $(" :lt(index) ") | 选择匹配集合中所有索引值小于给定index参数的元素 |
| $(" :header ") | 选择所有标题元素，如h1、h2、h3等 |
| $(" :lang(language) ") | 选择指定语言的所有元素 |
| $(" :root ") | 选择该文档的根元素 |
| $(" :animated ") | 选择所有正在执行动画效果的元素 |
jQuery合集都是从0开始索引的
7.内容选择器
| 选择器 | 描述 |
|---|---|
| $(" contains(text) ") | 选择所有包含指定文本的元素 |
| $(” :parent “) | x选择所有含有子元素或者文本的元素 |
| $(" :empty ") | x选择所有没有子元素的元素（包含文本节点） |
| $(" :has(selector) ") | x选择元素中至少包含指定选择器的元素 |
注意事项：
- :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
- :parent与:empty是相反的，两者所涉及的子元素，包括文本节点
8.可见性筛选选择器
| 选择器 | 描述 |
|---|---|
| $(" :visible ") | 选择所有显示的元素 |
| $(" :hidden ") | 选择所有隐藏的元素 |
隐藏元素方法：
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
9.属性筛选选择器
| 选择器 | 描述 |
|---|---|
| $(" [ attribute |= ' value ' ] ") | 选择指定属性值等于给定字符串为前缀（该字符串后跟一个连字符”-“）的元素 |
| $(" [ attribute *= ' value ' ] ") | 选择指定属性具有包含一个给定的子字符串的元素（选择给定的属性是以包含某些值的元素） |
| $(" [ attribute ~= ' value ' ] ") | 选择指定属性用分隔的值中包含一个给定值的元素 |
| $(" [ attribute = ' value ' ] ") | 选择指定属性是给定值的元素 |
| $(" [ attribute != ' value ' ] ") | 选择不存在指定元素 |
| $(" [ attribute ^= ' value ' ] ") | 选择指定属性是以给定字符串开始的元素 |
| $(" [ attribute $= ' value ' ] ") | 选择指定属性是以给定值结尾的元素，这个区别大小写的 |
| $(" [ attribute ] ") | 选择所有具有指定属性的元素，该属性可以是任意值 |
| $(" [ attributeFilter1 ][ attributeFilterN ] ") | x选择匹配所有指定的属性筛选器的元素 |
10.子元素筛选选择器
| 选择器 | 描述 |
|---|---|
| $(" :first-child ") | 选择所有父级元素下的第一个子元素 |
| $(" :last-chlid ") | 选择所有父级元素下的最后一个子元素 |
| $(" :only-child ") | 如果某个元素是其父元素的唯一子元素，那么它就会被选中 |
| $(" :nth-child ") | 选择所有父元素的第n个子元素 |
| $(" :nth-last-child ") | x选择所有他们父元素的倒数第n个子元素。 |
注意：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话，:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算下·
11.表单元素选择器
| 选择器 | 描述 |
|---|---|
| $(" :input ") | 选择所有input、textarea、select和button元素 |
| $(" :text ") | 匹配所有文本框 |
| $(" :password ") | 匹配所有密码框 |
| $(" :radio ") | 匹配所有单选按钮 |
| $(" :checkbox ") | 匹配所有复选框 |
| $(" :submit ") | 匹配所有提交按钮 |
| $(" :image ") | 匹配所有图像域 |
| $(" :reset ") | 匹配所有重置按钮 |
| $(" :button ") | 匹配所有按钮 |
| $(" :file ") | 匹配所有文件域 |
12.表单对象属性筛选选择器
| 选择器 | 描述 |
|---|---|
| $(" :enabled ") | 选取可用的表单元素 |
| $(" :disabled ") | 选取不可取的表单元素 |
| $(“ :checked ”) | 选取被选取的<input>元素 |
| $(" :selected ") | 选取被选取的<option>元素 |
注意：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
13.this选择器
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})jQuery属性与样式
attr()有4个表达式
- attr(传入属性名)：获取属性的值
- attr(属性名, 属性值)：设置属性的值
- attr(属性名,函数值)：设置属性的函数值
- attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
注意：获取Attribute就需要用attr，获取Property就需要用prop
.html()方法
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
- .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
- .html( htmlString ) 设置每一个匹配元素的html内容
- .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
- .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
- .text( textString ) 用于设置匹配元素内容的文本
- .text( function(index, text) ) 用来返回设置文本内容的一个函数
.html与.text的异同:
- .html与.text的方法操作是一样，只是在具体针对处理对象不同
- .html处理的是元素内容，.text处理的是文本内容
- .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
- 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
- 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
.val()方法
- .val()无参数，获取匹配的元素集合中第一个元素的当前值
- .val( value )，设置匹配的元素集合中每个元素的值
- .val( function ) ，一个用来返回设置值的函数
.html(),.text()和.val()的差异总结：
- .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
- .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
- .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
.addClass( className )方法
- .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
- .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
.removeClass( )方法
- .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
- .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
- .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
- .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
- .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
- .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
- .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
- .css( propertyNames )：传递一组数组，返回一个对象结果
设置：
- .css(propertyName, value )：设置CSS
- .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
- .css( properties )：可以传一个对象，同时设置多个样式
注意事项：
- 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
- .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
- 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样
京公网安备 11010502036488号