jQuery小记（一）

最新推荐文章于 2025-08-12 20:56:37 发布

一年进阶

最新推荐文章于 2025-08-12 20:56:37 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery 框架前端

本文链接：https://blog.youkuaiyun.com/dongdongyaoshou/article/details/73648785

前端专栏收录该内容

9 篇文章

订阅专栏

（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元素