`
Rainbow702
  • 浏览: 1076982 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

JQuery 中 :first 选择器的使用注意点

JQueryJavascriptselector选择器:first 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 	
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#ee").bind("click", function(){
			$("div:first").attr("id", "test");
			$("#test").append("<button>fffffffffffffffff</button>");
		});
	});
</script>
</head>
<body>
	<button id="ee" >eeeeeeeeee</button>
	<div style="background: red;">
		<button >ddddddddd</button>
		<button >hhhhhhhhh</button>
	</div>
</body>
</html>

 

如果将上面代码中的

$("div:first").attr("id", "test");

更换为

$("div   :first").attr("id", "test");

  

就会发现执行的结果是不一样的，如下面两图：

 

第一种



 
 
 第二种




 
 所以，记得不要把"div:first"分开写，其他类似的选择器也要注意哦！

  • 大小: 2.8 KB
  • 大小: 2.3 KB
分享到：
| JQuery 数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery中:first选择器用法实例

    本文实例讲述了jQuery中first选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配指定元素集合中的第一个元素。 语法结构: 代码如下:$(“:first”) 在使用中一般要和其他选择器配合使用，比如类选择器...

    jQuery :first选择器使用介绍

    虽然`:first`选择器非常方便，但和其他jQuery选择器一样，如果在大型DOM树中使用，可能会对性能产生一定影响。因此，在处理大量元素时，应尽量减少选择器的复杂性，以优化页面加载和执行速度。 总之，jQuery的`:...

    jQuery中:first-child选择器用法实例

    在jQuery中，`:first-child`选择器是一种非常实用的定位元素的方法，它允许开发者精确地选取父元素下的第一个子元素。这个选择器是基于CSS选择器标准，因此不仅在jQuery中，也在纯CSS中同样可用。`:first-child`选择...

    jQuery基础选择器练习题

    本篇文章将深入探讨jQuery的基础选择器及其在实际编程中的应用，以帮助你更好地理解和掌握这些知识点。 首先，我们来了解一下jQuery的基本选择器。它们是用于选取HTML元素的最基础工具，包括： 1. **ID选择器**: ...

    浅谈jquery选择器 :first与:first-child的区别

    本文将深入探讨两个经常被混淆的选择器：`:first`和`:first-child`，并揭示它们之间的差异。 `:first`选择器是jQuery的一个特殊选择器，它会选取匹配该选择器的元素集合中的第一个元素。例如，当使用`$('ul li:...

    jQuery中:image选择器用法实例

    需要注意的是，在使用选择器时，不要和CSS中的伪类选择器混淆。在CSS中，虽然没有直接名为“:image”的选择器，但类似的“:first-image”、“:last-image”等伪类选择器也存在于一些框架中，它们用于选取图片序列中...

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

    - `,` 分割选择器：用于选择不同类型的元素，如`$("div, p")`。 - `MultipleSelectors`：同时选择多个类或ID，如`$("#myID .myClass")`。 3. **层次选择器** - `child`：`&gt;` 选择子元素，如`$("ul &gt; li")`。 - ...

    jQuery选择器大全

    以上仅为jQuery选择器的冰山一角，其强大之处在于组合使用时能实现复杂而精准的DOM操作。理解并熟练掌握这些选择器，将极大提升开发者利用jQuery进行网页开发的能力和效率。无论是初学者还是资深开发者，都能从中...

    Jquery实验室的选择器工具

    虽然jQuery选择器非常强大，但在处理大量元素时，应避免使用过于复杂的选择器，因为这可能影响性能。优先使用ID选择器，其次类选择器，再是属性选择器，尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验...

    jquery 选择器 大全

    在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...

    jquery选择器入门详解小案例

    总之，jQuery选择器是开发者在JavaScript编程中的得力助手，它们使得DOM操作变得更加简单和高效。在深入学习jQuery选择器的同时，别忘了结合实际项目进行练习，这样才能更好地将理论知识转化为实际技能。现在，你...

    jquery 动态选择器

    本文将深入探讨“jQuery动态选择器”这一主题，结合标签中的“源码”和“工具”概念，我们将会看到jQuery如何通过其丰富的选择器功能来高效地选取和操作网页元素。 动态选择器是jQuery的核心特性之一，它允许开发者...

    Jquery 选择器整理

    - **选择器:** `#id` - **返回值:** 单个元素 - **实例:** `$("#test")` 获取id为`test`的元素 2. **根据元素名匹配所有元素** - **选择器:** `element` - **返回值:** 元素集合 - **实例:** `$("input")` ...

    jQuery中:checkbox选择器用法实例

    `:checkbox`选择器的语法非常简洁，正如其名，只需在jQuery的选择器表达式中加上`:checkbox`即可。例如： ```javascript $(":checkbox") ``` 这行代码会选取页面上所有的复选框元素。 下面是一个关于`:checkbox`...

    jQuery第1天：JQ基本介绍、使用步骤、jQuery对象与DOM对象（重点）、jQuery选择器

    3. 位置选择器：`$:first`、`:last`、`:eq(index)`、`:gt(index)`、`:lt(index)`等。 4. 子元素选择器：`$("parent &gt; child")`。 5. 其他高级选择器，如`:not()`, `:has()`, `:contains()`, `:parent`等。 **...

    jquery基本选择器

    **jQuery基本选择器** jQuery库是JavaScript中最广泛使用的库之一，它简化了DOM操作、事件处理和动画制作。其中，选择器是jQuery的核心功能之一，它使得能够高效地选取页面中的HTML元素。以下是对jQuery基本选择器...

    jQuery中的基本选择器用法学习教程

    - jQuery不仅支持CSS1和CSS2的选择器，还支持部分CSS3选择器，并且提供了一些独特的选择器，如`:first`、`:last`、`:even`、`:odd`等，这些增强了对元素的筛选能力。 7. **操作DOM节点**： - 获取选择器选取的...

Magicbox
Global site tag (gtag.js) - Google Analytics