在jQuery中,选择器$('[id = foo]')效率低于$('#foo')吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

一个小时学会jQuery

"> //从文档中获得id为foo的jQuery对象 var $foo=$("#foo"); //修改$foo元素的HTML内容为Foo jQuery...有了jQuery，就能够利用现有知识去发挥选择器的威力，在很大程度上简化JavaScript代码。CSS中可以使用的选择器基本都可以用到jQuery中，反之不然。 3.1. ...基本选择器基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。...3.2.1、通过id获取元素在CSS中经常使用id来控制元素，在jQuery中获取元素时，也使用同样方法。与CSS一样，在id前面加上#号。...在JavaScript中使用document对象的getElemnetById(id)方法来获取元素，在jQuery中则更为简化。

22.4K7 1

jQuery 选取元素概要

jQuery 自定义的选择器。注意：对于 jQuery 自定义的选择器，为了性能，先用 CSS 定义的选择器选，再从结果集中筛选时用 jQuery 自定义的选择器。...) 有指定子元素的元素其他 :not(选择器) 不满足指定选择器的元素 :animated 正在做动画的元素 :eq(下标值) 在兄弟节点中的位置等于下标值的的元素。...:gt(下标值) 在兄弟节点中的位置大于下标值的的元素。下标从 0 开始。 :lt(下标值) 与 :gt 相反。选择器中包含元字符的处理选择器的元字符有：!"#$%&'()*+,./:;?...选择器中如果要使用选择器的元字符，必须用 \ 来转义。如：选择 id 为 foo.bar 的元素，要使用 $("#foo\\.bar")。...如果使用 $("#foo.bar")，则选择的是 id 为 foo 并且有 bar 的类名的元素。

1.9K2 0

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

是的

没有找到

前端知识体系整理（不断更新）

：CSS选择器是从右到左进行规则匹配，基于这个机制，浏览器会查找所有同类节点然后逐级往上查找，知道根节点，这样效率很低尽量避免属性选择器（\*=, |=, ^=, $=, ~=）：正则表达式匹配比基于类别的匹配慢...('div'); // document.getElementsByTagName 类选择器在低版本浏览器较慢，伪元素、属性选择器在不支持querySelector的浏览器很慢尽可能优先使用符合CSS...语法规范的CSS选择器表达式，以此来避免使用jQuery自定义的选择器表达式，因为当jQuery遇到单个id, 标签名，类名，选择器就会快速调用浏览器支持的DOM方法查询 $('input[checked...'); // better 尽量避免使用通配符选择器尽可能的少创建jQuery对象如document.getElementById('el')比$('#el')块如获取元素id： $('div')....click(function(e) { // 生成了个jQuery对象 var id = $(this).attr('id'); // 这样更直接 var id = this.id

2K2 0

【前端】Web前端学习笔记【2】

相关博客： Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中，this 绑定全局对象，浏览器环境全局对象为 window...在对象a的方法b内部的函数c中，this 也绑定全局对象，应该绑定到方法b对应的对象a上。这是 JavaScript的缺陷，解决方法：用that捕捉。在构造函数中，this 绑定到新创建的对象。...jQuery拥有特有的CSS-Like选择器，链式写法，封装的各类animate函数，封装了的异步加载。 jQuery封装了AJAX操作。 jQuery的缺点： jQuery比原生JS执行效率慢。...visibility: hidden;隐藏对应的元素，但是在文档布局中仍保留原来的空间。 ---- 9....CSS选择器总结 ---- id选择器（#myid）类选择器（.myclassname）标签选择器（div) (h1) (p）相邻兄弟选择器（h1 + p）子选择器（ul > li）后代选择器

5432 0

jQuery 快速入门教程

在jQuery库中实际上定义了一个jQuery()方法，它是jQuery库的核心。我们调用该方法并传入指定的参数，就可以返回一个jQuery实例对象，该对象中包含匹配的一个或多个DOM元素。...使用jQuery 选择器选取元素，并封装为jQuery对象在JS原生DOM中，我们想要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、getElementsByTagName...在jQuery中，我们一般通过一个字符串来标识匹配的元素，例如： $("#uid"); // 选取id属性为"uid"的单个元素 $("p"); // 选取所有的p元素 $(".test"); // 选择所有带有...，将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo"的div元素 $(".foo.bar...属性操作在jQuery中，对DOM元素进行属性操作，主要是通过以下方法实现的： // selector 表示具体的选择器 $("selector").val(); // 获取第一个匹配元素的value

15.2K3 0

CSS实现eq(n)

在某些特殊情况下，我们需要用纯CSS实现jQuery的eq(n)选择器，而CSS没有直接提供类似方法。我们可以通过CSS的:nth-child。... id="bar1" class="foo"> id="bar2" class="foo"> id="bar3"...class="foo"> .foo:nth-child(2)会选中#bar2 同时也支持奇偶操作:nth-child(odd)和偶数选择器

2K3 0

Web前端JQuery面试题（一）

Web前端JQuery面试题 Web前端JQuery面试题（一）一：选择器基本选择器什么是#id，element，.class，*，selector1, selector2, selectorN...案例：查找id为da3的元素 html代码： id="da1"> id="da2"> id="da3"> jquery代码： $("#...id="da3"> jquery代码： $("table ~ input"); 结果： [ id="da3"> ] 基本选择器:?...:enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有选中元素 :selected 匹配所有选中option元素在jquery中有哪些属性？..."); id="foo">dada $("p").insertBefore("#foo"); id="foo"> wrap();

3.3K2 0

DOM对象与jquery对象有什么不同

1.jQuery对象和DOM对象 DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象; var domObj = document.getElementById...("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。...如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，例: $("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法; 上面的那段代码等同于...: document.getElementById("foo").innerHTML; 注意：在jQuery对象中无法使用DOM对象的任何方法。...例如$("#id").innerHTML 和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery

1.3K2 0

jQuery最佳实践

其他语句的测试，比如.attr(“value”)和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器在jQuery中，你可以用多种选择器，选择同一个网页元素。...（1）最快的选择器：id选择器和元素标签选择器举例来说，下面的语句性能最佳：　　$(‘#id’) 　　$(‘form’) 　　$(‘input’) 遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法...但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。（3）最慢的选择器：伪类选择器和属性选择器先来看例子。...你知道哪个速度最快，哪个速度最慢吗？　　...以最简单的选择器为例，document.getElementById(“foo”)要比$(“#foo”)快10多倍。

1.1K3 0

彻底弄懂CSS优先级规则

csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com 当 html 元素拥有多个 css 样式时，浏览器会根据优先级规则计算 css，如果对优先级规则不够熟悉，在实际的开发过程中往往会产生很多困扰... 1.1 css继承距离优先当DOM元素的指定样式来自继承时，只与DOM树中的距离相关，与选择器的顺序和优先级( id>class 下面会讲到)无关，下方的...尽管选择器 *[id="foo"] 通过ID选择了一个元素，但它还是作为一个属性选择器来计算自身的优先级，低于 ID 选择器，所以p标签内的文字为绿色。...id="foo">I am a sample text.... #foo { color: green; } [id="foo"] { color: purple; } 3.

1.8K24 6

JQuery语法：查找+操作

jquery的基础语法：$(selector).action() 即查找元素.操作一、查找元素（选择器和筛选器） 1.1 选择器 1.1.1 基本选择器 $("*")...$("#id") $(".class") $("element") $(".class,p,div") 1.1.2 层级选择器 $(".outer div") $(".outer...$('[id="div1"]') $('["alex="sb"][id]') 1.1.5 表单选择器 $("[type='text']")----->$("...function(){}) -----------> $(function(){}) 事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数...); } $("li").on("click", {foo: "bar"}, myHandler)

1.2K6 0

前端学习之jQuery

$("div").find(".test") 　//　find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。...向下查找兄弟标签： $(".test").next() //next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。　...$(".test").parents() //获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。...$(".test").parentUntil() //获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。...$("").prependTo(content) ----->$("p").prependTo("#foo"); 向目标开头插入匹配元素集合中的每个元素。

3.7K1 0

02-老马jQuery教程-jQuery事件处理

绑定简单事件在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...构造函数传入选择器，返回的是一个jQuery的包装对象 // 大部分的api都是在jQuery包装对象上 // console.dir($inputArray); $inputArray.focus...第二，只触发jQuery对象集合中第一个元素的事件处理函数。第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。...事件 // 2、可以接受一个字符串作为选择器进行选择页面中元素，返回jQuery包装对象。...IE678：window.event 标准浏览器直接从事件处理程序的参数中获得事件对象e e = e || window.event; 在jQuery的事件处理程序中，可以直接获取事件对象，所有浏览器都兼容

7.6K0 0

jQuery最佳实践

其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器在jQuery中，你可以用多种选择器，选择同一个网页元素。...（1）最快的选择器：id选择器和元素标签选择器举例来说，下面的语句性能最佳：　　$('#id') 　　$('form') 　　$('input') 遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法...但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。（3）最慢的选择器：伪类选择器和属性选择器先来看例子。...你知道哪个速度最快，哪个速度最慢吗？　　...以最简单的选择器为例，document.getElementById("foo")要比$("#foo")快10多倍。

2.3K6 0

jQuery中常用的函数和属性详细解析

在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。...$("#feeds").load("feeds.html");将feeds.html文件载入到id为feeds的div中 $("#feeds").load("feeds.php", {limit: 25...map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。...Selectors选择器方法说明基本选择器 $("#myDiv") 匹配唯一的具有此id值的元素 $("div") 匹配指定名称的所有元素 $(".myClass") 匹配具有此class样式值的所有元素...input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器 $("tr:first

3.7K1 0

关于HTML5的各种选择器

的选择器。...按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素 element = document.querySelector('div#container');...//返回id为container的首个div element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： id="container"> //首先选取页面中id为

1.3K1 0

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： id="container"> //首先选取页面中id为container...原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。

4.9K7 0

jquery 常用方法总结

jQuery顶级对象缩写$ window.jQuery window.$ 第一部分，找对象其本选择器 $("#id") $(".class") ...$("input") 复合选择器 $("#id,.class,input") 层次选择器 $("div p") 包含选择器 div中所有的p 子元素子子元素.. ... :last 选取最后一个元素 :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)") :even、:odd，选取索引是奇数、偶数的元素...prependTo将一个元素移动到另一个元素的最前面加到对像外 after 在结束标签之前添加元素 before在开始标签前添加元素 remove() ...I would like to say: id="foo"> $("p").appendTo("#foo"); id="foo">

2.1K0 0

与Ajax同样重要的jQuery（1）

, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式，对页面中元素进行选择...①：基本选择器根据元素id属性、class属性、元素名称对元素进行选择 id选择器： $("#元素id属性") class选择器： $(".元素class属性") 元素名称选择器：$("元素名称")...多个选择器同时使用 selector1,select2 例如： $("#xxid ,.xxxclass") 同时选择id 和 class匹配两类元素练习1： ² 通过each() 在每个div元素内容前...加入 “传智播客” ² 通过size() / length 打印页面中 class属性为 itcast 的元素数量 ² 通过index() 打印 id属性为foo 的div标签是页面内的第几个div...在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

11.5K6 0

50个必备的实用jQuery代码段

jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...： $('button.someClass').live('click', someFunction); //注意，在jQuery 1.4.2中，delegate和undelegate选项 //被引入代替...， //只剩下那些与给定的选择器匹配的部分。...中： var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body'); 如何限制“Text-Area”域中的字符的个数...如何在jQuery中克隆一个元素： var cloned = $('#somediv').clone(); 在jQuery中如何测试某个元素是否可见 if($(element).is(':visible

8K0 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭