欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Jquery > 选择器1

选择器1

2018-05-10 489 收藏 0 赞一个 0 真差劲 0 去评论

选择器(一)

1、基本选择器

从最开始看到jQuery这样的选择器就让我想起了CSS的选择器,简直是同出一辙啊,CSS的选择器语法个人觉得相当的经典,那么jQuery借鉴CSS也就没有多少疑问了。

还是复习一下CSS的选择器吧

20150127101003_63272.png

其中h1为选择器,color:red与background:#d00与声明,两者结合也即{}内称为声明块;color与background称为属性;red与#d00称为值。

其中选择器类别可分为以下类别:

标签选择器:p{CSS rules}

id选择器:#ID{CSS rules}

类选择器:.Class{CSS rules}

群组选择器:h1,h2,h3,h4,h5,h6{CSS rules}

后代选择器:div p{CSS rules}

通配选择器:*{CSS rules}

伪类选择器:a:link,a:visited{CSS rules}

另还有不常使用的多类选择器、属性选择器、部分属性选择器、相邻兄弟选择器、子选择器等,详细可参与《CSS权威手册》这本书或者http://www.w3.org/TR/CSS2/selector.html。

相对应,理解jQuery中$("#ID")就不是难事了。

jQuery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,…

使用这种$的优势在于:一是写法简洁,二是支持CSS1到CSS3选择器

再就是防止document.getElementById("#id")对象不存在,造成浏览器左下角的黄色感叹号,例网页开始存在id为t1的对象,某一天突然移除而js没有做相应的处理这样就会出现js错误;使用jQuery的$你无需考虑这种问题;

当然,还要注意$()选择器返回的是对象数组,因此要判断网页中是否存在某个元素,不能使用

if($("#t1")){    
     //  
}

而要使用

if($("#t1").length>0){//或者if($("#t1")[0]){  
 //  
}

还是看下综合实例

<style   type="text/css">    
normalStyle{    
 background:#C3D9FF;    
}    
alterStyle{    
 background:#DDF8CC;    
}    
 .h{    
 background:#fcc;    
 border:solid 1px #d00;    
 }    
 .button{    
 background:#FAFAA0;    
 border:solid 1px #996699;    
padding:4px;    
}    
</style>    
<script type="text/javascript" src="jQuery-1.3.2.min.js"></script>    
<script type="text/javascript">    
$(function(){    
 $("li").addClass("normalStyle")    
$(".alter").addClass("alterStyle");    
$("h1,h2,h3").addClass("h");    
 $("#btn").addClass("button");    
});    
</script>    
</head>    
<body>    
<ul>    
<li>选项一</li>    
<li class="alter">选项二</li>    
<li>选项三</li>    
<li class="alter">选项四</li>    
</ul>    
<h1>标题一</h1>    
<h2>标题二</h2>    
<h3>标题三</h3>    
<button id="btn">按钮</button>

20150127101627_40006.png

2、层次选择器

不用说,层次选择器的思想来自CSS;实际上稍微拓展了

$("div span")//选择<div>里所有<span>元素

$("div>span")//选择<div>元素下元素名为<span>的元素

$('prev+next')//选择紧接在prev元素后的next元素

$('prev~siblings')//选择prev元素之后的所有sibling元素

例:

<scripttype="text/javascript">
$(function(){    
$("ul li").css("color","#f00");    
 $("div>span").css("color","#008000");    
$("div+span").css("color","#d00");    
 $("div~span").css("background","#ffc");    
});    
<script>
<body>
<div>
<span>文字一</span>
</div>
<span>文字二</span>
<span>文字三</span>
<ul>
 <li>选项一</li>
<li>选项二</li>
<li>选择三</li>
</ul>
</body>

运行效果:

20150127101809_22573.png

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论