JQUERY选择器(JS) - 360文档中心

JQUERY常用方法大全

JQUERY常用方法大全JQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX交互等操作。

下面是JQuery中常用的一些方法：1.选择器方法：- `$(this)`：选择当前元素。

- `$(document)`：选择整个文档。

- `$(window)`：选择浏览器窗口。

2.事件方法：- `$(selector).click(function)`：给元素绑定点击事件。

- `$(selector).dblclick(function)`：给元素绑定双击事件。

- `$(selector).mouseenter(function)`：给元素绑定鼠标进入事件。

- `$(selector).mouseleave(function)`：给元素绑定鼠标离开事件。

- `$(selector).keydown(function)`：给元素绑定键盘按下事件。

- `$(selector).keyup(function)`：给元素绑定键盘松开事件。

3.DOM操作方法：- `$(selector).html(content)`：设置元素的HTML内容。

- `$(selector).text(content)`：设置元素的文本内容。

- `$(selector).val(value)`：设置或获取输入框的值。

- `$(selector).append(content)`：在元素内部的结尾插入内容。

- `$(selector).prepend(content)`：在元素内部的开头插入内容。

- `$(selector).after(content)`：在元素的后面插入内容。

- `$(selector).before(content)`：在元素的前面插入内容。

- `$(selector).remove(`：删除元素。

4.属性和样式方法：- `$(selector).attr(attributeName)`：获取元素的属性值。

jQuery选择器用法介绍

jQuery选择器⽤法介绍⽬录⼀、jQuery选择器⼆、基本选择器三、层次选择器四、属性选择器五、过滤选择器1、基本过滤选择器2、可见性过滤选择器3、内容过滤器六、表单选择器七、补充1、特殊符号的转义2、选择器中的空格jQuery选择器类似于CSS选择器，⽤来选取⽹页中的元素。

例如：$("h3").css("background-color","red");说明：获取并设置⽹页中所有<h3>元素的背景⾊。

“h3”为选择器语法，必须放在$()中。

$("h3")返回jQuery对象。

⼀、jQuery选择器jQuery选择器功能强⼤，种类也很多，分类如下：1、类CSS选择器基本选择器层次选择器属性选择器2、过滤选择器基本过滤选择器可见性过滤选择器3、表单选择器4、内容过滤器⼆、基本选择器基本选择器语法如下图所⽰：⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery基本选择器⽰例</title><style>#box{background-color: #ffffff;border: 2px solid #000000;padding: 5px;}</style><script src="jquery-3.3.1.js"></script><script>$(function(){// id选择器$("#btn").click(function(){// 标签选择器选择h3标签并将其添加背景颜⾊$("h3").css("background-color","red");// 类选择器选取并设置所有class为title的元素的背景颜⾊$(".title").css("background-color","#09F");// id选择器选取并设置id为box的元素的背景颜⾊$("#box").css("background-color","#09F");// 并集选择器相当于css中的群组选择器选取并设置所有的h2、dt、class为title//的元素的背景⾊$("h2,dt,.title").css("background-color","#09A");// 交集选择器等同于CSS中的指定标签选择器选取并设置class为title的h3标签的背景⾊$("h3.title").css("background-color","yellow");// 全局选择器改变所有元素的字体颜⾊$("*").css("color","blue");});});</script></head><body><input type="button" id="btn" value="显⽰效果" /><div id="box" style="margin-top:10px;">id为box的div<h2 class="title">class为title的h2标签</h2><h3 class="title">class为title的h3标签</h3><h3>热门排⾏</h3><dl><dt><img src="qq.jpg" width="391" height="220" alt="⽃地主" /></dt><dd class="title">⽃地主</dd><dd>休闲游戏</dd><dd>QQ⽃地主是国内同时在线⼈数最多的棋牌游戏......</dd></dl></div></body></html>效果：三、层次选择器层次选择器通过DOM元素之间的层次关系来获取元素，语法如下：请看下⾯的⽰例需求说明：点击标题，使⽤层次选择器选择不同的元素使得其背景⾊为蓝⾊，如下图所⽰：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>层次选择器演⽰⽰例</title><style>*{margin: 0px;padding: 0px;line-height: 30px;}body{margin: 10px;}#menu{border: 2px solid #0033cc;padding: 10px;}a{text-decoration: none;margin-right: 5px;}span{font-weight: bold;padding: 3px;}h2{margin: 10px;cursor: pointer;/*⿏标为⼿状*/}</style><script src="jquery-3.3.1.js"></script><script>$(function(){// 点击h2标题时改变背景⾊$("h2").click(function(){// 后代选择器获取并设置#menu下的span元素的背景⾊$("#menu span").css("background-color","blue");// ⼦选择器获取并设置#travel下的a元素的背景⾊$("#travel>a").css("background-color","red");// 相邻选择器只会选择第⼀个相邻的元素//获取并设置#ticket下的第⼀个a元素的背景⾊$("#ticket+a").css("background-color","red");// 同辈选择器会选择所有的元素//获取并设置#rest下的所有a元素的背景⾊$("#rest~a").css("background-color","yellow");});});</script></head><body><div id="menu"><h2 title="点击查看效果">全部旅游产品分类</h2><dl><dt>北京周边旅游<span>特价</span></dt><dd id="travel"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" </dd></dl><dl><dt>景点门票</dt><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd></dl><span>更多分类</span></div></body></html>效果：四、属性选择器属性选择器通过HTML元素的属性来选择元素。

jquery用法

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。

以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。

jQuerySelector选择器小结

jQuerySelector选择器⼩结//jQuery 选择器 $//$(expression,[context]) return jQuery//Unit One//expression 之 CSS 定义符就是以CSS语法表⽰所要选择的元素// $("*"); // 表⽰页⾯所有元素标签// $("th, td") // 表⽰所有<th><td>元素标签// $("a") // 表⽰所有<a>元素标签// $("div#onlydiv"); // 表⽰CSS选择中id=onlyidv的元素 $("#ID")为全⽂档匹配// $("#rating"); // 表⽰id=rating的元素// $("#orderedlist > li"); // 表⽰id=orderedlist 所有⼦元素,但不包括⼦元素下的⼦元素// $("#orderedlist li:last"); // 表⽰id=orderedlist 中li最后⼀个元素// $("#orderedlist li:first"); // 表⽰id=orderedlist 中li第⼀个元素// $("#orderedlist li:nth- child(0)"); //表⽰id=orderedlist 中li第(N)个元素 n为数组下标// $("button:only-child"); //表⽰ css选择中的它为⽗容器唯⼀的元素// $(".stuff:empty"); // 表⽰css选择中的空元素// $(".buttons:enabled"); // 表⽰css选择中的正常启⽤的元素// $(".buttons:disabled"); // 表⽰css选择中的⾮启⽤元素// $("input:checked"); // 表⽰css选择中的选中的元素// $("button:not(.not)"); // 表⽰css选择中的去除not()中的元素// $("button.not"); // 表⽰css选择中的class=not的元素 $(".CLSS")为全⽂档匹配// $("#orderedlist2 li"); // 表⽰id=orderedlist 所有⼦元素且包括所有⼦元素的⼦元素// //alert($("#orderedlist ~ li").length);// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素//expression 之根据元素属性选择// alert($("button[@class]").length); // 表⽰有class属性的元素// alert($("button[@class=not").length); // 表⽰有class属性且值等于not的元素// alert($('button[@class^=not').length); // 表⽰有class属性且值开头匹配not的元素// alert($('button[@class$=not').length); // 表⽰有class属性且值结尾匹配not的元素// alert($('button[@class*=not').length); // 表⽰有class属性且值中匹配not的元素//expression 之 XPATH 过滤器 XPATH语法来表⽰需要选择的页⾯元素//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) {//// $(this).html( $(this).html() + " BAM! " + i );// $(this).mouseover(function(){// $(this).css("color","red");// });// $(this).mouseout(function(){// $(this).css("color","#000");// });// });//查找ol标签且属性 id=orderedlist的所有元素,这⾥有两种写法//ol[@id='orderedlist'] 定位⽗元素直接⽤each 迭代//ol[@id='orderedlist']/* 所有⽗元素下的⼦元素使⽤find('child- element').each()迭代//Unit two///$( html, [ownerDocument]) return jQuery//这个函数允许传⼊html元素⽂本,构造器会产⽣这个HTML⽂本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页⾯上存在的//$('<p>hello</p>').appendTo("h2"); //⽣成⼀个标记⽂本并追加到页⾯h2标签内//也可以将原本页⾯元素取出追加//$("input",this).appendTo("h2"); //注意,这⾥取出的页⾯元素,是移动!⽽不是复制///$(elements) return jQuery//这个函数允许直接传⼊DOM//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM⽂档//$(callback) return jQuery//以下是selector⼀些说明/*基础：#id：根据对象的id属性获取对象。

jq常用方法

jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。

在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。

1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。

- $(".class")：根据class选择元素。

- $("tag")：根据标签名选择元素。

- $("element").find(selector)：在指定元素中查找符合条件的元素。

2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有：- $(selector).click(function(){})：点击元素触发事件。

- $(selector).mouseover(function(){})：鼠标移上元素触发事件。

- $(selector).submit(function(){})：表单提交触发事件。

- $(selector).focus(function(){})：元素获得焦点触发事件。

3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。

- $(selector).text()：获取或设置元素的文本内容。

- $(selector).attr()：获取或设置元素的属性。

- $(selector).addClass()：为元素添加class。

- $(selector).remove()：删除指定元素。

4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。

菜鸟教程jquery语法

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。

以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。

以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。

jQuery中选择器的基础使用教程

jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，<div class="one">  <p>two_1</p>  <p>two_2</p>  <p>two_2</p></div>我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){    alert('a');});这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。

jQuery选择器和遍历的总结

jQuery选择器和遍历的总结$('*'):全部元素$(this):选中这个元素，this永远指的都是调⽤函数的那个对象$('#intro'):id为intro的元素$('.intro'):class为intro的元素$('li:first'):所有li⾥的第⼀个$('li:last'):所有li⾥的最后⼀个$('li:first-child'):某个⽗元素⾥的第⼀个⼦元素，同时得是li元素$('ul li:first'):第⼀个ul⾥的第⼀个li$('ul li:first-child'):每个ul⾥的第⼀个⼦元素，同时得是li元素$('footer .item:last-of-type'):footer的后代元素，类名是item，是其兄弟元素中的最后⼀个(元素种类不⼀致时每种元素都会出⼀个)$('ul li:nth-child(n)'):每个ul⾥的第n个⼦元素并且同时得是li元素，n从1开始$('ul li:nth-child(n+4)'):每个ul⾥的第4个⼦元素后⾯的元素并且同时得是li元素，包括第4个⼦元素，n从0开始$('ul li:nth-child(-n+4)'):每个ul⾥的第1，2，3，4个⼦元素并且同时得是li元素，包括第4个⼦元素，n从0开始$('ul li:nth-child(3n+1)'):隔⼆取⼀$('ul li:nth-last-child(n)'):倒数第n个，n从1开始$('ul li:nth-of-type(2)'):每个ul⾥的li元素⾥的第⼆个，括号⾥的数字从1开始$('p.intro'):intro类中的p元素$('div>span'):div的直接⼦元素⾥的span$('div span'):div的后代⼦元素⾥的span$('.intro+'):每个类名为intro的元素的下⼀个兄弟元素$('div~p'): div后⾯的兄弟元素⾥的所有p元素$('li:even'):索引值是偶数的li，注意！索引值从0开始$('li:odd'):索引值是奇数的li$('li:lt(3)'):索引值⼩于3的li$('li:gt(3)'):索引值⼤于3的li$('li:eq(index)'):按索引值index选中元素，index从0开始$('ul:parent'):是⽗元素的ul$('div:has(span)'):⾥⾯有span元素的div$('div:has(p，span，li)'):⾥⾯同时有p，span和li的div$(':animated'):当前所有动画元素$(':button'):button元素和type='button'的input元素$('[id]'):有id属性的元素$('[id="jQuery"]'):有id属性且属性值等于jQuery的元素。

js调用jquery方法

js调用jquery方法
JavaScript可以调用jQuery方法来实现一些功能，下面介绍一些常见的方法：
1. 选择器：使用jQuery的选择器可以方便地获取HTML元素，例如：$('p')表示选择所有的段落元素。

2. 事件绑定：使用jQuery的on()方法可以绑定事件，例如：$('p').on('click', function(){})表示绑定点击事件。

3. 隐藏和显示元素：使用jQuery的hide()和show()方法可以隐藏和显示HTML元素，例如：$('p').hide()表示将所有段落元素隐藏。

4. 修改样式：使用jQuery的css()方法可以修改元素的样式，例如：$('p').css('color', 'red')表示将所有段落元素的颜色修改为红色。

5. 属性操作：使用jQuery的attr()、prop()和val()方法可以操作元素的属性，例如：$('input').val()表示获取所有输入框的值。

6. 动画效果：使用jQuery的动画效果可以让元素呈现出平滑的动态效果，例如：$('p').slideDown()表示让所有段落元素向下滑动。

7. Ajax请求：使用jQuery的ajax()方法可以发送异步请求，例如：$.ajax({url: 'test.php', success: function(result){}})表示发送一个请求到test.php并在请求成功后执行回调函数。

总之，使用jQuery可以方便地操作HTML元素和发送Ajax请求，提高开发效率。

js重写jquery中常见方法

js重写jquery中常见方法JavaScript是一门动态脚本语言，它支持面向对象的编程风格，并且可以在客户端和服务器端运行。

而jQuery是一个轻量级的JavaScript 库，提供了一系列的简化和增强的API，使得JavaScript在网页开发中更容易、更简洁。

虽然jQuery提供了很多强大的功能和方法，但是我们仍然可以使用纯JavaScript来实现类似的功能。

下面是对一些常见的jQuery方法进行用JavaScript重写的示例。

1.选择器方法：jQuery: `$('selector')`JavaScript:```document.querySelectorAll('selector')//或者document.querySelector('selector')```2.添加类方法：jQuery: `$('selector').addClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.add('class-name');});```3.移除类方法：jQuery: `$('selector').removeClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.remove('class-name');});```4.切换类方法：jQuery: `$('selector').toggleClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.toggle('class-name');});```5.获取属性值方法：jQuery: `$('selector').attr('attribute-name')`JavaScript:```document.querySelector('selector').getAttribute('attribute-name');```6.设置属性值方法：jQuery: `$('selector').attr('attribute-name', 'value')`JavaScript:```document.querySelector('selector').setAttribute('attribute-name', 'value');```7.显示元素方法：jQuery: `$('selector').show(`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.style.display = '';});```8.隐藏元素方法：jQuery: `$('selector').hide(`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.style.display = 'none';});```9.获取文本内容方法：jQuery: `$('selector').text(`JavaScript:```document.querySelector('selector').textContent;```10.设置文本内容方法：jQuery: `$('selector').text('content')`JavaScript:```document.querySelector('selector').textContent = 'content';```这些示例展示了如何使用JavaScript来重写一些常见的jQuery方法。

jquery实现时间选择器

jquery实现时间选择器本⽂实例为⼤家分享了jquery实现时间选择器的具体代码，供⼤家参考，具体内容如下效果图：代码：<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="flexible" content="initial-dpr=2" /><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="author" content="bright2017" /><title>时间选择器</title><style type="text/css">ul,li{list-style: none;}div{box-sizing: border-box;}/* 遮罩层 */.hidden_view {width: 100%;background: #000000;z-index: 9;display: none;}.flex{display: flex;}.billing_cent_time {width: 100%;position: fixed;left: 0;top: 0;z-index: 99;display: none;}.billing_cent_data {width: 100%;height: 100%;justify-content: center;align-items: center;}.billing_select {width: 230px;height: 230px;background: #FFFFFF;position: relative;border-radius: 3px;}.billing_select_top>div {text-align: center;font-size: 15px;height: 55px;line-height: 55px;}.billing_time {width: 100%;justify-content: center;align-items: center;font-size: 15px;padding: 0 20px;}.billing_time>div {width: calc((100% - 30px)/3);text-align: center;font-weight: bold;}.billing_select_center_new>ul {width: calc((100% - 30px)/3);height: 100%;overflow: auto;padding: 47px 0;box-sizing: border-box;}.billing_select_center_new>ul>li {width: 100%;height: 47px;line-height: 47px;font-size: 15px;text-align: center;opacity: .5;}.billing_time>div:nth-child(2), .billing_select_center_new>ul:nth-child(2) { margin: 0 15px;}.billing_select_center {width: 100%;height: 141px;padding: 0 20px;overflow: hidden;position: relative;}.billing_select_center_new {width: 100%;}.billing_select_bot {width: 100%;text-align: center;height: 45px;line-height: 45px;background: #EEEEEE;text-align: center;position: absolute;left: 0;bottom: 0;z-index: 3;border-radius: 3px;}.billing_select_center>ul {width: 100%;height: 100%;overflow: auto;padding: 47px 0;position: absolute;left: 0;top: 0;z-index: 3;}.billing_select_center>ul>li {width: 100%;height: 47px;line-height: 47px;font-size: 0.4rem;text-align: center;opacity: .5;}.billing_select_border {width: calc(100% - 40px);left: 20px;height: 1px;position: absolute;top: 47px;background-color: #F2F2F2;}.billing_select_border2 {width: calc(100% - 40px);left: 20px;height: 1px;position: absolute;top: 94px;background-color: #F2F2F2;}.billing_opacity {opacity: 1 !important;}.end_time{width: 100px;height: 40px;line-height: 40px;border-radius: 5px; text-align: center;margin: 50px auto;font-size: 17px;}.time_val{text-align: center;font-size: 17px;}</style></head><body><div class="end_time">选择时间</div><div class="time_val"></div><div class="hidden_view"></div><div class="billing_cent_time"><div class="billing_cent_data flex"><div class="flex billing_time"><div>年</div><div>⽉</div><div>⽇</div></div><div class="billing_select_center"><div class="billing_select_center_new flex"><ul class="billing_time_one"><li class="billing_opacity">2020</li><li>2021</li><li>2022</li><li>2023</li><li>2024</li><li>2025</li><li>2026</li><li>2027</li><li>2028</li><li>2029</li><li>2030</li><li>2031</li><li>2032</li><li>2033</li><li>2034</li><li>2035</li><li>2036</li><li>2037</li><li>2038</li><li>2039</li><li>2040</li><li>2041</li><li>2042</li><li>2043</li><li>2044</li><li>2045</li><li>2046</li><li>2047</li><li>2048</li><li>2049</li><li>2050</li></ul><ul class="billing_time_two"><li class="billing_opacity">01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul><ul class="billing_time_three"></ul></div><div class="billing_select_border"></div><div class="billing_select_border2"></div></div><div class="billing_select_bot">确定</div></div></div></div><script src="js/jq.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">$(function() {var heg = $(window).height();$(".hidden_view").height(heg);$(".billing_cent_time").height(heg);// 监听滚动事件// 年份const $ScrollWrap = $(".billing_time_one");// ⽉份const $ScrollWrap_month = $(".billing_time_two");// 天const $ScrollWrap_day = $(".billing_time_three");// 监听滚动停⽌let t1 = 0;let t2 = 0;let timer = null; // 定时器let t3 = 0;let t4 = 0;let timer2 = null; // 定时器let t5 = 0;let t6 = 0;let timer3 = null; // 定时器// 年份滚动$ScrollWrap.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap.on("scroll", function() {// 滚动clearTimeout(timer)timer = setTimeout(isScrollEnd, 100)t1 = $ScrollWrap.scrollTop()})function isScrollEnd() {t2 = $ScrollWrap.scrollTop();if (t2 == t1) {// 滚动停⽌clearTimeout(timer)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_one>li").length;for (var k = 0; k < leng; k++) {var top_leng = $(".billing_time_one").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim(); $(".billing_time_one").children("li").removeClass("billing_opacity");$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");// ⽉份滚动归0$(".billing_time_two").scrollTop(0);$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_one").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim(); $(".billing_time_one").children("li").removeClass("billing_opacity");$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");// ⽉份滚动归0$(".billing_time_two").scrollTop(0);$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_one").scrollTop(scrool_heg);}}}}}// ⽉份滚动$ScrollWrap_month.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap_month.on("scroll", function() {// 滚动clearTimeout(timer2)timer2 = setTimeout(isScrollEnd2, 100)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_two>li").length;for (var k = 0; k < leng; k++) {var top_txt = $(".billing_time_two").children("li").eq(k).text().trim();var top_leng = $(".billing_time_two").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();$(".billing_time_two").children("li").removeClass("billing_opacity");$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");// 1 3 5 7 8 10 12 ⽉是31天// 2⽉是28天// 4 6 9 11 ⽉搜30天$(".billing_time_three").children("li").remove();if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt == 08 || top_txt == 10 || top_txt == 12) {day31();}if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {day30();}if (top_txt == 02) {day28();}$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_two").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();$(".billing_time_two").children("li").removeClass("billing_opacity");$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");// 1 3 5 7 8 10 12 ⽉是31天// 2⽉是28天// 4 6 9 11 ⽉搜30天$(".billing_time_three").children("li").remove();if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt ==08 ||top_txt == 10 || top_txt == 12) {day31();}if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {day30();}if (top_txt == 02) {day28();}$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_two").scrollTop(scrool_heg);}}}}}// 天滚动$ScrollWrap_day.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap_day.on("scroll", function() {// 滚动clearTimeout(timer3)timer3 = setTimeout(isScrollEnd3, 100)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_three>li").length;for (var k = 0; k < leng; k++) {var top_leng = $(".billing_time_three").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim(); $(".billing_time_three").children("li").removeClass("billing_opacity");$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;console.log("0000000", scrool_heg)$(".billing_time_three").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim(); $(".billing_time_three").children("li").removeClass("billing_opacity");$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_three").scrollTop(scrool_heg);}}}}}// 显⽰$(".end_time").click(function() {$(".hidden_view").show();$(".billing_cent_time").show();});// 时间默认加载31天day31();function day28() {for (var k = 1; k <= 28; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 28) {$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");}}function day30() {for (var k = 1; k <= 30; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 30) {function day31() {for (var k = 1; k <= 31; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 31) {$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");}}// 确定$(".billing_select_bot").click(function() {console.log(scroll_year_index, "年~", scroll_month_index, '⽉~', scroll_day_index)var tim_cent = scroll_year_index + "-" + scroll_month_index + '-' + scroll_day_index;$(".hidden_view").hide();$(".billing_cent_time").hide();$(".time_val").text(tim_cent);});});</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery操作select下拉框的多种方法(选中取值赋值等)精品

jquery操作select下拉框的多种方法（选中取值赋值等）精品jQuery是一个非常强大的JavaScript库，它提供了很多方便的方法来操作HTML元素，包括select下拉框。

下面我将介绍几种常用的方法来操作select下拉框，包括选中选项、取值和赋值等。

1.选中选项使用jQuery可以很方便地选中select下拉框的选项。

下面是几种常用的方法：- 使用`val(`方法选中指定值的选项：```javascript$("#select").val("option-value");```其中`#select`是select元素的ID，`option-value`是需要选中的选项的值。

- 使用`prop(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").prop("selected", true);$("#select option:contains('option-text')").prop("selected", true);```这两种方法都是根据选项的值或文本来选中选项。

第一种方法中`option-value`是需要选中的选项的值，第二种方法中`option-text`是需要选中的选项的文本。

- 使用`attr(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").attr("selected", "selected");$("#select option:contains('option-text')").attr("selected", "selected");```这两种方法和前面的方法类似，只是使用的是`attr(`方法来设置`selected`属性。

jq 获取当前元素和获取下个元素的方法-概述说明以及解释

jq 获取当前元素和获取下个元素的方法-概述说明以及解释1.引言1.1 概述概述部分将引入本文的主题，即介绍jq获取当前元素和获取下个元素的方法。

jq是一款流行的JavaScript库，它简化了操作HTML元素和处理数据的过程，使得开发者能够更轻松地操作和处理DOM元素。

在网页开发中，我们经常需要根据用户的操作或者特定的需求获取当前元素或下一个元素，以便进行相应的处理或操作。

jq提供了一系列的方法，可以方便地获取当前元素和获取下一个元素，极大地简化了我们在开发过程中的工作量。

本文将介绍jq获取当前元素的方法和获取下一个元素的方法，并给出一些实际的示例和应用场景。

通过本文的学习，读者将对jq的这些方法有更深入的了解，能够更加灵活和高效地处理和操作HTML元素。

通过本文的学习，读者将了解到：- jq是什么，以及为什么使用jq来操作HTML元素和处理数据- jq获取当前元素的方法，包括基本的选择器方法和遍历方法- jq获取下一个元素的方法，包括基于兄弟关系和位置的方法- 实际应用场景和示例，帮助读者更好地理解和掌握这些方法- 总结和结论，对本文的内容进行回顾和总结在接下来的章节中，我们将详细介绍jq获取当前元素和获取下一个元素的方法。

首先，我们将从基本的选择器方法和遍历方法开始，了解如何获取当前元素。

然后，我们将介绍获取下一个元素的方法，包括基于兄弟关系和位置的方法。

最后，我们将给出一些实际的示例和应用场景，帮助读者更好地理解和应用这些方法。

让我们开始吧！1.2 文章结构文章主要分为三个部分：引言、正文和结论。

引言部分介绍了本文的概要、结构和目的。

主要是为读者提供一个全面的了解，使读者对本文的内容和目标有一个清晰的认知。

正文部分是本文的核心，主要讲述了两个方面的内容，分别是jq 获取当前元素的方法和jq 获取下一个元素的方法。

在这部分中，将详细介绍这两个方法的具体使用，包括语法、参数、示例等。

同时，会通过实际案例和解析来说明这些方法的实际应用场景和使用技巧，以便读者能够更好地理解和掌握这些方法。

jquery基本语法

jquery基本语法jQuery是一个广泛使用的JavaScript库，用于简化JavaScript编程。

以下是jQuery的基本语法：选择器：元素选择器：$("element")，例如：$("p") 选中所有<p> 标签元素。

ID选择器：$("#id")，例如：$("#myId") 选中具有id为“myId”的元素。

类选择器：$(".class")，例如：$(".myClass") 选中具有class为“myClass”的元素。

层级选择器、属性选择器、过滤选择器等更高级的选择器用法可以参考jQuery文档。

事件处理：使用on()方法来绑定事件处理程序：$("element").on("event", function() { ... });例如：$("button").on("click", function() { ... }); 绑定点击事件处理程序。

操作元素：获取元素内容：text()、html()、val()等方法。

示例：$("p").text() 获取第一个<p> 标签的文本内容。

修改元素内容：text(value)、html(value)、val(value)等方法。

示例：$("p").text("Hello World") 将所有<p> 标签的文本内容更改为“Hello World”。

添加元素：插入新元素：append()、prepend()、after()、before()等方法。

示例：$("ul").append("<li>New Item</li>") 在<ul> 元素的末尾添加新的<li> 元素。

第2章 jQuery基础选择器

练习题
一、单选题
1.下面有一段代码，其中只能获取第2个div元素的是（
<!Dቤተ መጻሕፍቲ ባይዱCTYPE html> <html> <head>
<meta charset="utf-8" /> <title></title> </head> <body> <div id="first"></div> <div></div> <div></div> </body> </html>
第二章基础选择器
教学重点
➢ 掌握4种基础选择器
2.1 jQuery选择器简介
• jQuery选择器跟CSS选择器几乎完全一样，我们在接下来的学习中应该多对比一下，这样学习速度可以快很多。
2.2 基本选择器
• 所谓的基本选择器，指的是在实际开发中使用频率最高的选择器。其中，基本选择有以下4种。
二、编程题 1. 请写出下面对应的jQuery选择器，每一项对应一个。（1）选取含有href属性的a元素。（2）选取type取值为radio的input元素。（3）选取type取值不是checkbox的input元素。（4）选取class属性包含nav的div元素（class属性可以包含多个值）。（5）选取class属性以article开头的div元素，例如<div class="article-title"></div>。（6）选取class属性以content结尾的div元素，例如<div class="article-content"></div>。（7）选取带有id属性并且class属性是以article开头的div元素，例如<div id="container" class="article-title"></div>。

jquery的使用方法

jquery的使用方法jQuery作为一种常用的JavaScript库，其强大的功能和简化代码的方便性让其成为前端开发者中的首选。

以下是在项目中常见的jQuery使用方法的分步骤阐述：1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库，通常我们是从官网下载一个jquery-x.x.x.js文件，在引用时需要写正确的路径。

2. jQuery对象的创建要使用jQuery对象，首先需要用jQuery构造函数来创建一个jQuery对象。

这可以使用两种方式创建：1）通过$或jQuery函数创建：例如：$("选择器")或者jQuery("选择器")；2）通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。

3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器，也支持自定义选择器。

与CSS选择器类似，jQuery选择器是用于选择HTML元素的字符串。

例如：选择id为“content”的元素：$("#content")；选择class为“box”的元素：$(".box")；选择label元素中“for”属性值为“id”的元素：$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件，例如：$(selector).bind(event,function)绑定事件。

事件可以是click、dblclick、mouseenter等等，函数可以是已定义的函数名，也可以是匿名函数。

5. 样式的操作通过jQuery对象的css()方法设置样式。

例如：$(selector).css('color','#fff')设置字体颜色为白色，$(selector).addClass('className')增加类名为'className'的样式。

JQ选择器

一·通过一个简单的例子，简单区分下jQuery对象与DOM对象：我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。

普通处理，通过标准JavaScript处理：通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

jQuery的处理：通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。

这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

二·利用数组下标的方式读取到jQuery中的DOM对象HTML代码JavaScript代码用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。

这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0通过jQuery自带的get()方法jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

三·通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了HTML代码JavaScript代码通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。

jqfind方法

jqfind方法jqfind方法是一种基于jQuery的查找方法，它可以帮助我们快速定位和获取指定的HTML元素或元素集合。

在本文中，我将详细介绍jqfind方法的使用和一些常见的应用场景。

我们需要了解jqfind方法的基本语法。

它的语法如下：```javascript$(selector).find(filter)```其中，`selector`是需要查找的元素的选择器，而`filter`是可选参数，用于对查找结果进行进一步筛选。

`filter`可以是选择器、元素或函数。

接下来，我将通过几个实例来演示jqfind方法的用法。

1. 使用选择器查找元素```javascript$("ul").find("li")```上述代码将返回`ul`元素下的所有`li`元素。

2. 使用元素查找元素```javascript$("ul").find($("li"))```上述代码与第一个实例类似，只是使用了元素作为参数。

这种写法在某些场景下更加灵活和方便。

3. 使用函数查找元素```javascript$("ul").find(function(index, element){return $(element).attr("data-value") === "1";})```上述代码将返回`ul`元素下`data-value`属性值为1的元素。

除了基本的用法，jqfind方法还可以与其他jQuery方法结合使用，以实现更多的功能。

下面是一些常见的应用场景：1. 查找子元素```javascript$("ul").find("li.child")```上述代码将返回`ul`元素下所有class为`child`的`li`元素。

2. 查找兄弟元素```javascript$("ul").find("li.sibling").siblings()```上述代码将返回`ul`元素下class为`sibling`的`li`元素的所有兄弟元素。

jQuery后代选择器用法实例

jQuery后代选择器⽤法实例本⽂实例讲述了jQuery后代选择器⽤法。

分享给⼤家供⼤家参考。

具体分析如下：后代选择器匹配给定的祖先元素下⽤以匹配的所有后代元素。

点击选择器可以查阅参考⼿册中所有jQuery选择器。

代码实例如下:复制代码代码如下:$(".mydiv span")以上代码匹配类名mydiv元素包含的span元素。

两个选择器之间要⽤空格分隔。

实例代码:复制代码代码如下:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="https:///" /><title></title><style type="text/css">div{height:150px;width:150px;background-color:green;margin-top:10px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$(".mydiv span").css("color","red");})})</script></head><body><div class="mydiv"><span></span></div><div class="anotherdiv"><span></span></div><button>点击查看效果</button></body></html>该实例可实现将类名为mydiv的div下的span元素中的⽂本颜⾊设置为红⾊。