jQuery的基本用法大全

最新推荐文章于 2025-06-19 14:35:59 发布

localhost-9527

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量812

点赞数

CC 4.0 BY-SA版权

分类专栏： java_max 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_40001125/article/details/88949396

java_max 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了jQuery框架的基本用法，包括导入jQuery、JS对象与jQuery对象的转换、选择器的使用（基本选择器、层级选择器、属性选择器、过滤选择器）、DOM操作（html(), text(), val()、属性与样式方法、元素创建和添加、删除元素）以及事件处理（绑定与解绑、鼠标悬停事件）。通过实例演示，帮助读者掌握jQuery的核心功能。" 104418104,7355728,探索Scratch的官方与改编版本：从3.0到Kittenblock和Snap!,"['编程教育', 'Scratch', '儿童编程', '开源软件']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

能够使用jQuery的基本选择器
能够使用jQuery的层级选择器
能够使用jQuery的DOM操作的方法
能够使用jQuery的绑定与解绑方法
能够使用jQuery对象的遍历方法
能够使用jQuery全局的遍历方法
能够完成隔行换色

什么是JS框架

JS框架本身也是使用JavaScript来编写的，可以理解为一个软件的半成品。类似于房子中毛坯房，需要程序员在这个基础上再次开发，实现各种业务功能，把程序员的开发精力放在功能的实现上。jQuery框架是众多优秀的JS框架中一个。

为什么要使用框架开发？

使用JavaScript开发并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。

在这里插入图片描述

jQuery框架特点：

轻量级：框架本质很小，占用资源少。
兼容性：几乎所有的主流浏览器都支持
插件：jQuery功能强大，它还有数不清的插件，很多优势插件功能也很强大。如：jQuery easyui等
宗旨：write less do more

案例：导入jQuery并测试是否成功

步骤

创建项目，在项目中创建js目录
复制jquery-3.3.1.js文件到js目录下
在页面上使用<script>标签导入js文件即可

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的导入</title>
    <!--框架就导入了-->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <!--调用了一个函数，参数：匿名函数-->
    <script type="text/javascript">
        $(function(){
            alert("Hello jQuery");
        });
    </script>
</body>
</html>

jQuery对象与js对象之间的转换

在jQuery中对象称为jQuery对象，它可以使用jQuery框架中所有的方法和事件。这些方法和事件不同于以前学习JS方法和事件。必须通过jQuery对象来调用。

JS对象与jQuery对象的区别

JS对象：document.getElementById(“id”)，这种方式得到的对象是JS对象，只能调用JS中方法。
jQuery对象：通过jQuery的选择器得到的对象，称为jQuery对象，它只能调用jQuery中方法。

为什么要转换

JQ中的方法功能比JS中的方法功能强大得多
JQ中的事件方法写法与JS中也不同
如果一个JS对象需要调用JQ中方法，就必须将JS对象转成JQ对象才可以调用。
JQ对象要调用JS对象中的方法也需要转成JS对象

转换语法

操作	方法
将JS对象–>jQuery对象	$(JS对象)
将jQuery对象–> JS对象	JQ对象[0]或JQ对象.get(0)

jQuery对象其实是一个数组对象

JS与JQ转换的演示案例：

需求

页面上有一个文本框，文本框中有值：传智播客。分别使用JS和jQuery的方法得到文本框中的值。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS对象与JQ对象转换</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>JS对象与JQ对象的转换</h2>
<input type="text" id="company" value="转换的目标">
<input type="button" id="b1" value="JS得到值">
<input type="button" id="b2" value="JQ得到值">
<script type="text/javascript">
    //使用JS对象
    document.getElementById("b1").onclick = function () {
        //得到文本框
        var jsObj = document.getElementById("company");
        //得到JS对象的值
        //var value = jsObj.value;   //这是一个属性
        //将JS->JQ对象
        var value = $(jsObj).val();  //调用jq对象的方法
        alert(value);
    };

    //使用JQ对象
    $("#b2").click(function(){
        //得到文本框
        var jqObj = $("#company");
        //得到jq的值
        //var value = jqObj.val();   //这是一个方法
        //jq->js对象
        var value = jqObj[0].value;   //使用js属性
        alert(value);
    });
</script>
</body>
</html>

选择器：基本选择器

基本选择器的使用

选择器的作用

如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。

jQuery常用的选择器有如下：

基本选择器
层级选择器
属性选择器
基本过滤选择器
属性过滤选择器

选择器的语法

在这里插入图片描述
注：jQuery中的方法既可以用在一个元素上，也可以用在一组元素上，方法都自带遍历的功能。

示例：基本选择器的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>

<h1>有一种奇迹叫坚持</h1>
<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<div id="mover">
    div 动画
</div>

<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>
</body>


<script type="text/javascript">
    // 1) 改变 id 为one的元素的背景色为红色
    $("#b1").click(function () {
        //方法：修改css的样式 jq对象.css("样式名","样式值")，类似于：  元素对象.style.样式名 = 样式值
        $("#one").css("background-color","red");
    });

    // 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
    $("#b2").click(function () {
        //一组元素
        $("div").css("background-color","red");
    });

    // 3) 改变 class 为 mini 的所有元素的背景色为 红色
    $("#b3").click(function () {
        //样式名可以使用驼峰命名法
        $(".mini").css("backgroundColor","red")
    });
</script>
</html>

小结

基本选择器	语法
ID选择器	$("#id")
类选择器	$(".类名")
标签选择器	$(“标签名”)

选择器：层级选择器

层级选择器的使用

演示案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>

<body>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/>
<h1>有一种奇迹叫坚持</h1>
<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<span class="spanone">span</span>
</body>

<script type="text/javascript">
    //1) 改变 <body> 内所有 <div> 的背景色为红色
    $("#b1").click(function () {
        $("body div").css("background-color","red");
    });

    //2) 改变 <body> 内子 <div> 的背景色为 红色
    $("#b2").click(function () {
        $("body>div").css("background-color","red");
    });

    //3) 改变 id为two的下一个div兄弟元素的背景色为红色
    $("#b3").click(function () {
        $("#two+div").css("background-color","red");
    });
</script>
</html>

小结

层级选择器	语法
获得A元素下面的所有B子元素	$(“A>B”)
获得A元素同级，下一个B元素	$(“A+B”)

选择器：属性选择器

案例演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
</head>

<body>

<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值等于test的 div 元素背景色为红色" id="b4"/>

<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one" title="test02">
    class是 one title="test02"
    <div class="mini01">class是 mini01</div>
    <div class="mini" style="margin-top:0px;">class是 mini</div>
</div>

<div class="one">
</div>

<div id="mover" title="best">
    id="mover" title="best"
</div>
</body>

<script type="text/javascript">
    //1) 含有属性title 的div元素背景色为红色
    $("#b1").click(function () {
        $("div[title]").css("background-color","red");
    });

    //2) 属性title值等于test的div元素背景色为红色
    $("#b2").click(function () {
        $("div[title='test']").css("background-color","red");
    });

    //3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
    $("#b3").click(function () {
        $("div[title!='test']").css("background-color","red");
    });

    //4) 选取有属性id的div元素，然后在结果中选取属性title值等于“best”的 div 元素背景色为红色
    $("#b4").click(function () {
        $("div[id][title='best']").css("background-color","red");
    });
</script>
</html>

小结

属性选择器	语法
获得有属性名的元素	$(“标签名[属性名]”) $("[属性名]")
获得属性名等于值元素	$(“标签名[属性名=‘属性值’]”)

选择器：基本过滤选择器

目标

基本过滤选择器的使用

什么是过滤选择器

在已经选中的元素集合中再次进行过滤得到剩下的元素，符号使用冒号

演示案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<style type="text/css">
			table {
				margin: auto;
				border-collapse: collapse;
				width: 525px;
			}
			
			tr {
				height: 30px;
				text-align: center;
			}
			
			.girl {
				width: 260px;
				height: 260px;
				border: 1px solid gray;
				float: left;
			}
	 </style>
	</head>
  <body>
		 <input type="button" value="第一行的背景色为浅灰色"  id="b1"/>
		 <input type="button" value="最后一行的背景色为浅绿色"  id="b2"/>
		 <input type="button" value="除第1行和最后1行的其它行背景色为浅黄色"  id="b3"/>
		 <input type="button" value="索引值为偶数的行背景色为浅粉色"  id="b4"/>
		 <input type="button" value="索引值为奇数的行背景色为aquamarine色"  id="b5"/>
		 <input type="button" value="索引值大于 3 的tr元素的背景色为oldlace色"  id="b6"/>
		 <input type="button" value="索引值等于 3 的tr元素的背景色为antiquewhite"  id="b7"/>
		 <input type="button" value="索引值为小于 3 的tr元素背景色为yellowgreen"  id="b8"/>
		<hr />
		<div style="width: 525px; margin: auto;">
		<table border="1" align="center">
				<caption><h3>学生信息列表</h3></caption>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>家庭住址</th>
					<th>成绩</th>
				</tr>
				<tr>
					<td>1001</td>
					<td>孙悟空</td>
					<td>男</td>
					<td>72</td>
					<td>花果山</td>
					<td>90</td>
				</tr>
				<tr>
					<td>1002</td>
					<td>猪八戒</td>
					<td>男</td>
					<td>36</td>
					<td>高老庄</td>
					<td>78</td>
				</tr>
				<tr>
					<td>2002</td>
					<td>沙僧</td>
					<td>男</td>
					<td>30</td>
					<td>流沙河</td>
					<td>67</td>
				</tr>
				<tr>
					<td>3000</td>
					<td>唐三藏</td>
					<td>男</td>
					<td>26</td>
					<td>东土</td>
					<td>87</td>
				</tr>
				<tr>
					<td>4000</td>
					<td>白骨精</td>
					<td>女</td>
					<td>18</td>
					<td>白骨洞</td>
					<td>96</td>
				</tr>
				<tr>
					<td>5000</td>
					<td>蜘蛛精</td>
					<td>女</td>
					<td>17</td>
					<td>盘丝洞</td>
					<td>95</td>
				</tr>
				<tr>
					<td>总成绩</td>
					<td colspan="5">3045</td>
				</tr>
		</table>
		</div>
		<br />
	</body>
	
	<script type="text/javascript">
	//1) 改变第一行的背景色为浅灰色
    $("#b1").click(function () {
        $("tr:first").css("background-color","lightgrey");
    });

	//2) 改变最后一行的背景色为浅绿色
    $("#b2").click(function () {
        $("tr:last").css("background-color", "lightgreen");
    });

	//3) 改变除第1行和最后1行的其它行背景色为浅黄色
    $("#b3").click(function () {
        $("tr:not(:first):not(:last)").css("background-color", "lightyellow");
    });

	//4) 改变索引值为偶数的行背景色为浅粉色，下标从0开始
    $("#b4").click(function () {
        $("tr:even").css("background-color", "lightpink");
    });

	//5) 改变索引值为奇数的行背景色为aquamarine色
    $("#b5").click(function () {
        $("tr:odd").css("background-color", "aquamarine");
    });

	//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
    $("#b6").click(function () {
        $("tr:gt(3)").css("background-color", "oldlace");
    });

	//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite
    $("#b7").click(function () {
        $("tr:eq(3)").css("background-color", "antiquewhite");
    });

	//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen
    $("#b8").click(function () {
        $("tr:lt(3)").css("background-color", "yellowgreen");
    });
	</script>
</html>

小结

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
大于第n个，不含第index个	:gt()

选择器：属性过滤选择器

示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>表单属性过滤选择器</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style type="text/css">
			div,
			span {
				width: 180px;
				height: 180px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}
			
			div .mini {
				width: 50px;
				height: 50px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
			
			div .mini01 {
				width: 50px;
				height: 50px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
	</head>

	<body>
		<input type="button" value="val() 方法改变表单内可用文本框元素的值" id="b1" />
		<input type="button" value="val() 方法改变表单内不可用 <input> 元素的值" id="b2" />
		<input type="button" value="length 属性获取(单选和多选)选框选中的个数" id="b3" />
		<input type="button" value="length 属性获取下拉列表选中的个数" id="b4" />
		<input type="button" value="显示隐藏的文本框" id="b5" />
		<br><br>

		<input type="text" value="不可用值1" disabled="disabled">
		<input type="text" value="可用值1">
		<input type="text" value="不可用值2" disabled="disabled">
		<input type="text" value="可用值2">
		<input type="text" value="我是不可见的" style="display: none;">

		<br><br>
		<input type="checkbox" name="items" value="美容">美容
		<input type="checkbox" name="items" value="IT">IT
		<input type="checkbox" name="items" value="金融">金融
		<input type="checkbox" name="items" value="管理">管理

		<br><br>

		<input type="radio" name="sex" value="男">男
		<input type="radio" name="sex" value="女">女

		<br><br>
        <!--multiple表示多选-->
		<select name="job" id="job" multiple="multiple" size=4>
			<option>程序员</option>
            <option>中级程序员</option>
            <option>高级程序员</option>
            <option>系统分析师</option>
		</select>
		<select name="edu" id="edu">
			<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
		</select>

	</body>

	<script type="text/javascript">
        //1) val() 方法改变表单内可用文本框 <input> 元素的值
        $("#b1").click(function () {
            //设置值：1个参数表示设置值，没有参数表示获取值
            $("input[type='text']:enabled").val("传智播客");
        });

        //2) val() 方法改变表单内不可用 <input> 元素的值
        $("#b2").click(function () {
            $("input[type='text']:disabled").val("传智播客");
        });

        //3) length 属性获取选框选checked中的个数
        $("#b3").click(function () {
            //jq对象就是一个数组
            alert($("input:checked").length);
        });

        //4) length 属性获取下拉列表选中的个数
        $("#b4").click(function () {
            alert($("option:selected").length);
        });

        //5) 显示隐藏的文本框
        $("#b5").click(function () {
            //inline,block,none不可见
            $("input:hidden").css("display","inline");
        });
	</script>
</html>

小结

表单属性选择器	语法
选中（单选radio ，多选checkbox）	:checked
选择（下列列表 <select>中的<option>）	:selected

DOM操作的方法：html()，text()，val()

代码

<!DOCTYPE html>
<html>
<head>
    <title>html和text和val</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

</head>
<body>
<input type="button" id="b1" value="设置值value"/>
<input type="button" id="b2" value="获取值value"/>
<input type="button" id="b3" value="设置html"/>
<input type="button" id="b4" value="获取值html"/>
<input type="button" id="b5" value="设置text"/>
<input type="button" id="b6" value="获取text"/>
<hr/>

<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
<script type="text/javascript">
    $("#b1").click(function () {
        $("#myinput").val("李四");
    });
    
    $("#b2").click(function () {
        alert($("#myinput").val());
    });

    //设置html
    $("#b3").click(function () {
        $("#mydiv").html("<h1 style='color:red'>我们是害虫</h1>");
    });

    //获取值html
    $("#b4").click(function () {
        alert($("#mydiv").html());
    });

    //设置text
    $("#b5").click(function () {
        $("#mydiv").text("<h1 style='color:red'>我们是害虫</h1>");
    });

    //获取text
    $("#b6").click(function () {
        alert($("#mydiv").text());
    });
</script>
</html>

小结

操作方法	功能
html()	设置/获取标签体中HTML内容
text()	设置/获取标签体中纯文本内容
val()	设置/获取表单中value的值

DOM操作的方法：与属性有关的方法

语法

注：一个参数是获取，两个参数是添加或修改

attr——attribute prop——property

在这里插入图片描述

什么时候使用attr()和prop()

checked或selected等属性，值是boolean类型，checked=true表示选中，false表示不选中。prop用于值是boolean的情况，其它都使用attr()方法。
在这里插入图片描述

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>

<body>
<input type="button" id="b1" value="获取北京节点的name属性值"/>
<input type="button" id="b2" value="设置北京节点的name属性的值为dabeijing"/>
<input type="button" id="b3" value="新增北京节点的discription属性 属性值是didu"/>
<input type="button" id="b4" value="删除北京节点的name属性"/>
<input type="button" id="b5" value="获得hobby的选中状态"/>

<ul>
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
爱好：<input type="checkbox" id="hobby" value="游泳"/>游泳

</body>

<script type="text/javascript">
    //获取北京节点的name属性值
    $("#b1").click(function () {
        alert($("#bj").attr("name"));
    });

    //设置北京节点的name属性的值为"雾都"
    $("#b2").click(function () {
        $("#bj").attr("name","雾都");  //属性存在就是修改
    });

    //新增北京节点的discription属性 属性值是"天朝"
    $("#b3").click(function () {
        $("#bj").attr("discription","天朝");
    });

    //删除北京节点的name属性
    $("#b4").click(function () {
        $("#bj").removeAttr("name");
    });

    //获得hobby的选中状态
    $("#b5").click(function () {
        //得到boolean类型的值
        alert($("#hobby").prop("checked"));
    });
</script>

</html>

小结

方法名	功能描述
attr()	获取/修改/新增属性
prop()	获取/修改/新增 boolean类型属性
removeAttr() /removeProp()	删除属性

DOM操作的方法：与样式有关的方法

学习与样式和类有关的方法

示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        .one {
            width: 200px;
            height: 140px;
            margin: 20px;
            background: red;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        /*待用的样式*/
        .second {
            width: 222px;
            height: 220px;
            margin: 20px;
            background: yellow;
            border: pink 3px dotted;
            float: left;
            font-size: 22px;
            font-family: Roman;
        }
    </style>
</head>

<body>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<hr/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one
</div>

</body>

<script type="text/javascript">
    // 采用属性增加样式(改变id=one的样式)，样式名为second
    $("#b1").click(function () {
        $("#one").attr("class","second");
    });

    // addClass
    $("#b2").click(function () {
        $("#one").addClass("second");
    });

    // removeClass
    $("#b3").click(function () {
        $("#one").removeClass("second");
    });

    // 切换样式
    $("#b4").click(function () {
        //有类名则删除，没有类名则添加
        $("#one").toggleClass("second");
    });

    // 通过css()获得id为one背景颜色
    $("#b5").click(function () {
        //1个参数表示获取，2个参数表示设置
        alert($("#one").css("background-color"));
    });

    // 通过css()设置id为one背景颜色为绿色
    $("#b6").click(function () {
        $("#one").css("backgroundColor","green");
    });
</script>
</html>

小结

方法名	功能
addClass(类样式名)	添加一个类名
css(样式名)	设置指定的样式

DOM操作的方法：元素的创建和添加

在这里插入图片描述

演示代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>

<body>
<input type="button" id="b1" value="将反恐放置到city的后面"/>
<input type="button" id="b2" value="将反恐放置到city的最前面"/>
<input type="button" id="b3" value="将反恐放在天津前面"/>
<input type="button" id="b4" value="将反恐放在天津后面"/>
<input type="button" id="b5" value="创建一个广州的节点"/>
<hr/>

<ol id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ol>

<ul id="game">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>
</body>

<script type="text/javascript">
    //将反恐放置到city的后面
    $("#b1").click(function () {
        //加成最后一个子元素
        $("#city").append($("#fk"));
    });

    //将反恐放置到city的最前面
    $("#b2").click(function () {
        $("#city").prepend($("#fk"));
    });

    //将反恐放在天津前面
    $("#b3").click(function () {
        $("#tj").before($("#fk"));
    });

    //将反恐放在天津后面
    $("#b4").click(function () {
        $("#tj").after($("#fk"));
    });

    //创建一个广州的节点，加到城市中：<li id="gz" name="guangzhou">广州</li>
    $("#b5").click(function () {
        //$("#city").append($("<li id=\"gz\" name=\"guangzhou\">广州</li>"));
        //直接使用字符串
        $("#city").append("<li id=\"gz\" name=\"guangzhou\">广州</li>");
    });
</script>

</html>

小结

方法名	描述
$(标签的全部内容)	创建元素
父元素.append(子元素)	追加成最后一个子元素
元素.before(元素)	在当前元素前添加新元素

DOM操作方法：删除元素

在这里插入图片描述

示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	 
	<body>
	   <input type="button" id="b1" value="从city中删除北京" />
       <input type="button" id="b2" value="删除city中所有的子节点" />
	   <hr/>
		 <ol id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ol>
	</body>
	
	<script type="text/javascript">
	   //从city中删除<li id="bj" name="beijing">北京</li>节点
       $("#b1").click(function () {
           $("#bj").remove();
       });

	   //删除city中所有的子节点，观察city本身有没有删除
       $("#b2").click(function () {
           $("#city").empty();
       });
	</script>
   
</html>

小结

方法名	功能
元素.remove()	删除自己
父元素.empty()	删除所有的子元素

jQuery的事件的使用

目标

一个元素同时使用多个事件
多个事件的链式写法

事件处理函数的命名

在JS中所有的事件on开头，在JQ中所有的事件方法去掉on即可

jQuery中常用的事件

事件方法	功能
blur()	失去焦点
change()	改变事件
click()	单击事件
dblclick()	双击事件
focus()	得到焦点
keydown()	按下键
keyup()	松开键
mouseover()	鼠标移上
mouseout()	鼠标移出
submit()	表单提交
hover()	jq创建的事件，鼠标悬浮，相当于mouseover和mouseout

事件方法使用示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个事件的写法</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名：
<input type="text" id="t1" value=""/>
</body>
<script type="text/javascript">
    /*    //得到焦点的事件
        $("#t1").focus(function () {
            //js -> jq对象
            $(this).css("background-color","yellow");
        });

        //失去焦点
        $("#t1").blur(function () {
            $(this).css("background-color","green");
        });

        //松开按键
        $("#t1").keyup(function () {
            //将自己的值转成大写再赋值给自己
            $(this).val($(this).val().toUpperCase());
        });*/

    //在JQ中，如果一个对象同时有多个事件，可以写在一起，支持链式写法
    //得到焦点的事件
    $("#t1").focus(function () {
        //js -> jq对象
        $(this).css("background-color", "red");
    }).blur(function () {
        $(this).css("background-color", "blue");
    }).keyup(function () {
        //将自己的值转成大写再赋值给自己
        $(this).val($(this).val().toUpperCase());
    });
</script>
</html>

小结

事件方法	功能
blur()	失去焦点
focus()	得到焦点
keyup()	松开按键

jQuery中鼠标悬停事件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #girl {
            width: 550px;
            height: 550px;
            border: 2px solid gray;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //得到div对象，设置hover事件:两个处理函数：移上，移出
            $("#girl").hover(function () {
                $(this).css("background-image","url(img/g3.jpg)");
            }, function () {
                $(this).css("background-image","url(img/g2.jpg)");
            });
        });
    </script>
</head>
<body>
<div id="girl">

</div>
</body>
</html>

动态绑定事件：绑定(on)与解绑(off)

什么是事件绑定

之前所有的事件都是程序运行之前就已经写好了，现在可以通过on进行事件动态绑定。让元素在程序执行过程中绑定某个事件，也可以使用off对元素的事件解绑。

绑定语法

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定和解绑</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr/>
<input type="button" value="给按钮2绑定点击事件" id="b3">
<input type="button" value="解除按钮2的绑定事件" id="b4">

<script type="text/javascript">
    //b1的事件一开始就写好了
    $("#b1").click(function () {
       alert("我是按钮1");
    });

    //点击b3给b2绑定单击事件
    $("#b3").click(function () {
        //点击事件，处理函数
        $("#b2").on("click", function () {
            alert("我是按钮2");
        });
    });

    $("#b4").click(function () {
       //给b2解绑
       $("#b2").off();
    });
</script>
</body>
</html>

小结

事件方法	功能
JQ对象.on(“事件名”, function() {})	绑定事件
JQ对象.off()	解绑事件

jQuery循环遍历的三种方式

jQuery对象的方法

JQ对象.each(function(index,element))
JQ对象就是要遍历的集合 index: 当前元素的索引 element: 当前元素对象

jQuery的全局方法

JQ中全局方法：都是以$.开头，可以在JQ中任何地方调用。

$.each(数组或集合, function(index,element))
第1个参数就是要遍历的数组或集合 index:当前元素的索引 element:当前遍历元素对象

遍历的示例

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历元素</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select name="city" id="city">
    <option>广州</option>
    <option>深圳</option>
    <option>东莞</option>
</select>
<input type="button" id="b1" value="jq对象的方法遍历" />
<input type="button" id="b2" value="jq对象的全局方法" />
<input type="button" id="b3" value="for-of方法遍历" />
<script type="text/javascript">
    //注：以上无论哪种遍历方式，每个元素都是JS对象

    //得到所有的option对象
    var options = $("option");  //集合

    $("#b1").click(function () {
        //jq对象的方法遍历, index:索引号  element: 当前元素
        options.each(function (index,element) {
            //alert(index + "----" + element.innerText);  //js对象
            alert(index + "----" + $(element).text());  //jq对象
        });
    });
    
    $("#b2").click(function () {
        //使用全局方法，参数1：要遍历的集合或数组 index:索引号  element: 当前元素
        $.each(options, function (index,element) {
            alert(index + "----" + element.innerText);   //js对象
        });
    });

    $("#b3").click(function () {
        for(var op of options) {
            alert(op.innerText);   //js对象
        }
    });
</script>
</body>
</html>

小结

jQuery遍历的三种方式
1. 集合对象.each(function(index,element))
2. $.each(集合, function(index,element))
3. for(var 变量 of 集合)

案例：表格隔行换色与全选全不选

目标

实现隔行变色的效果
实现全选全不选的效果

效果

在这里插入图片描述

步骤

隔行变色

页面加载完毕，得到所有的tr。
使用基本过滤选择器，得到所有大于0的行，设置偶数行背景色为lightgreen
使用基本过滤选择器，得到所有大于0的行，设置奇数行背景色为lightyellow

全选全不选

给最上面的id=all的复选框添加点击事件
使用属性选择器选中所有item=name的复选框，设置它的checked属性与id=all的复选框的checked属性相同。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隔行换色/全选全不选</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        tr {
            height: 35px;
            text-align: center;
        }

        a:link {
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //在页面加载完毕以后让奇数和偶数背景色不同
        $(function () {
            $("tr:gt(0):even").css("backgroundColor", "lightgreen");  //偶数
            $("tr:gt(0):odd").css("backgroundColor", "yellow");   //奇数

            //给all添加点击事件
            $("#all").click(function () {
                //让所有name="item"的元素选中
                $("input[name='item']").prop("checked", $("#all").prop("checked"));
            });
        });
    </script>
</head>
<body>
<table id="tab1" border="1" width="700" align="center">
    <tr style="background-color: #999999;">
        <td><input type="checkbox" id="all"></td>
        <td>分类ID</td>
        <td>分类名称</td>
        <td>分类描述</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>