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对 ...
随机推荐
- 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数P。并将P对1000000007取模的结果输出。 即输出P%1000000007
include "stdafx.h" #include<iostream> #include<vector> #include <algorithm& ...
- 【Python + Selenium】之JS定位总结
感谢:小琰子 Python+Selenium 脚本中的一些js的用法汇总: 1.滚动条 driver.set_window_size(500,500) js = "window.scroll ...
- iOS图片无损拉伸
一张图片如果放大的话一般情况下会失真,如果该图片是规则的,比如这个聊天气泡,可以用如下代码来设置 UIImage *rightImg = [UIImage imageNamed:@"Sen ...
- Java程序发送邮件
之前上网有看到过别人总结的使用java程序发送邮件,于是自己下来练习,把自己学习的一些心得总结出来. 首先我们这里需要采用两个jar包: 需要的朋友可以自行上网去CSDN类似的网站上面找 顺便把自己测 ...
- 九度OJ 1255:骰子点数概率 (递归、DP)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:316 解决:29 题目描述: 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入n,打印出S的所有可能的值出现的概率. 输入: 输入包 ...
- Delphi 64与32位的差异
Delphi 64与32位的差异 最近,Delphi推出了64位预览版本, 我做为一个忠实的Delphier, 看到这消息后,第一时间学习,并写下这个做为以后的参考资料. 相同点: 在Delphi ...
- 监听并保存ssh账号密码
有时候渗透搞下一台服务器的权限,想通过此服务器抓取其他服务器的ssh密码.就可以用以下方法,如果管理员通过这台服务器作为跳板登录其他服务器,密码就会记录下来. alias ssh='strace -o ...
- IO密集型操作时,为什么线程比进程更好?
在IO密集型的操作时,进程线程都不会太占用CPU,但是进程消耗的资源比较多.
- hdu2563——统计问题
Problem Description 在一无限大的二维平面中,我们做例如以下如果: 1. 每次仅仅能移动一格. 2. 不能向后走(如果你的目的地是"向上",那么你能够向左走, ...
- linux c编程:信号(二) alarm和pause函数
使用alarm函数可以设置一个定时器,在将来的某个时刻该定时器超时.当定时器超时后,产生SIGALRM信号.如果忽略或不捕捉此信号,则其默认动作是终止调用该alarm函数的进程 #include< ...