JQuery_01

其他 2018-11-24 21:33:13 阅读次数: 0

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>

猜你喜欢

转载自blog.csdn.net/weixin_40094312/article/details/83690218
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022