web前端知识梳理——JQuery

1 使用方法,使用JQuery前需要导入包,src写入jquery包的路径

<script type="text/javascript" src=""></script>

//使用jq方法,最简写的方法

//先用这个东西包住
$(function(){
    //里面选择不同的id或者标签等设定事件,例如这个为id绑定点击事件
    $("#gg").click(fcuntion(){
        
    });

});

2 jq查找元素的方法,最终显示的会是李四

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
        <script>
        $(function(){
            $("#div1").html("李四");
        });
        </script>


	</head>
	<body>
		<div id="div1">张三</div>
	</body>
</html>

3 图片显示隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
//                为id为hide按钮绑定点击事件,可以显示不同的显示或隐藏效果
				$("#hide").click(function(){
					
					//$("#imgg").hide();
					//$("#imgg").slideUp();
					$("#imgg").fadeOut(2000);
					
				});
				
				$("#show").click(function(){
					
					//$("#imgg").show();
					//$("#imgg").slideDown();
					$("#imgg").fadeIn(2000);
					
				});
			});
			
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="show">
		<input type="button" value="隐藏" id="hide"><br>
		<img src="img/1.jpg" id="imgg">
	</body>
</html>

4 各种选择器

 属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		
		<script>
			
			$(function(){
	            //找到 a标签,并且带有href属性的项,设置color为red
			    $("a[href]").css("color","red");
				//找到 a标签,并且带有href和title属性的,设置color为red
			    $("a[href][title]").css("color","red");  // 多个属性
			    //找到 a标签,并且带有href和title属性的,并且title的值为testTitle的,
                //设置color为red
			    $("a[href][title='testTitle']").css("color","deeppink");
			});
			
		</script>
	</head>
	<body>
		<a href="#">herf 111</a>
		<br />
		<a href="#" title="testTitle">herf 222</a>
	</body>
</html>

基本选择器

  • id     #+id的名字
    $("#gg")
  • 类选择器     .+类的名字
    $(".gg")
  • 元素选择器     标签的名字
    $("div")
  • 通配符选择器   只是一个 *  选择所有元素
    $("*")
  • 选择器,选择器    选择器1,选择器2
    $("#gg,span")

 基本过滤器

  • 过滤出的第一个div元素
    $("div:first")

     

  • 过滤出div中偶数div
    $("div:even")

     

  • 过滤出div中奇数div
    $("div:odd")

     

  • 过滤出div中索引等于2的
    $("div:gt(2)")

     

层级选择器

  • body下的子div
    $("body > div")

 

 5 表格隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
//                   表格内容框在了tbody里面,选中tbody下的子tr行,奇数和偶数的,换色
					$("tbody>tr:even").css("background-color","hotpink");
					$("tbody>tr:odd").css("background-color","darkslateblue");			
			});
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" />
					</td>
					<td>分类ID</td>
					<td>分类名称</td>
					<td>分类商品</td>
					<td>分类描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

 6 全选与全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的包
			2. 文档加载完成函数: 页面初始化
			3. 获得所有的行 :   元素选择器
			4. 根据行号奇数/偶数去修改颜色
		-->
		<script>
			
			$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
			
			/*
			 表格全选和全不选
			 进一步确定事件: 点击事件
			  
			 */
			$(function(){
				//绑定点击事件
				//this 代表的是当前函数的所有者
				$("#checkAll").click(function(){
					//获取当前选中状态
//					alert(this.checked);
					//获取所有分类项的checkbox
					// 选择器[属性名称='属性值']
//					$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					
					//使用层级选择器来实现  tbody > tr > td > input
				//	$("tbody > tr > td > input").prop("checked",this.checked);  //这个可行

				//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
					$("input").prop("checked",this.checked);
					
				});
			});
			
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" id="checkAll" />
					</td>
					<td>分类ID</td>
					<td>分类名称</td>
					<td>分类商品</td>
					<td>分类描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

7 省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script>
            //先把城市数据放进来
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			$(function(){
                //找到id为province的,添加改变方法
				$("#province").change(function(){
					
					//alert(this.value);获取当前值
					//alert(provinces[1]);
					var cities=provinces[this.value];//这个this.value就是你选的省的值,对应数组角标
					
					$("#city").empty();//开始前清空
					$(cities).each(function(i,n){//这里的i是角标
						$("#city").append("<option>"+n+"</option>")
						//alert(n);
					});
				});
			});
		</script>
	</head>
	<body>
		<select id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<select id="city">
			
		</select>
	</body>
</html>

8 商品左右选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤:
				1. 导入JQ的文件
				2. 文档加载函数 :页面初始化
				3.确定事件 : 点击事件 onclick
				4. 事件触发函数
					1. 移动被选中的那一项到右边
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("#a1").click(function(){
					//找到被选中的那一项
					//将被选中项添加到右边
					$("#rightSelect").append($("#leftSelect option:selected"));
				});
				
				//将左边所有商品移动到右边
				$("#a2").click(function(){
					$("#rightSelect").append($("#leftSelect option"));
				});
			});
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" id="a1" > &gt;&gt; </a> <br />
						<a href="#" id="a2"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
		
		
	</body>
</html>

9 jq方式完成表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//$(".bitian").append("<font color='#FF0000'>*</font>");\n
				/*$(".bitian").onFocus(function(){
					$("#username").after("<font color='#FF0000'>*</font>");
					$("#upassword").after("<font color='#FF0000'>*</font>");
				});*/
				//添加小红点
				$(".bitian").after("<font class='high'>*</font>")
				//必填绑定焦点事件
				$(".bitian").blur(function(){
					var value=this.value;
					$(this).parent().find(".formtips").remove();
					if($(this).is("#username"))
					{
						if(value.length<6)
						{
							$(this).parent().append("<span class='formtips onError'>用户名太短</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					if($(this).is("#upassword"))
					{
						if(value.length<6)
							{
								$(this).parent().append("<span class='formtips onError'>密码太短</span>");
							}else{
								$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
							}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				});
				//以上这个是这样的格式
				/*$("#bitian").blur(function(){
					
				}).focus(function(){
					
				}).keyup(function(){
		
				});*/
				//提交绑定事件
				$("form").submit(function(){
					$(".bitian").trigger("focus");
					var length1=$(".onError").length;
					if(length1>0)
					{
						return false;
					}else
					{
						return true;
					}
				});				
			});
		</script>
	</head>
	<body>
		<form action="动画效果.html">	
			<div>
				用户名:<input type="text" class="bitian" id="username">
			
			</div>
			<br>
			
			<div>
			密码:<input type="password" class="bitian" id="upassword">
			
			</div>
			<br>
			<div>
			手机号:<input type="tel">
			
			</div>
			<br>
			<div>
			<input type="submit" value="提交">
			</div>
		</form>
		
	</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值