1.基本过滤选择器
2.内容过滤选择器
3.可见性选择器
4.属性选择器
5.子元素过滤选择器
6.表单选择器
a. :fitst
选取第一个元素
b. :last选取最后一个元素
c. :not()
选取除指定之外的元素
d. :even
偶数选择器
e. :odd
奇数选择器
f. :eq()选取指定索引的元素
g. :gt()选取大于指定索引的元素
h. :lt()选取小于指定索引的元素
i. :header选取h1,h2,h3,h4,h5,h6标签
j. :animated选取正在执行动画的元素
k. :lang()语言代码选择器,1.9版本新增加,基本用不到
l. :root根元素选择器,1.9版本新增,没什么用
m. :target选择由文档URI格式化识别码表示的目标元素,1.9新增,基本用不到
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo1</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
#go{width: 100px;height: 100px;background: teal;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<p><span>我是</span>第<em>11111</em>个标签</p>
<p>我是第22222个标签</p>
<p class="a">我是第33333个标签</p>
<p>我是第44444个标签</p>
<p>我是第55555个标签</p>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<div id="go"></div>
<script>
// $('p :first').css('background','red');
//$('p:last').css('background','red');
// $('p:not(\'.a\')').css('background','red');
// $('p:even').css('background','red');
// $('p:odd').css('background','red');
// $('p:eq(3)').css('background','red');
// $('p:gt(2)').css('background','red');
// $('p:lt(2)').css('background','red');
//$(':header').css('background','red');
$('#go').animate({'left':'1000'},10000);
$(':animated').css('background','red');
</script>
</body>
</html>
|
a:contains()选取含有文本内容的元素
b:has()选择指定元素的元素
c:empty选择不包含子元素或者文本空元素
|
d:parent选取含有子元素或者文本的元素
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
p{height: 30px;line-height: 30px;}
</style>
</head>
<body>
<p>javascript是一种由Netscape的<strong>LiveScript</strong>发展而来的原型化继</p>
<p>遗留的速度问题,为客户提供更流畅的浏览效果</p>
<p><a href="###"></a></p>
<p></p>
<script>
// $('p:contains("LiveScript")').css('background','red');
//$('p:contains("LiveScript")').show().siblings().hide();
//$('p:has("strong")').css('background','red');
//$('p:empty').css('background','red');
$('p:parent').css('background','red');
</script>
</body>
</html>
a. :hidden选取所有不可见元素
b. :visible选取所有可见元素
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
p{height: 30px;line-height: 30px;}
.hide{display: none;/*opacity: 0;visibility: hidden;*/}
</style>
</head>
<body>
<p>javascript是一种由Netscape的<strong>LiveScript</strong>发展而来的原型化继</p>
<p>遗留的速度问题,为客户提供更流畅的浏览效果</p>
<div class="hide">我是不可见的DIV</div>
<div>我是可见的div</div>
<script>
//alert($('div:hidden').html());
alert($('div:visible').html());
//:hidden选择器的条件
//1.首先肉眼要在网页上看不到的元素
//2.这个元素不占有网页上的位置
</script>
</body>
</html>
|
属性选择器
a. [attr]选择拥有此属性的选择器
$('p[title]').css('background','red');
b. [attr=value]指定属性值的选择器
$('p[title=js]').css('background','red');
c. [attr1][attr2][attr3]复合属性选择器
$('p[title][myattr=my]').css('background','red');
d. 其它属性选择器(可到jQuery API手册上过一遍)
|
子元素过滤选择器
a. :first-child 选择父元素第一个子元素
$('div p:first-child').css('background','red');
b.
:last-child选择父元素最后一个子元素
c.:only-child选择元素中只包含一个子元素的元素
$('div p:only-child').css('background','red');
d.:nth-child(表达式)
选取父元素中的第X个元素,X由表达式决定
$('div p:nth-child(2)').css('background','red');
$('div p:nth-child(even)').css('background','red');
e.:first-of-type选取所有相同元素的第一个兄弟元素 1.9新增
f.:last-of-tyoe选取所有相同元素的最后一个兄弟元素 1.9新增
g.:nth-last-child(表达式)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第个,1.9+
h.:only-of-type:nth-of-type(表达式):nth-last-of-type(表达式)
|
表单元素选择器
a :input
b :text
c :password
d :radio
e :checkbox
f :submit
g :image
h :reset
i :button
j :file
k :hidden
l :textarea
m:select
<script>
//alert($(':input').length);
//alert($(':text').length);
//$(':text').css('background','red')
//$(':password').css('background','red')
//alert($(':radio').val());
//alert($(':checkbox').val());
//alert($('input[type=checkbox]').val());
alert($('input:hidden').val())
</script>
|
a :enabled
选择所有可用元素
b :disabled选择所有不可用元素
c :checked选择可有选中元素
d :selected选取所有被选中的选项元素
e :focus选择当前获取焦点的元素 1.6添加
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo7</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text" name="" id="" value="我是不能修改的文本框" disabled="disabled" />
<input type="text" name="" id="" value="我是可以修改的文本框" />
<input type="checkbox" name="" id="" checked="checked" value="aaa" />
<input type="checkbox" name="" id="" value="bbb" />
<input type="checkbox" name="" id="" value="ccc" />
<select name="" id="">
<option value="第一个选项">第一个选项</option>
<option value="第二个选项" selected="selected">第二个选项</option>
<option value="第三个选项">第三个选项</option>
</select>
<script>
//alert($('input:disabled').val());
//alert($('input:enabled').val());
//
//alert($('input[disabled=disabled]').val());
//alert($(':checked').val());
//alert($('input[checked=checked]').val());
/*alert($('select option:selected').val())
alert($(':selected').val())
alert($('select option[selected=selected]').val())*/
</script>
</body>
</html>
|
下集预告
1、和选择DOM有关的方法,比如:next(),parent(),parents(),children(),eq().....etc
2、当选择器中有特殊符号的时候,我们怎么如何处理
3、实例
a.先用原生的javascript写一个tab标签页
b.我们用jquery写一个tab标签页,并利用强大的jquery选择器,使tab标签页实现的代码尽量地少,尽量保持在1~2行代码量之间解决问题
|
相关推荐
jQuery 3.1 标准课程第二章 选择器子元素选择器(三)
第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...
(24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...
jQuery 3.1 标准课程第二章 选择器基本筛选选择器(三)
第二步是在jQuery对象间的跳转。也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么可以通过一系列的跳转方法,比如parent()、next()、children()、find()等,或者过滤筛选的方法,比如eq()、filter()、...
3. 基本选择器 4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 ...
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第...
第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 ...
第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些注意事项 ...
一、Jquery常用的过滤选择器如下所示: 1、:first,选取第一个元素,比如$(“div:first”)选取第一个div元素 2、:last,选取最后一个元素,比如$(“div:last”)选取最后一个div元素 3、:not(选择器),选取不满足...
选择某个元素的”孩子” – children() 代码如下: ”parent”> ”son1″>第一列</li> ”son2″>第二列</li> ”son3″>第三列</li> </ul> $(“#parent”).children().length //得到所有的”孩子“(li)的个数,“3”
从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象……
本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作。分享给大家供大家参考,具体如下: HTML部分: 元素1 元素2 元素3 元素4 元素5 取倒数第二个p元素 $("div p").eq(-2) 取最后一个p元素...
第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容...
使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...
第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象…… 通过一步步的讲解,带您进入jQuery的精彩世界, 其中有很多作者...
从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...
jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2 jquery的简单应用/7 ...
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单...
前端jquery+easyUI实现的日期选择器。 博文地址:https://blog.csdn.net/wanghuiWHI/article/details/135648572 Demo简要: 1.日期选择器可以提供日选择器、周选择器、月选择器 2.日选择器最大31天,选择起始日期后...