[jQuery学习系列一]1-选择器与DOM对象

博客了,最近想复习下 之前学过的JS的相关内容,也算是自己的一种总结. 知识长时间不用就会忘记,多学多记多用!!

PHP?f=jquery文件,最上面空格写入HTML代码,下面一个写入JS代码,右上格子添加css代码,如下图: 

fiddle.net; codepen.io; runjs

标签标签

).addClass(

通知我们文档已经加载完毕的函数就是 $(document).ready();

});

});

});

alert( alert( });

，因为在alert("0")的时候，jquery库还没引入进来。页面加载完所有DOM节点文档结构后开始执行;页面加载完所有资源后才开始执行。图片，外链资源都加载完后才开始执行，也因此window.onload只允许定义一个（实际是可以定义多个，但只有最后一个有效，相当于前面会被覆盖掉），后执行。

1.3,对css的操作 参考自: http://www.365mini.com/page/jquery-addclass.htm

(1)addClass()addClass()会为当前jQuery对象所匹配的每一个元素添加指定的css类名。删除元素上的css类名，你可以使用removeClass()函数。HTML代码为例:

>

=>CoddingMan

=>jQuery编程测试

代码：

　function w( html ){ 　　document.body.innerHTML += "
" + html;　}

 $n2 = $(添加一个css类名
$n2.addClass() );
 $n3 = $(添加3个css类名
$n3.addClass() );

标签添加css类名"item-index"，这里的index表示当前元素在所有匹配元素中的索引
$(函数内的this表示当前DOM元素
      +document.writeln( $(<span style="color: #800000;">"<span style="color: #800000;">#n2<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">class<span style="color: #800000;">") );

document.writeln( $(<span style="color: #800000;">"<span style="color: #800000;">#n3<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">class<span style="color: #800000;">") ); 

　.newOne { 　　color: blue;　}

代码是否和你想象的一样呢? 下面看下运行后的截图:

(2) removeClass()由于篇幅限制,下面开始代码都会收缩处理.removeClass()函数用于移除当前jQuery对象所匹配的每一个元素上指定的css类名。

=>CodePlayer

<span style="color: #0000ff;">var $n2 = $(<span style="color: #800000;">"<span style="color: #800000;">#n2<span style="color: #800000;">"<span style="color: #000000;">);
<span style="color: #008000;">//<span style="color: #008000;"> 移除n2上的一个css类名
$n2.removeClass(<span style="color: #800000;">"<span style="color: #800000;">demo<span style="color: #800000;">");

(3) toggleClass()toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。

=>CodePlayer

一个css类名(当前有"demo"，切换后无"demo")

自定义选择  (1) 选择包含某段文字的元素 (3)指定标签第N个元素 属性选择属性id属性name属性type

HTML代码片段为例:

display: none;" onclick="cnblogs_code_hide('349ce355-d429-432f-b5d9-c56df8b0a635',event)" src="https://www.jb51.cc/res/2019/02-14/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

>

> >张三 >CodePlayer

> >CodePlayer

>

代码:

display: none;" onclick="cnblogs_code_hide('b68a57d6-f366-49e2-9bfb-48df89110f8b',event)" src="https://www.jb51.cc/res/2019/02-14/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

$(<span style="color: #008000;">//<span style="color: #008000;">上面div元素共有4个,索引从0开始,最大索引为3,如果超过索引则结果为: undefined
$n = $(<span style="color: #800000;">"<span style="color: #800000;">div:eq(3)<span style="color: #800000;">"<span style="color: #000000;">)
document.writeln( $n.attr(<span style="color: #800000;">"<span style="color: #800000;">id<span style="color: #800000;">") ); <span style="color: #008000;">//<span style="color: #008000;">输出n7

<span style="color: #008000;">//<span style="color: #008000;">获取id = n3的span元素
$n3 = $(<span style="color: #800000;">"<span style="color: #800000;">span[id=n3]<span style="color: #800000;">"<span style="color: #000000;">);
document.writeln( $n3.text() );

 

(4)并列选择器

$().css(,);

(5)层次选择器(5.1) parent > child（直系子元素）代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

$(document).ready(function () {
<span style="color: #008000;">//<span style="color: #008000;"> 选取div下的第一代span元素，将字体颜色设为红色
$(<span style="color: #800000;">'<span style="color: #800000;">div > span<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
});

(5.2) prev + next（下一个兄弟元素，等同于next()方法）代码，只有123和789会变色

=>

=>

$(document).ready(function () {
<span style="color: #008000;">//<span style="color: #008000;"> 选取class为item的下一个div兄弟元素
$(<span style="color: #800000;">'<span style="color: #800000;">.item + div<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
<span style="color: #008000;">//<span style="color: #008000;"> 等价代码
<span style="color: #008000;">//<span style="color: #008000;">$('.item').next('div').css('color','#FF0000');
});

(5.3) prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）代码，G2和G4会变色

=>G1

G2

G3

G4

$(document).ready(function () {
<span style="color: #008000;">//<span style="color: #008000;"> 选取class为inside之后的所有div兄弟元素
$(<span style="color: #800000;">'<span style="color: #800000;">.inside ~ div<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
<span style="color: #008000;">//<span style="color: #008000;"> 等价代码
<span style="color: #008000;">//<span style="color: #008000;">$('.inside').nextAll('div').css('color','#FF0000');
});

(6) 过滤选择器(6.1) :first和:last（取第一个元素或最后一个元素）代码，G1（first元素）和G3（last元素）会变色

G1 G2 G3$(document).ready(function () {
$(<span style="color: #800000;">'<span style="color: #800000;">span:first<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
$(<span style="color: #800000;">'<span style="color: #800000;">span:last<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
});

(6.3) :not（取非元素）代码，G1会变色

G1

=>G2

$(document).ready(function () {
$(<span style="color: #800000;">'<span style="color: #800000;">div:not(.wrap)<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
});

<span style="color: #008000;">//<span style="color: #008000;">但是，请注意下面的代码：
<span style="color: #008000;">//<span style="color: #008000;">当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

=>G2

(6.4) :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

$(); $();

(6.5) :eq(x) （取指定索引的元素）

$(); $().css(,);

(6.6) :gt(x)和:lt(x)（取大于x索引或小于x索引的元素,下标从0开始）

$().css(,).css(,);

(6.7) :header（取H1~H6标题元素）

$().css(,);

(7) 内容过滤器(7.1) :contains(text)（取包含text文本的元素）代码，第一个dd会变色

技术

jQuery,.NET,CLR

SEO

关键字排名

其他

$(document).ready(function () {
<span style="color: #008000;">//<span style="color: #008000;"> dd元素中包含"jQuery"文本的会变色
$(<span style="color: #800000;">'<span style="color: #800000;">dd:contains("jQuery")<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">color<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">#FF0000<span style="color: #800000;">'<span style="color: #000000;">);
});

(7.2) :empty（取不包含子元素或文本为空的元素）

$().html(内容);

(7.3) :has(selector)（取选择器匹配的元素）

B

$(document).ready(function () {
<span style="color: #008000;">//<span style="color: #008000;"> 为包含span元素的div添加边框
$(<span style="color: #800000;">'<span style="color: #800000;">div:has(span)<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">border<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">1px solid #000<span style="color: #800000;">'<span style="color: #000000;">);
});

(7.3) :parent（取包含子元素或文本的元素）代码，A和D所在的li会有边框

2. A
4. D

$(document).ready(function () {
$(<span style="color: #800000;">'<span style="color: #800000;">ol li:parent<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">border<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">1px solid #000<span style="color: #800000;">'<span style="color: #000000;">);
});

(8). 可见性过滤选择器(8.1) :hidden（取不可见的元素）display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

(8.2) :visible（取可见的元素）同上.

(9) 属性过滤器(9.1) [attribute]（取拥有attribute属性的元素）代码，最后一个a标签没有title属性，所以它仍然会带下划线代码在9.2 中展示

(9.2) [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）代码中a标签 class 为item 的和class 不为item 的背景色不同。

• title= =>DOM对象和jQuery对象
• title= =>jQuery选择器大全
• title= =>jQuery事件大全
• title= =>基于jQuery的插件开发
• title= =>Wordpress & jQuery
• =>其他

<span style="color: #008000;">//<span style="color: #008000;">分别为class="item"和class!=item的a标签指定文字颜色
<span style="color: #000000;">$(document).ready(function() {
$(<span style="color: #800000;">'<span style="color: #800000;">a[title]<span style="color: #800000;">').css(<span style="color: #800000;">'<span style="color: #800000;">text-decoration<span style="color: #800000;">',<span style="color: #800000;">'<span style="color: #800000;">none<span style="color: #800000;">'<span style="color: #000000;">);

</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;分别为class="item"和class!=item的a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>指定<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>颜色</span>
$(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;a[class = item]</span><span style="color: #800000;"&gt;'</span>).css(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;background</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;#EEADBB</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);
$(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;a[class != item]</span><span style="color: #800000;"&gt;'</span>).css(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;background</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;#FF0000</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);

});

(10)指定标签第N个元素

$();

(11)属性选择

$() 属性id $() 属性name $() 属性type

以下面HTML代码片段为例:HTML代码:

>

> >张三 >CodePlayer

> >CodePlayer

>

jQuery代码:

$(<span style="color: #008000;">//<span style="color: #008000;">上面div元素共有4个,如果超过索引则结果为: undefined
$n = $(<span style="color: #800000;">"<span style="color: #800000;">div:eq(3)<span style="color: #800000;">"<span style="color: #000000;">)
document.writeln( $n.attr(<span style="color: #800000;">"<span style="color: #800000;">id<span style="color: #800000;">") ); <span style="color: #008000;">//<span style="color: #008000;">输出n7

<span style="color: #008000;">//<span style="color: #008000;">获取id = n3的span元素
$n3 = $(<span style="color: #800000;">"<span style="color: #800000;">span[id=n3]<span style="color: #800000;">"<span style="color: #000000;">);
document.writeln( $n3.text() );