jquery随笔--选择器

最新推荐文章于 2021-02-02 21:10:52 发布

原创最新推荐文章于 2021-02-02 21:10:52 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery选择器

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文通过实例展示了如何使用jQuery中的元素选择器、属性选择器及CSS选择器来操作DOM元素。具体包括响应按钮点击事件并显示按钮文本、获取指定元素的内容以及改变元素的颜色。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//元素选择器
$("#button1").click(function(){
   alert($(this).text());
});
//属性选择器
$("[name=button2]").click(function(){
   alert($("#p1").text());
});
$("[name=button3]").click(function(){
   //CSS 选择器
   $("#p1").css("color","red");
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p id="p1">This is a paragraph.</p>
<button type="button" id="button1">元素选择器</button><br>
<button type="button" name="button2">属性选择器</button><br>
<button type="button" name="button3">CSS 选择器</button>
</body>
</html>