jQuery选择器(子项、eq和innerhtml) - 腾讯云开发者社区

文章/答案/技术大牛

发布

JQuery选择器和JQuery包装集

（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集；从现在开始，要慎重区分DOM对象和JQuery对象，两种对象的方法不同，属性不同，在使用中要特别注意...学习jQuery选择器是学习jQuery最重要的一步....0;i innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象，而是DOM对象} JQuery...由于该事件在文档就绪后发生，因此把所有其他的 JQUERY事件和函数置于该事件中是非常好的做法。...$("p").eq(1) 获取第N个元素：.eq(Index) $("p").filter(".bgRed")筛选出与指定表达式匹配的元素集合：.filter("Express") $("div"

4.4K2 0

jQuery选择器和选取方法

我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法，以及一些提取和扩充选中元素集的方法了。...:enabled 匹配没有禁用的元素 :eq(n) 匹配基于文档顺序、序号从0开始的选中列表中的第n个元素(jQuery的扩展) :even 匹配列表中偶数序号的元素。...和“:eq(0)”相同(jQuery的扩展) :first-child 匹配的元素是其父节点的第一个子元素。...(n) 与“:eq(n)”相同(jQuery的扩展) :nth-child(n) 匹配的元素是其父节点的第n个子元素。。...first()返回的jQuery对象仅包含选中元素中的第一个，last()返回的jQuery对象则只包含最后一个元素。更通用的是，eq()方法返回物Query对象只包含指定序号的单个选中元素。

6.1K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery基本语法和选择器

JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库，Jquery基于javascript开发出来。目的就是为了简化javascript的开发。...核心特性：链式语法高校灵活的CSS选择器使用和扩展丰富的插件官网：https://jquery.com/ 三大版本：目前jQuery有三个大版本。...最新版本：3.2.1（2017年3月20日） ———————————————— jd:1.6.4 sina:1.7.3 3.选择器和方法 3.1 使用jquery访问三个div元素 <!....first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3.标签选择器 $(“div”)...9.后继选择器 $(“prev+next”) 10.兄弟|同辈选择器 $(“prev~sliblings”) 3.3 基本方法之前在js代码有很多属性，比较长，jQuery为了简化这些长的属性，就封装成了一些方法

4621 0

Jquery入门基础教程免费版

核心特性：链式语法高效灵活的CSS选择器使用和扩展丰富的插件官网：https://jquery.com/ 三大版本：目前jQuery有三个大版本。...————————————————-----------看大厂的源码------ jd:1.6.4 sina:1.7.3 jquery 3.选择器和方法 3.1 使用jquery访问三个div元素 <!....first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3....标签选择器 $("标签名"),可以访问对应的标签元素 4.并集选择器:$("选择器1,选择器2,选择器3")以逗号隔开，和之前一样; 5.交集选择器$("p.hh") 3.3 层次选择器 7....事件 jQuery事件是对JavaScript事件的封装，分为基础事件和复合事件。

2.2K1 0

jQuery选择器和用jQuery 实现 Tab 切换效果（1）

一、选择器 ? ?...二、选择器的用法 1、.eq(index)，.get([index]) 对于一个特定结果集，我们想获取到指定index的jQuery对象 $('div').eq(3); //获取结果集中的第四个jQuery...prev正好相反，获取元素之前的同辈元素 $('.child').eq(1).next().addClass('ddd') $('.child').eq(1).prev().addClass('ddd'...$('.child').eq(5).prevAll().removeClass('ddd') $('.child').eq(1).nextAll().addClass('ddd') 4、.siblings...11、.is(selector), is(function(index)), is(dom/jqObj) 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数

4.9K2 0

测试开发进阶(十四)

属性获取元素内容的最简单方法是使用 innerHTML 属性。...jQuery的版本分为1.x系列和2.x、3.x系列 1.x系列兼容低版本的浏览器 2.x、3.x系列放弃支持低版本浏览器目前使用最多的是1.x系列的。...jquery的口号和愿望 Write Less, Do More（写得少，做得多）官方网站：http://jquery.com/ 在线手册：https://www.runoob.com/manual/...script> jquery基本的选择器 // id选择器 $('#btn1') // 类选择器 $('.box1') // 标签选择器 $('li') // 层级选择器 $('#ul li span...') // 属性选择器 $('input[name=user]') 选择同胞和父辈元素 //选择div元素前面紧挨的同辈元素 $('div').prev(); //选择div元素之前所有的同辈元素

1.3K3 0

JQuery从入门到实战

jQuery 的核心语法 $(); 2、JQuery基本语法 2.1、JS对象和JQuery对象转换 jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery...); } }); 2.6、小结 JS 对象和 jQuery 对象相互转换 $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。...(divs2[0].innerHTML); //alert(divs2[1].innerHTML); // 5.奇数选择器 $("A:odd"); let divs3...); // 6.等于索引选择器 $("A:eq(index)"); let div3 = $("div:eq(2)"); //alert(div3.html());...(divs4[0].innerHTML); //alert(divs4[1].innerHTML); // 8.小于索引选择器 $("A:lt(index)"); let divs5

16.2K3 0

JQuery的简述、使用方法和选择器

jQuery具有强大的选择器功能 ?...3、类选择器通过元素类名获取相关元素，eq（）方法获取元素，下标从0开始 ? 4、通用选择器找到每一个元素 ? 5、分组选择器找到匹配任意一个类的元素。 ?...三、子元素选择器 1、:nth-child 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。...:nth-child从1开始的，而:eq()是从0算起的！...五、表单选择器匹配所有 input, textarea, select 和 button 元素 ? ---- JQuery的相关API，相关jquery文件，测试源代码已分享之网盘。

1.9K1 0

jQuery学习笔记

它封装了很多 DOM 对象的操作，但是它和 DOM 对象之间是不同的。...只有当 obj是一个DOM对象时才能使用 obj.innerHTML；相应地，如果是jQuery对象应该使用 obj.html() 。...常规选择器 $("*") 选择所有节点 $("#id") ID选择器，注意其中的一些特殊字符，如 . $(".class") 类选择器 $("tag") 标签选择器 $("子元素") $("直接子元素"...':contains("text")') 包含有指定内容的元素 :eq():lt():gt():even:odd 列表索引选择（不支持负数） (':has(selector)') 符合条件的再次过滤 :...调用链处理 .add() 向已有的节点序列中添加新的对象 .andSelf() 在调用链中，随时加入原始序列 .eq() 指定索引选取节点，支持负数 .filter().is().not().find(

9272 0

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

一、jQuery获取和操作元素属性 DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。...text(); // 获取或设置标签的文本内容----相当于DOM中的innerText html(); // 获取或设置标签的html内容----相当于DOM中的innerHTML 6、后代（层次）选择器...中鼠标进入事件是：mouseenter；鼠标离开事件是：mouseleave 2、css 中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和...表示的显示和隐藏的动画效果。 4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。 10、过滤选择器这类选择器都带有冒号。...li"); （后代选择器）相当于$("ul li") eq(index) $("li").eq(2) 相当于 $("li:eq(2)"); parent() $("#first").parent();

2.3K4 0

day01jQuery节点操作

"); var btns2 = document.getElementsByClassName("btn"); //使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素 //命名的时候为了和...该错误的出现意味着jQuery的文件未加载成功 console.log($btns); console.log($btns2); 2.1.2 属性及伪类选择器使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素...中提供的常用选择器 console.log($('button:eq(1)'));//= console.log($('button:gt(1)'));//> console.log($('button...和js对象之间的转换 jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用....事件绑定 js中的所有事件都是以on开头的，在jQuery中是都不加on的 5.1 ready事件 ready事件是jQuery提供的当DOM元素加载完毕后执行的函数 ready和onload的区别：

5690 0

js与jQuery的区别以及jQuery选择器和方法的使用

目录使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素基本方法使用jQuery jQuery...选择器还可以组合多个一起使用，可以分为并集和交集。...同样的刚才我们分别用id选择器和类选择器找到了一个div然后设置背景色就可以了。现在我们是不是要设置所有div的背景颜色。那么我们可不可以直接根据div标签来设置。...所有的p 和 span 不管是在div内的还是在div外边的全部受到影响。这种写法我们叫做多个选择器并集。多个选择器(交集)：selector1 selector2 那么有并集应该也会有交集。...我们应该先确定最大的：表单选择器：我们先来看一下文档中的表单选择器，这里面基本上表单中的每一个元素都有，我们主要讲一下单选，多选和下拉框的选择器。

16.7K1 0

E024Web学习笔记-JQuery（二）：选择器

/js/jquery-3.4.1.min.js"> 大哥哥。。。...; i++) { document.write($div3.get(i).innerHTML+""); } //4、奇数选择器 document.write...; j++) { document.write($div4.get(j).innerHTML+""); } //5、偶数选择器 document.write...; k++) { document.write($div5.get(k).innerHTML+""); } //6、等于索引选择器 document.write...("======等于索引选择器======"); var $div6 = $("div > span:eq(0)"); document.write($div6.text()+

2410 0

01-老马jQuery教程-jQuery入口函数及选择器

3.3 jQuery的包装对象和DOM对象通过jQuery的选择器选择出来的对象都是jQuery的包装对象，里面封装了jQuery的很多API方法，后续我们会一一学习。...jQuery的包装对象和DOM对象的相互转换。...获取所有的div、p、li元素交集选择器标签指定式选择器） $("div.redClass"); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。...($cd); var div1 = $cd[0]; console.log(div1.innerHTML); // 标签选择器和并集选择器 console.dir...eq(index) $("li").eq(2); 相当于$("li:eq(2)"),index从0开始 not(exp) $("p").not("#selected") 删除与指定表达式匹配的元素 4

3.2K10 0

jQuery筛选器及练习 jQuery初识

JavaScript特效和动画 HTML DOM遍历和修改 AJAX 下载链接：jQuery官网 jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery...相当于JavaScript中的document.getElementById("i1").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法...对象转换成DOM对象拿上面的例子举例，jQuery对象和DOM对象的使用： 1 $("#i1").html(); //jQuery对象可以使用jQuery的方法 2 $("#i1")[0].innerHTML...; //DOM对象使用DOM的方法 jQuery基础语法 $(selector).action() 查找标签>选择器 id选择器： $("#id"); class选择器： $(".className...$("#id > a"); //查找第一个a标签基本选择器： :first //第一个 :eq(index) //索引等于index的那个元素 :last //最后一个属性选择器

1.5K3 0

与Ajax同样重要的jQuery（1）

最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3...jQuery--->DOM对象：$jQuery对象[0]或者$jQuery对象.get(0); DOM对象--->jQuery：$(DOM对象) 2.jQuery九种选择器选择器是jQuery 的根基..., 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式，对页面中元素进行选择...在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。...⑧：表单过滤选择器选取表单元素的过滤选择器 :input 选取所有、、和元素 :text 选取所有的文本框元素 :password

11.5K6 0

01-老马jQuery教程-jQuery入口函数及选择器

3K0 0

jQuery对象

链接获取元素到jQuery对象当使用CSS选择器调用jQuery函数时，它将返回一个包含与此选择器匹配的元素的jQuery对象。...检查.length属性是确保选择器成功匹配一个或多个元素的常用方法。如果目标是仅选择第一个标题元素，则需要另一个步骤。有很多方法可以做到这一点，但最直接的就是.eq()功能。...var firstHeading = headings.eq( 0 ); 现在firstHeading是一个仅包含页面上第一个元素的jQuery对象。...这意味着它有DOM属性，如.innerHTML等方法.appendChild()，但不是 jQuery的方法，如.html()或.after()。...不管使用的命名规则如何，使jQuery对象和本机DOM元素之间的区别非常重要。本机DOM方法和属性不存在于jQuery对象上，反之亦然。

1.7K1 0

前端基础：jQuery

Introduction to jQuery jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装...", "#ccc"); jQuery Function 访问和操作 DOM 元素控制页面样式对页面事件进行处理扩展新的 jQuery 插件与 Ajax 技术完美结合 jQuery 能做的 JavaScript....innerHTML; 如果要混用它们，就要进行转换 DOM 对象转 jQuery 对象 // a 是 DOM 对象 var a = document.getElementById("name"); /...b = jqObject.get(0); 选择器基本选择器基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。..." 和 "#wan" $(".jy,#wan").css("color","red"); // 交集选择器，既是 h3 标签，又拥有 ".jy" 的元素 $("h3.jy").css

14.4K2 0

JS对象与Dom对象与jQuery对象之间的区别

$("#save").eq(0)得到的还是jq对象，$(dom对象)就能得到一个jq对象。...指示该数组对象的元素个数 . context 一般情况下都是指向HtmlDocument对象 . selector 传递进来的选择器内容 jquery对象就是通过jQuery包装DOM对象后产生的对象...=$("#idDoc2").get(0); doc2.innerHTML="这是jQuery的第二个DOM对象" 二、细说jQuery对象和DOM对象的区别与使用 2.1 jQuery对象和DOM...对象 DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用 jQuery类库的选择器获得的对象。...例如: $("#id").innerHTML 和$("#id").checked之类的写法都是错误的可以用 $("#id").html()和$("#id").attr ("checked")之类的

3.5K1 0

点击加载更多

JQuery选择器和JQuery包装集

jQuery选择器和选取方法

jQuery基本语法和选择器

Jquery入门基础教程免费版

jQuery选择器和用jQuery 实现 Tab 切换效果（1）

测试开发进阶(十四)

JQuery从入门到实战

JQuery的简述、使用方法和选择器

jQuery学习笔记

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

day01jQuery节点操作

js与jQuery的区别以及jQuery选择器和方法的使用

E024Web学习笔记-JQuery（二）：选择器

01-老马jQuery教程-jQuery入口函数及选择器

jQuery筛选器及练习 jQuery初识

与Ajax同样重要的jQuery（1）

01-老马jQuery教程-jQuery入口函数及选择器

jQuery对象

前端基础：jQuery

JS对象与Dom对象与jQuery对象之间的区别

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐