`
wsj123
  • 浏览: 155484 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JQuery获取html元素方法详解

阅读更多
JQuery获取html元素方法详解

1.1 JQuery选择器
语法:
        jquery(selector, [context]);
        selector参数,选择器。
        content参数,将selector选择器限定在context这个环境中。
        默认情况下,即不传第二个参数,选择器从文档根部对DOM进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。
实例:
$("div.foo").click(function() {  
    $("span", this).addClass("bar");  
}); 

        由于我们已经将 span 选择器限定到this这个环境中,只有被点击元素中的 span 会得到附加的class。
1.2 JQuery获取html的方法
1.2.1实例html代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实例</title>
</head>
<body>
<ul class="level-1">
  <li class="item-i fist-li">I</li>
  <li class="item-ii">
    II
    <ul class="level-2">
      <li class="item-a fist-li">A</li>
      <li class="item-b">B</li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<ul class="level-3">
  <li class="item-1 fist-li">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>
<ul class="level-4">
  <li class="item-one fist-li">1</li>
</ul>
<!--[if !IE]><!-->  
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
<!--<![endif]-->  
<!--[if lte IE 9]>  
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>  
<![endif]-->
</body>
</html>

1.2.2获取父级元素
1.2.2.1 parent([expr])方法

作用:获取一个包含着所有匹配元素的唯一父元素的元素集合。
实例:
<script>
  $(".fist-li").parent();
  $(".fist-li").parent(".level-2");
</script>

1.2.2.2 parents([expr])方法
作用:获取一个包含着所有匹配元素的祖先元素的元素集合(不限于父元素 )。
实例:
<script>
  $(".item-a").parents();
  $(".item-a").parents(".level-1");
</script>

1.2.2.3 closest([expr])方法
作用:从当前元素开始沿 DOM 树向上,获取匹配选择器的第一个祖先元素。
注意:
        closest方法会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jquery对象。
        closest方法是必须要传入一个选择器表达式参数,否则,就会返回一个空的jquery对象。

实例:
<script>
  $(".item-a").closest(".item-a");
  $(".item-a").closest(".level-1");
</script>

1.2.2.4扩展——closest与parents的区别
        前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找。
        前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。
        前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
1.2.3 获取同级元素
1.2.3.1 next([expr])方法

作用:获取指定元素的下一个同级元素。
实例:
<script>
  $(".item-a").next();
  // next方法不允许传入参数(可以传入查找元素的下一个同级元素的选择器,但没有意义),否则,就会返回一个空的jquery对象。
  $(".item-a").next(".item-b");
</script>

1.2.3.2 nextAll([expr])方法
作用:获取指定元素后边的所有同级元素。
实例:
<script>
  $(".item-a").nextAll();
  // nextAll方法允许传入参数,但传入的参数只能是指定元素后边所有同级元素中的某一元素的选择器,否则,就会返回一个空的jquery对象。
  $(".item-a").nextAll(".item-b");
</script>

1.2.3.3 prev()方法
作用:获取指定元素的上一个同级元素。
实例:
<script>
  $(".item-c").prev();
  //同next()方法
  $(".item-c").prev(".item-b");
</script>

1.2.3.4 prevAll()方法
作用:获取指定元素的前边所有的同级元素。
实例:
<script>
  $(".item-c").prevAll();
  //同nextAll()方法
  $(".item-c").prevAll(".item-b");
</script>

1.2.3.5 siblings()方法
作用:获取指定元素的兄弟姐妹节点,不分前后。
实例:
<script>
  $(".item-b").siblings();
  $(".item-b").siblings(".item-a");
</script>

1.2.3.6 andSelf()【addBack()】方法
作用:将之前匹配的元素加入到当前匹配的元素中。
注意:jQuery 1.2 新增该函数,但从1.8 开始被标记为已过时。从jQuery 1.8开始,请使用addBack()函数替代该函数。
实例:
<script>
  $(".item-a").nextAll().addBack();
</script>

1.2.4获取子元素
1.2.4.1 children()方法

作用:获取匹配元素集合中每个元素的所有子元素(仅儿子辈)。
实例:
<script>
  $(".level-1").children();
  $(".level-1").children(".item-ii");
</script>

1.2.4.2 find()方法
作用:获取匹配元素集合中每个元素的后代(只要符合,不管是儿子辈,孙子辈都可以)。
注意:只在后代中遍历,不包括自己。
实例:
<script>
  //选择器表达式对于find()方法是必需的参数。如果需要返回所有后代元素可以传递通配选择器“*”。
  $(".level-1").find("*");
  $(".level-1").find(".item-b");
</script>

1.2.4.3拓展——children()和find()的异同
相同点:
        两者都是用来获得element的子elements的。
        两者都不会返回text node。
不同点:
        前者获得的仅仅是元素一下级的子元素,即:immediate children;后者获得所有下级元素,即:descendants of these elements in the DOM tree 。
        前者的参数selector 是可选的,用来过滤子元素;后者的参数selector方法是必选的。
        后者事实上可以通过使用jQuery( selector, context )来实现,即$('li.item-ii').find('li')等同于$('li', 'li.item-ii')。
1.2.4.4 contents()方法
作用:返回下面的所有内容,包括节点和文本。
实例:
<script>
  $(".level-1").contents();
  $(".level-1").contents(".item-i");
</script>

1.2.4.5拓展——contents()和children()的区别
        两者最大的区别就在于前者包括文本,即使是空白文本,也会被作为一个 jQuery对象返回,而后者则只会返回节点 。
1.2.5查找元素
1.2.5.1 filter()方法

作用:从一系列匹配的元素中筛选想要的元素。
实例一:在一系列的匹配元素中,获得filter()选择器匹配的元素。
<script>
  $("ul").filter(".level-2");
</script>

实例二:从一系列的匹配元素中,获得通过function测试的元素。
<script>
  $('ul').filter(function(index){
    //参数index代表了匹配元素的索引,此索引是从0开始的。
    if(index==1 || index==2){ return true; }
  });
</script>

或者
<script>
  $('ul').filter(function(index) {
    return $("li", this).length == 1;
  });
</script>

1.2.5.2拓展——filter ()和find()的区别
        两者完全不一样。前者是从初始的jQuery对象集合中筛选出一部分,而后者的返回结果,不会有初始集合中的内容,比如$("p").find("span"),是从元素开始找,等同于$("p span")。
分享到:
评论
1 楼 a1952377854 2017-11-07  
挺好的挺好的挺好的挺好的挺好的挺好的挺好的挺好的挺好的

相关推荐

    jquery获取array

    ### jQuery 获取 Array 知识点详解 在网页开发过程中,我们经常会遇到需要处理表单数据的情况,特别是当页面中有多个同名的输入框时。jQuery 作为一种轻量级的 JavaScript 库,提供了丰富的功能来简化这些操作。...

    关于jquery克隆,给元素赋值详解

    在jQuery中,可以使用`val()`、`text()`或`html()`方法为输入元素、文本节点或HTML内容赋值。例如,给一个`&lt;input&gt;`元素赋值: ```javascript $("#myInput").val("新值"); ``` 给一个`&lt;p&gt;`元素设置文本内容: ```...

    用Jquery获取checkbox多个选项详解

    在本文中,我们将深入探讨如何使用jQuery来获取和操作HTML页面上的多个复选框(checkbox)选项。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。对于初学者来说,理解和掌握如何使用jQuery...

    jQuery取得iframe中元素的常用方法详解

    在网页开发中,有时我们需要操作或获取嵌套在`iframe`中的HTML元素,这在JavaScript和jQuery中都可以实现。本文将详细讲解如何使用jQuery来取得`iframe`中元素的方法。 首先,我们要明确一点:跨域的`iframe`是无法...

    基于JQuery的DOM元素操作技术详解

    具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、监听下拉框的变化并响应、元素显示和隐藏、获取元素的父节点并执行相应样式修改等多个方面的案例。...

    jquery Manipulation元素操作

    `.html()`方法用于获取或设置元素的HTML内容,`.text()`则处理纯文本内容。`.append()`、`.prepend()`、`.after()`和`.before()`允许我们在现有元素后、前或者围绕元素插入新的内容。`.remove()`和`.empty()`则分别...

    js与jQuery 获取父窗、子窗的iframe.docx

    ### JavaScript与jQuery获取父窗口与子窗口中的iframe详解 #### 一、引言 在Web开发过程中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在网页中嵌入另一个HTML文档。它允许开发者在一个页面中展示多个...

    JQuery获取table一列值

    ### JQuery 获取 Table 一列值的方法详解 在 Web 开发中,经常需要处理表格数据,尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格(`&lt;table&gt;`)中某一列的所有值。下面将详细介绍...

    attacklab-14-jquery获取和设置标签内容.ev4.rar

    《jQuery获取和设置标签内容详解》 在网页开发中,jQuery作为一个强大的JavaScript库,极大地简化了DOM操作,包括获取和设置HTML元素的标签内容。在本篇内容中,我们将深入探讨jQuery如何帮助开发者高效地处理页面...

    Jquery常用方法.txt

    ### Jquery常用方法详解 #### 属性操作 (Attribute) 1. **添加样式**: `$("p").addClass(css中定义的样式类型);` - **描述**:这个方法用于给指定的`&lt;p&gt;`元素添加一个已在CSS中定义好的类名。 - **应用场景**:...

    jquery 常用方法集合(没有例子,只是方法名)

    ### jQuery常用方法详解 #### 一、显示与隐藏操作 在网页开发中,元素的显示与隐藏是非常常见的需求,jQuery提供了简洁的方法来实现这一功能。 - **hide()**:此方法用于隐藏匹配到的元素。它接受三个参数: - `...

    JQuery框架元素的属性与样式

    《JQuery框架元素的属性与样式详解》 ...通过`$.each()`函数和`attr()`方法,我们可以轻松实现对HTML元素的属性进行批量修改和管理,而无需深入JavaScript的底层DOM操作,这正是JQuery的魅力所在。

    jQuery API 详解 中文版

    $.append()、$.prepend()等方法用于在DOM结构中插入元素,而$.attr()和$.html()则分别用于处理元素的属性和HTML内容。 **第三部分:CSS(样式)** jQuery提供了便捷的方式来操作CSS样式,如$.css()方法可以动态改变...

    jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

    jQuery提供了丰富的选择器,如ID选择器("#id")、类选择器(".class")、元素选择器("tag")等,用于快速定位HTML元素。此外,还可以使用CSS表达式、属性选择器等进行复杂的选择。jQuery的链式操作是其一大特色,如`$("#...

    jQuery碎纸屑元素动画特效.zip

    《jQuery碎纸屑元素动画特效实现详解》 在网页设计中,动态效果的运用能够极大地提升用户体验,使得网站更具吸引力。"jQuery碎纸屑元素动画特效"就是一种独特且有趣的视觉设计,它模拟了纸片飘散的效果,为网页增添...

    jQueryMobile-HTML5模板

    **jQuery Mobile HTML5模板详解** jQuery Mobile是一款基于HTML5的前端开发框架,专门设计用于构建响应式、触摸友好的移动Web应用。它充分利用了HTML5的特性,为开发者提供了丰富的组件和交互效果,使得在手机和...

    Jquery方法大全

    ### Jquery方法大全详解 #### 一、Attribute(属性操作) **1.1 addClass** ```javascript $("p").addClass(css中定义的样式类型); ``` - **功能**:为匹配到的元素添加一个或多个类。 - **参数**:接受一个或多个...

    jQuery获取复选框被选中数量及判断选择值的方法详解

    标题中提到的知识点主要是使用jQuery库操作HTML复选框元素以获取被选中的数量以及获取选中值的方法。而描述中强调了通过实例分析这些操作技巧,具有很高的实用价值。标签中列出了“jQuery 获取 复选框 选中数量 判断...

Global site tag (gtag.js) - Google Analytics