jQuery的基本用法大全

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

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

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

什么是JS框架

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

为什么要使用框架开发?

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

在这里插入图片描述

jQuery框架特点:

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

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

步骤
  1. 创建项目,在项目中创建js目录
  2. 复制jquery-3.3.1.js文件到js目录下
  3. 在页面上使用<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常用的选择器有如下:

  1. 基本选择器
  2. 层级选择器
  3. 属性选择器
  4. 基本过滤选择器
  5. 属性过滤选择器

选择器的语法

在这里插入图片描述
注: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的事件的使用

目标

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

事件处理函数的命名

在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 集合)

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

目标

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

效果

在这里插入图片描述

步骤

隔行变色
  1. 页面加载完毕,得到所有的tr。
  2. 使用基本过滤选择器,得到所有大于0的行,设置偶数行背景色为lightgreen
  3. 使用基本过滤选择器,得到所有大于0的行,设置奇数行背景色为lightyellow
全选全不选
  1. 给最上面的id=all的复选框添加点击事件
  2. 使用属性选择器选中所有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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值