JQuery_01

原创 于 2018-11-03 22:33:18 发布 · 98 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

JQ的开发步骤：（将我们页面的JS代码和HTML页面代码进行分离）

1.导入JQ相关的文件

2.文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器

3.确定相关操作的事件

4.事件触发函数

5.函数里面再去操作相关的元素

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(){
				//显示图片
				$("#btn1").click(function(){
					//获得img
					//$("#img1").show();
					//$("#img1").slideDown();
					$("#img1").animate({width:"1000px",opacity:"1"},5000);
				});
				
				
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
					//$("#img1").hide(500);
					//$("#img1").slideUp(500);
					$("#img1").animate({width:"1366px",opacity:"0.2"},5000); 
				});
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/><br />
		<input type="button" value="隐藏" id="btn2"/><br />
		<img src="../../img/1.jpg" / id="img1" width="500px">
	</body>
</html>

JQ定时弹出广告：

1.导入JQ的文件

2.编写JQ的文档加载事件

3.启动定时器setTimeout("",3000);

4.编写显示广告的函数

5.在显示广告里面再启动一个定时器

6.编写隐藏广告的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//显示广告
			function showAd(){
				$("#img1").show();
				setTimeout("hideAd()",3000);
			}
			
			//隐藏广告
			function hideAd(){
				$("#img1").hide();	
			}
			
			$(function(){
				setTimeout("showAd()",3000);
				
			});
		</script>
	</head>
	<body>
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display: none;"/>
	</body>
</html>

JQuery中的选择器

基本选择器

ID选择器：#ID的名称

类选择器：以.开头 .类名

元素选择器：标签的名称

通配符选择器：*

选择器，选择器：选择器1，选择器2

<!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(){
				//初始化操作：给按钮绑定事件
				$("#btn1").click(function(){
					$("#two").css("background-color","palegreen");
				});
				//找出mini类的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","palegreen");
				});
				$("#btn3").click(function(){
					$("div").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","palegreen");
				});
				//选择器分组
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
				
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="找出ID为two的元素" id="btn1"/><br />
		<input type="button" value="找出mini类的所有元素" id="btn2"/><br />
		<input type="button" value="找出所有div元素" id="btn3"/><br />
		<input type="button" value="通配符选择器" id="btn4"/><br />
		<input type="button" value="找出mini类和 span元素" id="btn5"/><br />
		
		<div id="one">
			<div class="mini">1-1	</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>	
		</div>
		<div id="two">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>	
			<div class="mini">3-3</div>	
		</div>
		<span id="four">span</span>
	</body>
</html>

 层级选择器：

子元素选择器：选择器1>选择器2

后代选择器：选择器1 儿孙

相邻兄弟选择器：选择器1 + 选择器2：找出紧挨着的一个弟弟

找出所有弟弟：选择器1~选择器2：找出所有的弟弟

<!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(){
				//初始化操作：给按钮绑定事件
				//找出body下面的子div
				$("#btn1").click(function(){
					$("body > div").css("background-color","palegreen");
				});
				//找出body下面的所有div
				$("#btn2").click(function(){
					$("body div").css("background-color","palegreen");
				});
				
				$("#btn3").click(function(){
					$("#one+div").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("#two~div").css("background-color","palegreen");
				});
				
				
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="找出body下面的子div" id="btn1"/><br />
		<input type="button" value="找出body下面的所有div" id="btn2"/><br />
		<input type="button" value="找出id为one的相邻兄弟div" id="btn3"/><br />
		<input type="button" value="找出id为two的所有弟弟div" id="btn4"/><br />
		
		
		<div id="one">
			<div class="mini">1-1	</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>	
		</div>
		<div id="two">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>	
			<div class="mini">3-3</div>	
		</div>
		<span id="four">span</span>
	</body>
</html>

基本过滤器：

选择器：

first：找出的是第一个

:last

:even 找出索引为偶数

:odd 找出奇数索引

:gt(index):大于索引

:lt(index) 小于

:eq(index) 等于

<!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>
		<!--
        	作者：offline
        	时间：2018-11-03
        	描述：选择器：first
        -->
		<script>
			//文档加载事件，页面初始化的操作
			$(function(){
				//过滤出所有div中第一个元素
				$("#btn1").click(function(){
					$("div:first").css("background-color","palegreen");
				});
			
			
				//过滤出所有div中偶数位的div
				$("#btn2").click(function(){
					$("div:even").css("background-color","palegreen");
				});
				//过滤出所有div中奇数位的div
				$("#btn3").click(function(){
					$("div:odd").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","palegreen");
				});
			}); 
		</script>
	</head>
	<body>
		<input type="button" value="过滤出所有div中第一个元素" id="btn1"/>
		<input type="button" value="过滤出所有div中偶数位的div" id="btn2"/>
		<input type="button" value="过滤出所有div中奇数位的div" id="btn3"/>
		<input type="button" value="过滤出所有div中找出索引大于2" id="btn4"/>
		<br />
		<div id="one"><!--0-->
			<div class="mini">1-1</div><!--1-->
		</div>
		<div id="two"><!--2-->
			<div class="mini">2-1</div><!--3-->
			<div class="mini">2-2</div><!--4-->
		</div>
		<div id="three">
			<div class="mini">3-1</div> 
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
	</body>
</html>

属性选择器：

选择器[href]：单个属性

选择器[href][title]：多个属性

选择器[href][title='test']：多个属性，包含值

<!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
				//$("a[href]").css("color","red");
				//找出包含href,title
				$("a[href][title]").css("color","red");
				//找出包含href title 并且 title='testTitle'
				//$("a[href][title='testTitle']").css("color","deeppink");
			});
			
		</script>
	</head>
	<body>
		<a href="#">href 111</a>
		<br />
		<a href="#" title="testTitle">href 222</a>
	</body>
</html>

JQuery中表单属性的过滤：

:input     找出所有输入项：  input textarea   select

:text

:password

 

表单对象属性：

找出select中被选中的那一项：

option:selected

JQ的开发步骤：

1.导入JQ相关的包

2.文档加载完成的事件：页面初始化：绑定事件，启动定时器

3.确定事件

4.实现事件所要触发的函数

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(){
				//$(":input").css("background-color","red");
				//$(":password").css("background-color","red");
				$("#btn1").click(function(){
					$("option:selected").css("background-color","chartreuse");
					alert($("option:selected").size());
				});
			});
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="Input Button"/>
			<input type="checkbox" />
			
			<input type="file" />
			<input type="hidden" />
			<input type="image" />
			
			<input type="password" />
			<input type="radio" />
			<input type="reser" />
			
			<input type="submit" />
			<input type="text" />
			<select multiple="multiple">
				<option>Option1</option>
				<option>Option2</option>
				<option>Option3</option>
			</select>
			<input type="button" value="点我" id="btn1"/>
 			<textarea></textarea>	
			<button>Button</button>
		</form>
	</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值