jQuery小记(一)

1Window.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树中,通过getElementByTagNamegetElementById来获取元素节点,像这样得到的DOM元素就是DOM对象,DOM对象可以使用javascript中的方法

jQuery对象:通过jQuery包装DOM对象后产生的对象,该对象是jquery独有的,它可以使用jQuery中的方法。

例:document.getElementById(“foo”).innerHTML;  //DOM

$(“#foo”).html();//jQuery,获取idfoo的元素内的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”)选取classone的下一个div同辈元素

$(“prev~siblings”)// 选取prev元素之后的所有siblings元素 例,$(“#two~div”)选取idtwo的元素后面的所有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的元素(index0开始)

: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]”) 选取titletextdiv元素

[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个子元素或者奇偶元素(index1算起)

: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的倍数的元素(n1开始)

:nth-child(3n+1) //能选取每个父元素下索引值为(3n+1)的倍数的元素(n1开始)

6-表单对象属性过滤选择器:对所选择的表单元素进行过滤,例如选择被选择的下拉框,多选框等。

:enabled //选取所有可用元素  例:$(“#form1:enabled”) 选取idform1的表单内的所有可用元素

:disabled //选取所有不可用元素  例:$(“#form1:disabled”) 选取idform1的表单内的所有不可用元素(注:不可用元素为 有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事件(-jquery1.9开始就不再支持toggle方法了)

$toggleBtn.toggle(function(){},function(){});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值