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()//获取选中的下拉框的文本
时间: 2024-08-25 11:34:01

JQuery选择符的理解与应用的相关文章

Web前端新人笔记之jquery选择符

jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery标准的CSS选择符: 4.让选择页面元素更灵活的DOM遍历方法:一.如何理解DOM? DOM中的对象网络与家谱十分相似.比如祖先元素.父元素.子元素等等. 元素之间的关系图从下面的图就可以看清楚: 为了把DOM结构更形象的表现出来,可以使用很多工具,列如Firefox的Firebug插件,Safar

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

jQuery,顾名思义,也就是JavaScript和查询(Query),是一个辅助JavaScript开发的库. jQuery 能极大地简化 JavaScript 编程. 目录1 jQuery库包含的特性2 jQuery与JS3 获取页面元素4 DOM事件与jQuery方法5 简易操作DOM元素6 处理尺寸7 遍历操作8 过滤操作9 jQuery对JS的增强10 为页面添加动态效果11 jQuery与Ajax12 jQuery工具 通过jQuery,您可以选取(查询,query) HTML元素,

Jquery 通配选择符

今天逛Q群遇到一个网友请教问题: 问题如下,他需要在查找ID为sch开头的元素中分别查找出各自包含sub001的数量, 如:ID:sch002.sch033 DIv元素等等后面的数字是随机的,里面都会包含sub001元素,数量不一:一开始网友是想打算使用for循环来解决,无疑会中招:因为第一循环量大(因为你无法预计sch后的数字有多小位需要设定一个)造成运行损耗内存大,运行速度慢,而且查找到没有元素操作时会报错. 所以我介绍他使用^= Jquery的统配选择符,确实好使好用立马解决他的问题:解决

【00】伪类选择符-魔芋的理解

[00]魔芋的理解 nth-child(n)这样的带n的,n从1开始. n可以是表达式:n*3,n+3 可以是特殊字符串"odd","even" [02]empty 匹配没有任何子元素(包括text节点)的元素E. 注意:如果开始标签和结束标签间有空格或是换行,都是属于有元素的.(魔芋:所以不实用) [04]not(s) 匹配不含有s选择符的元素E. [05]first-child E:first-child E:first-child { sRules } 用法比

30个你必须记住的CSS选择符

30个你必须记住的CSS选择符 整理 本文摘自:http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/ 04 January 2014 号外号外:专注于移动端的fullPage.js来啦!!!快点我查看 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1

HTML标签、选择符、超链接以及SEO

常见标签: <div>块</div> img标签是个单标签 alt作用 图片加载失败 显示alt中内容 <img src="图片名字" alt="图片的名字"/> a标签详细介绍: a标签的链接实现: <a href = "链接" target="_blank">a标签 </a> 点击a标签 会转到相应链接下控制链接新打开一个页面用或者其他用target,还有self

JQuery——选择元素

一.$()工厂函数 在Jquery中无论哪种类型的选择符,都要从一个$()开始,在这个函数接受CSS选择符作为参数,返回包含页面对应元素的Jquery对象. 基本的选择符: 选择符 CSS中 Jquery中 说明 标签名   P{} $('P') 取得文档中所有的段落 ID #some-id{} $('#some-id')  取得文档中ID为some-id的一个元素   类      .some-class{}   $('.some-class')  取得文档中类为some-class的所有元素

javascript之DOM选择符

javascript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素.实际上jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementByTagName() Selectors API就是有W3C发起的一个标准,致力于让浏览器原生支持CSS查询. Selectors API 的核心两个方法:querySelector()和querySelectorAll().在兼容的浏览器中可以通过Document

CSS第二天总结 更多的选择符

CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起 个名字或者分类,这就是id和class属性.下面给出一个id为xxx,class为yyy的a链接: <a href="" id="xxx" class="yyy">链接</a> CSS代码: #xxx{color: red} /*用#选择id(井号)*/ .yyy{te