基于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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jQuery插件开发全解析
Oct 10 Javascript
js控制input输入字符解析
Dec 27 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
利用js实现简易红绿灯
Oct 15 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
我的论坛源代码(六)
2006/10/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
事务机电主管工作职责
2014/02/25 职场文书
高中学生评语大全
2014/04/25 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android