跟着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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
微信小程序实现分页加载效果
Nov 19 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邮件类
2007/01/03 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php显示页码分页类的封装
2017/06/08 PHP
php语法检查的方法总结
2019/01/21 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
前端性能优化建议
2020/09/17 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
Python中获取对象信息的方法
2015/04/27 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
教师实习自我鉴定
2013/12/14 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
节能环保演讲稿
2014/08/28 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书