FE_Basic_Day04-05+JQuery

其他 2018-10-15 14:22:47 阅读次数: 0

1.格式

所有的jquery代码写在页面加载函数

$(function(){

    Jquery代码

});

1.1 获取元素

JS:document.getElementById();
JQ:$(“#id”);
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			function JSWrite(){
				//document.getElementById("span1").innerHTML="美美哒！";
				var spanEle = document.getElementById("span1");
				$(spanEle).html("美美哒！");
			}
			
			$(function(){
				/*document.getElementById("btn1").onclick = function(){
					document.getElementById("span1").innerHTML="帅帅哒！";
				}*/
				$("#btn1").click(function(){
					//JQ对象转换成DOM对象的第一种方式
					//$("#span1")[0].innerHTML="呵呵哒！";
					//JQ对象转换成DOM对象的第二种方式
					$("#span1").get(0).innerHTML="呵呵哒！";
				});
				
			});
		</script>
	</head>
	<body>
		<input type="button" value="JS写入" onclick="JSWrite()"/>
		<input type="button" value="JQ写入" id="btn1"/><br /><br />
		<span id="span1">sssss</span>
	</body>
</html>

注意：JQ对象只能操作JQ里面的属性和方法

          JS对象只能操作JS里面的属性和方法

2 选择器

2.1 基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$(".mini").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("div").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","pink");
				});
				$("#btn5").click(function(){
					$("#two .mini").css("background-color","pink");
				});
			});
		</script>		
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所有元素"/>
		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

2.2 层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("body>div").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("#two+div").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("#one~div").css("background-color","pink");
				});
			});
			
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

2.3 基本过滤选择器


$('li').first() 等价于：$(“li:first”)

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("div:last").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("div:even").css("background-color","pink");
				});
			});
		</script>
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>
2.4 属性选择器


2.5 表单选择器


<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$(":input").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$(":text").css("background-color","pink");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>
	</body>
</html>

3. 常见事件


4. 事件切换


猜你喜欢

转载自blog.csdn.net/a1032818891/article/details/80911383
fe
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022