初窥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获取/更改文本框的值的实例代码
Aug 02 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
浅谈struts1 & jquery form 文件异步上传
May 25 jQuery
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 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
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
几种响应式文字详解
2017/05/19 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
晚归检讨书
2014/02/19 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
节能环保口号
2014/06/12 职场文书
球队口号
2014/06/18 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android