JQuery选择符的理解与应用
JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强。本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的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选择符所涵盖的内容不多,他们的基本格式为:
- $("[@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选择符的理解与应用的更多相关文章
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- jQuery——选择元素
###理解DOM jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务.**DOM(文档对象模型)**充当了JavaScript与网页之间的接口,它以对象网络而非纯文本的形式来表现HTML ...
- jquery 之选择符
css:选择符$('#selected-plays > li') 使用了子元素组合符,查找 ID 为 selected-plays 的元素的子元素( > )中所有的列表 li$('#sel ...
- JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...
- jquery 获取选择符
1.工厂函数$() 标签名:$('p') 取得文档中的所有段落 ID:$('#some-id') 取得文档中具有对应的some-id ID的一个元素 类:$('.some-class') 取得文档中带 ...
- css3选择符使用个人理解。
元素选择符: 通配选择符:一般用* 星号表示 他会命中整体标签. 类型选择符:一般用者空格表示 他会命中标签自己的所有子元素. ID选择符: 一般用# 井号表示 他会命中以id为属性的标签 ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- 整理CSS选择符
1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...
- [css选择器]总结:IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
随机推荐
- Web自动化selenium技术快速实现爬虫
selenium是大家众所周知的web自动化测试框架,主要用来完成web网站项目的自动化测试,但其实如果要实现一个web爬虫,去某些网站爬取数据,其实用selenium来实现也很方便. 比如,我们现在 ...
- java基础-Comparator接口与Collections实现排序算法
java 排序Comparable和Comparator使用 java提供了两个排序用的接口Comparable和Comparator,一般情况下使用区别如下: Comparable 接口用于类的固定 ...
- python简单循环生成器
import time #循环生成器 def traversal_list(alist, i): while True: length = len(alist) i = i%(length) yiel ...
- Python基础 之 set集合 与 字符串格式化
数据类型的回顾与总结 可变与不可变1.可变:列表,字典2.不可变:字符串,数字,元组 访问顺序:1.直接访问:数字2.顺序访问:字符串,列表,元祖3.映射:字典 存放元素个数:容器类型:列表,元祖,字 ...
- LeetCode 240——搜索二维矩阵 II
1. 题目 2. 解答 2.1. 方法一 从矩阵的左下角开始比较 目标值等于当前元素,返回 true: 目标值大于当前元素,j 增 1,向右查找,排除掉此列上边的数据(都比当前元素更小): 目标值小于 ...
- 简单构建基于RDF和SPARQL的KBQA(知识图谱问答系统)
本文主要通过python实例讲解基于RDF和SPARQL的KBQA系统的构建.该项目可在python2和python3上运行通过. 注:KBQA即是我们通常所说的基于知识图谱的问答系统.这里简单构建的 ...
- windows10下git一些问题
windows10下安装git 找不到ssh解决办法 解决办法是: 输入下列命令,一路回车 $ ssh-keygen -t rsa -C “邮箱地址” 若执行ssh-add /path/to/xxx. ...
- JavaScript筑基篇(一)->变量、值与对象
说明 JavaScript中变量.值.对象的理解.本文为了简化理解,前半部分暂时刨除与执行上下文的相关概念.另外本文是个人的见解,如有疑问或不正支持,欢迎提出指正和讨论! 目录 前言 参考来源 变量与 ...
- ZOJ 2110 C - Tempter of the Bone
https://vjudge.net/contest/67836#problem/C The doggie found a bone in an ancient maze, which fascina ...
- 原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...