概述
jQuery 函数包装的对象是类数组对象，对象里面包含了 DOM 对象的信息，并封装了很多操作方法，可以和访问数组一样的方法来访问。
jQuery 对象 和 DOM 对象
联系
可是使用 $ 符号将 DOM 对象封装成 jQuery 对象 $( div )
可是使用 div = $div[ 0 ] 或者 div = $div.get( 0 ) 将 jQuery 对象转化成 DOM 对象
区别
DOM 对象的属性和方法有： .style .classList
jQuery 对象的属性和方法有：.css .addClass
说明：传递给 $(DOM) 函数的参数是 DOM Object ，则 jQuery 函数会把这个 DOM Object 给包装成一个新的 jQuery 对象
jQuery 选择器
-
id 选择器： $( "#id" )
-
类选择器：$( ".class" )
-
元素选择器： $( "element" )
-
全选择器：$( "*" )
-
层级选择器
-
子选择器：$( "parent > child" )
-
后代选择器：$( "ancestor descendant" )
-
相邻兄弟选择器：$( "prev + next" )
选择所有紧跟在prev元素后的next元素 -
一般兄弟选择器：$( "prev ~ siblings" )
匹配prev元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤siblings选择器
-
-
基本筛选选择器
- $( ":first" ) ==> 匹配第一个元素
- $( ":last" ) ==> 匹配最后一个元素
- $( ":not(seletor)" ) ==> 选择所有元素去除不匹配给定的选择器元素
- $( ":eq(index)" ) ==> 在匹配的集合中选择 index 的元素（从0开始）
- $( ":gt(index)" ) ==> 在匹配的集合中选择大于 index 的元素（从0开 始）
- $( ":lt(index)" ) ==> 在匹配的集合中选择小于 index 的元素（从0开 始）
- $( ":odd" ) ==> 选择索引值为奇数的元素
- $( ":even" ) ==> 选择索引值为偶数的元素
- $( ":header" ) ==> 选择所有标题元素
- $( ":root" ) ==> 选择该文档的根元素
- $( ":lang(language)" ) ==> 选择指定语言的所有元素
- $( ":animated" ) ==> 选择所有正在执行动画的元素
说明：
1. :eq()、:lt()、:gt()、:even、:odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素进一步筛选
2. :gt() 是一个段落筛选，从指定索引的下一个开始，:gt(1) 实际是从2开始
-
内容筛选选择器
-
$( ":parent" ) ==> 选择所有含有子元素或者文本的元素
-
$( ":empty" ) ==> 选择所有没有子元素的元素（包括文本节点）
-
$( ":contains(text)" ) ==> 选择所有包含指定文本的元素
-
$( ":has(selector)" ) ==> 选择元素中至少包含指定选择器的元素
说明：
1. :contain 和 :has 都有查找的意思，但 contains 查找包含制定文本的元素，has 查找包含指定元素的元素
2. 如果 :contains 匹配的文本包含在元素的子元素中，同样认为是符合条件的
3. :parent 和 :empty 是相反的，但是两者所涉及的子元素都包括文本节点
-
-
可见性筛选选择器
-
$( ":visible" ) ==> 选择所有显示的元素
-
$( ":hidden" ) ==> 选择所有隐藏的元素
隐藏元素的方式
1. CSS ==> display: none
2. width: 0; height: 0;
3. visibility: hidden;
4. opacity: 0;
说明：如果元素占据文档中一定的空间，元素被认为是可见的，可见元素的宽高都大于 0 ，元素的visibility: hidden;和opacity: 0;被认为是可见的，因为他们仍然占据空间布局。不在文档中的元素被认为是不可见的，如果当他们被插入到文档中，jQuery 没有办法知道他们是否是可见的，因为元素可见性依赖于使用的样式。 -
-
属性筛选选择器
-
$( "[attribute |= 'value']" ) ==> 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符 '-'）的元素
-
$( "[attribute = 'value']" ) ==> 选择指定属性具有包含一个给定的子字符串*的元素（选择给定属性是包含某些值的元素）
-
$( "[attribute ~= 'value']" ) ==> 选择指定属性用空格分隔的值中包含一个给定值的元素
-
$( "[attribute = 'value']" ) ==> 选择指定属性是给定值的元素
-
$( "[attribute != 'value']" ) ==> 选择不存在指定属性，或者指定的属性不等于给定值的元素
-
$( "[attribute ^= 'value']" ) ==> 选择指定属性是以给定字符串开始的元素
-
$( "[attribute $= 'value']" ) ==> 选择指定属性是以给定值结尾的元素
-
$( "[attribute]" ) ==> 选择所有具有指定属性的元素，该属性是任意值
-
-
表单元素选择器
-
$( ":input" ) ==> 选择所有 input textarea select 和 button 的元素
-
$( ":text" ) ==> 匹配所有文本框
-
$( ":password" ) ==> 匹配所有密码框
-
$( ":raido" ) ==> 匹配所有单选按钮
-
$( ":checkbox" ) ==> 匹配所有复选框
-
$( ":submit" ) ==> 匹配所有提交按钮
-
$( ":image" ) ==> 匹配所有图像域
-
$( ":reset" ) ==> 匹配所有重置按钮
-
$( ":button" ) ==> 匹配所有按钮
-
$( ":file" ) ==> 匹配所有文件域
说明：
1. 除了 input 筛选选择器，其余每个表单类别选择器都对应一个 input 元素的 type 值，所以其都可以用属性筛选选择器替换
2.$( ":password" ) === $( "[type = password]" ) -
-
表单对象属性筛选选择器
-
$( ":enabled" ) ==> 选取可用的表单元素
-
$( ":disabled" ) ==> 选取不可用的表单元素
-
$( ":checked" ) ==> 选取被选中的 <input> 元素
-
$( ":selected" ) ==> 选取被选中的 <option> 元素
说明：
1. 选择器适用于复选框和单选框，对于下拉框元素使用 :selected 选择器
2. 在使用 :checked 的时候，最佳实践是使用 input: checked -
-
子元素筛选选择器
-
$( ":first-child" ) ==> 选择所有父级元素下的第一个子元素
-
$( ":last-child" ) ==> 选择所有父级元素下的最后一个子元素
-
$( ":only-child" ) ==> 如果某个元素是其父元素下的唯一子元素，那么它就会被选中
-
$( ":nth-child(n)" ) ==> 选择所有父级元素下的第 n 个子元素，n 是索引值，从 1 开始
-
$( ":nth-last-child(n)" ) ==> 选择所有父级元素下的第 n 个子元素，计数从最后一个开始
-
-
特殊选择器
-
this ==> 表示当前的上下文对象是一个 HTML 对象，可以调用 HTML 对象所拥有的属性和方法
-
$(this) ==> 代表上下文是一个 jQuery 的上下文对象，可以调用 jQuery 的方法和属性值
-
jQuery 属性与样式
-
.attr()
获取和设置元素属性（DOM操作）- .attr(传入属性名) ==> 获取属性值
- .attr(属性名, 属性值) ==> 设置属性值
- .attr(属性名, 函数值) ==> 设置属性的函数值
- .attr(attribute) ==> 给指定元素设置多个属性值
.attr({属性名1: "属性值1" , 属性名2: "属性值2", ...})
说明：Attribute 和 Property
1. Attribute 属性 ， Property 特性
2. Attribute 就是 DOM node 自带的属性（id、class、title），Property 是 DOM 元素作为对象，其附加的内容（nodeName、nodeType、tagName） -
.removeAttr()
为匹配的元素集合中的每个元素移除一个属性 attributeName -
.html()
获取或设置匹配元素的 HTML 内容- .html() ==> 获取集合中第一个匹配元素的 HTML 内容
- .html(htmlString) ==> 设置每一个匹配元素的 HTML 内容
- .html(function(index, oldhtml)) ==> 用来返回设置 HTML 内容的一个函数
说明：
.html() 方法内部使用的是 DOM 的 innerHTML 属性来操作的，这个操作是针对整个 HTML 内容（包括文本内容）
-
.text()
得到匹配元素集合中的每个元素的文本内容的结合，包括他们的后代，或者设置匹配元素集合中每个元素的文本内容为指定的文本内容- .text() ==> 获取匹配元素集合中每个元素的合并文本，包括他们的后代
- .text(textString) ==> 用来设置匹配元素内容的文本
- .text(function(index, text)) ==> 用来返回设置文本内容的一个函数
说明：.html() 和 .text()
1. .html() 处理元素内容，.text() 处理文本内容
2. html() 只能使用在 HTML 文档中，.text() 在 XML 文档和 HTML 文档都能使用
3. 若处理对象只有一个子文本节点，则 .html 和 .text() 处理结果相同 -
.val()
处理表单元素的值- .val() ==> 获取匹配元素集合中第一个元素的当前值
- .val(value) ==> 设置匹配的元素集合中每个元素的值
- .val(function(){}) ==> 一个用来返回设置值的函数
说明：.html() 和 .text()
1. .val() 处理 select 元素，当没有选择项被选中时，它将返回 null
2. 若 select 元素有 multiple 属性，并且至少一个选择项被选中时， .val() 将返回一个数组，这个数组包含每个选中选择项的值
3. .val() 方法多用来设置表单的字段的值 -
.addClass()
动态增加 class 类名- .addClass(className) ==> 为每个匹配元素增加一个或多个类名
- .addClass(function(index, currentClass){}) ==> 这个函数返回一个或更多用空格隔开的要增加的样式名
说明：
1. .addClass() 方法不会替换一个样式类名，它只是简单的添加一个类名到元素上
2.<script> $('div').addClass(function(index, className){ if( className.indexOf(index) !== -1 ){ $(this).addClass('red') } }) </script> -
.removeClass()
删除全部或者指定的 class- .removeClass([className]) ==> 每个匹配的元素移除一个或对个用空格隔开的样式名
- .removeClass(function(index, class)) ==> 返回一个或多个要被移除的样式名的函数
说明：如果 .removeClass() 没有参数，则会移除所有的样式类
-
.toggleClass()
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式是否存在，即：如果存在就删除一个类，如果不存在就添加一个类- .toggleClass(className) ==> 切换类
- .toggleClass(className,switch) ==> 一个布尔值，用来判断样式是否应该被添加或移除
- .toggleClass(function(index, class, switch){})
-
.css()
获取元素样式属性的计算值或者设置元素的 CSS 属性
获取- .css( "propertyName" ) ==> 获取匹配元素集合中的第一个元素的样式属性的计算值
- .css( "propertyNames" ) ==> 传递一组数组，返回一个对象结果
设置
- .css( 'propertyName', 'value' ) ==> 设置 CSS
- .css( 'propertyName', function ) ==> 可以传入一个回调函数，返回取到对应的值进行处理
- .css( 'properties ) ==> 可以传入一个对象，同时设置多个样式，用
{ }括起
说明：
1. 通过 .css() 方法设置的样式属性优先级要高于 .addClass() 方法
2. 若是静态结构，确定了布局规则，使用 .addClass() 方法增加类
3. 若是动态的 HTML 结构，在不确定布局或者经常要变化的情况下，使用 .css() 方法
4. .addClass() 不能获取到指定样式的属性值，.css() 可以获取到指定的样式值
网友评论