JavaScript(15)jQuery 选择器
jQuery 选择器
选择器同意对元素组或单个元素进行操作。
jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。
在 HTML DOM 术语中:选择器同意对 DOM 元素组或单个 DOM 节点进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取全部 class="intro" 的 <p> 元素。
$("p#demo") 选取全部 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取全部带有 href 属性的元素。
$("[href='#']") 选取全部 href 属性的值等于 "#" 的元素。
$("[href!='#']") 选取全部 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
以下的样例把全部 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
上面的看完了我也不知道选择器是什么。。。
来点自己的理解和总结。。。
选择器语法:$("......")
也能够这样分类:
① 选取全部元素:$("*")(注意里面是”星号“)
② 选取class:$(".class名") (注意前面有个”点“)
③ 选取id:$("#id名")
④ 选取元素:$("标签名")
⑤ 选取属性:$("[属性名]")
⑥ 依据特征来选取元素:$(":特征")(注意前面有个”冒号“)
这六种选择器还能够组合一下,产生很多其它的选择器。
比方:④②、④⑥
还能够是:④④⑥、④③②(同类型之间要用“空格”隔开。如:$("ul li:first")、$("div#intro .head"))
选取当前 HTML 元素:$(this)
嵌套选择器
如:选取指定标签中的其他标签中的元素:$(标签名 *)
(注意指定的标签中一定要有其他标签,否则没有效果。
道理就是我为我家狗狗取名叫小狗,但实际是我家根本没有狗狗。
。。
)
假设要进一步选择css属性:$("......").css("......")
$("[属性名='#']") 选取全部属性的值等于 "#" 的元素。
$("[属性名!='#']") 选取全部属性的值不等于 "#" 的元素。
$("[属性名$='.jpg']") 选取全部属性的值以 ".jpg" 结尾的元素。
提示:
依据实践,某些浏览器使用 * 的处理速度缓慢。
不要使用数字开头的 ID 名称!
在某些浏览器中可能出问题。
不要使用数字开头的类名!在某些浏览器中可能出问题。
详细使用时,能够參考“jQuery 选择器參考手冊”。看看有哪些选择器。
这篇写得比較短,但事实上花费的时间比較多。看了非常多样例。
认为如今还是不要每一个都看一遍。以后用到的话边用边学,然后能够在这里补充。
最后还是贴段代码吧。好像代码生动形象直观了当。。
。
(太懒了,我仅仅想贴一份大杂烩代码(涉及到覆盖)。。
。)
<html> <head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$(":header").css("background-color","grey"); $("div *").css("background-color","blue");
$("p *").css("background-color","purple"); $("p").css("background-color","yellow"); $("ul li:first").css("background-color","pink");
$("div#choose .introtoo").css("background-color","green");
}); </script>
</head> <body> <html>
<body> <h1>Welcome to My Homepage</h1> <p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p> <div id="choose">
<p class="introtoo">My name is Donald, too</p>
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div> </body>
</html> </body> </html>
结果:
Welcome to My Homepage
My name is Donald
I live in Duckburg
My best friend is Mickey
My name is Donald, too
Who is your favourite:
- Goofy
- Mickey
- Pluto
最新文章
- PHP webservice的使用
- html 超文本标记语言
- 【caffe】无法找到gpu/mxGPUArray.h: No such file or directory
- 【原】iOS学习18之OC内存管理高级
- bzoj 2286: [Sdoi2011消耗战
- C# 类中隐藏基类方法和Partial
- C#中的事件-订阅与发布
- C —— 零碎笔记
- 【程序员小助手】Synergy,感受穿越屏幕之美
- “Cannot load php5apache2_4.dll into server”问题的解决方法
- Struts2配置dtd约束
- hiveql函数笔记(二)
- c# ?? 和?
- CouchBase数据库-一个较新的、发展迅速的nosql数据库技术
- VS项目启动后 提示ID为*******的进程当前未运行
- Jmeter也能IP欺骗!
- table 奇行偶行
- java容器的总结
- 图像质量评估(IQA)
- Redis 发布/定阅
热门文章
- iostat查看io情况(监控Linux的8种方式)
- QT对话框中show和exec的区别
- Fragment与FragmentActivity通信封装
- 1.1.0-学习Opencv与MFC混合编程之---全屏截图,保存为BMP图像(并增加快捷键)
- zoj1028-Flip and Shift
- 【ASP.NET Web API教程】2.1 创建支持CRUD操作的Web API
- Java基础:泛型及其擦除性、不可协变性
- 新秀操作和维护注意事项:Windows关于使用Xshell管理你的云主机
- MFC--自定义消息
- Delphi XE7 用indy开发微信公众平台所有功能(10篇博客)