JQuery基础知识----jQuery 对象，选择器

最新推荐文章于 2022-10-03 13:23:26 发布

liucw_cn

最新推荐文章于 2022-10-03 13:23:26 发布

阅读量1.8k

点赞数

分类专栏： javaWeb基础文章标签： JQuery 选择器

本文链接：https://blog.csdn.net/oChangWen/article/details/52741330

版权

javaWeb基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.jQuery 对象和 DOM 对象

• jQuery 对象就是通过 jQuery ( $() ) 包装 DOM 对象后产生的对象

• jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“# persontab ”).html();

• jQuery 对象无法使用 DOM 对象的任何方法 , 同样 DOM 对象也不能使用 jQuery 里的任何方法

• 约定：如果获取的是 jQuery 对象 , 那么要在变量前面加上 $.

– var $ variable= jQuery 对象

– var variable = DOM 对象

jQuery对象转成DOM对象

• jQuery 对象不能使用 DOM 中的方法 , 但如果 jQuery 没有封装想要的方法 , 不得不使用 DOM 对象的时候 , 有如下两种处理方法 :

• (1) jQuery 对象是一个数组对象 , 可以通过 [index] 的方法得到对应的 DOM 对象 .

• (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

DOM 对象转成jQuery对象

• 对于一个 DOM 对象 , 只需要用 $() 把 DOM 对象包装起来 ( jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 ), 就可以获得一个 jQuery 对象 .

转换后就可以使用jQuery中的方法了

<!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">
<title>Insert title here</title>

<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//$(function(){}) 相当于 window.onload, 代码卸载 {} 之间
	$(function(){
		//1. 选取 button: $("button")
		//2. 为 button 添加 onclick 响应函数: $("button").click(function(){})
		//代码编写在 function 的 {} 中.
		$("button").click(function(){
			//3. 点哪个按钮就弹出哪个按钮的文本 ClickM或者ClickMe2
			alert($(this).text());
			//jQuery 和 DOM 对象
			//1. 由 jQuery 对象转为 DOM 对象
			//  1). 获取一个 jQuery 对象
			var $btn = $("button");
			//  2). jQuery 对象是一个数组.
			alert($btn.length); //-->2
			//  3). 可以通过数组的下标转为 DOM 对象
			alert($btn[1].firstChild.nodeValue); //ClickMe2

			//2. 由 DOM 对象转为 jQuery 对象
			//  1). 选取一个 DOM 对象
			var btn = document.getElementById("btn");
			//  2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装
			alert("--" + $(btn).text())  //--ClickMe
		});

	})

</script>

</head>
<body>
<button id="btn">ClickMe</button>
<br>
<button>ClickMe2</button>
</body>
</html>

2.jQuery选择器

• 选择器是 jQuery 的根基 , 在 jQuery 中 , 对事件处理 , 遍历 DOM 和 Ajax 操作都依赖于选择器

• jQuery 选择器的优点 :

– 简洁的写法

– 完善的事件处理机制

2-1.基本选择器

• 基本选择器是 jQuery 中最常用的选择器 , 也是最简单的选择器 , 它通过元素 id,class 和标签名来查找 DOM 元素 ( 在网页中 id 只能使用一次 ,class 允许重复使用 ).

而ID类和CLASS类的区别就是，ID在一个网页中只能被引用一次，而CLASS类可以被多次引用。

测试代码： http://blog.csdn.net/ochangwen/article/details/5274298

2-2.层次选择器

• 如果想通过 DOM 元素之间的层次关系来获取特定元素 , 例如后代元素 , 子元素 , 相邻元素 , 兄弟元素等 , 则需要使用层次选择器 .

• 注意 : (“ prev ~ div”) 选择器只能选择 “ # prev ” 元素后面的同辈元素 ; 而 jQuery 中的方法 siblings() 与前后位置无关 , 只要是同辈节点就可以选取
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-3.过滤选择器

• 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素 , 该选择器都以“ : ” 开头

• 按照不同的过滤规则 , 过滤选择器可以分为基本过滤 , 内容过滤 , 可见性过滤 , 属性过滤 , 子元素过滤和表单对象属性过滤选择器 .

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-4.内容过滤选择器

• 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-5.可见性过滤选择器

• 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

•

• 可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素 , 也包含文本隐藏域 (<input type=“hidden”>) 和 visible:hidden 之类的元素
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298