jQuery选择器的获取

小张没有三头

于 2022-10-14 08:36:24 发布

阅读量362

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/m0_73656035/article/details/127312921

版权

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

jQuery对象和DOM对象转换

DOM对象与jQuery对象之间是可以相互转换的。因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转化为DOM对象才能使用。

基础的选择器在jQuery中的获取方式

ID选择器 $("#id") 获取指定ID选择器

全选选择器 $("*") 匹配所有元素

类选择器 $(".class") 获取同一类clss的元素

标签选择器 $("div") 获取同一类标签的所有元素

并集选择器 $("div,p,li") 选取多个元素

ID选择器 $("li.current") 交集元素

子代选择器 $("ul>li"); 使用>号，获取亲儿子层级的元素，并不会获取孙子层级元素

子代选择器 $("ul li"); 使用空格，代表后代选择器，获取ul下的所以li元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
			<script>
				$(function(){
					var a1=$("#c2");
					console.log(a1);
					var a2=$(".c1");
					console.log(a2);
					var a3=$("p");
					console.log(a3);
					var a4=$("ul li");
					console.log(a4);
					console.log(a4.text());
					var a5=$("ul>li");
					console.log(a5);
				});
			</script>

	</head>
	<body>
		<h1>h选择器</h1>
		<div id="c2">id选择器</div>
		<div class="c1">clss选择器</div>
		<p>p标签</p>
		<ul>
			<li>无序标签</li>
		</ul>
		<ol>
			<li>有序标签</li>
		</ol>
	</body>
</html>