jQuery-选择器(2)
jQuery选择器(2)
继续学习jquery选择器,感受它对于操作DOM节点的方便。
【属性筛选选择器】
属性选择器可以让你基于属性来定位一个元素。可以只指定该元素的某属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素。
使用率大的两个:
[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等。[attr*="value"]能在网站中帮助我们匹配不同类型的文件。
例子:
<div class="left" testattr="true" >
<div class="div" testattr="true" name='p1'>
<a>[att=val]</a>
</div>
<div class="div" testattr="true" p2>
<a>[att]</a>
</div>
<div class="div" testattr="true" name="-">
<a>[att|=val]</a>
</div>
<div class="div" testattr="true" name="a b">
<a>[att~=val]</a>
</div>
</div>
<script type="text/javascript">
//查找所有div中,属性name=p1的div元素
$('div[name = p1]').css("border", "3px groove red");
</script>
<script type="text/javascript">
//查找所有div中,有属性p2的div元素
$('div[p2]').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");
</script>
<script type="text/javascript">
//查找所有div中,有属性name中的值包含一个连字符“空”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");
</script>
【子元素筛选选择器】
不常使用,和元素选择器不太一样,:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算。
jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的。
【表单元素选择器】
jquery专门加入表单选择器是为了更加方便的获取到某个类型的表单元素。
大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')。
【表单对象属性筛选选择器】
该选择器是专门针对表单元素的选择器,可以附加在其他选择器后面,主要功能是对所选择的表单进行筛选。
【特殊选择器this】
this是javascript中的关键字,指的是当前上下文对象,简单的说就是方法/属性的所有者。在DOM中this就指向了这个html元素的
对象,因为this就是DOM元素本身的一个引用。
<h2>特殊选择器this</h2>
<p id="test1">点击测试:通过原生DOM处理</p>
<p id="test2">点击测试:通过原生jQuery处理</p>
<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通过dom的方法改变颜色
this.style.color = "red";
},false);
</script>
<script type="text/javascript">
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$(this).css('color','blue');
})
</script>
总体上:this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法;$(this),代表的上下文对象是一
个jquery的上下文对象,可以调用jquery的方法和属性值。
总结:jquery强大的选择器,对于我们对DOM节点的操作带来了极大的方便,但是对于选择器的多而杂,我们应该在适当的时候选择适当选择器,除此之外,还应该在日常中不断的练习来加深理解及掌握。
jQuery-选择器(2)的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
随机推荐
- hive中遇到的问题
) from t_1 where country ='China' group by (name = 'qq'); 结果图 select * from t_sz_part; 按照理解来说,应该只有一个 ...
- ACE_Svc_Handler 通信原理
ACE作为通讯方面的开源架构,不但用c++实现,而且用JAVA实作的架构已经可以使用了,由此看来掌握ACE成为每歌开发通讯程序的程序员的必备技能. ACE的库分为4个层次: OS适配层该层将ACE的较 ...
- Lumen开发:结合Redis实现消息队列(1)
1.简介 Lumen队列服务为各种不同的后台队列提供了统一的API.队列允许你推迟耗时任务(例如发送邮件)的执行,从而大幅提高web请求速度. 1.1 配置 .env文件的QUEUE_DRIVER选项 ...
- Java多态案例分析
一.多态的定义 同一事物,在不同时刻体现出不同状态. 例如:水在不同状态可能是:气态.液态.固态. 二.多态前提和体现 1.有继承关系 2.有方法重写 3.有父类引用指向子类对象 三.编译运行原理 1 ...
- mybatis generator的用法
1 自动生成代码 配置数据库 自动生成三个文件: 第一,java bean文件: 第二,java bean对应的dao文件,但是这里的dao只是一个接口: 第三,mybatis需要的Mapper文件: ...
- Python锁
# coding:utf-8 import threading import time def test_xc(): f = open("test.txt","a&quo ...
- BAPI LIST
[转自 http://blog.csdn.net/minsenwu/article/details/8432081] 库存管理BAPI 库存: 1. BAPI_MATERIAL_AVAILABILIT ...
- Maven+SSM框架(Spring+SpringMVC+MyBatis) - Hello World(转发)
[JSP]Maven+SSM框架(Spring+SpringMVC+MyBatis) - Hello World 来源:http://blog.csdn.net/zhshulin/article/de ...
- Javaweb基础--->监听器listener(转发)
JavaWeb中的监听器 1.基本概念 JavaWeb中的监听器是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext, HttpSession和 Servl ...
- C#自己写的第一个小程序,庆祝一下
Packages.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; na ...