jQuery基础篇（一）样式篇

$(document).ready(function(){…});它的作用是等文档中的节点都加在完毕后再执行相关代码。

---

jQuery和DOM对象

我们可以将jQuery对象看做是对DOM对象的封装，jQuery是一个类数组对象，DOM是数组中一个单独的元素。

//jQuery --> DOM：var $div = $('div');var div01 = $div.get(0);//DOM --> jQuery:var div = document.getElementByTagName('div');var $div = $(div);

---

选择器_基本选择器

//id选择器，获取只有一个对象var $element1 = $("#myId");//class选择器,可能包含多个对象 div.css(...);多个元素都设置样式var $element2 = $(".class");//元素选择器,所有div元素var $element3 = $("div"); //全选择器,按照顺序获取所有元素var $element4 = $("*");

---

选择器_层级选择器

子元素、后代元素、相邻兄弟元素、一般兄弟元素

//子元素,son必须是parent的第一层直接子元素var $son = $("parent>son"); //后代元素,所有后代var $descendant = $("ancestor descendant");//相邻兄弟元素,在同一父元素下pre后的第一个同级元素nextvar $next = $("prev + next");//一般兄弟元素,在同一父元素下pre同级的所有元素var &sibling = $("prev ~ sibling");

---

选择器_基本筛选选择器

• $(“:first”)，第一个匹配元素；
• $(“:last”)，最后一个匹配元素；
• $(“:not(selector)”)，去除selector中的元素；
• $(“:eq(index)”)，匹配中等于index索引的元素；
• $(“:gt(index)”)，匹配中大于index索引的元素；
• $(“:lt(index)”)，匹配中小于index索引的元素；
• $(“:even”)，匹配中下标为偶数的元素，0开始；
• $(“:odd”)，匹配中下标为奇数的元素，0开始；
• $(“:header”)，所有标题元素；
• $(“:root”)，文档根元素；
• $(“:animated”)，正在执行动画的元素；

//所有p中的第一个p元素;$("p:first");//选中所有的p元素除了id为myP的那个$("p:not(#myP)").css("border", "1px solid blue");//第一个p元素$("p:eq(0)");

---

选择器_内容筛选选择器

• $(“:contains(text)”)，匹配中包含文本text的元素；
• $(“:parent”),匹配中所有含有子元素或者文本的元素；
• $(“:empty”),匹配中没有子元素的元素；
• $(“:has(selector)”),匹配中包含指定选择器元素的元素；

---

选择器_可见性筛选选择器

• $(“:visible”),所有可见元素；
• $(“:hidden”),所有不可见元素；

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

---

选择器_属性筛选选择器

---

选择器_子元素筛选选择器

---

选择器_表单元素选择器

---

选择器_表单对象属性筛选选择器

---

属性与样式_attr()、removeAttr()

jQuery中用attr()方法来获取和设置元素属性,removeAttr()删除属性。

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

---

属性与样式_html()、text()、val()

html()、text()、val()的简介：

• html() 不传入值，就是获取集合中第一个匹配元素的HTML内容；
• html( htmlString ) 设置每一个匹配元素的html内容；
• html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数；
• text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代；
• text( textString ) 用于设置匹配元素内容的文本；
• text( function(index, text) ) 用来返回设置文本内容的一个函数；
• 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()都可以使用回调函数的返回值来动态的改变多个元素的内容。

---

属性与样式_class相关操作

• addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名；
• addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名；
• removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名；
• removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名；
• toggleClass(className )，存在该className就删除，不存在就添加；

---

属性与样式_css()

css()获取元素样式属性的计算值或者设置元素的CSS属性。

获取属性值：

• css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值；
• css( propertyNames )：传递一组数组，返回一个对象结果；

设置属性值：

• css(propertyName, value )：设置CSS；
• css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理；
• css( properties )：可以传一个对象，同时设置多个样式；

---