jQuery的样式篇

jQuery获取元素：

JavaScript中获取元素节点的时候是通过document.getElementsById(" ");的方法来获取这个等价于jQuery中的$("");

在jQuery中要想获取元素节点和JavaScript一样是三个方法

ID选择器  $("#id");

class选择器  $(".class");

元素选择器  $(" ");   这些都等价于对应的JavaScript中的方法

在jQuery中有一个层级选择器作用就是1：在一个父节点的限定下寻找子节点或者子孙节点  2：在已知节点下寻找相邻的兄弟节点 但是要求这些节点的父节点是同一个。

 $("parent>child");  这个就是在parent节点下的child子节点  child要求是子节点  而不可以是孙子节点等等。

$("parent descendant")  这个是在parent节点下的descendant节点  是parent的子孙节点都可以

$("prev+ next")  这个是prev节点后面紧连着的next节点  这个节点只是第一个有用  

$("prev~siblings") 在prev节点后相邻的所有是siblings节点 

$(":first")   匹配第一个元素  匹配的是单个元素   例:$("div:first")  最先出现的div中的第一个元素  

$(":last")  匹配最后一个元素  匹配的是单个元素   $("div:last")  最后出现的div中的最后一个元素

$(":not(  )“)  过滤掉（）内的元素 

$(" :eq(index)")  选择索引值为index的元素 

$(":gt(index)") 选择索引值比index大的元素

$(":lt(index)") 选择索引值比index小的元素

$(":even")   选择所有索引值为偶数的元素

$(":odd")  选择所有索引值为奇数的元素

$(":header")  选择所有标题元素

$(":root")  选择根元素

$(":contains(text)")  选择所有包含指定文本的元素  包含就是拥有即可

$(":parents")   选择所有 有子元素或者文本元素的元素

$(":empty")  选择所有没有子元素(包括文本节点)的元素

$(":has(selected)")  选择所有包含指定选择器的元素 

$(":visible") 选择所有显示的元素

$(":hidden") 选择所有的隐藏元素 

隐藏元素的条件是满足一下的其中一条;

1. CSS display的值是none。
2. type="hidden"的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是hidden
6. CSS opacity的值是0

$(":first-child") 父元素下的第一个子元素

$(":last-child")  父元素下的最后一个子元素

$(":nth-child(index)")  父元素下的第几个子元素  第几个子元素index就是几

$(":nth-last-child(index)")  父元素下的倒数第几个子元素  倒是第几个子元素index就是几

$(":only-child")   如果这个元素是父元素的唯一子元素那么它就会被选中

$(":input")  匹配所有的input表单元素(text password button等等)

$(":text")    匹配所有的文本框

$(":password")  匹配所有的密码框

$(":radio")  匹配所有的单选框

$(":checkbox")  匹配所有的复选框

$(":button") 匹配所有的按钮

$(":reset")  匹配所有的重置框

$(":submit")  匹配 所有的提交按钮

$(":image")  匹配所有的图像域

$(":file")  匹配所有的文件域

$(":enable")  选取所有可用的表单元素

$(":disable") 选取所有不可用的表单元素

$(":checked") 选取所有被选中的input元素(多选框)

$(":selected")  选取所有被选中的option元素(单选框)

$("this")  将this包装成jquery对象

获取或设置属性值：

attr("属性名"，"属性值/函数值")

只传入属性名的话就是获取属性值

传入属性名和属性值/函数值就是设置新的属性值

如果给一个元素设置多个属性值的话就要把每对属性名和属性值放在一起 attr("{属性名1：‘属性值1‘， 属性名2：’属性值2‘}")

removeattr("属性名"); 移除匹配元素的属性

.html()和.text()方法

.html()方法是获取和设置集合中第一个元素的html内容 不传入参数就是获取html内容  传入参数就是设置元素内的html内容

.text()方法是获取和设置集合中每个元素的文本内容 不传入参数就是获取文本内容 传入参数就是设置元素的文本内容

两个方法都可以传入函数   .html()方法只能用于html文件  text可以用于xml和html文件  

例: <p>你好吗<a>新同学<a>?<p>

$("p').html();  得出结果是你好吗<a>新同学<a>?

$("p").text();   得出结果是你好吗新同学？   

text()方法只会获取和设置文本内容不会添加标签

.val()方法 用于处理表单中元素集合的值

.val() 不传入参数就是获取匹配元素中第一个的元素的值  传入参数就设置匹配元素中每一个元素的值

注意事项： val来返回selec元素时如果没有被选中的元素则返回null  

                   val来返回multiple元素时会返回一个数组数组中包含着所有被选中的项

.val() .html() .text() 方法的差别：

html() text() 不能用在表单上 val()只能用在表单上 

html()和val()方法只会作用在匹配元素中的第一个元素 而text则会作用在每一个后代

.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

.addClass(className) 为匹配元素增加一个或者多个类名  只是增加类名却不会替换类名

.removeClass(className)  为匹配元素移除一个或多个类名

.toggleClass()方法  这是一个互斥方法向匹配元素集合中的每个元素添加或删除类名  如果这个传入的类名存在就删除  如果不存在就增添 

.toggleClass("className",switch)   switch(可选参数)用于判断样式是该增添还是删除  true(增添)  false(删除)

.css()方法对匹配元素的第一个元素添加css样式

.css(propertyName) 返回一个propertyName的值   .css(propertyNames)  返回一个对象

.css({"propertyname":"value","propertyname":"value"})

.css和.addClass 方法的区别与使用：

addClass()一般是对一类元素统一进行改变类名  需要的样式提前写在一个class内 

css()一般是对某一个特定样式进行处理  

css的优先级要高于addClass()的优先级  因为.css（）输入内联式  

一般对于静态的html代码使用addClass比较好  

动态的html代码一般使用.css比较好因为不确定添加什么样式