基于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下通过getList函数实现分页效果的代码
Sep 17 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
关于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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
重定向实现代码
2006/11/20 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python常见数据结构详解
2014/07/24 Python
python中执行shell的两种方法总结
2017/01/10 Python
详解python之配置日志的几种方式
2017/05/22 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
2014全国两会学习心得体会1000字
2014/03/10 职场文书
高中学生评语大全
2014/04/25 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
售后客服个人自我评价
2014/09/14 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
python基础之匿名函数详解
2021/04/21 Python