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点赞功能实现代码 点个赞吧!
May 29 jQuery
JQuery实现图片轮播效果
May 08 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现雪花飘落效果
Aug 02 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多种序列化与反序列化的方法
2013/06/06 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python 函数基础知识汇总
2018/03/09 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
婚礼家长致辞
2015/07/27 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers