【Web:jQuery框架】常用

最新推荐文章于 2024-09-22 01:13:47 发布
最新推荐文章于 2024-09-22 01:13:47 发布
阅读量471 收藏
点赞数
分类专栏： Web 文章标签： js jquery html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44682003/article/details/111871881
版权

希望这篇博客可以让你了解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>
HTML 基础知识：HTML 样式标签
新华编程特战队
02-10 2576
在 HTML 文件中编写 CSS 代码的最传统和最常见的方法之一是在 HTML 中使用 style 标签。HTML 中的样式标签是通过在 HTML 文件中直接添加样式表来使用的，该。因此，如果您希望添加一些特定于设备的样式，可以通过将 media 属性添加到样式标记来实现。有两个属性，这两个属性都是可选的。在这里，我有一些最小的 HTML 样板代码，带有可用于设置此 HTML 样式的 style 标签。，除非认为非常必要，因为它们会使您的 HTML 更加混乱，并且您的 CSS 难以调试和维护。
JS框架：JQuery
weixin_45676761的博客
05-09 1333
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
如何给你的标签添加样式 ?怎么选择你要添加样式的标签 css 选择器
weixin_45810135的博客
10-03 2357
根据W3C定义CSS3 选择器： 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 基础选择器 层次选择器 伪类选择器 伪元素选择器 属性选择器 【基础选择器】 元素选择器（选择元素名） \ 如：p{color:red;} ID选择器（#号+ID名）\ 如：#csdn{color:black;} 类选择器（.+class名） \ 如：.csdn{color:blue;} 通配符选择器（选择全部元素，不建议使用）\如：* {color：green} 并集选择器/组合选择器（多个不同的标.
给元素标签设置样式方法
Della的前端学习笔记
11-13 3779
例如给id为Div的元素的高度设置为200px； 原生js设置方法： var Div = document.getElementById("Div") 方法一：Div.style.height = "200px"; 方法二：Div.style["height] = "200px"; 方法三：Div.style.cssText = "height:200px;"（可设置多个样式） 方
给动态页面其中标签添加样式
LQCV587的博客
11-14 332
参考网站：https://www.jb51.net/article/143286.htm
给a标签加样式的写法
dibitui7403的博客
03-06 624
顺便略带使用伪类的顺序：love—hate（link—>visited—>hover—>active） <div class="contain"> <ul> <li><a href="#">我是测试一</a></li>...
[jQuery入门到精通]第10章：jQueryUI常用功能实战[归纳].pdf
10-11
jQuery UI 是一个基于 jQuery 库的用户界面交互框架，它提供了丰富的组件，帮助开发者实现复杂的交互和视觉效果，而无需依赖第三方插件。本篇文章主要关注于jQuery UI的实战应用，特别是常用功能的实现。 首先，...
浅谈jQuery框架Ajax常用选项
12-09
在本文中，我们将深入探讨jQuery框架中的Ajax常用选项，这些选项是进行异步数据交互的核心。Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器进行通信，从而提升用户体验。...
JQueryWeb：轻量级Objective-C Web框架
JQueryWeb的功能：** 该框架提供了将JQuery语法与JavaScript进行无缝转换的能力，这表明JQueryWeb能帮助开发者在编写代码时平滑过渡到适合目标平台的代码。 **2. JQuery与JavaScript的关系：** JQuery是JavaScript...
为指定标签添加新样式
running
11-25 2284
wei     pageEncoding="utf-8"%>     addClass()为标签添加样式     p {     margin: 8px;     font-size: 16px;   }      .cursor{   cursor:pointer;   }   .selected {     color: blue;   }
html标签样式
Bianca427的博客
05-31 5625
13、伪装选择器：链接标签a：link{color:yellow} 功能：作用于链接标签当鼠标移动标签时触发... 设置未被点击的时字体颜色：a：link{color:yellow} 设置已被点击的链接字体颜色：a:visited{color: brown} 设置鼠标悬停的字体颜色：a:hover{color: yellow;} 设置鼠标点击未释放字体颜色:a:active{color: blue;}...
精通CSS-添加样式
qq_36973122的博客
08-16 3191
精通CSS-添加样式
基础标签&样式
最新发布
weixin_43823359的博客
09-22 1386
标题标题排版标题样式超链接正文正文排版页面布局。
JQuery框架总结
weixin_49076273的博客
05-23 1916
一、JQuery对象的引用 1.jq的下载地址：https://jquery.com/download/ 点击Download the uncompressed, development jQuery 版本号 进入js文件后，按ctrl+s保存到电脑中 2.DOM(Document Object Model)，即文档对象模型; DOM最顶层是Window对象，Window对象下面是Document（文档对象）、Navigator(浏览器对象)、Screen（屏幕对象）、History（浏览历史对象）、Loc
HTML之样式设置和标签使用
m0_51152186的博客
03-06 2540
HTML 超文本标记语言 是一种创建网页的标准标记语言 html不是编程语言 ，是标记语言，就是一套标记标签 一、html语法格式。 写法： 尖角号包裹着关键词 比如：<html></html> html 通常是成对出现的 分为开始标签和结束标签 <!DOCTYPE html>（这一层不区分大小写） 作用： 声明HTML5文档 根元素：<html></html> 根元素中划分为 <head></head>放..
前端学习笔记day02--CSS
m0_38077048的博客
09-30 288
前端学习笔记day02–CSS 一、CSS知识 CSS（cascading style sheet）：层叠样式表（级联样式表） 作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。 二、CSS和html结合 写法： 选择器{ 声明；（属性名：属性值；） } 1.行内样式 行内样式作用域小，只作用于行内。style属性：style="" 属性值 ==
CSS基础：插入CSS样式的3种方法
u013179804的博客
04-06 5040
ok，我们来举 2 个案例，一下就能看出来区别了。
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
热门推荐
qq_38718629的博客
09-16 3万+
最近公司项目中在使用Echarts绘制图表时，由于默认的label标签不能满足设计稿需求，所以研究了对label标签进行格式化的方案，了解到可以使用formatter内容格式器对标签内容进行调整，formatter支持字符串模板和回调函数两种形式，下面以饼图为例对formatter格式化标签label标签遇到的情况记录如下。
innerHTML给标签添加样式
Megamind_HL的博客
01-05 8819
在我们日常开发中，很多时候都需要用innerHTML来生成标签，这个在我上一篇文章中已经写出怎么生成table标签，接下来是怎么生成样式，以下给出具体实现代码： //这里我还是用table作为示范； &lt;table id="settleDlgGrid" border="1" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt; va
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值