jq

一.样式操作
1选择器
①层级选择器
(“parent>child”)子选择器(“ancestor descendant”) 后代选择器
(“prev+next”)相邻兄弟选择器(“prev~siblings”) 一般兄弟选择器
$(#one).siblings(“div”) 获取id为one的元素的所有

同辈元素（不管前后）
$(#one).prev(“div”) 获取id为one的元素的前面紧邻的同辈

元素
②筛选选择器
a.基本筛选
(“: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”) 选择所有正在执行动画效果的元素
b内容筛选
(“.div:contains(span)”).css(“color”,“blue”);//包含关键字span的div(“.div:has(span)”).css(“color”, “blue”);//包含标签span的div
(“.div:parent”).css(“color”,“blue”)//选择已经当爹的div(“.div:empty”).css(“color”, “blue”)//选择空巢的div
c可见性选择器
(“:visible”)选择所有显示的元素(“:hidden”) 选择所有隐藏的元素
以下几种方式可以隐藏一个元素：
1.css display的值是none；
2.type=”hidden”的表单元素；
3.宽度和高度都显式的设置为0；
4.一个祖先元素是隐藏的，该元素不会在页面上显示；
5.css visibility的值是hidden；
6.css opacity的值是0
如果元素占据文档中一定空间，那么元素被认为是可见的
可见元素的宽度或者高度是大于0
元素的visibility:hidden或者opacity:0被认为是可见的，因为他们仍然占用空间布局
不在文档中的元素是被认为不可见得，如果他们被插入到文档中，jq不能知道他们是否可见，因为元素的可见性依赖于适用的样式。
d属性选择器
(‘div[name=p1]′)：//查找所有div中，属性name=p1的div元素(‘div[p2]’)： //查找所有div中，有属性p2的div元素
(‘div[name|=”−“]′)//查找所有div中，有属性name中的值只包含一个连字符“−”的div元素，或以连字符‘−′相连的前缀为字符“−”的div(‘div[name~=”a”]’) //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素，以空格风格的属性中有属性值a
(‘div[name=imooc]′)//查找所有div中，属性name的值是用imooc开头的('div[name=imooc]′)//查找所有div中，属性name的值是用imooc结尾的(‘div[name*=”test”]’)//查找所有div中，有属性name中的值包含一个test字符串的div元素
$(‘div[testattr!=”true”]’)//查找所有div中，有属性testattr中的值没有包含”true”的div
e 元素选择器
(‘:first−child′):针对所有父元素下的第一个子元素(‘:last-child’):针对所有父元素下的最后一个子元素
(‘:only−child′):针对所有父元素下的只有一个子元素（只有唯一一个子元素）(‘:nth-child(n)’)针对所有父元素下的弟n个元素（这里的n是从1开始计数）
$(‘:nth-last-child(n)’)针对所有父元素下的倒数弟n个元素
f表单选择器
(‘:input′)选择所有input,text,area,select和button元素(“input:text”)匹配所有文本框
(“input:password”)匹配所有密码档(“input:radio”)匹配所有单选按钮
(“input:checkbox”)匹配所有复选框(“input:submit”)匹配所有提交按钮
(“input:image”)匹配所有图像域(“input:reset”)匹配所有重置按钮
(“input:button”)匹配所有按钮(“input:file”)匹配所有文件域
G表单对象属性筛选选择器
(“:enabled”)选取可以使用的表单元素(“:disabled”)选取不可以使用的表单元素
(“:checked”)选取被选择中的(“:selected”)选取被选择中的元素
选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素

2属性和样式
attr()与.removeAttr()
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数

.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数

注：html()和text()的区别：如果在没有子节点的情况下是一样的 但是有子节点的时候html会把子节点的标签也输出 而text只会输出子节点里的文本值；
html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的”value”值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的”value”值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
操作类名
addClass
(“tbody>tr”).last().addClass(“vsssslll”);removeClass(“tbody>tr”).last().removeClass(“tr3 lll”);
(“tbody>tr”).eq(1).removeClass(“tr3lll”);(“tbody>tr:eq(1)”).removeClass(“tr3 lll”);
toggleClass
(“tbody>tr”).toggleClass(vsssslll);在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类(“tbody>tr”).toggleClass(“vssss lll”,false);
$(“tbody>tr”).toggleClass(“vssss lll”,true);
false代表删除 true表示添加
CSS方法
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式
通过.css方法设置的样式属性优先级要高于.addClass方法

jq储存数据
jQuery提供的存储接口

jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

jQuery.removeData( element [, name ] )
.removeData( [name ] )

实例$('.left').click(function() {
var ele = $(this);
//通过$.data方式设置数据
$.data(ele, "a", "data test")
$.data(ele, "b", {
name : "慕课网"
})
//通过$.data方式取出数据
var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
var ele = $(this);
//通过.data方式设置数据
ele.data("a", "data test")
ele.data("b", {
name: "慕课网"
})
//通过.data方式取出数据
var reset = ele.data("a") + "</br>" + ele.data("b").name
ele.find('span').append(reset)
})
</script>
就是说dataz这个方法可以静态用和动态用：
1静态：$.data(ele,key,value);里面三个参数分别代表要存储数据的节点、数据名称、数据内容；
2动态：ele.data(key,value)；表示某个节点存的数据名和数据内容。
其实不用管他什么静态动态的，会用就行了，这两个的区别就在节点ele那里，即例子的第一个参数ele那里。这个ele可以作为data方法的调用者（选择者） ，也可以作为 被选择者（被调用）。jquery方法的通用思想是：传入一个参数代表取值，传入两个参数代表设置这个值。顺便说一下老师最后那“.data( key ) //实例接口,存数据”错了。应该是是取数据