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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
jQuery 技巧小结
2010/04/02 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
护士自我评价
2014/02/01 职场文书
《观舞记》教学反思
2014/04/16 职场文书
兽医医药专业求职信
2014/07/27 职场文书
2014年学习部工作总结
2014/11/12 职场文书
实习指导老师意见
2015/06/04 职场文书
工作年限证明范本
2015/06/15 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python