$(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后的第一个同级元素next
var $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 ):可以传一个对象,同时设置多个样式;