初窥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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
vue 全局环境切换问题
Oct 27 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
初窥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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
Angular排序实例详解
2017/06/28 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
教育科学研究生自荐信
2013/10/09 职场文书
工作证明格式及范本
2014/09/12 职场文书
单位考核聘任报告
2015/03/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle