基于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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
Javascript学习指南
Dec 01 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
json数据格式常见操作示例
Jun 13 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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 文章采集正则代码
2009/12/28 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript实现动态标签云
2015/10/16 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
JSONP基础知识详解
2017/03/19 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python中的默认参数详解
2015/06/24 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
论文答辩开场白大全
2015/05/27 职场文书
党员身份证明材料
2015/06/19 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android