初窥JQuery(一)jquery选择符 必备知识点


Posted in Javascript onNovember 25, 2010

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始。

CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等,他们的基本格式为:

通配选择符:$("#ID *") 表示该元素下的所有元素。

ID选择符:$("#ID") 表示获得指定ID的元素。

属性选择符:$("input[type=text]") 表示type属性为text的所有input元素。

包含选择符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素。

类选择符:$(".Class") 表示所有引用Class样式的元素。

当然这些选择符是可以配合使用的比如说:$("#ID input[type=text]"),这种写法表示指定ID元素下的type属性为text的所有input元素。在JQuery中有些细微的改动都是非常有趣的,比如$("ul li").addClass("Class")和$("ul > li").addClass("Class"),他们显示出来的效果是不同的,第一种是将ul下的所有li元素添加样式,第二种是将ul下的第一个li元素添加样式,具体更多的使用方法可以自行测试。

XPath选择符(自1.3版本后已经不支持,但也可了解下)所涵盖的内容不多,他们的基本格式为:

$("[@title]") 表示选择所有元素内 属性带有title的元素。

$("[@title^=t]") 表示所有属性title值是以t为开头的元素。

$("[@title$=t]") 表示所有属性title值是以t为结尾的元素。

  $("[@title*=t]") 表示所有属性title值是包含t的元素。

XPath选择符和CSS选择符一样,也可以配合使用,可以多个XPath选择符一起使用,也可以和CSS选择符一起使用,所以想要达到你想要的要求用JQuery方法是有很多种的。

自定义选择符是选择以一个冒号(:)开头的一种选择符,说到自定义选择符,那就不说到我们经常用到:gt()、:eq()、:odd、:even,这些是我们最常用到的,比如:odd和:even这两个我们通常用他来做有条纹样式的表格,使用方法相当简单,如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要简单的使用两行代码就可以制作出我们想要的条纹样式。

当然在实际开发中我们一般会使用选择符配合DOM遍历方法来进行操作,如:

$("#table td:contains('Window窗口')").parent().find("td:gt(0)").addClass("highlight")

这句代码表示取得'Window窗口'单元格,再取得他的父级元素,然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的,在这里我只是为了表示JQuery的连缀效果,这种格式也是不推荐的,我本人一般是这样书写的:

$("#table td:contains('Window窗口')")
.parent()

//获取父级
.find("td")

 //找到td元素
.not(":contains('Window窗口')")

//不是window窗口的元素
.addClass("highlight");

//添加样式

将他们分开,后面标明,以便于增强可读性。

下面我提供几个在实际开发最常用的代码(由于实在太晚,扛不住了!):

$("input[type='text']").val(''); //清空所有文本框
$("#text input:text").val('');//清空text元素下所有文本框

//获取选中的所有CheckBox的值

$("input:checkbox:checked").each(function() {
alert($(this).val());
});

$("select option:selected").val()//获取选中的下拉框的值

$("select option:selected").text()//获取选中的下拉框的文本

本人对于JQuery选择符的理解到此为止,仅供参考,欢迎感兴趣的朋友参与讨论。未完待续........

demo打包下载

Javascript 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
学习并汇集javascript匿名函数
Nov 25 #Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 #Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 #Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 #Javascript
HTML颜色选择器实现代码
Nov 23 #Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 #Javascript
You might like
php图像处理类实例
2015/07/28 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
使用Vue写一个datepicker的示例
2018/01/27 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
在Django中创建动态视图的教程
2015/07/15 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python实现飞机大战微信小游戏
2020/03/21 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python 如何引入协程和原理分析
2020/11/30 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
教师师德承诺书
2014/03/26 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
迎新年主持词
2015/07/06 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis