基于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图片预加载 等比缩放实现代码
Oct 04 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
教师自荐信
2013/12/10 职场文书
优秀经理获奖感言
2014/03/04 职场文书
《菜园里》教学反思
2014/04/17 职场文书
师德师风承诺书
2014/05/23 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
大学生自荐书范文
2015/03/05 职场文书
办公用品管理制度
2015/08/04 职场文书
学习委员竞选稿
2015/11/20 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python