jQuery基础 (一)—样式篇-原创手记-慕课网

id选择器：一个用来查找的ID，即元素的id属性
$( "#id" )
类选择器：通过class样式类名来获取节点
$( ".class" )
元素选择器：根据给定（html）标记名称选择所有的元素
$( "element" )
通配符，*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素
$( `""` )
层级选择器：
子元素：$('div>p'); div下的子元素p
后代元素：$('div p');div下所有的元素p
相邻兄弟元素：$(".prev +div");class=prev元素后的第一个兄弟元素div
一般兄弟元素：$(".prev ~ div");class=prev 元首后所有兄弟元素div
基本筛选选择器：
$(":first")：匹配第一个元素
$(":last")：匹配最后一个元素
$(":not(<selector>)")：选择所有元素去除不匹配给定的选择器元素
$(":eq(<index>)")：在匹配的集合中选择索引值为index的元素
$(":gt(<index>)")：选择匹配集合中所有大于给定index
$(":lt(<index>)")：选取匹配集合中所有索引值小于给定index参数的元素
$(":even")：选取索引值为偶数的元素，从0开始计数
$(":odd")：选取索引值为奇数的元素，从0开始计数
$(":header")：选择所有标题元素，像h1、h2、h3等
$(":lang(<language>)")：选择指定语言的所有元素
$(":root")：选择该文档的根元素
$(":animated")：选择所有正在执行动画的元素
内容筛选选择器：
$(":contains(<text>)")：选择所有包含指定文本的元素（子元素包含文本也符合条件）
$(":has(<selector>)")：选择元素中至少包含指定选择器的元素
$(":parent")：选择所有含有子元素或文本的元素
$(":empty")：选择所有没有子元素的元素（包含文本节点）
我们有几种方式可以隐藏一个元素：
CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
PS:元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
$('#div:visible'),表示是否可见，可见为1，不可见为0；
$('#div:hidden'),表示是否隐藏，隐藏为1，不隐藏为0；
属性选择器：
$("[<attr>]")：选择含有attr属性的元素
$("[<attr> = '<val>']")：选择attr属性值是val的元素
$("[<attr> != '<val>']")：选择不存在attr属性或attr值不等于val的元素（JQ特有）
$("[<attr> ^= '<val>']")：选择以val开头的attr属性值的元素
$("[<attr> $= '<val>']")：选择以val结尾的attr属性值的元素，val区分大小写
$("[<attr> |= '<val>']")：选择attr属性值以val-为前缀或者等于val的元素
$("[<attr> *= '<val>']")：选择attr属性值包含val的元素
$("[<attr> ~= '<val>']")：选择attr属性值中用空格分隔开的属性值中有一个值是val的元素
$("[<attrFilter1>][<attrFilterN>]")：选择匹配所有属性筛选器的元素
子元素筛选选择器（n从1开始）：
$(":first-child")：如果指定元素为其父元素的首个子元素，则选中
$(":last-child")：如果指定元素为其父元素的末个子元素，则选中
$(":only-child")：如果指定元素是其父元素唯一子元素，则选中
$(":nth-child(n)")：如果指定元素为其父元素的第n个子元素，则选中
$(":nth-last-child(n)")：如果指定元素为其父元素的倒数第n个子元素，则选中
备注：选择所有父元素下符合条件的子元素
表单元素选择器：
$(":input")：选择所有input、textarea、select、button元素
$(":text")：选择所有文本框（input[type='text']）
$(":password")：选择所有密码框（input[type='password']）
$(":radio")：选择所有单选按钮（input[type='radio']）
$(":checkbox")：选择所有复选框（input[type='checkbox']）
$(":submit")：选择所有提交按钮（input[type='submit']或button[type='submit']）
$(":reset")：选择所有重置按钮（input[type='reset']或button[type='reset']）
$(":button")：选择所有按钮（input[type='button']或button）
$(":image")：选择所有图像域（input[type='image']）
$(":file")：选择所有文件域（input[type='file']）
特殊选择器：$(this)
this：表示当前的上下文对象是一个HTML对象，可以调用HTML对象的属性和方法。
$(this)：代表的上下文对象是一个JQ的上下文对象，可以调用JQ的方法和属性。
.attr()与.removeAttr()
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
html()及.text()
.html()：获取集合中第一个匹配元素的HTML内容
.html(<text>)：设置每一个匹配元素的HTML内容
.html(function(<index>, <oldHtml>))：返回设置HTML内容的函数
.text()：获取集合中每个元素的合并文本（包括后代）
.text(<text>)：设置匹配元素内容的文本
.text(function(<index>, <text>))：返回设置文本内容的函数
.val()方法
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
.addClass( className )方法
.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项：
.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上，会在原本的类上继续增加，通过空格分隔
.removeClass( )方法
removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名
注意事项
如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
注意事项：
toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
toggleClass会保留原有的Class名后新增，通过空格隔开
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式
添加样式：
.addClass('<cls>')：添加样式名
.addClass(function(<index>, <oldCls>))：通过函数添加样式名
移除样式：
.removeClass('<cls>')：移除样式名
.removeClass(function(<index>, <oldCls>))：通过函数移除样式名
切换样式（如果元素上存在指定样式，则删除，否则添加）：
.toggleClass('<cls>'[, <isSwitch>]?)：切换集合中每个元素的指定样式
.toggleClass(function(<index>?, <oldCls>?), <isSwitch>?)：通过函数切换集合中每个元素的指定样式
检查样式：
.hasClass('<cls>')：检查元素是否包含指定样式
操作内联样式：
.css('<propName>')：获取集合中第一个元素的样式属性的计算值（不支持简写的css属性）;<propName>为数组时，返回一个对象结果
.css('<propName>', <value>)：设置CSS属性；如果<value>为空字符串，则删除该属性
.css(<propName>, function(<index>?, <oldValue>?))：通过函数设置CSS属性
.css({{<propName1>:<value1>, ..., <propNameN>:<valueN>}})：设置多个属性
备注：<index>是元素在集合中的索引位置；<oldXXX>表示原始值；<isSwitch>是bool值，用于判断是添加还是移除样式；<propName>支持驼峰命名或连字符命名。
.addClass和.css方法的区别：
.addClass通过增加样式名的方式修改样式，样式名在外部样式表或内部样式表中已定义好；.css处理内联样式，直接通过元素的style属性添加，因而优先级高于.addClass。
.addClass一般用于静态结构，可以统一修改相同的元素；.css动态改变一个样式的属性，灵活性高。
.addClass无法获取到指定的样式值，但.css可以。
底层方法（静态接口）（jQuery可以用$代替）：
jQuery.data(<ele>, <key>?)：取出数据；无<key>时以对象形式返回所有数据
jQuery.data(<ele>, <key>, <value>)：存储数据
jQuery.data(<ele>, {<key>:<value>,...})：批量存储数据
jQuery.removeData(<ele>, <key>?)：移除数据；无<key>时移除所有数据
常用方法（实例接口）：
.data(<key>?)：取出数据；无<key>时以对象形式返回所有数据
.data(<key>, <value>)：存储数据
.data({<key>:<value>,...})：批量存储数据
.removeData(<key>?)：移除数据；无<key>时移除所有数据
备注：
1、通过.data方法存取的数据都是临时数据，页面刷新就没了；
2、如果<value>值为undefined，则相当于取出数据。