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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
司机岗位职责
2013/11/15 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
作风建设演讲稿
2014/05/23 职场文书
大学辅导员述职报告
2015/01/10 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书