jquery选择器、标签选择器、类选择器、元素选择器、*选择器、this关键字

最新推荐文章于 2024-04-16 03:29:12 发布

birdlun

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量388

点赞数

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/96478122

版权

列：#选择器、*选择器、类选择器、元素选择器练习

this选取当前html元素

列：选择器练习

列：实现样式的设置

元素选择器

$("p"); //在页面中选取所有 <p> 元素

列：段落隐藏

		<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js">
		</script>
		<script>
			$(function() {
				$("button").click(function() {
					$("p").hide();
				});
			});
		</script>
	</head>
	<body>
		<h2>这是一个标题</h2>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<button>点我</button>
	</body>

结果：

#id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素

$("#test")

列：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

列：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

CSS选择器

$("p").css("background-color","red");

列：

		<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js">
		</script>
		<

最低0.47元/天解锁文章

birdlun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器、标签选择器、类选择器、元素选择器、*选择器、this关键字

目录元素选择器列：段落隐藏#id选择器列：.class选择器列：CSS选择器列：*选取所有元素列：#选择器、*选择器、类选择器、元素选择器练习this选取当前html元素列：选择器练习列：实现样式的设置元素选择器$("p"); //在页面中选取所有 <p> 元素列：段落隐藏 <script src="//l...
复制链接

扫一扫