jQuery的基本用法大全

最新推荐文章于 2025-06-19 14:35:59 发布
原创 最新推荐文章于 2025-06-19 14:35:59 发布 · 812 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#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>
jQuery中$()函数的7种用法汇总
iPwisdom的博客
11-23 523
前言 jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。 其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。 接下来会一一说一下这7中用法，欢迎大家指正其中不正确的地方。 1 jQuery(selector,context) 简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context)
jquery用法大全
11-04
jQuery库为Web脚本编程提供了通用的抽象层，使得它几乎适用于任何编程的情形。由与它容易扩展而且不断有新插件面世增强它的功能，所以这里无法涵盖它所有可能的用途和功能。抛开这些就其核心特性而言，jQuery能够满足下列需求：
jquery 使用方法
dbtf9575的博客
01-12 258
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。 一、选择网页元素jQuery的基本设计和主要用...
jQuery入门教程（持续更新中）
最新发布
cici_1_的博客
06-19 1043
jQuery知识点总结
十分钟玩转 jQuery、实例大全
weixin_30706691的博客
07-25 293
一、简介 定义 　　jQuery创始人是美国John Resig，是优秀的Javascript框架； 　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这 jQuery对象 　　jQuery产生的对象时jQuery独有的，只能自己调用 书写规则 　　支持链式操作； 　　在变量前加"$"符号（var $variable = jQuery对象）； 　　注：此规定...
jQuery的基本用法
m0_68284186的博客
04-21 726
jQuery的基本用法
Jquery用法大全
wang_liuyong的博客
08-09 516
一.js选择器 document.getElementById();//一个元素 document.getElementsByClassName();//HTMLCollection元素集合 document.getElementsByName();//NodeList节点的集合 document.getElementsByTagNameNS(); //htmlCollection元素的集合 //...
jQuery 基本功能
11-17
在“jQuery基本功能”中，我们将深入探讨以下几个关键领域： 1. **选择器**: jQuery 的选择器类似于CSS，可以轻松选取DOM元素。例如，`$("#id")` 选择ID为指定值的元素，`$(".class")` 选择所有具有特定类名的元素...
jQuery选择器之基本过滤选择器用法实例分析
12-02
本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考，具体如下： 前面一篇介绍了层次选择器，今天我们学习一下jQuery的另一种选择器：基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西，...
jquery中post方法用法实例
10-25
1. **基本用法**：post方法接受三个参数，第一个是服务器端接收请求的URL地址，第二个是发送的数据（通常是一个对象），第三个是数据返回后的回调函数。 ```javascript $.post(url, [data], [callback]); ``` ...
jQuery使用hide方法隐藏元素自身用法实例
12-03
在这个例子中，我们首先引入了jQuery库（`<script src="js/jquery.min.js"></script>`），确保可以使用jQuery的方法。然后，在`<script>`标签内，我们编写了JavaScript代码，这部分代码在文档加载完成时执行（通过`$...
Jquery的基本使用
XiaoXiao_Lin的博客
09-28 1785
1、使用jQuery一定要引入jQuery库 2、jQuery中的$是一个函数 dom对象转化为jquery对象： 1、先有dom对象。2、$(DOM对象)就可以转化为jQuery对象 jQuery对象转化为dom对象： 1、先有jQuery对象。2、jQuery对象[下标]取出相应的DOM对象 核心函数的四个作用： 传入参数为[函数]时:在文档加载完成后执行这个函数 传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象 传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象.
01【jQuery】入门， jQuery 概述，jQuery 的基本使用
嘿嘿_哈哈的博客
09-07 431
01【jQuery】入门 学习内容： jQuery 概述，jQuery 的基本使用 1. jQuery 概述 1.1 JavaScript 库 仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就 是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们.
JQuery的基本用法
weixin_42528089的博客
12-17 426
 常用的形式,$代表jquery $(document).ready(function(){ }); Jquery的基本语法 $(选择器).操作（） eg: $("p").hide(); 1 标记选择器： $("p") 2 id选择器（#） id=test的属性 $("#test") 3 class 选择器 通过组件class 属...
jQuery的基本使用
qq_61706112的博客
02-18 1691
一、 jQuery对象与DOM对象 DOM对象：原生js获取的对象 jQuery对象：用jQuery方法获取的对象 注意： 1. jQuery对象只能使用jQuery方法，DOM对象只能使用原生js提供的方法 2. jQuery对象与DOM对象的相互转换： （1）DOM转换为jQuery对象：$(DOM对象) var newli = document.querySelector('li'); $(newli); （2）jQuery转换为DOM对象：$(DOM对象) $(...
JQ 基本用法
未玄的博客
08-30 600
$（“选择器”）：用来获取元素; 创建标签var pM = $（“&lt;p&gt;黄鹤楼&lt;/ p&gt;”）; /n 添加 prepend : 添加到前边; append : 添加到后边 after 为当前元素添加兄弟元素 添加到后边 before 为当前元素添加兄弟元素 添加到前边 替换 A.replaceWith(B):用 B 替换 A; A.replaceA...
jQuery用法
nl19940914的博客
06-19 447
本文会给你们展示50个jQuery代码片段，这些代码能够给你的JavaScript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中! 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）： $.ajaxSetup({
JQuery基本语法及初学者实践指南
### 描述知识点：jquery基本语法资料 ,有ppt,基本代表的项目等，适合于初学者 1. **基础语法介绍**： - **选择器和 DOM 操作**：初学者首先应该熟悉 jQuery 的选择器，理解如何通过 jQuery 选择 DOM 元素，并进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值