跟着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 匿名函数的理解(透彻版)
Jan 28 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
js制作支付倒计时页面
Oct 21 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
基于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
2019十大人气国漫
2020/03/13 国漫
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
Python文件操作类操作实例详解
2014/07/11 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年司机工作总结
2014/11/21 职场文书
小学母亲节活动总结
2015/02/10 职场文书
公司放假通知范文
2015/04/14 职场文书
小学入学感言
2015/08/01 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
我去timi了,一起去timi是什么意思?
2022/04/13 杂记