初窥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使用concat连接数组的方法
Apr 06 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
Vue如何基于es6导入外部js文件
May 15 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
jquery图片切换插件
2015/03/16 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
用Django实现一个可运行的区块链应用
2018/03/08 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python搜索包的路径的实现方法
2019/07/19 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
亿企通软件测试面试题
2012/04/10 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
工作态度检讨书范文
2015/05/06 职场文书