基于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 08 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 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判断网页是否gzip压缩
2013/06/25 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
Nike香港官网:Nike HK
2019/03/23 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
婚前协议书
2014/04/15 职场文书
学生实习证明范文
2014/09/28 职场文书
2014年库房工作总结
2014/11/26 职场文书
讲座通知范文
2015/04/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Python+tkinter实现高清图片保存
2022/03/13 Python