跟着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技巧
Dec 06 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
微信小程序支付前端源码
Aug 29 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
php 学习资料零碎东西
2010/12/04 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python下载网络小说实例代码
2018/02/03 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
投标承诺函范文
2015/01/21 职场文书
公司租车协议书
2015/01/29 职场文书