JQuery 学习笔记 选择器之五

别碰我的兽

别碰我的兽

2016-02-19 15:44

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。
代码如下:
!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);
展开更多 50%)
分享

猜你喜欢

JQuery 学习笔记 选择器之五

Web开发
JQuery 学习笔记 选择器之五

JQuery 学习笔记 选择器之六

Web开发
JQuery 学习笔记 选择器之六

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 学习笔记 选择器之四

Web开发
JQuery 学习笔记 选择器之四

JQuery 学习笔记 选择器之二

Web开发
JQuery 学习笔记 选择器之二

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 学习笔记 选择器之三

Web开发
JQuery 学习笔记 选择器之三

JQuery 学习笔记 选择器之一

Web开发
JQuery 学习笔记 选择器之一

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10系统清理注册表垃圾的方法

Win10系统清理注册表垃圾的方法

jqPlot jquery的页面图表绘制工具

jqPlot jquery的页面图表绘制工具
下拉加载更多内容 ↓