jQuery框架-与js对象转换-选择器-DOM操作方法-事件-案例

最新推荐文章于 2023-11-17 11:49:51 发布

专注一生i

最新推荐文章于 2023-11-17 11:49:51 发布

阅读量380

点赞数

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

本文链接：https://blog.csdn.net/qq_26304015/article/details/109479490

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

能够使用jQuery的基本选择器
能够使用jQuery的层级选择器
能够使用jQuery的过滤选择器
能够使用jQuery的DOM操作的方法
能够完成隔行换色

什么是jQuery

目标

什么是jQuery
它有什么作用

什么是JS框架

JS框架也是使用JavaScript语言编写的，框架本身提供了大量的新的方法，可以简化JS代码，提高开发效率。

为什么要使用框架开发

同一段JS代码在不同的浏览器上执行效果是有差异的

jQuery框架也是JS代码写出来的，就是一个JS文件
由第三方厂商做出来的，免费开源。
提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现
程序员只需要编写一套代码，就可以无差异的运行在所有的浏览器上。

jQuery框架特点：

免费开源
轻量级框架：占用资源少，运行速度快
宗旨：write less do more

小结

jQuery开发有什么好处？

提高开发效率
免费开源
减少开发工作量

jQuery的导入与使用

目标

在页面上使用jQuery框架

官网

http://www.jquery.com

版本的选择：企业中使用相对比较低版本，学习比较高的版本

开发中使用标准版：代码可读性好，有注释，文件比较大
在企业中部署使用压缩版，文件小

这两个版本在功能上是完全一样的

文档网站

https://www.jquery123.com/

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第1个jQuery代码</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--
    步骤：
     1. 创建js目录，把jquery.js文件复制到js目录下
     2. 创建html网页，使用script标签导入jquery.js文件  (选中js文件，直接拖到网页上)
     3. $(function) 入口函数，在网页加载完毕以后自动执行，类似于window.onload
     -->
</head>
<body>
    <script type="text/javascript">
        $(function () {
            //我们的代码写在这里，会在网页加载完毕以后执行
            alert("Hello jQuery");
        });
    </script>
</body>
</html>

导入失败的情况

$(function())的作用

类似于window.onload

与window.onload的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>与window.onload的区别</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
    /**
     * jQuery中每个入口函数都会依次执行
     */

    /*$(function () {
        alert("Hello jQuery1");
    });

    $(function () {
        alert("Hello jQuery2");
    });*/


    window.onload = function () {
        alert("Window 1");
    }

    /**
     * 只会执行最后这一次，后面的覆盖前面的
     */
    window.onload = function () {
        alert("Window 2");
    }
</script>
</body>
</html>

小结

jQuery导入有哪两个步骤?
1. 将jquery复制到js目录下
2. 使用script标签导入jquery.js文件
$(function()) 相当于哪个事件?

window.onload

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

JS对象与jQuery对象的区别

JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById("id")
jQuery对象：通过jQuery选择器选中元素，就是jQuery对象

为什么要转换

注：JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。

转换语法

操作	方法
将JS对象-->jQuery对象	$(JS对象)
将jQuery对象--> JS对象	JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象

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 () {
        //1.得到文本框对象
        let jsObject = document.getElementById("company");   //JS对象
        //2.取出文本框的值
        //let txt = jsObject.value;  //调用js对象的属性或方法

        //将jsObject -> jqObject 转换
        let txt = $(jsObject).val();
        //3.显示出来
        alert(txt);
    }

    //使用JQ对象的方法：按钮2的单击事件
    $("#b2").click(function () {   //回调函数，事件处理函数
        //1.得到文本框对象
        let jqObject = $("#company");  //JQ对象
        //2.取出文本框的值
        //let txt = jqObject.val();       //调用JQ中方法

        //将jq对象->js对象
        let txt = jqObject[0].value;
        //3.显示出来
        alert(txt);
    });
</script>
</body>
</html>

小结

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

选择器：基本选择器

目标

基本选择器的使用

选择器的作用

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

jQuery常用的选择器有如下：

基本选择器
层级选择器
过滤选择器
表单过滤选择器

选择器的语法

注：所有的选择器外面都要使用$("")，如：ID选择器 $("#ID")

基本选择器	语法
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="改变 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方法("样式名","值")，修改行内样式
        $("#one").css("background-color", "red");
    });

    // 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
    $("#b2").click(function () {
        /*
        标签选择器，选中所有的div
        jquery几乎所有的方法，都支持直接操作一个集合
         */
        $("div").css("background-color", "red");
    });

    // 3) 改变 class 为 mini 的所有元素的背景色为 红色
    $("#b3").click(function () {
        //样式名可以写成：background-color,也可以写成backgroundColor
        $(".mini").css("backgroundColor", "red");
    });
</script>
</html>

小结

基本选择器	语法
ID选择器	#ID
类选择器	.类名
标签选择器	标签名

选择器：层级选择器

目标

层级选择器的使用

语法

注：省略了$("")

层级选择器	语法
获取A元素内部所有B元素，B是A的子孙元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三)	A+B
获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合)	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;
        }
    </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"/>
<input type="button" value="改变id为two的后面同级兄弟div元素的背景色为红色" id="b4"/>
<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");
    });
	
	//4) 改变id为two的后面同级兄弟div元素的背景色为红色
	 $("#b4").click(function () {
         $("#two~div").css("background-color", "red");
     });
</script>
</html>

小结

层级选择器	语法
获取A元素内部所有B元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素	A+B
获取A元素后面所有同级B元素	A~B

选择器：过滤选择器

目标

基本过滤选择器的使用

什么是过滤选择器

在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法

语法

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
不包括指定内容的元素	:not()
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
等于第几个 equals	:eq()
大于第n个，不含第index个	:gt()
小于第n个，不含第index个	:lt()

演示案例

<!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 () {
        //标签选择器，过滤得到第0元素
        $("tr:first").css("backgroundColor", "lightgreen");
    });

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

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

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

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

	//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
    $("#b6").click(function () {
        //注：从0开始
        $("tr:gt(3)").css("backgroundColor", "lightgreen");
    });

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

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

小结

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
不包括指定内容的元素	:not()
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
等于第几个	:eq()
大于第n个，不含第index个	:gt()
小于第n个，不含第index个	:lt()

选择器：表单过滤选择器

目标

属性过滤选择器

语法

注：表单过滤选择器用于表单中元素

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

示例

<!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" />
		<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">

		<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 () {
            //val()作用，相当于value属性，既可设置值，也可以获取值
            $("input[type=text]:enabled").val("天气不错");
        });

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

        //3) length 属性获取选框选checked中的个数
        $("#b3").click(function () {
            //JQ对象本质是一个数组，就可以通过length属性得到它的长度。只有单选框和复选框有checked属性
            alert($("input:checked").length);
        });

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

	</script>
</html>

小结

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

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

目标

在JQ中如何操作innerHTML、innerText、value属性

jQuery的DOM操作方法

操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)

语法

html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值   val()获取值

演示案例

需求

获取"张三"，获得"标题标签"的文本，获得mydiv的标签体内容

效果

代码

<!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 () {
        //有参数就是设置值value
        $("#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()	类似于innerHTML
text()	类似于innerText
val()	相当于实现value的功能

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

目标

学习attr()、removeAttr()、prop()、removeProp()方法的使用

语法

attr() 修改，添加或获取元素的属性。
	attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
	prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
	jq对象.removeAttr("src")
	jq对象.removeProp("href")

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

如果属性值是true或false，建议使用prop()，编程更加方便

代码

<!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属性 属性值是didu
    $("#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()	操作布尔类型值的属性
removeAttr() /removeProp()	删除属性名和值

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

目标

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

回顾

在JS中操作CSS的方法：

元素.style.样式名=样式值

元素.className=类名

与类名有关的方法

addClass("类名") 添加一个类样式，与CSS中第二种写法功能相同，如：addClass("一个或多个类名")
removeClass("类名") 移除一个类样式，让类样式不起作用
toggleClass("类名") 切换类样式，如果有这个class名就移除，如果没有就添加</span>

与样式有关的方法

类似于css中方式一，修改行内样式

示例

<!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" class="aaa">
	    	 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个参数是获取样式值
            alert($("#one").css("background-color"));
        });
        
 		// 通过css()设置id为one背景颜色为绿色
        $("#b6").click(function () {
            //2个参数是设置样式值
            $("#one").css("background-color", "green");
        });
	</script>
   
</html>

小结

方法名	功能
addClass(类样式名)	添加类样式
removeClass(类样式名)	移除类样式
toggleClass(类样式名)	上面2个方法的切换
css(样式名)	获取指定样式值
css(样式名,样式值)	设置指定的样式

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

目标

使用JQ对象的方法创建和插入元素

回顾

JS中创建元素：createElement()

JS添加到DOM树：appendChild()

语法

$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系</span>

演示代码

<!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 () {
        //注：append还有剪切的功能
        //$("#city").append($("#fk"));

        //复制的功能，克隆。主操作方是父元素
        //$("#city").append($("#fk").clone());

        //子元素向父元素中追加，主操作方是子元素
        $("#fk").appendTo($("#city"));
    });

    //将反恐放置到city的最前面
    $("#b2").click(function () {
        //也有prependTo()这个方法
        $("#city").prepend($("#fk"));
    });

    //将反恐放在天津前面
    $("#b3").click(function () {
        //两者是兄弟关系
        $("#tj").before($("#fk"));
    });

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

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

</html>

小结

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

回顾

JQ对象与JS对象转换

JS->JQ： $(JS对象)
JQ->JS： JQ对象[0] 或 JQ对象.get(0)</span>

选择器

基本选择器

#ID
.类名
标签名

层级选择器

A B 
A>B 
A+B
A~B

过滤选择器

:first
:last
:not()
:even
:odd
:eq()
:gt()
:lt()

表单过滤选择器

:enabled
:disabled
:checked
:selected

DOM的操作方法

修改元素的内容

html() -> innerHTML
text() -> innerText
val()  -> value

属性有关的方法

attr()
prop() 用于布尔类型属性值
removeAttr() removeProp() 删除属性

样式有关的方法

addClass()
removeClass()
toggleClass() 切换类
css() 修改行内样式

元素创建和添加

$("元素的所有内容")
append() 添加到最后一个子元素
appendTo()  子元素追加到父元素中
prepend() 添加到第一个子元素
prependTo() 子元素追加到父元素中
before() 添加到当前元素的前面
after() 添加到当前元素的后面
clone() 当前元素克隆

DOM操作方法：删除元素

目标

与删除元素有关的方法

语法

元素.remove()  删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在

示例

<!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的事件的使用

目标

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

事件处理函数的命名

所有的事件处理函数前面都没有on

jQuery中常用的事件

事件方法	功能
blur()	失去焦点
change()	改变事件
click()	单击事件
dblclick()	双击事件
focus()	得到焦点
keydown()	键盘按下
keyup()	松开键盘
mouseover()	鼠标移上
mouseout()	鼠标移出
submit()	表单提交

事件方法使用示例

需求

文本框得到焦点和失去焦点分别显示不同的背景色
松开按键，将字母转成大写，再显示在文本框中
使用链式写法实现相同的功能

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个事件的写法</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        /*
         1. 文本框得到焦点和失去焦点分别显示不同的背景色
         2. 松开按键，将字母转成大写，再显示在文本框中
         3. 使用链式写法实现相同的功能*/
        $(function () {
            /*
            //得到焦点
            $("#t1").focus(function () {
                // $("#t1").css("background-color", "yellow");
                //this是一个js对象，使用jq的方法必须转换
                $(this).css("background-color", "yellow");
            });

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

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

            //得到焦点
            $("#t1").focus(function () {
                $(this).css("background-color", "red");
            }).blur(function () {   //失去焦点
                $("#t1").css("background-color", "blue");
            }).keyup(function () {  //松开按钮
                $("#t1").val($("#t1").val().toUpperCase());  //转成大写以后再赋值给自己
            });
        })
    </script>
</head>
<body>
用户名：
<input type="text" id="t1" />
</body>

</html>

小结

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

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

目标

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

效果

步骤

隔行变色

页面加载完毕，得到所有的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 () {
            //隔行变色，除了第1行之外，even表示偶数行，剩下的行中偶数行
            $("tr:gt(0):even").css("background-color", "lightgreen");
            $("tr:gt(0):odd").css("background-color", "lightyellow");

            //全选，全不选
            $("#all").click(function () {  //最上面的复选框点击事件
                //得到all的值是true或是false
                //选中所有下面的checkbox
                $("input[name=item]").prop("checked", $("#all").prop("checked"));    //设置boolean类型的属性
            });
        })
    </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>

小结

选中大于0的tr的偶数行的选择器怎么写？
```
tr:gt(0):even
```
设置某个复选框选中的方法是什么？
```
jq对象.prop("checked",true)
```

案例：实现购物车

目标

使用今天学习的内容制作一个购物车案例

需求

实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，则添加成功一行，清空文本框的内容，图片使用固定一张。
实现删除一行商品的功能，删除前弹出确认对话框。

效果

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车的实现</title>
    <style type="text/css">
        table {
            width: 400px;
            border-collapse: collapse;
            margin: auto;
        }

        td,th {
            text-align: center;
            height: 30px;
        }

        .container {
            width: 400px;
            margin: auto;
            text-align: right;
        }

        img {
            width: 100px;
            height: 100px;
        }

        th {
            background-color: lightgray;
        }

        tr:hover {
            background-color: lightyellow;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    <script type="text/javascript">
        //添加到购物车的点击事件
        function addRow() {
            //1.获取文本框中内容
            let val = $("#pname").val().trim();   //去掉前后的空格
            if (val == "") {  //注：不同于Java
                alert("商品名字不能为空");
                //让文本框获得焦点
                $("#pname").focus();
                return;
            }
            //2.创建tr
            let tr = "<tr>" +
                "<td><img src=\"img/girl.jpg\" /></td>" +
                "<td>" + val + "</td>" +
                "<td><input type=\"button\" value=\"删除\" onclick=\"deleteRow(this)\"></td>" +
                "</tr>";
            //3.创建好的tr的放到父元素tbody中
            $("#cart").append(tr);
            //4.清空文本框内容
            $("#pname").val("");
        }

        //删除一行
        function deleteRow(obj) {   //obj其实就是一个按钮对象，这是JS对象，转成JQ对象
            if (confirm("真的要从购物车中移除这件商品吗?")) {
                //按钮的父元素->td  的父元素 -> tr  删除tr即可
                $(obj).parent().parent().remove();   //自己删除自己
            }
        }
    </script>
</head>

<body>
<div class="container">
    <table border="1">
        <tbody id="cart">
        <tr>
            <th>
                图片
            </th>
            <th>
                商品名
            </th>
            <th>
                操作
            </th>
        </tr>
        <tr>
            <td><img src="img/sx.jpg" /></td>
            <td>
                三星Note7
            </td>
            <td>
                <!--this表示当前按钮-->
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
        </tbody>
    </table>
    <br />
    商品名：
    <input type="text" id="pname" value="" />&nbsp;
    <input type="button" value="添加到购物车" onclick="addRow()" />
</div>
</body>
</html>

小结

1. 创建tr
2. 添加到tbody中
3. 删除元素remove()
4. 获取父元素：parent()

总结

JS与JQ对象的转换

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

能够使用jQuery的基本选择器

基本选择器	语法
ID选择器	#ID
类选择器	.类名
标签选择器	标签名

能够使用jQuery的层级选择器

层级选择器	语法
获取A元素内部所有B元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素	A+B
获取A元素后面所有同级B元素	A~B

能够使用jQuery的DOM操作的方法

jQuery中的方法	作用
html()	相当于innerHTML
text()	相当于innerText
val()	相当于value
attr()	操作属性
prop()	操作属性，布尔类型的值
addClass()	添加类样式
removeClass()	删除类样式
$(标签全部内容)	创建一个元素
append()	追加到最后一个子元素
before()	添加到当前元素的前面
after()	添加到当前元素的后面
remove()	删除自己

专注一生i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery框架-与js对象转换-选择器-DOM操作方法-事件-案例

能够使用jQuery的基本选择器能够使用jQuery的层级选择器能够使用jQuery的过滤选择器能够使用jQuery的DOM操作的方法能够完成隔行换色什么是jQuery目标什么是jQuery 它有什么作用什么是JS框架JS框架也是使用JavaScript语言编写的，框架本身提供了大量的新的方法，可以简化JS代码，提高开发效率。为什么要使用框架开发同一段JS代码在不同的浏览器上执行效果是有差异的...
复制链接

扫一扫

专栏目录