JQuery 学习笔记 选择器之五

2016-02-19 15:44 5 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
script src="js/jquery-1.3.2.js"/script
script type="text/javascript"!--
$(function(){
$("#aFirst").click(function(){
$("div[id]").each(function(){
$(this).css("background","#773300");
})
})
$("#aSecond").click(function(){
$("div[id = div2]").each(function(){
$(this).css("background","#8833ff");
})
})
$("#aThird").click(function(){
$("div[id != div2]").each(function(){
$(this).css("background","#87f289");
})
})
$("#aFourthly").click(function(){
$("div[name ^= DIV]").each(function(){
$(this).css("background","#140586");
})
})
$("#aFifthly").click(function(){
$("div[name $= ly]").each(function(){
$(this).css("background","#930584");
})
})
$("#aSixth").click(function(){
$("div[name *= th]").each(function(){
$(this).css("background","#099483");
})
})
$("#aSeventh").click(function(){
$("div[id][name !=Fifthly][name *= i]").each(function(){
$(this).css("background","#938607");
})
})
})
// --/script
title无标题文档/title
/head
body
a href="#" onclick="javascript:location.reload();"重置/a
div id="div1" name ="DIV_First"div1/div
div id="div2" name ="DIV_Second"div2/div
div id="div3" name = "DIV_Third"div3/div
div id="div4" name = "DIV_Fourthly"div4/div
div id="div5" name="Fifthly"div5/div

a href="#" id="aFirst"设置页面所有DIV元素的背景颜色/a|
a href="#" id="aSecond"设置第2个DIV的背景颜色/a|
a href="#" id="aThird"设置除第2个DIV以外DIV的背景颜色/a|
a href="#" id="aFourthly"设置name属性值以DIV开头的元素/a|
a href="#" id="aFifthly"设置name属性值以ly结尾的元素/a|
a href="#" id="aSixth"设置name属性值包含th的元素/a|
a href="#" id="aSeventh"综合应用/a

/body
/html

1.$("selector [Attribute]")--注,以下直接简写为[Attribute]
描述:获取selector选择的元素集合里,拥有Attribute属性的元素集合。应该较为简单,在这就不做啥详细说明了,有不了解的跟下贴,哈
返回值:Array(Element);
2.[attribute=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值等于Value的元素集合。
返回值:Array(Element);
3.[attribute!=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值不等于Value的元素集合。
返回值:Array(Element);
4.[attribute^=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value开头的元素集合。相当于正则的规范^^
返回值:Array(Element);
5.[attribute$=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value结尾的元素集合。相当于正则的规范^^
返回值:Array(Element);
6.[attribute*=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值包含Value的元素集合。
返回值:Array(Element);
7.[selector1][selector2][selectorN]
描述:与第一章中,基本选择器综合应用一样,此方法也就是前6种的综合版,就如我例子中$("div[id][name !=Fifthly][name *= i]")就是取所有的div元素中,拥有ID属性&&name属性!=Fifthly&&name属性包含字符i的DIV元素的集合,大家用我例子试下就能很清楚的了解看到效果了,哈。好好利用此方法应该很有用^^
返回值:Array(Element);

来源:http://www.tulaoshi.com/n/20160219/1610284.html

延伸阅读
标签: Web开发
这个是网页版,直接用ctrl+F搜索,如果大家不是经常上网,可以用chm版的更方便些。 jQuery 1.3 API 参考手册 CHM 锋利的jquery 电子书 近期将会将一些jquery学习教程逐步发一些。参考了锋利的jquery一书。 $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常...
标签: Web开发
但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理)...
标签: Web开发
1.利用CSS的基本选择器: a:匹配所有链接a元素。 #*:匹配id为*的元素 .*:匹配CSS类为*的元素 a#*id.*class:匹配id为*id,并拥有CSS类为*class的链接元素。 以上是CSS中的写法,在jQuery中用$("")包起来,如:jQuery("p a.Class") 利用子选择器、容器选择器和特性选择器,以下面的为例: 代码如下: ul class="myList" lia href=...
标签: Web开发
jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便自己将来查询又方便初学者学习。如果哪里有不对的还望大家帮我指出来,这里是一个相互学习的地方。 1. 先说说通过位置选择的...
标签: Web开发
jQuery之所以令人爱不释手,在于其强大的选择器表达式令DOM操作优雅而艺术。 jQuery的选择符支持id,tagName,css1-3 expressions,XPath,参见: http://docs.jquery.com/Selectors DEMO: Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->!DOCTYPE html PUBLIC "-/...

经验教程

689

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部