【Web:jQuery框架】常用

其他 2021-01-29 16:40:46 阅读次数: 0

希望这篇博客可以让你了解jQuery框架！

jQuery框架

附：jQuery框架库
链接：https://pan.baidu.com/s/16gkUWZLozsPLCmK8HOa9GQ
提取码：4897

1.jQuery框架

  • 此框架主要就是对原生JavaScript中DOM部分内容进行了封装,可以让程序员更高效的开发页面的动态效果.

  • 如何使用jQuery框架?

    jQuery框架就是一个普通的js文件, 在html页面中 引入即可.

2.jQuery选择器

2.1 基础选择器

  • 标签名 $(“div”)
  • id选择器 $("#id")
  • class选择器 $(".class")
  • 分组选择器 $(“div,#id,.class”)
  • 任意元素选择器 $("*")

栗子：

<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
     
     
	font-family: "微软雅黑"
}
div,span {
     
     
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
     
     
	width: 40px;
	height: 43px;
	background: #CC66FF;
	border: #000 1px solid;
	font-size: 12px;
	font-family: Roman;
}
input{
     
      margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	//让整个页面加载完成
	$(document).ready(function() {
     
     
		/* ---------基本选择器练习--------- */
		//改变元素名为 <div> 的所有元素的背景色为 #FF69B4"  id="b1"
		$("#b1").click(function(){
     
     
			$("div").css("background-color","#FF69B4");
		})

		//改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
		 $("#b2").click(function () {
     
     
			 $("#one").css("background-color","#9ACD32");
         })

		//改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
        $("#b3").click(function () {
     
     
            $(".mini").css("background-color","#FF0033");
        })

		//改变所有元素的背景色为 #FDF5E6"  id="b4"
        $("#b4").click(function () {
     
     
            $("*").css("background-color","#FDF5E6");
        })

		//改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"  id="b5"
        $("#b5").click(function () {
     
     
            $("span,#two").css("background-color","#FF1493");
        })
		

		//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b6"
        $("#b6").click(function () {
     
     
            $("span,#two,#one,.mini").css("background-color","#006400");
        })

	});
</script>
</head>

<body>
	<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
	<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
	<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
	<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
		id="b5" />
	<input type="button"
		value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
		id="b6" />


	<h1>天气冷了</h1>
	<h2>天气又冷了</h2>

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

	<br>
	<div id="mover">动画</div>
	<br>
	<span class="spanone"> span </span>
	<span class="mini"> span class是mini </span>
</body>
</html>

2.2 层级选择器

  • $(“div span”) 子孙后代选择器
  • $(“div>span”) 子元素选择器
  • 层级相关方法:
    • $("#abc").next(“span”) 匹配id为abc元素的弟弟元素
    • $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
    • $("#abc").prev()匹配id为abc元素的哥哥元素
    • $("#abc").prevAll()匹配id为abc元素的哥哥们元素
    • $("#abc").siblings()匹配id为abc元素的所有兄弟元素
    • $("#abc").parent() 匹配id为abc元素的父元素
    • $("#abc").children() 匹配id为abc元素的子元素们

栗子：

<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
     
     
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
     
     
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{
     
      margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$().ready(function() {
     
     
		/* ---------层级选择器练习--------- */
		//改变 <body> 内所有 <div> 的背景色为 #F08080"  id="b1"
		$("#b1").click(function () {
     
     
		    $("body div").css("background-color","#F08080");
        })
		

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

		//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"
		$("#b3").click(function () {
     
     
			$("#one").next("div").css("background-color","#0000FF");
        })
		

		//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32"  id="b4"
		$("#b4").click(function () {
     
     
			$("#two").nextAll("div").css("background-color","#9ACD32");
        })
		
		//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"  id="b5"
        $("#b5").click(function () {
     
     
            $("#two").siblings("div").css("background-color","#FF6347");
        })
		
		  
	})
</script>
</head>

<body>
	<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
	<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
	<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
		id="b3" />
	<input type="button"
		value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
	<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
		id="b5" />

	<h1>天气冷了</h1>

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

	<div id="two">
		id为two
		<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>

	<br>
	<div id="mover">动画</div>
	<br>
</body>
</html>

2.3 过滤选择器

  • $(“div:first”) 匹配第一个div
  • $(“div:last”) 匹配最后一个div
  • $(“div:eq(n)”) 匹配下标为n的div n从0开始
  • $(“div:lt(n)”) 匹配下标小于n的div
  • $(“div:gt(n)”) 匹配下标大于ndiv
  • $(“div:not(.abc)”) 匹配class值不是abc的div
  • $(“div:even”) 匹配下标为偶数的div
  • $(“div:odd”) 匹配下标为奇数的div

栗子：

<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
     
     
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
     
     
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{
     
      margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(function() {
     
     
		/* ---------基本过滤选择器练习--------- */
		//改变第一个 div 元素的背景色为 #FF6347"  id="b1"
		$("#b1").click(function () {
     
     
			$("div:first").css("background-color","#FF6347")
        })
		//改变最后一个 div 元素的背景色为 #9ACD32" id="b2" 
        $("#b2").click(function () {
     
     
            $("div:last").css("background-color","#9ACD32")
        })

		//改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" 
        $("#b3").click(function () {
     
     
            $("div:not(.one)").css("background-color","#FF0033")
        })

		//改变索引值为等于 3 的 div 元素的背景色为 #006400"  id="b4" 
        $("#b4").click(function () {
     
     
            $("div:eq(3)").css("background-color","#006400")
        })

		//改变索引值为小于 3 的 div 元素的背景色为 #FF69B4"  id="b5"/>
        $("#b5").click(function () {
     
     
            $("div:lt(3)").css("background-color","#FF69B4")
        })
		
		//改变索引值为大于 3 的 div 元素的背景色为 #F08080"  id="b6"
        $("#b6").click(function () {
     
     
            $("div:gt(3)").css("background-color","#F08080")
        })
		
		//改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
        $("#b7").click(function () {
     
     
            $("div:even").css("background-color","#FF6347")
        })
		
		//改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
        $("#b8").click(function () {
     
     
            $("div:odd").css("background-color","#FF1493")
        })
    })
</script>
</head>

<body>
	<input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" />
	<input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" />
	<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" />
	<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" />
	<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" />
	<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" />
	<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" />

	<h1>天气冷了</h1>

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

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

	<div class="one" title="aa">
		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>

	<br>
	<div id="mover">动画</div>
	<br>
</body>
</html>

2.4 内容选择器

  • $(“div:has§”) 匹配包含p子元素的div
  • $(“div:empty”) 匹配空的div
  • $(“div:parent”) 匹配非空的div
  • $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

栗子：

<!DOCTYPE HTML>
<html>
<head>
<title>内容选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
     
     
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
     
     
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{
     
      margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(function() {
     
     
		/* ---------内容选择器--------- */
		//改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div>
		$("#b1").click(function () {
     
     
			$("div:contains('id')").css("background-color",'#FF6347');
        })
		
		//改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
        $("#b2").click(function () {
     
     
            $("div:empty").css("background-color",'#9ACD32');
        })
		

		//改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
        $("#b3").click(function () {
     
     
            $("div:has(div)").css("background-color",'#FF0033');
        })

		//改变非空div元素的背景色为 #006400" id="b4"
        $("#b4").click(function () {
     
     
            $("div:parent").css("background-color",'#006400');
        })
		

		//====================================================

		/* ---------可见选择器练习--------- */
		//改变所有可见 div 元素背景色为 #F08080" id="b5"
        $("#b5").click(function () {
     
     
            $("div:visible").css("background-color",'#F08080');
        })


        //让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
        $("#b6").click(function () {
     
     
            $("div:hidden").show().css("background-color",'#FF69B4');
        })
	})
</script>
</head>

<body>
	<input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" />
	<input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" />
	
	<input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" />

	<hr/>
	<hr/>

	<input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" />
	<input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" />

	<h1>天气冷了</h1>

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

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

	<div class="one" title="aa">
		class是 one
		<div class="mini"></div>
		<div class="mini"> class是 mini</div>
	</div>

	<br>
	<div id="mover"></div>
	<br>
	<div style="display:none">看不见我...,看不见我....</div>
</body>
</html>

2.5 可见选择器

  • $(“div:visible”) 匹配所有显示的div
  • $(“div:hidden”) 匹配所有隐藏的div
  • 显示和隐藏相关的方法
    • $("#abc").show() 让id为abc的元素显示
    • $("#abc").hide() 让id为abc的元素隐藏
    • $("#abc").toggle() 让id为abc的元素显示隐藏状态切换

2.6 属性选择器

  • $(“div[属性名]”) 匹配包含xxx属性的div
  • $(“div[属性名=‘值’]”) 匹配某个属性等于某个值的div
  • $(“div[属性名!=‘值’]”) 匹配某个属性不等于等于某个值的div

2.7 子元素选择器

  • $(“div:first-child”) 匹配是div并且是子元素并且是第一个子元素
  • $(“div:last-child”)匹配是div并且是子元素并且是最后一个子元素
  • $(“div:nth-child(n)”) 匹配div并且是子元素并且是第n个子元素 n从1开始

栗子：

2.8 表单选择器

  • $(":input") 匹配所有控件
  • $(":password") 匹配所有密码框
  • $(":radio") 匹配所有单选
  • $(":checkbox") 匹配所有多选
  • $(":checked") 匹配所有选中的单选/多选和下拉选
  • $(“input:checked”) 匹配所有选中的单选和多选
  • $(":selected") 匹配所有选中的下拉选

栗子：

<!DOCTYPE HTML>
<html>
<head>
<title>表单选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
     
     
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
     
     
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{
     
      margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(function() {
     
     
		/* ---------表单选择器练习--------- */
		//改变所有:input 元素的背景色为 #F08080" id="b1"
        $("#b1").click(function () {
     
     
            $(":input").css("background-color",'#F08080');
        })



        //改变:password 元素的背景色为 #9ACD32" id="b2"
        $("#b2").click(function () {
     
     
            $(":password").css("background-color",'#9ACD32');
        })


		
		//弹出 :radio 元素的个数" id="b3"
        $("#b3").click(function () {
     
     
           alert( $(":radio").length);
        })
		
		//弹出所有 :checked 元素的value值" id="b4"
		// for ( i = 0;i<$(":checked").length;i++){
     
     
         //    js = $(":checked")[i];
         //    alert(js.value);
		// }
        $("#b4").click(function () {
     
     
            $(":checked").each(function () {
     
     
				alert(this.value)
            })
        })
		
		//弹出所有 :selected 元素的value值" id="b5"
        $("#b5").click(function () {
     
     
            alert( $(":selected").val());
        })

		
	})
</script>
</head>

<body>
	<input type="button" value=" 改变所有input 元素的背景色为 #F08080" id="b1" />
	<input type="button" value=" 改变:password 元素的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 打印 :radio 元素的个数" id="b3" />
	<input type="button" value=" 打印所有 :checked 元素的value值" id="b4" />
	<input type="button" value=" 打印所有 :selected 元素的value值" id="b5" />

	<h1>天气冷了</h1>
	用户名：<input type="text" disabled="disabled" name="username" value="被禁用了"/>
	密码：<input type="password" name="password" value="123"/>
	性别：<input type="radio" name="gender" value="man"/> 男
		<input type="radio" name="gender" value="woman" checked="checked" />女
	<br>
	<br>
	爱好：
		<input type="checkbox" name="like" value="lanqiu"  checked="checked" /> 篮球
		<input type="checkbox" name="like" value="taiqiu"/> 台球
		<input type="checkbox" name="like" value="zuqiu"/> 足球
	出生地：
		<select name="city">
			<option value="beijing">北京</option>
			<option value="shanghai" selected="selected">上海</option>
			<option value="guangzhou">广州</option>
		</select>
	简介：
		<textarea name="discription" rows="2" cols="10">请求输入个人描述...</textarea>

</body>
</html>

3.鼠标移入移出事件的合并方法 hover()

$("div").hover(function () {
    
    //鼠标移入触发
    $(this).css("color","red");
},function () {
    
    //鼠标移出触发
    $(this).css("color","green");
});

4.动画相关

$("input:eq(0)").click(function () {
    
    
    //隐藏动画   后面的方法会在动画做完之后执行
    $("img").hide(2000,function () {
    
    
        //alert("xxx");
    });
})
$("input:eq(1)").click(function () {
    
    
    $("img").show(2000,);
})
$("input:eq(2)").click(function () {
    
    
    $("img").fadeOut(2000,);
})
$("input:eq(3)").click(function () {
    
    
    $("img").fadeIn(2000,);
})
$("input:eq(4)").click(function () {
    
    
    $("img").slideUp(2000,);
})
$("input:eq(5)").click(function () {
    
    
    $("img").slideDown(2000,);
})
$("input:eq(6)").click(function () {
    
    
    $("img").animate({
    
    "left":"200px"},1000)
        .animate({
    
    "top":"200px"},1000)
        .animate({
    
    "left":"0"},1000)
        .animate({
    
    "top":"0"},1000)
        .animate({
    
    "width":"400px","height":"300px"},1000);
})

5.修改页面相关内容

  1. 创建新元素
 let d = $("<div id='10'>xxxx</div>");

  1. 添加元素到页面中

    1. 添加到某个元素里面的最后面

      父元素.append(新元素);

    2. 添加到某个元素里面的最前面

      父元素.prepend(新元素);

    3. 插入元素到某个元素的前面

      兄弟元素.before(新元素);

    4. 插入元素到某个元素的后面

      兄弟元素.after(新元素);

  2. 删除元素

    元素对象.remove();

  3. 获取和修改元素的文本内容 innerText

    元素对象.text(“xxx”); 修改

    元素对象.text(); 获取

  4. 获取和修改元素的html内容 innerHTML

    元素对象.html(“标签内容”); 修改

    元素对象.html() ; 获取

  5. 获取和修改元素的css样式

    元素对象.css(“样式名”,“值”); 单个样式赋值

元素对象.css({“样式1名”:“值”,“样式2名”:“值”}) 批量赋值

元素对象.css(“样式名”); 获取样式的值

  1. 获取和修改元素的属性 attribute属性

    元素对象.attr(“属性名”,“值”); 修改

    元素对象.attr(“属性名”); 获取

3.1 好友分组练习

题目描述：
在这里插入图片描述

  • 点击对应的列表标签：亲戚、同事，前女友们，会显示此标签下的列表元素，且不可同时打开两个列表标签，打开第二个列表标签时，上一个列表标签下的列表元素会自动收起来！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>亲戚
        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>唐僧</li>
        </ul>
    </li>
    <li>同事
        <ul>
            <li>小王</li>
            <li>小刘</li>
            <li>小孙</li>
        </ul>
    </li>
    <li>前女友们
        <ul>
            <li>小美</li>
            <li>小花</li>
            <li>小翠</li>
        </ul>
    </li>
</ul>
<!--引入jquery库-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
    $("li>ul").hide();
    //添加点击事件
    $("body>ul>li").click(function () {
     
     
        //TODO:动态绑定的事件中，this代表触发事件的js对象
        $(this).children().toggle();
        /*得到其他的li并让里面的ul隐藏*/
        $(this).siblings().children().hide();
    })
</script>
</body>
</html>

3.2 省市联动练习

题目描述：
在这里插入图片描述

  • 两个下拉选框，点击第一个下拉选框为城市名，则第二个下拉选框会显示此城市的地名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select>
    <option>请选择</option>
    <option value="0">河北省</option>
    <option value="1">山东省</option>
    <option value="2">北京省</option>
</select>
<select>
    <option>请选择</option>
</select>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    arr = [["秦皇岛","唐山","石家庄"],
    ["青岛","菏泽","日照"],["朝阳","海淀","大兴"]];
    //给第一个下拉选添加值改变事件
    $("select:first").change(function () {
     
     
        //每次把第二个下拉选的内容清空
        $("select:last").html("<option>请选择</option>")

        // alert(arr[this.value])
        city = arr[this.value];
        //遍历city数组 加入到第二个下拉选中
        for ( i = 0; i <city.length ; i++) {
     
     
            cityname = city[i];/*获取城市名*/
            o = $("<option></option>");
            o.text(cityname);
            $("select:last").append(o);
        }
    })
</script>
</body>
</html>

3.3 员工列表练习

题目描述：
在这里插入图片描述

  • 上面文本框输入对应的信息，然后点击：添加；信息就会添加到底下的员工列表，点击后面的：删除，则会删除此行的员工信息！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="工作">
<input type="text" placeholder="工资">
<input type="button" value="添加">
</body>
<hr>
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th><th>工作</th><th>工资</th><th>操作</th>
    </tr>
</table>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    //给按钮添加点击事件
    $("input:last").click(function () {
     
     
        //创建tr td
      let  tr = $("<tr></tr>")
      let  nametd = $("<td></td>")
      let  jobtd = $("<td></td>")
      let  salarytd = $("<td></td>")
       let deletetd = $("<td><input type='button'value='删除'></td>")
        //给deletetd添加点击事件
        deletetd.children().click(function () {
     
     
            //删除所在行
            tr.remove();
        })
        //给td添加元素
        nametd.text($("input:eq(0)").val());
        jobtd.text($("input:eq(1)").val());
        salarytd.text($("input:eq(2)").val());
        //把td装进tr tr装进table
        tr.append(nametd);
        tr.append(jobtd);
        tr.append(salarytd);
        tr.append(deletetd);
        $("table").append(tr)
    })
</script>
</html>

3.4 购物车练习

题目描述：
在这里插入图片描述

  • 点击不同商品，底下总价会对商品加个进行求和；点击全选则会把所有商品都选择上，若选择商品不全，则全选框不会选择！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>购物车</h3>
<input type="checkbox" value="5000" id="r1"><label for="r1">华为手机</label><br>
<input type="checkbox" value="3000">小米手机<br>
<input type="checkbox" value="80">罗技鼠标<br>
<input type="checkbox" value="2000">苹果电脑<br>
<input type="checkbox" id="all">全选
<p>总价：0元</p>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    //给所有的多选框添加点击事件
    $("input").click(function () {
     
     
        //判断点击的是：全选
        if (this.id=="all"){
     
     
            //取出全选状态
            s = $(this).attr("checked");
            //吧全选状态checked赋值给其他多选框
            $(this).siblings("input").attr("checked",s);
        }


        total = 0;
        count=0;
        //统计总价
        $("input:not(#all)").each(function () {
     
     
            //判断当前遍历多选框是否选中
            if ($(this).attr("checked")){
     
     //attr("checked")返回值数true/false
                total+=parseInt(this.value);
                count++;
            }
        })
        $("#all").attr("checked",count==4);
        $("p").text("总价："+total+"元");
    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_44682003/article/details/111871881
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022