(1)Window.onload 和$(document).ready()的区别
执行时机:前者必须等待网页中所有内容加载完毕后(包括图片)才能执行,后者是所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
注意:由于$(document).ready()只要DOM就绪就会被执行,这就导致如果需要某些关联文件的函数并不能正常的执行,为此jq中提供了另一个页面加载的方法--load(),load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有的内容(包括窗口,框架,对象和图像等)加载完毕后触发,,如果处理函数绑定在元素上,则会在元素内容加载完毕后触发,所以
Jq中的$(window).load(function(){})等价于js中的window.onload=function(){}
编写个数:前者不能同时编写多个(会覆盖),后者可以同时编写多个
(2)DOM对象和jQuery对象
DOM对象:网页dom树中,通过getElementByTagName或getElementById来获取元素节点,像这样得到的DOM元素就是DOM对象,DOM对象可以使用javascript中的方法
jQuery对象:通过jQuery包装DOM对象后产生的对象,该对象是jquery独有的,它可以使用jQuery中的方法。
例:document.getElementById(“foo”).innerHTML; //DOM
$(“#foo”).html();//jQuery,获取id为foo的元素内的html代码,html()是jq里的方法
注意:在jq对象中无法使用DOM对象的任何方法,同样,DOM对象也无法使用jq对象的方法
两者的相互转换:讨论变化之前,约定定义变量的风格(当然也不是硬性强制规定)
如果获取的对象是jq对象,那么在变量前面加$,例:var $variable=jQuery 对象;
如果获取的对象是DOM对象,那么:var variable=DOM对象;
1 jq对象-->DOM对象
两种方法:[index]和get(index)
jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
Jq代码如下:var $cr=$(“#cr”); //jq对象
Var cr=$cr[0]; //DOM对象
另一种方法是jq本事提供的,通过get(index)方法
Jq代码如下:var $cr=$(“#cr”); //jq对象
Var cr=$cr.get(0); //DOM对象
2 DOM对象-->jq对象
对一个DOM对象,只需要$()把DOM对象包装起来,就可以获得一个jq对象
Var cr=document.getElementById(“cr”);
Var $cr=$(cr);
(3)CSS选择器
常用的CSS选择器,几乎所有主流的浏览器都支持的:
标签选择器 E{css rule} 例 td{rule}
ID选择器 #ID{css rule} 例 #note{rule}
类选择器 (E).className{css rule} 例:div.note{rule} or .note{rule}
群组选择器 E1,E2,E3{css rule} 例:td,p,div,a{rule}
后代选择器 E F{css rule} 例:#link a{rule} //元素E的任意后代元素F
通配选择器 *{css rule} 例: *{rule}
另外还有一些选择器并不是所有的浏览器都支持:
伪类选择器(E:PseudoElements{css rule}),子选择器(E>F{css rule}),临近选择器(E+F{css rule}),属性选择器(E[attr]{css rule})
(4)jq选择器
基本选择器,层次选择器,过滤选择器,表单选择器。
基本选择器:$(“#test”) //id选择器 $(“*”) //通配符选择器
$(“.test”) //类选择器 $(“div,span,p.myclass,#test”) //群组选择器
$(“p”) //元素选择器
层次选择器:通过DOM元素之间的层次关系来获取特点元素,例如后代元素,子元素,相邻元素,同辈元素等。
$(“ancestor descendant”) //选取ancestor元素里的所有descendant(后代)元素,例$(“div span”)
$(“parent>child”) //选取parent后面的子元素 例,$(“div>span”)
$(“prev+next”) //选取prev元素后的next元素(同辈元素) 例,$(“.one+div”)选取class为one的下一个div同辈元素
$(“prev~siblings”)// 选取prev元素之后的所有siblings元素 例,$(“#two~div”)选取id为two的元素后面的所有div同辈元素
层次选择器中,前2个方法比较常用,后两个在jq中通常用2个简单方法来代替
等价关系:$(“.one+div”) 等价于 $(“.one”).next(“div”) //即方法next()
$(“#two~div”) 等价于 $(“#two”).nextAll(“div”) //即方法nextAll()
注意:这里$(“prev~siblings”)和siblings()方法的区别
前者只选择prev元素后面的同辈div元素,而siblings()方法和前后位置无关,只要是同辈节点就能匹配。
过滤选择器:主要通过特定的过滤规则来筛选所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器以一个冒号开头。具体又分为以下几类:
1-基本过滤过滤器:
:first //选取第一个元素 :last //选取最后一个元素
例 $(“div:first”) //选取所有div元素中第一个div元素
:even //选取索引是偶数的所有元素,索引从0开始 :odd //奇数,索引从0开始
:not(selector) //去除所有与给定选择器匹配的元素,例:$(“input:not(.myclass)”)
:eq(index) ,:gt(index),:lt(index) //选取索引等于、大于,小于index的元素(index从0开始)
:header //选取所有的标题元素,例h1,h2,h3... :focus //选取当前获取焦点的元素
2-内容过滤选择器:主要体现在它所包含的子元素或文本内容上
:contains(text) // 选取含有文本内容为text的元素 例 $(“div:contains(‘我’)”)
:empty // 选取不包含子元素或文本的空元素
:has(selector) // 选取含有选择器所匹配的元素的元素 例 $(“div:has(p)”)
:parent // 选取含有子元素或者文本的元素
3-可见性过滤选择器:根据元素的可见和不可见状态来选择
:hidden //选取所有不可见的元素 例:$(“hidden”) //选取所有不可见元素,包括<input type=”hidden”/>,<div style=”display:none”> and <div style=”visibility:hidden>等元素
:visible //选取所有可见的元素 例 $(“div:visible”) 选取所有可见的div元素
4-属性过滤选择器:通过元素的属性来获取相应的元素
[attribute] //选取拥有此属性的元素 例:$(“div[id]”) //选取拥有属性id的元素
[attribute=value] //选取属性为value的元素 $(“div[title=test]”) 选取title为text的div元素
[attribute^=value] //选取属性的值以value开始的元素
[attribute$=value] //选取属性的以value结束的元素
[attribute*=value] //选取属性的包含value的元素
[attribute|=value] //选择属性等于给定字符串或以该字符串为前缀(该字符后跟一个连字符“-”)的元素
[attribute~=value] //选取属性用空格分隔的值中包含一个给定值的元素
[attribute1][attribute2][attributeN]// 复合属性选择器
例 $(“div[id][title$=’test’]”) //选取属性id,并且属性title以“test”结束的div元素
5-子元素过滤选择器:(带有遍历的属性)
选择器 |
描述 |
示例及区别 |
:nth-child(index/even/odd/equation) |
选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) |
:eq(index)只匹配一个元素,而:nth--child将为每一个父元素匹配子元素,并且后者的index是从1开始的,前者的index是从0开始的。 |
:first-child |
选取每个父元素的第一个子元素 |
:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素,例$(“ul li:first-child”)选取每个ul中第一个li元素 |
:last-child |
选取每个父元素的最后一个子元素 |
:last和:last-child的区别同上 |
:only-child |
如果某个元素是父元素中唯一的子元素,那么它将被匹配,如果父元素中含有其他元素,则不会被匹配 |
$(“ul li:only-child”)在ul中选取是唯一子元素的li元素 |
:nth-child()选择器是很常用的子元素过滤器,例:
:nth-child(even) //能选取每个父元素下索引值为偶数的元素
:nth-child(odd) //能选取每个父元素下索引值为奇数的元素
:nth-child(2) //能选取每个父元素下索引值为2的元素
:nth-child(3n) //能选取每个父元素下索引值为3的倍数的元素(n从1开始)
:nth-child(3n+1) //能选取每个父元素下索引值为(3n+1)的倍数的元素(n从1开始)
6-表单对象属性过滤选择器:对所选择的表单元素进行过滤,例如选择被选择的下拉框,多选框等。
:enabled //选取所有可用元素 例:$(“#form1:enabled”) 选取id为form1的表单内的所有可用元素
:disabled //选取所有不可用元素 例:$(“#form1:disabled”) 选取id为form1的表单内的所有不可用元素(注:不可用元素为 有disabled=”disabled”属性的元素,可用元素则不写这个)
:checked //选取所有被选中的元素(单选框,复选框)例:$(“input:checked”)选取所有被选中的input元素
:selected //选取所有被选中的选项元素(下来列表) 例:$(“select option:selected”) 选取所有被选中的选项元素
表单选择器:获取表单(form)的某个或某类型的元素
:input //选取所有的input,textarea,select,button元素 ,例 $(“:input”)
:text //选取所有的单行文本框 :password //选取所有的密码框
:radio //选取所有单选框 :checkbox //选取所有的多选框
:submit //选取所有的提交按钮 :image //选取所有的图像按钮
:reset //选取所有的重置按钮 :button //所有所有的按钮
:file //选取所有的上传域 :hidden //选取所有的不可见元素
若干示例:
1-使一个特定的表格隔行变色
$(“#tb tbody tr:even”).css(“backgroundColor”,”#888”);
2-对多选框进行操作,输出选中的多选框的个数
$(“#btn”).click(function(){
var items=$(“input[name=’check’]:checked”);
alert(items.length)
});
注意:选择器中一些注意事项
1-特殊符合,(.)(#)(])((),遇到时,用\\转义
例 <div id=”id#b”>bb</div> 获取 $(“#id\\#b”)
2-空格
例 <div class=”test”>
<div style=”display:none”>aa</div>
<div style=”display:none”>aa</div>
<div style=”display:none”>aa</div>
<div class=”test” style=”display:none”>aa</div>
</div>
<div class=”test” style=”display:none”>aa</div>
<div class=”test” style=”display:none”>aa</div>
获取 var $t_a=$(“.test :hidden”) //带有空格的jq选择器
var $t_a=$(“.test:hidden”) //不带空格的jq选择器
var len_a=$t_a.length; //4,因为带空格的选取class=test的元素里面的隐藏元素
var len_a=$t_a.length; //3,不带空格的是选取隐藏的class=test的元素
这是后代选择器和过滤选择器的区别
给按钮添加一组交互事件,可以用toggle事件(-jquery从1.9开始就不再支持toggle方法了)
$toggleBtn.toggle(function(){},function(){});