选择器是JQuery一大特色,所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作。
JQuery的选择器很类似于样式表的选择器。
JQuery选择器的特点:
1.简化代码编写
$("#标记ID")相当于document.getElementById("标记ID"),是通过元素id来获取元素对象。
$("标记名称")相当于document.getElementByTagName("标记名称"),是通过元素名称来获取元素组。
2.隐式迭代
$("标记名称").css("background-color","red");
“$("标记名称")”代表页面中一组元素;
$("标记名称").css("background-color","red")则是为这组元素中每个元素的样式都加上红色背景。
JQuery自动迭代每个元素,这就免去了我们编写代码编历每个元素对象的操作了。
3.无需判断对象是否存在
如果页面上不存在id为test的DOM 元素,$("#test").css("background-color","red")不会产生任何异常,而document.getElementById("test").style.backgroundColor='red'就会产生未找到对象的异常。
JQuery选择器的分类:基本选择器,层次选择器,过滤选择器,表单选择器
:checked选取所有被选中的元素(radio,checkbox中的checked)
$("input:checked"):选取所有被选中的元素(单选按钮和复选框)
30. :selected选取被选中的选项元素(select中的option=selected)
$("select :selected"):选取所有被选中的列表项
如:
$("select :selected").each(function () {
str += $(this).text() + ",";
});
编历每个选中项,并把项的内容拼接到字符串str中。
1. :input选取所有的<input><textarea><select><button>等表单元素
2. :text选取所有的单行文本框
3. :password选取密码框
4. :radio选取所有的单选按钮
5. :checkbox选取所有的复选框
6. :submit选取所有的提交按钮
7. :image选取所有的图片按钮
8. :reset选取所有的重置按钮
9. :button按钮所有的按钮
10. :file选取所有的上传域
11. :hidden选取所有的不可见元素(前面讲过“过滤选择器-14”)
:[selector1][selector2]...[selectorN]选取同时满足select1至selectorN的元素
$("div[id][title*=es]"):组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素
$("div[id][title*=es]").css("background","#bbffaa");
实例:简单的一个JQ下拉框的效果
参考书籍:《锋利的JQuery》
(原创:灰灰虫的家http://hi.baidu.com/grayworm)
相关文章
- Cordys BOP 4平台开发入门实战演练——HTML/JS界面开发实践
- Cordys BOP 4平台开发入门实战演练——Webservices开发(初级)
- OpenText Cordys BOP 4平台开发入门实战演练——基础理论知识
- C语言从入门到实战(基础学习篇)
- Spark入门到精通视频学习资料--第八章:项目实战(2讲)
- 【一】ERNIE:飞桨开源开发套件,入门学习,看看行业顶尖持续学习语义理解框架,如何取得世界多个实战的SOTA效果?
- Docker技术入门与实战 第二版-学习笔记-7-数据管理(volume)
- Docker技术入门与实战 第二版-学习笔记-6-仓库
- 深度学习入门实战(二)-用TensorFlow训练线性回归
- TensorFlow 中文资源精选,官方网站,安装教程,入门教程,实战项目,学习路径。