- 浏览: 237179 次
- 性别:
- 来自: 葡萄牙
文章分类
最新评论
-
lightbulb:
...
jQuery中的动画与效果 -
kendezhu:
opportunity 写道 谢谢kendezhu分享,今天正 ...
jQuery 获取和设置select下拉框的值 -
opportunity:
谢谢kendezhu分享,今天正好用上了!
jQuery 获取和设置select下拉框的值
jQuery的强大,很大程度上得益于它更能全面而又简单易用的选择器。无论是进行简单的文本动画显示效果,还是操作DOM元素,甚至进行Ajax交互,都离不开jQuery选择器。jQuery选择器可以说是完全继承了各个版本CSS的优点,和CSS选择器的语法如出一辙。
1.基本选择器
#ID $("#id")
.CLASS $(".class")
标签 $("span")
* $("#id *") 这里是选择了某id下的所有元素(不只是子元素)
$("#id,.class,span") 还可以使用,操作符 来对指定的多个目标操作
简单例子: 单击某个元素使得一些元素增加getred类的样式
此处不加""
$(document).ready(function(){
$("#id").click(function(){
$("#id .class,.class #2.1,#id span").addClass("getred");
});
})
可以看出jQuery中函数的命名与标准javascript中函数的命名一样都遵守了"骆驼命名法"--第一个单词小写,以后每个单词首字母大写,知道了这些后会较少出错的写出一些API函数。
2.层次选择器
$("1 2") 上面的$("#id *")就是这种选择器的一种(还是,应用于父元素1下的所有满足条件的元素2)
$("1>2") 1最好不要是#ID (应用于所有父元素是1的元素2)
$("1+2") 一般用于2和后面的3..4..等是同样的元素时只想应用于2时(应用于1后面紧邻的兄弟元素2)
$("1~2") 这里的2不一定只是一个元素(应用于1后面所有与1平级的元素2)
3.基本滤镜选择器
①位置控制滤镜选择器(:first :last :even :odd :eq(index) :gt(index) :lt(index))
根据元素的位置规则进行元素选取
$(document).ready(function(){
$("#id").click(function(){
$("1:first").addClass("blue");
});
})
1一般是一些样式重复(标签重复或类重复等)的元素
:first 用于选择这些元素中的第一个元素
:last 用于选择这些元素中的最后一个元素
:even 用于选择这些元素中的偶数元素
:odd 用于选择这些元素中的奇数元素
:eq(index) 用于选择这些元素中的第index个元素 从0开始
:gt(index) 用于选择这些元素中的大于index的元素
:lt(index) 用于选择这些元素中的小于index的元素
②隐藏显示滤镜选择器(:empty :parent :hidden :visible)
用来选取、控制、以及操作对用户来说可见或者不可见元素
$(document).ready(function(){
$("#id").click(function(){
$("1:empty").addClass("blue");
});
})
1一般是一些样式重复(标签重复或类重复等)的元素
:empty 用于选择这些元素中不包含子元素或文本的空元素
:parent 用于选择这些元素中包含子元素或文本的空元素
:hidden 用于选择这些元素中不可见的元素
:visible 用于选择这些元素中可见的元素
特别强调一下:hidden的运用
$(document).ready(function(){
$("#id").click(function(){
$("1:hidden").show().addClass("blue");
});
})
加了一个show()函数,此函数将原来隐藏的内容显示(隐藏元素最好用的是style="display:none;"或input设成hidden而visible="false"貌似不行)
③内容限制过滤选择器(:contains(text) :has(selector) :not(selector) :header :animated)
用来对匹配规则添加更加严格的限制来缩小匹配范围
$(document).ready(function(){
$("#id").click(function(){
$("div.1:contians('why')").addClass("blue");
});
})
选择文本中含有why且class为1的div元素
:contains(text) 用于选择文本中包含指定文本的元素
:has(selector) 用于选择含有指定选择器(可以是类选择器、ID选择器、标签选择器等)的元素
:not(selector) 用于选择不含有指定选择器(可以是类选择器、ID选择器、标签选择器等)的元素
:header 用于选择所有标题元素(如h1、h2、h3......)
:animated 用于选择所有正在执行动画的元素
$(document).ready(function(){
$("#id").click(function(){
$("div:has(#spankkk)").addClass("blue");
});
})
选择含有id为spankkk的元素的元素
4.子元素滤镜选择器
用于对匹配规则的元素的子元素进行选择 以下E代表子元素(如div p:nth-child(3n+1) 选择一些p元素,这些p元素的父 元素是div,并且这些p元素在div里的顺序是3n+1 n=0,1,2.... 注意变量只能是n)
E:nth-child(index/even/odd/equation) 选择一些子元素,他们在其父元素里的顺序是index(这里从1开始)even(偶 数)odd(奇数)equation(表达式,如上面的例子) 它可以实现以下3种任何一个
E:first-child 选择一些子元素,他们在其父元素里的是第一个子元素
E:last-child 选择一些子元素,他们在其父元素里的是最后一个子元素
E:only-child 选择一些子元素,他们在其父元素里的是唯一的子元素
$(document).ready(function(){
$("#id").click(function(){
$("ul li:nth-child(2n+1)").addClass("blue");
});
})
选择所有ul下的li 并且这些li在其父元素里的顺序是2n+1(其实就是奇数,等价于$("ul li:nth-child(odd)")
5.表单滤镜选择器
①表单内容滤镜选择器
这些选择器由于"名副其实",所以不一一介绍了 $("1:input") 1是标签或类选择器
:input 该选择器的范围很大,可以选择input、textarea、select、button等元素
:text :password :radio :checkbox :submit :image :reset :button :file
②表单功能滤镜选择器
主要是根据表单元素当前状态等信息对表单元素进行选择 也是"名副其实"的,所以不予以介绍
:enabled :disabled :checked :selected
如$("input:enable") 选择所有状态为enable的input
$("select option:selected") 选择所有被选中的option
6.属性滤镜选择器
用来根据标签的固有或用户设置的属性来进行对元素的选择
[attribute] 选择拥有某属性的元素 如:$("input[class]") 选择拥有class属性的input元素
[attribute=value] 选择某属性的值为value的元素
[attribute!=value] 选择某属性的值不为value的元素
[attribute^=value] 选择某属性的值以value为开始的元素 这里的开始是指字符串的开始
[attribute$=value] 选择某属性的值以value为结束的元素
[attribute*=value] 选择某属性的值为包含value的元素
如$("input[class=home][name*=myfamily]") 选择class属性为home且name属性包含myfamily的input元素
发表评论
-
background-position与text-shadow
2012-04-01 09:46 962background-position http://w ... -
EasyUI2
2012-02-15 11:42 2130http://www.jeasyui.com/demo/ind ... -
EasyUI
2011-10-02 16:17 8212http://www.jeasyui.com/ http: ... -
::first-letter ::first-line
2011-08-07 17:37 898CSS的伪元素::first-letter与::first-l ... -
jQuery可视化数据显示
2011-06-24 16:03 1980http://www.oschina.net/project/ ... -
jQuery实例应用(二)
2011-04-21 23:29 9921.标签云 标签云是一种用于分类的tag标签,不过跟一般分类 ... -
jQuery中使用AJAX跨域操作
2011-04-15 16:21 1665浏览器安全模型规定,XMLHttpRequest、框架(Fr ... -
jQuery实例应用(一)
2011-04-14 17:15 2880暂时实现目前jQuery应用, ... -
jQuery学习链接
2011-04-12 13:24 870jQuery入门指南教程 http://www.cnbl ... -
jQuery的核心及工具
2011-04-09 20:17 12161.核心函数 jQuery()函数( ... -
jQuery与Ajax(三)
2011-04-09 14:38 10381.jQuery中的AJAX事件 在jQuery中有两类AJ ... -
jQuery与Ajax(二)
2011-04-07 21:59 16091.jQuery中的AJAX服务器端返回方式 目前支持的数据 ... -
jQuery与Ajax(一)
2011-04-06 16:35 53891.jQuery中的AJAX 使用jQuery在网站中应用A ... -
jQuery中的动画与效果
2011-04-05 11:52 170151.基本效果 匹配元素从 ... -
jQuery中的事件处理
2011-04-04 11:29 34171.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入 ... -
jQuery进行DOM操作
2011-03-31 17:32 27301.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 ... -
jQuery操作得到的元素
2011-03-29 16:23 1981通过前面的讲解jQuery选择器我们已经能够快速而准确的找到我 ... -
客户端Javascript
2010-12-12 13:38 1175更详细参考JavaScript手册 JavaSc ... -
table标签与meta标签
2010-12-10 14:47 1345有关HTML标签的使用请参考DHTML手册 table标签与 ...
相关推荐
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery选择器全解.
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery 选择器 描述
jQuery选择器过滤器全面的总结,老师推荐!
JQuery 选择器,方便 使用的技术
经典的jQuery选择器应用例子,直观的演示了各种选择器的应用例子。对学习jQuery很有帮助。
jQuery选择器大全(48个代码片段+21幅图演示)
这是一份比较全面的jQuery选择器基础知识,包括源代码和相应的ppt,供大家分享
Jquery选择器分类整理,基本都包含到了,学习笔记。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
jquery选择器入门详解小案例,内附框架脚本,直接运行即可,可以查看源码!
JQuery选择器详解JQuery选择器详解
jquery初学者必备,有各种jquery的选择器,个人学习时整理
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
通过思维导图对知识进行梳理,以便记忆
(24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...