`

jQuery选择器及属性设置

阅读更多

最近用到了许多jQuery选择器相关,所以回顾总结下:

(一)

直接父级:.parent();方法返回被选元素的直接父元素
所有父级:.parents();  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素html
(二)
同级:.siblings() 方法返回被选元素的所有同胞元素
    例子:$("h2").siblings("p");  返回属于<h2>的同胞元素的所有<p>元素
所有同级:nextAll() 方法返回被选元素的所有跟随的同胞元素
区域同级:nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
(三)
直接子元素:children() 方法返回被选元素的所有直接子元素
所有子元素:find() 方法返回被选元素的后代元素,一路向下直到最后一个后代

(例子)

当前元素的上一个元素:$("").parent().prev().css("background","red")

当前元素的下一个元素:$("").parent().next().css("background","red")

当前元素父元素:$("").parent().css("background","red")

当前元素子元素:$("").children().css("background","red")

 

 

样式相关:增加样式.addClass();设置/改变样式:$(".logo").css("border","none")

 

属性与样式之.attr()与.removeAttr(),通过一定的触发事件来使一些元素上增加或者删除一些属性
例子:禁用与激活按钮

$("#btnSendCode").attr("disabled", "true");   //禁用
$("#btnSendCode").removeAttr("disabled");  //启用按钮,启用激活

.attr():

1、获取匹配元素的属性,例如:$("img").attr("src");
2、设置匹配元素的属性,例如:
                                单一属性的设置:$("img").attr("src","test.jpg");
                                 多个属性的设置:$("img").attr({ src: "test.jpg", alt: "Test Image" });
3、$("img").attr("title", function() { return this.src });

 

.removeAttr():

1.从每一个匹配的元素中删除相应的属性
          删除一个属性:$("img").removeAttr("src");
          删除多个属性:$("img").removeAttr("src alt");//img的src和alt都会被删除

 

2.平常的使用中我们还可以通过如下这种方法来进行删除:
           $("img").attr("src","");      

           $("img").attr({src:"",alt:""});
.removeAttr()和.attr()使用这两方法的区别在于页面html的结构不同
      removeAttr直接将这个属性删除,在页面中看到的就是这个结果<img>
      attr不会删除这个属性,只是将这个属性的值置为空,在页面中看到的就是<img src alt>,实际上和<img src="" alt=""> 的效果是一样的

 

分享到:
评论

相关推荐

    jQuery选择器全解.

    ### jQuery选择器全解 #### 一、引言 jQuery是一种快速、简洁的JavaScript库,其核心特性之一便是强大的选择器引擎。通过jQuery选择器,开发者能够轻松地定位和操作DOM(Document Object Model)元素,极大地提高...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jQuery选择器基础知识

    **jQuery选择器基础知识** jQuery是JavaScript的一个库,它极大地简化了DOM操作、事件处理和动画效果。其中,选择器是jQuery的核心功能之一,用于高效地选取DOM元素,从而实现对网页内容的控制和操作。本篇文章将...

    jquery 属性选择器的使用

    在 jQuery 中,属性选择器是用于根据元素的特定属性来选取元素的重要工具。本文将深入探讨如何利用属性选择器来提高你的前端开发效率。** ### 一、属性选择器的基本语法 jQuery 提供了多种属性选择器,每种都有其...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...

    jquery选择器入门详解小案例

    本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...

    经典的jQuery选择器应用例子

    本篇文章将深入探讨jQuery选择器的详细应用,通过一系列经典实例来帮助你更好地理解和运用这些选择器。 1. 基本选择器: - `$("#id")`:通过ID选取元素,例如`$("#myDiv")`会选择id为"myDiv"的元素。 - `$("....

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    Jquery实验室的选择器工具

    **jQuery选择器工具详解** jQuery库是JavaScript中最广泛使用的库之一,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery实验室的选择器工具”中,我们将深入探讨jQuery选择器的强大功能,它是...

    jQuery选择器上机练习题及答案.rar

    (24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...

    jquery4种选择器

    本文将深入探讨jQuery中的四种主要选择器:ID选择器、标签选择器、类选择器和属性选择器。这些选择器是jQuery高效地定位页面元素的基础,让我们逐一了解它们。 首先,ID选择器是通过CSS的`#`符号来指定一个元素的...

    jQuery选择器全集详解

    而jQuery选择器是jQuery的核心部分之一,用于选择页面元素,以便我们可以对它们进行操作。这些选择器可以分成多个类别,包括基本选择器、层次选择器、过滤选择器等,下面将详细介绍。 基本选择器包括id选择器、...

    基于jQuery选择器的整理集合

    首先,jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器(`#id`),类选择器(`.class`),元素选择器(`element`)和通配符选择器(`*`)。这些选择器...

    jquery颜色选择器设置文字颜色选择器和背景颜色选择器下载

    在网页设计中,jQuery颜色选择器是一个非常实用的工具,它可以帮助用户方便地选取和设置文字颜色以及背景颜色。jQuery库作为一个强大的JavaScript框架,简化了DOM操作,使得开发者能够更轻松地实现动态交互效果,...

    一个简单的jQuery时间选择器

    【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中,特别是涉及到用户输入时间的场景,如预订、会议安排等,拥有一个直观易用的时间选择器可以极大提升...

    css+jquery选择器大全

    1. 基本jQuery选择器:包括通过标签名、类名、ID以及属性选择元素,如`$("p")`、`$(".intro")`、`$("#firstname")`、`$("[href]")`。 2. 层次选择器:如`$("p div")`选择所有`&lt;p&gt;`元素内部的`&lt;div&gt;`元素。 3. 过滤...

Global site tag (gtag.js) - Google Analytics