基于JQuery 选择器使用说明介绍


Posted in Javascript onApril 18, 2013

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

jQuery 元素选择器:jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器 :jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

选择器实例

语法 描述
$(this) 当前 HTML 元素
$("p") 所有

元素

$("p.intro") 所有 class="intro" 的

元素

$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个
    的第一个
  • 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的
元素中的所有 class="head" 的元素

获取/设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
  • attr() - 设置事返回所选元素的属性值

上面的四个 jQuery 方法:text()、html()、val() 以及 attr(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
 return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText;
 });
});
Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 #Javascript
jQuery使用技巧简单汇总
Apr 18 #Javascript
document.documentElement的一些使用技巧
Apr 18 #Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 #Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 #Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
深入浅析Python中的迭代器
2019/06/04 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python实现不规则图形填充的思路
2020/02/02 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
挖掘机司机岗位职责
2014/02/12 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
教学改革实施方案
2014/03/31 职场文书
签约仪式策划方案
2014/06/02 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
超市周年庆活动方案
2014/08/16 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android