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 21 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Jquery动态列功能完整实例
Aug 30 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
js查错流程归纳
2012/05/04 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
对python中的装包与解包实例详解
2019/08/24 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
教师节活动主持词
2014/04/02 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书