JQuery的选择器格式与id、class、元素选择器的用法

jquery选择器就是选择指定的html元素,并对选中的元素进行各种操作。基格式为:

//注意:引号与括号是英文格式
$("选择器")
//或者
$('选择器')

一、id选择器

//id选择器必须要在id名前加上前缀“#”
$("#id")

二、class选择器

//class选择器必须要在class名前加上前缀“.”
$(".class")

三、元素选择器

//元素就是html标签
$("元素名")

实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
	<h1 id="biaoti">这是一个标题</h1>
	
	<ul>
		<li>无序列表</li>
		<li class="liebiao">无序列表</li>
		<li>无序列表</li>
		<li class="liebiao">无序列表</li>
		<li>无序列表</li>
		<li class="liebiao">无序列表</li>
	</ul>
	
	<p>这是一个段落</p>
	<p>这是一个段落</p>
	
	<script>
		//用id选择器把h1元素的字体颜色改为红色
		$("#biaoti").css({"color":"#f00"});
		
		//用class选择器把对应的li元素的背景色改为绿色
		$(".liebiao").css({"background":"#0f0"});
		
		//用元素选择器把所有的p元素的字体颜色改为蓝色
		$("p").css({"color":"#00f"});
	</script>
</body>
</html>

效果如图所示:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部