跟着Jquery API学Jquery之一 选择器


Posted in Javascript onApril 07, 2010

有了Jquery的选择器,吃饭饭饭香,身体倍棒……
1.基本
我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法
css样式也有几种情况:1.类样式 2.id样式 3.标签样式,
如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{}
如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{}
如果有标签<div></div>,那么我们定义的样式就写成 div{}
如果我们要定义所有的标签样式,那我们就写成 *{} (当然这样简写不太好)
如果我们要定义多个标签之类的就用分号来分开 比如 .aa,#bb,div{} 就定义了 class为aa,id为bb,标签为div的样式了。
我们看到上面5个如果 ,在和jquery的5个基本的选择器对比一下
如果我们要选择一个aa的类就写成 $(“.aa”)
如果我们要选择一个bb的id就写成$(“#bb”)
如果我们要选择div的标签就写成$(“div”)
如果我们要选择所有就写成 $(“*”)
如果我们要选择多个对象就写成 $ (“.aa,#bb,div”)
对比一下,发现基本的选择器完全是按在css的语法在操作,是不是很容易呢
2层次
我们现在知道了上面5个选择器的写法之后,现在我们来考虑如果对层次做选择器,
先想一下什么是层次,其实说的就是 HTML的DOM结构 一层一层的,或者说XML的结构层次
那我们就打开jquery的Api ,发现有4个关于层次的选择器。
归纳一下就是 a空格b,a>b ,a+b,a~b 当然我这里只是为了少打几个字而已,
比如有如下的一个结构

<div> 
<div class="bb"> 
<span>1<span><span>2<span> 
</div> 
<span>3<span> 
<div class=”cc” ></div> 
<span>4<span> 
</div>

我们现在想选择id为aa节点下所有的span节点 ,就用 $(“#aa span”)
我们现在想选择id为aa节点下第一层的span 就是span中文本为 3,4的两个,就用 $(“#aa >span”)
我们现在想得到跟在class为bb后的那个span 就是span中文本为3的那个,就用$(“.bb+span”)
现在我们想得到class为bb后所有的span 就用$(“.bb~span”)
总结一下:第一个的写法还是css样式的写法一样 用空格表示节点下的元素
第二个用>来表示子节点,和空格不同的是它只作用在第一层
第三个第四个都是用来表示跟随节点,只不过不同的是用+号表示紧接着的用~表示所有跟随的 我们是需要记住 (空格 > + ~ )四个符号就可以了
3简单
我们知道了基本的选择器和层次的选择器,有时候我们选择出的是多个比如
<ul> 
<li id='aa'>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul>

我们想得到ul li的第一个(first) ,最后一个(last),基数行(odd),偶数行(even)匹配第三个(eq(2)),匹配大于2行(gt(1)),匹配小于第三行(lt(2)),这里说了7个那么我们要怎么来写这个选择器呢,比如匹配第一个$(“ul li:first”) ,匹配第三个$(“ul li:eq(2)”) ,其他的就不写了
这里我们想一下css中 a链接的几种样式的的写法 a:hover a:link ……是不是一样呢
好了 这里我们看了7种,在看看api 还有3种是什么呢,
1 :not 去除所有与给定选择器匹配的元素 语法一样 $(“ul li:not(#aa)”) 意思是去掉在ul li里面的含有id为aa的元素元素 我们用$(“ul li”)能够得到4个li 用 $(“ul li:not(#aa)”)就去掉了第一个li 只得到了三个
2:header 只是用来选择h1 h2 h3 ……这样的标题
3:animated匹配执行动画的元素
还是总结一下,上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和层次上面。
4 文本 可见性
继续往下看api,文本中有4个函数,当然功能还是对已经选择出来的内容做再次的筛选
上面是对节点的筛选,现在我们要对内容筛选
 
 <div><a>xxiu</a> </div> 
 <div>xxiu zhang </div> 
 <div>zhang </div> 
 <div></div> 

包含指定文本 $("div:contains(xxiu)") 我们希望我们所选择的div的文本中含有xxiu这个字符串
匹配空文本 $("div:empty") 第四个div节点下什么都没有,就匹配它了
匹配含有某个节点的元素 匹配含有a节点的div $(“div:has(a)”)
匹配不为空文本的和2刚好相反 $(“div:parent”) 就匹配了前三个div
总结一下 文本匹配主要是做了 文本(1)和节点匹配(3) ,和匹配无文本或节点(2) 匹配有文本节点(4),两句话:有没有文本或节点,有什么文本和节点
然后我们在看一下可见性,可见性很容易理解就两种情况 可见:hidden选择可见节点或不可见:visible选择不可见节点,没什么好说的
5 属性选择器
我们先看看最基本的属性选择器
<div id=”aa” name=”zhang”>zhang </div> 
<div name=”zhangxxiu”>asdf</div> 
<div id=”bb” name=”xxiu”>xxiu </div>

如上面的节点,我们想选择含有id的节点,我们如果用以前的方法要怎么做呢。
用多选择方式 $(“#aa,#bb”) 得到了我们想要的,但是如果有N个,那不是要跟很长吗,我们都是很懒的,于是就有了属性选择器 $(“div[id]”)就得到了我们想要的结果,对name做选择$(“div[name]”) 但是我们只想得到name为xxiu的 那我们就用$(“div[name ='zhang']”)
得到不为zhang的$(“div[name !='zhang']”),得到以zh开始的$(“div[name ^='zh']”)
以xxiu结尾的$(“div[name $='zhang']”),包含ang的$(“div[name *='ang']”)
或者是有id且包含xxiu的$(“div[id][name *='xxiu']”)
好,看了上面一对东西,肯定是有点晕了,总结一下
1 有什么[id] 等于什么[id='aa'] 不等于什么[id!='aa']
2 以什么开始 ^= 以什么结束$= 匹配什么 *= (完全是正则表达式的语法吗)
3 多属性选择 $(“div[id][name *='xxiu']”)
6 子元素
1匹配子元素中的第一个$("ul li:first-child") 最后一个$("ul li:last-child")
2 匹配在子元素中是唯一的$("ul li:only-child")
3匹配对于的元素$("ul li:nth-child(2)") 和$(“ul li:eq(1)”)一样,前者是从1开始计数,后者是从0开始计数
7表单
看看就知道是input中几种表单 $(“:text”) 得到文本表单 $(“:checkbox”) 得到复选表单等等 看看API就知道是怎么个回事了
我们用前面的选择方式 可以这样写$(“input[type='text']”) 但是少打几个字总比多大几个要好,$(“:text”)这样写是不是清爽的多呢
8 表单属性
1 可用 enabled和不可用 disabled
找出
2 被选中checked 和选择selected
好到这里 所有的API都过了一遍,对选择器基本上就差不多了,差的就是自己去写几句代码玩玩。本文中没有代码,只是对API归纳一下,如果要看代码,看Jquery文档就可以了
Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
js和jquery中获取非行间样式
May 05 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
基于JQuery的cookie插件
Apr 07 #Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 #Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 #Javascript
jquery 学习笔记一
Apr 07 #Javascript
ext jquery 简单比较
Apr 07 #Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 #Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js数组操作学习总结
2013/11/04 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
Python中super函数的用法
2017/11/17 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python打印不合法的文件名
2020/07/31 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
求职信写作要突出重点
2014/01/01 职场文书
七年级地理教学反思
2014/01/26 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
大学生党员自我评价
2015/03/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android