day05 jquery

最新推荐文章于 2024-08-22 17:01:19 发布

娃娃哈哈

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量199

点赞数

分类专栏： web 文章标签： css js javascript html

本文链接：https://blog.csdn.net/weixin_43525993/article/details/108173015

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 jquery的快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--需求: 点击按钮后, 再div中显示当前时间-->
</head>
<body>
<input type="button" value="显示时间 传统js" id="btn"/>
<input type="button" value="显示时间 jquery" id="btn2"/>
<div id="mydiv"></div>
<div id="mydiv2"></div>

<!--倒入jquery包-->
<script src="js/jquery-3.3.1.js"></script>

<script>
    // 需求: 点击按钮后, 再div中显示当前时间, 传统js
    document.querySelector("#btn").onclick = function() {
        document.querySelector("#mydiv").innerHTML = "传统js操作: " +　new Date().toLocaleString();
    }

    // 需求: 点击按钮后, 再div中显示当前时间, jquery
    // 前提: 因为jquery是第三方的, 所以需要倒入jquery的包
    // jQuery("#btn2").click(function () {
    //     jQuery("#mydiv2").html("jquery操作: " + new Date().toLocaleString());
    // });

    $("#btn2").click(function () {
        $("#mydiv2").html("jquery操作222222: " + new Date().toLocaleString());
    });
</script>
</body>
</html>

2 传统js的onoload 和 jquery的onload 的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>与window.onload的区别</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // alert(111);

        // 传统js的页面加载完成后执行
        // window.onload = function () {
        //     alert(2222)
        // }

        // jquery 的页面加载完成后执行
        $(function() {
            alert(55555)
        });

        // jquery的页面加载完成后 不会覆盖
        $(function() {
            alert(7777)
        });

        // 多个传统js的页面加载完成后执行, 后面的会把前面的覆盖掉
        window.onload = function () {
            alert(6666)
        }



        // alert(3333)
    </script>
</head>
<body>
<script type="text/javascript">
    // alert(4444);
    /**
     * jQuery中每个入口函数都会依次执行
     */


    /**
     * 只会执行最后这一次，后面的覆盖前面的
     */


</script>
</body>
</html>

3 jquery对象和js对象的相互转化

<!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">
    // 需求1: 点击按钮1, 采用js方式获取输入框内容
    document.querySelector("#b1").onclick = function() {
        //var val = document.querySelector("#company").value;
        //console.log("传统js获取 ===== " + val);
        // 需求3: jquery对象 是否可以调用 js对象的属性或方法? 结果 undefined, 代表拿不到, 不能
        // var val3 = $("#company").value;
        // console.log("需求3: jquery对象 是否可以调用 js对象的属性或方法? ====== " + val3);
        // 需求4: 如何让jquery对象 调用 js对象的属性和方法呢? 解决: 将jquery对象转成js对象, jquery对象[0]
        var val4 = $("#company")[0].value;
        console.log("需求4 将jquery对象转成js对象 =====" + val4);
    }
    // 需求2: 点击按钮2, 采用jquery方式获取输入框内容
    $("#b2").click(function () {
        //var val = $("#company").val();
        //console.log("jquery获取: =========== " + val);

        // 需求5: js对象是否可以调用jquery对象的属性和方法? 结果 报错, 证明 不能调用
        // var val5 = document.querySelector("#company").val();
        // console.log("需求5: js对象是否可以调用jquery对象的属性和方法? =========== " + val5);

        // 需求6: 目标让js对象调用jquery对象的属性和方法, 解决: 将js对象转化成jquery对象, 如何转化: $(js对象)
        var val6 = $(document.querySelector("#company")).val();
        console.log("需求6: 目标让js对象调用jquery对象的属性和方法 =========== " + val6);
    });
</script>
</body>
</html>

4 基本选择器

<!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) 点击按钮1 改变 id 为one的元素的背景色为红色
    $("#b1").click(function () {
        $("#one").css("background", "red");
    });

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

    // 3)  点击按钮3 改变 class 为 mini 的所有元素的背景色为 红色
    $("#b3").click(function () {
        $(".mini").css("background", "red");
    })
</script>
</html>

5 层级选择器

<!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", "red")
    });

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

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

6 基本过滤选择器

<!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("background", "lightgray");
    });

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

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

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

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

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

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

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

7 表单过滤选择器

<!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 () {
			$("input[type=text]:enabled").val("绝不后退");
        });

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

        //3) length 属性获取选框选checked中的个数
        $("#b3").click(function () {
			var len = $("input:checked").length
			console.log("length 属性获取选框选checked中的个数 =====  " + len);
        });

        //4) length 属性获取下拉列表选中的个数
        $("#b4").click(function () {
			let len2 = $("select option:selected").length;
			console.log("length 属性获取下拉列表选中的个数 ===== " + len2);
        });

	</script>
</html>

8 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">
    // 设置值value
    $("#b1").click(function () {
        $("#myinput").val("戚继光");
    });

    // 获取值value
    $("#b2").click(function () {
        var val = $("#myinput").val();
        console.log("获取输入框内容: ====== " + val);
    });

    //设置html
    $("#b3").click(function () {
        $("#mydiv").html("<h1 style='color:red'>敢于亮剑, 绝不后退!</h1>");
    });

    //获取值html
    $("#b4").click(function () {
        let htmlStr = $("#mydiv").html();
        console.log("htmlStr ========== " + htmlStr);
    });

    //设置text
    $("#b5").click(function () {
        $("#mydiv").text("<h1 style='color:red'>敢于亮剑, 绝不后退!</h1>");
    });

    //获取text
    $("#b6").click(function () {
        let textStr = $("#mydiv").text();
        console.log("textStr ========== " + textStr);
    });
</script>
</html>

9 属性 attr 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 () {
        var val = $("#bj").attr("name");
        console.log("val = " + val);
    });

    //设置北京节点的name属性的值为"首都"
    $("#b2").click(function () {
        $("#bj").attr("name", "首都");
    });

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


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

    //获得hobby的选中状态
    $("#b5").click(function () {
        var isChecked = $("#hobby").prop("checked");
        console.log("isChecked ===== " +isChecked);
    });
</script>

</html>

10 跟样式相关的操作

<!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 () {
            //会覆盖之前的属性
			document.getElementById("one").className = "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个参数是获取样式值
			var val = $("#one").css("background");
			console.log("背景色: " + val);
        });

 		// 通过css()设置id为one背景颜色为绿色
        $("#b6").click(function () {
            //2个参数是设置样式值
			$("#one").css("background", "green");
        });
	</script>
   
</html>

11 元素的创建和添加

在这里插入图片描述

<!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").prependTo($("#city"))
    });

    //将反恐放置到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">广州2222</li>`);
    });
</script>

</html>

12 自杀和清空标签内容

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

13 事件

<!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 () {
            // // 需求1: 输入框 得到焦点背景变黄
            // $("#t1").focus(function () {
            //     $("#t1").css("background", "yellow");
            // });
            //
            // //需求2: 输入框  失去焦点背景 变成浅绿色
            // $("#t1").blur(function () {
            //     // $("#t1").css("background", "lightgreen");
            //     // this 指的是 绑定事件的js对象
            //     $(this).css("background", "lightgreen");
            // });
            //
            // //需求3: 松开按钮 将字母变成大写
            // $("#t1").keyup(function () {
            //     $("#t1").val($("#t1").val().toUpperCase());
            // });

            // 需求4: 合并式
            $("#t1").focus(function () {
                $("#t1").css("background", "yellow");
            }).blur(function () {
                // $("#t1").css("background", "lightgreen");
                // this 指的是 绑定事件的js对象
                $(this).css("background", "lightgreen");
            }).keyup(function () {
                $("#t1").val($("#t1").val().toUpperCase());
            });
        })
    </script>
</head>
<body>
用户名：
<input type="text" id="t1" />
</body>

</html>

14 隔行变色和全选/全不选

<!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("background", "lightyellow");
            $("tr:gt(0):odd").css("background", "lightgreen");
            // 全选/全不选功能
            $("#all").click(function(){
                // 让所有的复选框和当前标签的选中状态保持一致
                // this 指的是  $("#all"), 是js对象
                // this.checked 获取全选/全不选的状态
                $("input[name='item']").prop("checked", this.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>

15 模拟购物车案例

<!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 获取用户输入的商品名
            var pname = $("#pname").val();
            // 5 判断 如果商品名为空, 提示商品名不得为空
            if(pname==null || pname.trim()=="") {
                alert("请填写商品名!");
                // 让商品名输入框 获取焦点
                $("#pname").focus();
                return; // 结束当前方法
            }
            // 2 组装添加的内容
            var content = `<tr>
                                <td><img src="img/girl.jpg" /></td>
                                <td>
                                    ${pname}
                                </td>
                                <td>
                                    <!--this表示当前按钮-->
                                    <input type="button" value="删除" οnclick="delItem(this)">
                                </td>
                            </tr>`;
            // 3 将内容追加到购物车标签中
            $("#cart").append(content);
            // 4 清空内容 输入框内容
            $("#pname").val("");
        }

        //目标: 删除当前行
        function delItem(delBtn) {
            // 删除按钮 -> 父元素 <td> -> 父元素 <tr> -> 删除tr
            $(delBtn).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="delItem(this)">
            </td>
        </tr>
        </tbody>
    </table>
    <br />
    商品名：
    <input type="text" id="pname" value="" />&nbsp;
    <input type="button" value="添加到购物车" onclick="addRow()" />
</div>
</body>
</html>

作业:

1 案例13, 案例14, 案例15 今天必须敲熟

娃娃哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
day05 jquery

1 jquery的快速入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> </head><body><input type="button" value="显示时间传统js" id="b
复制链接

扫一扫