JQuery元素快速查找与操作


Posted in jQuery onApril 22, 2018

首先,我们来看看jquery中如何查找到想要的结点。

第一步:sizzle选择器

基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素,简单的说是基于css选择器,除此之外还有一些特定的选择器。

第二步:查询祖先

parent()

返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历

parents()

可以使用可选参数来过滤对父元素的搜索
返回被选元素的所有祖先元素,它一路向上直到文档的根元素

parentsUntil()

返回介于两个给定元素之间的所有祖先元素,下面是例子:

$(document).ready(function(){

  //会返回span开始到div为止的祖先元素
  
  $("span").parentsUntil("div");
  
});

第三步:查询子孙

children()

可以使用可选参数来过滤对子元素的搜索

返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历

find()

可以使用可选参数来过滤对元素的搜索

返回被选元素的后代元素,一路向下直到最后一个后代

第四步:查询同胞

siblings()

返回被选元素的所有同胞元素

next()

返回被选元素的下一个同胞元素

nextAll()

返回被选元素的之后的全部同胞元素

nextUntil()

返回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){

  //返回介于 <h2>与<h6>元素之间的所有同胞元素
  
  $("h2").nextUntil("h6");
  
});

prev()、prevAll() 和 prevUntil()

prev()、prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。

第五步:查询时添加过滤

first()

返回选择的元素中的首个元素

last()

返回选择的元素中的最后一个元素

eq()

返回被选元素中带有指定索引号的元素,这个很容易理解,举例就是:$(element[flag])和element.eq(flag)结果一样

filter()

对查询结果进行过滤,和下面not()类似,作用相反

not()

返回不匹配标准的所有元素

$(document).ready(function(){

  //返回不带有类名"target"的所有p元素
  
  $("p").not(".target");
  
});

元素找到以后,接着我们需要根据需求来对查找到的结点进行操作。

第六步:text()、html()、val()以及attr()

text()、html()、val()以及attr(),拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串

1.text() - 设置或返回所选元素的文本内容

2.html() - 设置或返回所选元素的内容(包括 HTML 标记)

3.val() - 设置或返回表单字段的值

4.attr() - 设置或返回属性值

$("#btn1").click(function(){

  $("#test1").text(function(i,origText){
  
    return "旧文本: " + origText + " 新文本: index: " + i;
    
  });
  
});

第七步:添加元素

append() - 在被选元素的内部结尾插入内容

prepend() - 在被选元素的内部开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

第八步:删除元素

remove()可接受一个参数,允许你对被删元素进行过滤,empty()不可以

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

//等同于$("p.target").remove();
$("p").remove(".target");

第九步:替换元素

replaceAll()和replaceWith()功能类似,但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步:class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步:css()方法

设置或返回被选元素的一个或多个样式属性

css("propertyname"); - 返回propertyname属性的值

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步:元素尺寸

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)

innerWidth() 方法返回元素的宽度(包括内边距)

innerHeight() 方法返回元素的高度(包括内边距)

outerWidth() 方法返回元素的宽度(包括内边距和边框)

outerHeight() 方法返回元素的高度(包括内边距和边框)

jQuery 相关文章推荐
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
You might like
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP里的单例类写法实例
2015/06/25 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
node.js +mongdb实现登录功能
2020/06/18 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python如何保存文本文件
2020/06/07 Python
英国网上花店:Bunches
2016/11/29 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
自我评价格式
2014/01/06 职场文书
童装店创业计划书
2014/01/09 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
员工安全生产责任书
2014/07/22 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
电工实训心得体会
2016/01/14 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers