第二章 吸取jQuery之选择器和包装集
第二章 吸取jQuery之选择器和包装集
2.1 选择器
2.1.1选择器的使用
选择器是根据元素的类型、特性或者元素在HTML文档中的位置来精确地描述元素。
语法 jQuery(“DOM元素标识”) 也可以写成$(“DOM元素标识”) 返回与选择器相匹配的DOM元素数组。下面是基本CSS选择器列表:
选择器 |
描述 |
* |
匹配所有元素 |
E |
匹配标签名为E的所有元素 |
E F |
匹配标签名为F的所有元素,这些元素是E的子节点 |
E>F |
匹配标签名为F的所有元素,这些元素是E的直接子节点 |
E+F |
匹配标签名为F的所有元素,这些元素是E后面的第一个兄弟点 |
E~F |
匹配标签名为F的所有元素,这些元素是E后面的兄弟节点之一 |
E.C |
匹配标签名为E的所有元素,这些元素拥有CSS类名为C,如果省略了E则相当于*.C |
E#I |
匹配标签名为E的所有元素,这些元素拥有CSS类名为C,如果省略了E则相当于*#I |
E[A] |
匹配标签名为E的所有元素,这些元素拥有特性A |
E[A=V] |
匹配标签名为E的所有元素,特性A的值是V |
E[A^=V] |
匹配标签名为E的所有元素,特性A的值以V开头 |
E[A$=V] |
匹配标签名为E的所有元素,特性A的值以V结束 |
E[A!=V] |
匹配标签名为E的所有元素,特性A的值不等于V,或不存在V |
E[A*=V] |
匹配标签名为E的所有元素,特性A的值包含V |
对应以上的选择器列表给予一个列表示例:
示例 |
描述 |
a |
匹配所有的超级元素(<a>) |
#specialID |
匹配元素标识ID为specialID的元素 |
.specialClass |
匹配元素类名class为specialClass的元素 |
a#specialID.specialClass |
匹配超链元素ID为specialID并且拥有类名为specialClass的元素 |
p a.specialClass |
匹配p元素下超链元素class为specialClass的元素 |
p > a |
匹配p元素下直接子节点为超链的元素 |
ul.myList > li > a |
匹配ul元素class名为myList的元素下的直接节点li下的直接超链节点 |
a[href^=’http://’] |
匹配超链href特性值以http://为开头的所有元素 |
a[href!=’http://’] |
匹配超链href特性值不包含http://的所有元素 |
对应以上的示例展示一下在代码中的体现:
$(a)
$(“#specialID”)
$(“.specialClass”)
$(“a#specialID.specialClass”)
$(“p a.specialClass”)
以此类推。这里$()函数的使用在文章开头就说明了。目前为止函数的参数只有一个,事实下该函数是有2个参数的,该函数第一个参数是选择器第二个参数为上下文。例如:
$(选择器,’div#sampleDom’)
这样写就可以把选择器的应用范围限制在DOM中的div的ID为sampleDom元素内的DOM中了。而前面$(选择器)省略的上下文就赋予了默认值为整个DOM对象。
2.1.2 位置选择元素
还可以根据元素在页面上的位置,选取关注的DOM。比如选择第一个<a>元素。
下面是jQuery支持的位置过滤选择器:
选择器 |
描述 |
:first |
匹配上下文中的第一个元素。li a:first返回列表项后代节点中的第一个链接 |
:last |
匹配上下文中的最后一个元素。li a:last返回列表项后台节点中的最后一个链接 |
:first-child |
匹配上下文中的第一个子节点。li:first-child返回每个列表中的第一个列表项 |
:last-child |
匹配上下文中的最后一个子节点。li:last-child返回每个列表中的最后一个列表项 |
:only-child |
返回所有没有兄弟节点的元素 |
:nth-child(n) |
匹配上下文中的第n个子节点。li:nth-child(2)返回每个列表中的第二个列表项 |
:nth-child(even|odd) |
匹配上下文中的偶数或奇数子节点。li:nth-child(even)返回每个列表中的偶数列表项 |
:nth-child(Xn+Y) |
匹配上下文中的由提供的公式计算出的子节点。如果Y是0,则可以省略。li:nth-child(3n)返回每个列表中能被3整除的列表项,而nth-child(5n+1)返回每个列表中所有能被5整除的列表项的下一个列表项。 |
:even |
匹配上下文中的偶数元素。li:even返回所有偶数的列表项。 |
:odd |
匹配上下文中的奇数元素。li:odd返回所有奇数的列表项。 |
:eq(n) |
匹配上下文中第N个元素 |
:gt(n) |
匹配第N个元素之后的元素(不包括第N个元素) |
:lt(n) |
匹配第N个元素之前的元素(不包括第N个元素) |
在上列表中最容易让人迷惑的是:first和:first-child的区分。
<ul>
<li>a1<li>
<li>b1<li>
<li>c1<li>
</ul>
<ul>
<li>a2<li>
<li>b2<li>
<li>c2<li>
</ul>
$("ul li:first-child").text();会返回 a1a2
$("ul li:first").text();会返回 a1
简单的说:first只是返回一个元素,:first-child返回多个元素。
2.1.3 自定义过滤选择器
下面是自定义过滤选择器列表:
选择器 |
描述 |
:animated |
选择处于动画状态的元素 |
:button |
选择按钮元素(包括input[type=submit]、input[type=reset]、input[type=button]和button) |
:checkbox |
选择复选框元素(input[type=checkbox]) |
:checked |
选择处于选中状态的复选框和单选按钮元素 |
:contains(food) |
选择包含文本food的元素 |
:disable |
选择处于禁用状态的元素 |
:enabled |
选择处于启用状态的元素 |
:file |
选择文件输入元素(input[type=file]) |
:has(selector) |
选择至少包含一个匹配指定选择器的元素的元素 |
:header |
选择标题元素。比如<h1>到<h6> |
:hidden |
选择隐藏元素 |
:image |
选择图片输入元素(input[type=image]) |
:input |
选择表单元素(input、select、textarea、button) |
:not(selector) |
选择不匹配指定选择器的元素 |
:parent |
选择有子节点(包含文本)的元素,空元素除外 |
:password |
选择口令元素(input[type=password]) |
:radio |
选择单选框元素(input[type=radio]) |
:reset |
选择重置按钮元素(input[type=reset]或者button[type=reset]) |
:selected |
选择列表中处于选中状态的<option>元素 |
:submit |
选择提交按钮元素(input[type=submit]或button[type=submit]) |
:text |
选择文本输入框元素(input[type=text]) |
:visible |
选择可见元素 |
讲解下:has
首先我要取得一个div下的span可以写成$(‘div span’),那反过来要取得带有span的div呢?
$(‘div:has(span)’)这个意思就是div中有span的div。当然还可以带有特性如:
$(‘tr:has(img[src$=”puppy.png”])’)选择含有puppy.png为结尾图片的tr元素。
2.1.4 创建新的HTML
我们想动态的创建HTML中的元素可以这样写:
$(‘<div>HelloWorld</div>’).appendTo(‘body’);
这句话的意思就是创建一个层内容为HelloWorld的元素插入到body元素中。
当然了还可以动态的添加CSS样式以及添加事件,如:
$(‘<img>’,{src:’img/little.png’,alt:’test’,title:’test’,click:function(){alert($(this).attr(‘title’));}}).css({cursor:’pointer’,border:’1px solid black’}).appendTo(‘body’);
这行代码的意思是首先创建img的这个元素元素中有src,alt,title等特性还有click事件,并且给予了css的样式组成一个元素后加入到body元素中。
2.1.5 管理包装集
下面讲述一些包装集中的方法:
方法名 |
描述 |
size |
size() 返回包装集中元素的个数 参数 无 返回值 元素的个数 示例 $(‘World’).html().size(); |
get |
get(index) 获取包装集中的一个或全部匹配元素。如果不指定参数,则包装集中的所有元素就以javascript数据形式返回。如果提供了index参数,则会返回index所对应的元素。 参数 index (数值)需要返回的单个元素的下标。如果省略,则整个集合会 以数组形式返回。 返回值 一个DOM元素或DOM元素数组 示例 $(‘img[alt]’).get(0) |
eq |
eg(index) 获取包装集中与index参数相对应的元素,并返回只包含此元素的新包装集 参数 (数值)需要返回的单个元素的下标。和get方法一样,负的下标值可以指定从集合的末尾开始查询元素 返回值 包含一个或零个元素的包装集 示例 $(‘img[alt]’).eg(0) |
first |
first() 获取包装集中的第一个元素,并返回只包含此元素的新包装集。如果原包装集为空,则返回空包装集 参数 无 返回值 包含一个或零个元素的包装集 示例 $(‘img[alt]’).first(); |
last |
last() 获取包装集中的最后一个元素,并返回只包含此元素的新包装集。如果原包装集为空,则返回空包装集 参数 无 返回值 包含一个或零个元素的包装集 示例 $(‘img[alt]’).last(); |
toArray |
toArray() 将包装集里的所有元素作为DOM元素数组返回 参数 无 返回值 由包装集中的DOM元素组成的Javascript数组 示例 $(‘lable+button’).toArray(); |
index |
index(element) 在包装集中查找传入的元素,返回它在包装集的下标,或者返回包装集中的第一个元素在同级节点中的下标。如果没有找到此元素,则返回-1 参数 element(元素|选择器)需要获取下标的元素引用,或者用来识别元素的选择器。如果省略此参数,则找出包装集中的第一个元素在同级节点中的下标。 返回值 传入的元素在包装集或者在其同级节点中的下标,若找不到则返回-1 示例 $(‘img’).index(); |
add |
add(expression,context) 创建包装集的副本并向其中添加由expression参数指定的元素。expression可以是选择器、HTML片段、DOM元素或DOM元素数组。 参数 expression (选择器|元素|数组)指定要添加到包装集的元素。该参数如果是jQuery选择器,则将全部匹配的元素添加到包装集中。如果该参数是HTML片段,则创建相应的元素并添加到包装集中。如果参数是DOM元素或DOM元素数组,则直接将其添加到包装集中。 Context (选择器|元素|数组|jQuery)指定一个上下文,用来缩小匹配第一个参数的元素的查找范围。这和传递到jQuery()函数中的上下文参数是一样的。 返回值 所添加元素的原始包装集副本。 示例 $(‘img[alt]’).add(‘img[title]’); |
not |
not(expression) 创建包装集的副本,从中删除那些与expression参数指定的标准相匹配的元素 参数 expression(选择器|元素|数组)指定要删除的元素。如果该参数是jQuery选择器,则删除任何匹配expression的元素。如果传递的是元素或者元素数组,则删除包装集中的这些元素 如果传递的是函数,则会为包装集中的每个元素调用此函数(this指定当前元素),并从包装集中删除调用的返回值为true的元素 返回值 不包含已删除元素的原始包装集副本 示例 $(’img’).not(function(){return !$(this).hasClass(‘keepMe’)}) |
filter |
filter(expression) 创建包装集的副本,并从中删除与expression参数值指定的标准不匹配的元素集合 参数 expression(选择器|元素|数组)指定要删除的元素。如果参数是jQuery选择器,则删除所有不匹配expression的元素 如果传递的是元素或者元素数组,则删除包装集中除了这些元素之外的所有元素 如果传递的是函数,则会对包装集的每个元素分别调用此函数(this指定当前元素),并从包装集中删除函数调用返回值为false的元素 返回值 不包含已过滤元素的原始包装集副本 示例 $(‘td’).filter(function(){return this.innerHTML.match(/^\d+$/)}) |
slice |
slice(begin,end) 创建并返回新包装集,此包装集包含匹配集中一个连续的部分。 参数 begion (数字)在返回的切片中第一个元素的位置,从0开始计数 end (数字)不包含在切片中的第一个元素位置,或者说是切片中最后一 个元素的下一个元素的位置,从0开始计数。如果省略,则切片会扩展到包装集的最后一个元素 示例 $(‘*’).slice(0,4) |
has |
has(test) 创建并返回新包装集,此包装集只包含原始包装集中子节点匹配test表达式的元素 参数 test (选择器|元素)要应用到包装元素所有子节点上的选择器或是要测试的元素。只有特定的元素会包含在包装集中,这些元素至少包含一个匹配选择器的子节点,或者其子节点就是传递的元素参数test 返回值 结果包装集 示例 $(‘div’).has(‘img[alt]’); |
map |
map(callback) 为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象实例中 参数 callback (函数)回调函数,为包装集中的每个元素调用该函数。此函数接受两个参数:元素在集合中的下标(从0开始计数),以及元素本身。当前元素也被作为函数的上下文(this关键字) 返回值 由已转换值组成的包装集 示例 $(‘div’).map(function(){return (this.id == undefind)?null:this.id;}) |
each |
each(iterator) 遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数 参数 iterator (函数)回调函数,为匹配集中的每个元素调用。此函数接受两个参数:元素在集合中的下标(从0开始计数)以及元素本身。当前元素也被作为函数的上下文(this引用) 返回值 包装集 示例 $([1,2,3]).each(funciton(){alert(this);}) |
find |
find(selector) 返回新的包装集,它包含原始包装集中与传入的选择器表达式相匹配的元素的所有后代元素 参数 selector (字符串)一个jQuery选择器,只有匹配此选择器的元素才能成为返回集合的一部分 返回值 新建的包装集 示例 $(*).find(‘p cite’) |
is |
is(selector) 确定包装集中是否存在与传入的选择器表达式相匹配的元素 参数 selector(字符串)检验包装集中元素的选择器表达式 返回值 如果至少有一个元素与传入的选择器相匹配,则返回true,否则返回false 示例 $(‘*’).is(‘img’) |
end |
end() 在jQuery方法链中用来将当前的包装集回滚到前一个返回的包装集中。 参数 无 返回值 前一个包装集 示例 $(‘img’).filter(‘[title]’).hide().end().addClass(‘anImage’) |
andSelf |
andSelf() 合并方法链中的前两个包装集 参数 无 返回值 合并后的包装集 示例 $(‘div’).addClass(‘a’).find(‘img’).addClass(‘b’).addSelf().addClass(‘c’) |
关系获取包装集
方法名 |
描述 |
children([selector]) |
返回由每个包装元素所有的子节点(不包含重复的子节点)组成的包装集 |
closest([selector]) |
返回由与传入参数匹配的单个邻近祖先元素的包装集 |
contents() |
返回由每个元素的内容组成的包装集,包括文本节点(这个方法常用来获取<iframe>元素的内容) |
next([selector]) |
返回由每个包装元素后面下一个同级元素(不包含重复元素)组成的包装集 |
nextAll([selector]) |
返回由每个包装元素后面所有的同级元素组成的包装集 |
nextUntil([selector]) |
返回由每个包装元素后面所有的同级元素组成的包装集,直至遇到与选择器相匹配的元素,但不包括此元素。如果选择器没有匹配元素,或者省略了选择器参数,则会选择后面所有的同级元素 |
offsetParent() |
返回由包装集中离第一个元素最近的,使用相对或者绝对定位的祖先元素组成的包装集。 |
parent([selector]) |
返回由每个包装元素的直接父元素(不包含重复元素)组成的包装集 |
parents([selector]) |
返回由每个包装元素的所有的祖先元素(不包含重复元素)组成的包装集。这不仅包括直接父元素,还包含其上的所有祖先元素,但是不包括文档根节点。 |
parentsUntil([selector]) |
返回由每个包装元素所有的祖先元素组成的包装集,直至遇到选择器匹配的元素,但不包括此元素。如果选择器没有匹配到元素,或者是省略了选择器参数,则选择所有的祖先元素。 |
prev([selector]) |
返回由每个包装元素前面紧邻的同级元素(不包含重复元素)组成的包装集 |
prevAll([selector]) |
返回由每个包装元素前面所有的同级元素组成的包装集 |
prevUntil([selector]) |
返回由每个包装元素前面所有的同级元素组成的包装集,直至遇到选择器匹配的元素,但不包括此元素。如果选择器没有匹配到的元素,或者是省略了选择器参数,则选择后面所有的兄弟元素 |
siblings([selector]) |
返回由每个包装元素的所有同级元素(不包含重复元素)组成的包装集 |
http://www.cnblogs.com/wujiang ,http://blog.csdn.net/wujiang1984/
转载于:https://www.cnblogs.com/wujiang/archive/2012/10/25/2738472.html
第二章 吸取jQuery之选择器和包装集相关推荐
- 第二章(jQuery选择器)
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- 【第一章】 jQuery入门---选择器 and $工具属性CSS
jQuery1:入门知识--选择器 3W1H What?是什么? JavaScript库:封装了很多JS代码 JavaScript库:jQuery(90%).E ...
- [k8s] 第二章 十分钟带你搭建k8s集群环境
本章节主要介绍如何搭建kubernetes的集群环境 环境规划 集群类型 kubernetes集群大体上分为两类:一主多从和多主多从. 一主多从:一台Master节点和多台Node节点,搭建简单,但是 ...
- jQuery框架学习第二天:jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- 北大青鸟 JQuery制作特效 第二章 (上机练习
北大青鸟 JQuery制作特效 第二章 (上机练习 练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (三) 管理jQuery包装集【转】
一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系 ...
- jQuery框架学习第三天:如何管理jQuery包装集
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- jQuery入门第一章(jQuery初体验)
JQ 基本概念 jQuery 其实就是别的团队封装好的一个 JS 文件. 常见错误 没有引入 jQuery 文件,引入失败,请检查 jquery.js 文件的路径. JQ 对象 和 DOM 对象互相转 ...
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
最新文章
- 学python多长时间能够精通-Python培训需要多长时间可以学会?
- CentOS 6.5 PYPI本地源制作
- Service Mesh 从“趋势”走向“无聊”
- android自动化持续集成,基于持续集成的Android自动化测试.pdf
- hbase filter原理_HBase应用|HBase在移动广告监测产品中的应用
- R语言chorolayer_R成精系列-R 错误汇总
- Windows下的脚本在Linux中运行乱码问题
- HDU2072 单词数【水题】
- 系统集成项目管理工程师计算题(案例计算题、挣值分析、EAC、ETC)
- 如何查看CSDN发布的博客和上传的资源?
- 【Servlet:Java Web服务器】JSP 基本知识点与总结 (思维导图)
- linux文件管理系统答辩ppt,Linux操作系统ppt--第9次文件管理分析.ppt
- 一次Nginx 502问题解决
- android炫彩跑马灯特效,盘点一下那些自带酷炫跑马灯效果的手机,最后一款几乎没人知道...
- 洛谷 — 旅行商的背包(背包)
- WCF+SQL Server 2008 明源售楼系统项目解析
- 客户管理系统之数据库设计
- 「Photoshop2021入门教程」新功能——快速操作
- 正则表达式(常用正则表达式)
- uniapp开发微信小程序分享功能
热门文章
- protobuf根据DebugString字串反解pb对象(及基于此的简单配置实现)
- g++编译支持c++11
- 分页缓冲池内存过高_揭秘:为什么新买的8G内存却显示4G可用,是系统出错还是被人坑了?...
- mongodb占内存过大情况处理
- c#modbus tcp通讯助手开源_Modbus 调试助手的使用(一)
- 修改 (WSL)Windows Subsystem for Linux默认为root登录
- 8.1.2 学习更多关于ConcurrentHashMap
- 【渝粤教育】电大中专学前儿童社会教育 (11)作业 题库
- 【Python实例第6讲】多标签分类
- CFileDialog用法详解