Jquery选择器（一）

基础选择器和层次选择器省略

基本选择器：

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.8.2.js"></script></head><body><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><input type="checkbox" checked/><input type="checkbox" checked/><input type="checkbox"/><table border="1"><tr><td>line1[0]</td></tr><tr><td>line2[1]</td></tr><tr><td>line3[2]</td></tr><tr><td>line4[3]</td></tr><tr><td>line5[4]</td></tr><tr><td>line6[5]</td></tr></table>    <h1>h1</h1><h2>h2</h2> <h3>h3</h3><p>p</p><!-- 基本选择器 --><script type="text/javascript">//1)查找UL中第一个LI元素的内容//html()要用于html/jsp，不能用在xml//text()既能用于html/jsp，且能用于xml//alert( $("ul li:first").text() );//2)查找UL中最后个元素的内容//alert( $("ul li:last").text() );//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始//alert($("table tr:odd").size());//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始//alert($("table tr:even").size());//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签//alert($("table tr:eq(1)").text());//alert($("table tr:odd:first").text());//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大//alert($("table tr:gt(0)").size());//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小//alert($("table tr:lt(4)").size());//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色//$(":header").css("background-color","red").css("color","blue");//10)查找所有[未]选中的input为checkbox的元素个数//alert($(":checkbox:not(:checked)").size());</script></body>
</html>

内容选择器：

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.8.2.js"></script><style type="text/css">.myClass{font-size:44px;color:blue}</style></head><body><div><p>John Resig</p></div><div><p>George Martin</p></div><div>Malcom John Sinclair</div><div>J. Ohn</div><div></div><p></p><p></p><!-- 内容选择器 --><script type="text/javascript">//1)查找所有包含文本"John"的div元素的个数//alert($("div:contains('John')").size());//2)查找所有p元素为空的元素个数//alert( $("p:empty").size() );//3)给所有包含p元素的div元素添加一个myClass样式$("div:has(p)").addClass("myClass");//4)查找所有含有子元素或者文本的p元素个数,即p为父元素//alert( $("p:parent").size() );</script></body>
</html>

Jquery选择器（一）相关推荐

【jquery】jquery选择器
知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器代码实现: elem ...
JQuery——选择器分类
JQuery选择器 1 什么是JQuery选择器快速高效的找到指定节点,支持css语法设置页面 2 JQuery选择器分类 2.1 基本选择器 CSS选择器层级选择器表单域选择器 ...
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
jQuery选择器回顾，IE8还需要你发光发热
2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...
[翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
Jquery 选择器大全【转载】
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
JQuery 选择器。
• #id • element • .class • .class.cl ...
使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
认识jQuery及jQuery选择器
记录自己平时要注意的,如您看到哪里错误,望指正认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...

Jquery选择器（一）

Jquery选择器（一）相关推荐

最新文章

热门文章