在前端开发中，我们经常需要通过JavaScript选择页面上的特定元素。特别是当你需要在一个div元素内部选择一个带有特定类名的子元素时，掌握几种常用的选择方法是非常必要的。...本文将结合实际业务场景，带大家了解如何使用JavaScript选择div内部带有特定类名的元素。 1....firstProductItem就是product-list下的第一个带有product-item类名的元素。...使用 document.getElementsByClassName getElementsByClassName 方法可以返回所有带有指定类名的元素集合。...结束 在实际开发中，选择正确的元素选择方法可以帮助我们更高效地操作DOM。
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...先看个例子，比如我们有个div它的样式类为'foo:bar'，当然我知道你一般不会这样写。当我们需要选择它的时候，就需要将其中的冒号进行转义，否则抛错。...理解这点后，可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的，我们需要一共使用四个反斜杠！才能正常工作。 ?
jQuery 选择器 选择器同意对元素组或单个元素进行操作。 jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。...在 HTML DOM 术语中：选择器同意对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...(“p”) 选取 元素。 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“[href]”) 选取全部带有 href 属性的元素。...如：(“ul li:first”)、(“div#intro .head”)） 选取当前 HTML 元素：$(this) 嵌套选择器 如：选取指定标签中的其他标签中的元素：$(标签名 *) （注意指定的标签中一定要有其他标签...提示： 依据实践，某些浏览器使用 * 的处理速度缓慢。 不要使用数字开头的 ID 名称！ 在某些浏览器中可能出问题。 不要使用数字开头的类名！在某些浏览器中可能出问题。
方法的4种不同调用方式： 参数是字符串表示的CSS选择器：$('.class')返回当前文档中匹配到的元素集。...第二个参数是可选的，值为一个元素或JQuery对象；这时返回的是特定元素的子元素中匹配到的元素集； 参数是Element、Document或Window对象，返回这些对象封装成的JQuery对象； 参数是...；map的返回值为新的包含回调函数所有返回值的JQuery对象； index() : 参数为一个元素或字符串(当做CSS选择器使用)，返回值为该元素在此JQuery对象中的索引值，找不到返回-1； is...： JQuery使用同一个方法来获取和设置属性，区别是参数的不同，类似于重载； setter(设置)时返回的是JQuery对象；getter(获取)时返回单个值(元素)；所以链式调用不能使用getter...，不存在就添加)：$('div').toggleClass('name1,name2'); 检测：$('div').hasClass('name');或 $('#di').is('name');只接受单个类名
视觉类(VISION):指描述页面显示特性的标签类别，如〈b〉、〈strong〉等。 分块类(BLOCK):指用于网页内容分块的标签类别，如〈table〉、〈tr〉等。...jQuery的DOM 使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素...使用选择器获取某个元素 使用jQuery对象的方法操作元素。...DOM转jQuery对象 jQuery 对象转换成 DOM 对象 使用 jQuery 中的 get() 方法，其语法结构为：get([index]) 如果get()方法不带参数，get()方法会返回所有匹配元素的...元素属性设置 设置单个属性： jQuery 对象.css(name,value); //其中name为样式名称，value为样式的值 同时设置多个属性： jQuery 对象.css({name:value
在 JQuery 中，for 循环通常用于遍历匹配到的元素集合，执行特定的操作。 理解 JQuery 的选择器 在开始 for 循环的奇妙之旅之前，我们需要先了解 JQuery 的选择器。...选择器是 JQuery 的基础，它允许我们精确地选取文档中的元素。以下是一些常见的 JQuery 选择器： 元素选择器： 通过元素的名称选取元素，例如 $('p') 选取所有段落元素。...类选择器： 通过元素的类名选取元素，例如 $('.myClass') 选取所有具有 “myClass” 类的元素。 了解了这些选择器后，我们可以更加灵活地定位我们需要操作的元素。...-- 具有 item 类的元素 --> 在这个例子中，我们首先通过类选择器 $(".item") 选取了具有 item...然后，我们使用 for 循环遍历了这些元素，并对每个元素执行了一些操作，比如添加类名和修改文字内容。 这是一个简单的示例，但展示了 for 循环在 JQuery 中的基本用法。
遍历基础在 JQuery 中，遍历主要通过选择器和遍历方法实现。首先，我们来看一下基础的选择器。1. 元素选择器元素选择器是最简单的一种选择器，通过元素的标签名选择对应的元素。...类选择器类选择器通过元素的类名来选择对应的元素。比如，选择所有具有 highlight 类的元素：在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。...>在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。...通过 prev() 方法选择了这些元素的前一个兄弟元素，并通过 next() 方法选择了这些元素的后一个兄弟元素，然后给它们添加了一个类名和文字内容。
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。...jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。...jQuery 中所有选择器都以美元符号开头：$() 元素 选择器 jQuery 元素选择器基于元素名选取元素。...:empty选择没有子元素或内容文字的元素，如：$("td:empty")) :has()选择包含至少一个匹配指定选择器的元素的元素，如：$("div:has(p)")) :parent选择至少有一个子节点...方法 描述 addClass() 向被选元素添加一个或多个类名 after() 在被选元素后插入内容 append() 在被选元素的结尾插入内容 appendTo() 在被选元素的结尾插入 HTML 元素
(…….); 作用 2：$(selector) 选择器 jQuery具有强大的选择器功能 ?...使用前的准备 ? JQ中常用的选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素，如div、input等 ?...3、类选择器 通过元素类名获取相关元素，eq（）方法获取元素，下标从0开始 ? 4、通用选择器 找到每一个元素 ? 5、分组选择器 找到匹配任意一个类的元素。 ?...四、属性选择器 $(“input[type=属性名]”)。除了type属性，name、value等也可以 ?...使用时直接将相关jquery文件放入JS目录下，在html代码中引入即可。
二、创建jQuery对象 创建jQuery对象最常见的方式是使用选择器。选择器可以是CSS选择器、ID选择器、类选择器等。CSS选择器 使用CSS选择器选择HTML元素，并将其包装成jQuery对象。...ID选择器 使用ID选择器选择具有特定ID的HTML元素，并将其包装成jQuery对象。...类选择器 使用类选择器选择具有特定类的HTML元素，并将其包装成jQuery对象。...var $myElement = $(".myClass");上述代码将选择所有类名为myClass的元素，并将它们包装成jQuery对象存储在$myElement变量中。...className = $myElement.prop("class"); // 获取元素的类名上述代码使用了prop()方法来获取选择的元素的标签名、ID属性值和类名。
selector是要选择的HTML元素，而method()则是要对选择的元素执行的方法。三、选择器 jQuery的选择器功能类似于CSS选择器，可以根据元素的ID、类名、标签名、属性等进行选择。...ID选择器 使用#符号后跟ID名称来选择具有特定ID的元素。$("#myElement").hide();上述代码将隐藏ID为myElement的元素。...类选择器 使用.符号后跟类名来选择具有特定类的元素。$(".myClass").css("color", "red");上述代码将将所有类名为myClass的元素文本颜色设置为红色。...元素选择器 使用元素名称来选择特定的HTML元素。$("p").hide();上述代码将隐藏所有标签的元素。属性选择器 使用方括号[]来选择具有特定属性的元素。...添加和删除类 使用addClass()方法可以向元素添加类，而removeClass()方法可以从元素中删除类。
Ajax 交互 选择器 符号$表示 jQuery 对象，$函数通常也被称为 jQuery 的工厂函数，jQuery 的操作基本上都以$( )开始，所有选择器都放在这个括号中，例如$("#title")将返回一个...jQuery 选择的 HTML 元素，在返回 jQuery 对象之后，就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器，通过元素标签名，元素 ID，Class 来查找...选择器 返回 示例 后代元素选择器 集合元素 $("div span") 选取 里的所有的 元素 子元素选择器 集合元素 $("div>span") 选取 元素下元素名是...选取 ID 为 item 的元素后面的所有 兄弟元素 过滤选择器，主要是通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号:开头...选取所有 元素中第 1 个 元素 :last 单个元素 $("div:last") 选取所有 元素中最后 1 个 元素 not(selector) 集合元素
注意：简写： $(function(){ //开始书写jQuery代码 }; 第三部分：jQuery选择器： 元素选择器：$("p") id选择器：$("#test") 类选择器：$(".test...例如:$('p').remove('.test1'); empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳） 4.获取/设置css类: addClass()：向被选元素中添加一个或多个类...（有参数设置值；无参数获取值）；css有参数：css("propertyname":"value")，建议属性名和属性值都加上引号；如果属性名不加引号，要使用驼峰标记法：如margin-left变为marginLeft...，具有相同的父元素） siblings()：返回被选元素的所有同胞（兄弟）元素；可选参数可以用来进行过滤：$('h2').siblings('p')：返回与h2具有相同父元素的p元素 next()：返回被选元素的下一个同胞元素...4.遍历--过滤 first()：返回被选元素的第一个元素 last()：返回被选元素的最后一个元素 eq()：返回被选元素中带有指定索引号的元素；索引号从0开始；如：$('p').eq(1)：返回第二个
基本选择器 层级选择器 基本过滤选择器 内容选择器 可见性选择器 属性选择器 子元素选择器 表单选择器 2.2.1 基本选择器 jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器...选择器 功能描述 示例 element 根据指定元素名匹配所有元素 $("li")选取所有的元素 .class 根据指定类名匹配所有元素 $(".bar")选取所有class为bar的元素 #id... 2.2.3 基本过滤选择器 基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。...语法 作用 说明 addClass(class) 追加样式 为每个匹配的元素追加指定的类名 removeClass(class) 移除样式 从所有匹配的元素中删除全部或者指定的类 toggleClass...若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。 2.8 练习作业 折叠菜单 编写网页，设置CSS完成折叠菜单的结构和样式设置。
class操作 添加样式类 //name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。...$(“div”).addClass(“one”); 移除样式类 //name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass...(“one”); 切换样式类 //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。...操作 设置单个属性 //第一个参数：需要设置的属性名 //第二个参数：对应的属性值 attr(name, value); //用法举例 $(“img”).attr(“title”,”哎哟，不错哦”);...prependTo //before //after 【案例：城市选择案例.html】 清空节点与删除节点 empty：清空指定节点的所有元素，自身保留(清理门户) $(“div”).empty();
jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。...选择器 用于筛选具有相似特征的元素 基本语法 1....标签选择器（元素选择器）：获得所有匹配标签名称的选择器 $(“HTML标签名”) ID选择器：获得所有与指定ID值匹配的元素 $(“#ID的属性值”) 类选择器：获得所有与指定类(class)相同的元素...”) 子选择器：会选择A标签下所有与B标签相一致的子辈元素（不包括子辈以外的元素） $(“A > B”) 属性选择器 属性名称选择器：只要包含指定属性名称都会被选择(A是标签名称) $(“A[属性名]”...) 属性选择器：选择所有包含对应属性，且属性值与规定相同的元素 $(“A[属性名=’属性值’]”) 复合属性选择器：包含多个属性选择器 $(“A[属性名1=’属性值1’][属性名2=’属性值2’]…
var div3=$(".three")[0]; console.log(div3.innerHTML); }) //单个元素的时候，直接是html(),代替了之前的....根据类样式的名，来获得元素集合 // var div3=document.getElementsByClassName("three")[0]; // alert(div3.innerHTML....first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3.标签选择器 $(“div”)...val()–>value size()–>length text()–>只出来当前元素下的文本，不会出来html标签的格式. css():设置当前元素的样式,语法：元素对象.css(“属性名”,“值”)...addClass():增加元素的样式,addClass(“样式名”) removeClass():移除元素的样式,removeClass(‘样式名’) 总结： 1.基本选择器，重点前3个；id 类样式
$('link[media='screen']').attr('href', 'alternative.css'); 如何限制选择范围（基于优化目的）： //尽可能使用标签名来作为类名的前缀， //这样...)").hide(); 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。...*包含了对这一has方法的支持。 //该方法找出某个元素是否包含了其他另一个元素类或是其他任何的你正在查找并要在其之上进行操作的东东。...– 栈中的当前循环索引 // meta – 有关选择器的元数据 // stack – 要循环的所有元素的栈 // 如果包含了当前元素就返回true // 如果不包含当前元素就返回false }...如何在jQuery中克隆一个元素： var cloned = $('#somediv').clone(); 在jQuery中如何测试某个元素是否可见 if($(element).is(':visible
该错误的出现意味着jQuery的文件未加载成功 console.log($btns); console.log($btns2); 2.1.2 属性及伪类选择器 使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素...选择器选择对应的jquery对象 //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法 //jquery对dom封装后 不能直接使用dom...5.4.1 on单事件绑定 通过on给元素绑定单个事件 var divNode = $('div')[0]; //需要指定要绑定的事件名，函数 $('button').on('click',function...针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例） 语法：$(已存在的父元素).on(事件名,子元素选择器,函数) //给删除标签添加点击事件 $('table').on(...，js中的操作多数以属性的形式存在 4.on的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择 }) ### 5.5 事件冒泡 事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中 ```js
Element元素 // var div2=document.getElementById("two"); // alert(div2.innerHTML); // //3.根据类样式的名....first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3....的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作 html属性操作：是对html文档中的属性进行读取，设置和移除操作。...分类：DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()，js。...HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" jQuery对JavaScript中的DOM
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
