初窥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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
浅谈php自定义错误日志
2015/02/13 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python 日期操作类代码
2018/05/05 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Django框架反向解析操作详解
2019/11/28 Python
应届生服务员求职信
2013/10/31 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
单位工作证明
2014/10/07 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
辞职信怎么写
2015/02/27 职场文书
技术员个人工作总结
2015/03/03 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL