06 jquery

其他 2018-10-22 02:11:12 阅读次数: 0

【为什么要使用jquery？】

js的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">

			div{
				background-color: #fcf;
				height: 100px;
				margin: 10px;
				display: none;
			}
			
		</style>
	</head>
	<body>
		<!--
			1. 一开始3个div是隐藏的
			2. 点击显示的时候, 3个div就显示出来
			3. 点击设置文字的时候, 3个div中就显示一写文字
			
			js的问题:
			1. 代码麻烦, 需要遍历, 遍历可能嵌套
			2. 找dom对象麻烦, 方法很少, 名字很长
			3. 会有兼容性问题
			4. 事件会覆盖
		-->
		<input id="btn1" type="button" value="显示"/>
		<input id="btn2" type="button" value="设置文字" /><br />
		
		<div></div>
		<div></div>
		<div></div>
		
		
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			var btn2 = document.getElementById("btn2");
			
			btn1.onclick = function(){
				var divArr = document.getElementsByTagName("div");
				for(var i = 0; i < divArr.length; i ++){
					divArr[i].style.display = "block";
				}
			}
			
			btn2.onclick = function(){
				var divArr = document.getElementsByTagName("div");
				for(var i = 0; i < divArr.length; i ++){
					divArr[i].innerText = "我是内容";
					//有些浏览器不支持innerText,比如火狐,可以使用textContent
					divArr[i].textContent = "我是内容" 
				}
			}
			
			
			
		</script>
	</body>
</html>

 js开发中的缺点

 1. 代码麻烦，需要遍历，可能还需要嵌套

 2. 找对象麻烦，方法少，还长

 3. 会有兼容性问题

 4. 事件会覆盖

 

 jquery的优点

 1. 查找元素的方法灵活多样

 2. 隐式迭代特性，不需要手动for循环

 3. 完全没有兼容性问题

 4. 实现动画很简单

 5. 代码简单、粗暴

 

【什么是jquery？】

 

 官网：jquery.com

 js库：把一些常用的方法写到一个单独的js文件，

     使用的时候引用这些js文件就行了

 

 * 学习jquery就是学习这个js文件中封装的方法

jquery暴力入门(标签式))

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				background-color: red;
				height: 100px;
				margin: 10px;
				display: none;
			}
		</style>

	</head>

	<body>

		<input type="button" id="b1" value="显示" />
		<input type="button" id="b2"  value="显示文字" />

		<div></div>
		<div></div>
		<div></div>
		<!--引入jquery文件 -->
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<!--导入式 -->
		<script type="text/javascript" src="js/jquery测试.js" ></script>
		
		<!--
			//标签式
			<script type="text/javascript">
			// 1. 入口函数
			$(document).ready(function(){
				//2.注册点击事件
				$("#b1").click(function(){
					//3.找到所有的div调用jquery的显示方法
					$("div").show();					
				});
				//另一个点击事件
				$("#b2").click(function(){					
					$("div").text("测试");
				})					
			});		
		</script>-->
	</body>

</html>

(导入式的js文件书写)

//声明一个jquery入口函数
$(function() {

	$("#b1").click(function() {

		$("div").show();

	});

	$("#b2").click(function() {

		$("div").text("测试");
	})

});

【jquery的版本】

 1. 大版本分类

  1.x版本：兼容IE 678

  2.x版本：不兼容IE 678

  3.x版本：不兼容IE 678，更加的精简（在国内不流行，因为国内使用jquery的主要目的是兼容IE678）

 

 2. 压缩版和未压缩版

  jquery-x.xx.min.js：压缩版本，适用于生产环境，因为文件比较小。去除了注释、换行、空格

  jquery-x.xx.js：未压缩版本，适用于学习与开发环境。源码清晰，易阅读

 

 

【**jquery对象和DOM对象的区别（重点）】

 1. DOM对象：使用js中的方法获取页面中的元素返回的对象

 2. jquery对象：使用jquery的方法获取页面中的元素返回的对象

 3. jquery对象其实就是dom对象的集合 -> 伪数组

 4. dom对象和jquery对象的方法不能混用

例:1.改变li标签的背景颜色

     2.修改id为cloth标签里的内容

		<script type="text/javascript">		
	
			$(document).ready(function(){				
				// jquery对象不能使用js对象的功能
				// jquery其实是多个js对象组成的一个伪数组
				// $("li").style.backgroundColor = "#fcc";
				
				var $li = $("li");	// jquery起名都以$开头,方便和js对象区分
				for(var i = 0 ; i < $li.length; i ++){
					// 把jquery中的每一个元素拿出来, 就是一个一个js的dom对象
					$li[i].style.backgroundColor = "#fcc";
				}			
				// js对象也不能使用jquery对象里的方法
				var cloth = document.getElementById("cloth");
				// 必须把js对象转化成jquery对象
				var $cloth = $(cloth);		
				$cloth.text("背心");			
			})					
		</script>

 入口函数的问题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

			// js的入口函数
			window.onload = function(){
				console.log("js的入口函数1")
			}
            //此函数会把前一个js函数覆盖
			window.onload = function(){
				console.log("js的入口函数2")
			}
			// jq的入口函数
			$(document).ready(function(){
				
				console.log("jq的入口函数1")
				
			})
			
			$(document).ready(function(){
				
				console.log("jq的入口函数2")
				
			})
			
		</script>
		
	</head>
	<body>
		
		<!--
			
			1. jq的入口函数在文档加载完毕, 图片还没开始下载的时候, 就已经执行
			2. js的入口函数是在图片完全加载完毕后, 才执行,注意js的入口函数没有重载效果,后面的会把前面的覆盖
			
		-->
		
		<input id="btn1" type="button" value="点我" />
		
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539831065&di=97b8091bd03b45bc095f5efe73d92462&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F10%2F45%2F75S58PICkAg_1024.jpg" />
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539831090&di=feec6f29b4aeb95abfe9faf9197a6903&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F01%2F77%2F51%2Fe1c99a6eb78965d794eb642d33e848a0.jpg" />
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539236372206&di=2a051181f41db97e216d32b43529b6e7&imgtype=0&src=http%3A%2F%2Fwww.pptbz.com%2Fd%2Ffile%2Fp%2F201708%2F865766c363ecc1a203f39201b8805990.jpg" />
		
		
	</body>
</html>

 

 

* HTML属性

 获取：$obj.attr(name)对象的集合

 设置：$obj.attr(name,value)

$的本质

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			// $ 的本质就是一个 函数 
			// alert(typeof $);
			
			
			// $函数的功能
			// 1. 参数是一个函数  -> 入口的函数的另一个写法
			$(function(){
				// alert(123);
			})
			
			
			// 2. 参数是js对象 -> 把js对象变成jquery对象
			$(document).ready(function(){
				
			})
			
			// 3. 参数是一个字符串 -> 用指定的选择器找到jq对象
			$("div")
			
			
			
		</script>
		
	</body>
</html>

 * CSS属性

 $obj.css(name, value)

 

【选择器】

 jQuery选择器是jQuery为我们提供了一组方法, 让我们更加方便的获取到页面中的元素

原理:$()内对js对象进行选择然后再转换成jq对象

通过id,classname,tagname来获取jquery元素

 1. 基本选择器

  $(“#id”),$(“.class”),$(“tagname”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li id="four">4</li>
			<li>5</li>
			<li>6</li>
			<li class="green">7</li>
			<li>8</li>
			<li class="green">9</li>
			<li>10</li>
		</ul>
		
		<div class="green">111</div>
		<div class="green">111</div>
		<div class="green">111</div>
		<div class="green">111</div>
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				// id选择器
				$("#four").css("background-color", "#cfc");
				
				// 类型选择器
				$(".green").css("background-color","green");
				
				// 标签选择器
				$("li").css("background-color","red");
				
				// 并集选择法
				$("#four, .green").css("background-color","blue");
				
				// 交集选择法
				$("li.green").css("background-color", "#fcc");
				
				
			})
		</script>
	</body>
</html>

 2. 子代和后代选择器

>,+,~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="father">
			<div class="c1">11</div>
			<div id="div2">22
				<p>111</p>
				<p>222</p>
				<p>333</p>
			</div>
			<div class="c1">33</div>
			<div>44</div>
			<div>55</div>
			<p>66</p>
			<p>77</p>
			<p>88</p>
		</div>
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// father的后代中所有的p都变色
				$("#father p").css("background-color","#cff");
				// father中直接后代中的p变色
				$("#father>p").css("background-color","#cff");
				// c1类后紧跟着的兄弟div
				$(".c1 + div").css("background-color","#cff");
				// div2后所有的兄弟div
				$("#div2 ~ div").css("background-color","#cff");
			})
		</script>
	</body>
</html>

详见jquery参考文档

 3. 过滤选择器

  都有冒号

  • 基本筛选器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li id="six">6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
	<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			
			// 筛选索引为偶数的元素
			$("li:even").css("background-color","#ccf");
			
			// 索引位奇数的元素
			$("li:odd").css("background-color","#ccf");

			$("li:first").css("background-color","#ccf");
			
			$("li:not(#six)").css("background-color","#ccf");

			$("li:eq(2)").css("background-color","#ccf");
			// (2, ...] 都变色
			$("li:gt(2)").css("background-color","#ccf");
			$("li:lt(7)").css("background-color","#ccf");


		})
	</script>
</html>
  • 内容选择器
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<div>张三</div>
		<div>李四</div>
		<div>王五</div>
		<div>赵六</div>
		<div>田七</div>
		<div>王八</div>
		<div>
			<font color="red">小王八蛋</font>
		</div>
		<div>张三丰</div>
		<div>
			<font color="green"></font>
		</div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>

		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				// 找到有王的
				$("div:contains('王')").css({
					"width": "300px",
					"height": "60px",
					"background-color": "#cfc"
				});

				// 找到空的元素
				$("div:empty").css({
					"width": "300px",
					"height": "60px",
					"background-color": "#cfc"
				});

				// 找到有font的
				$("div:has(font)").css({
					"width": "300px",
					"height": "60px",
					"background-color": "#cfc"
				});

				// 作为parent的
				$("div:parent").css({
					"width": "300px",
					"height": "60px",
					"background-color": "#cfc"
				});

			})
		</script>

	</body>

</html>
  • 属性选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		用户名: <input type="text" name="uname" /><br /><br />
		密码: <input type="password" name="upwd" /><br /><br />
		确认密码: <input type="password" name="upwd2" /><br /><br />
		
		用户昵称: <input id="input_nick" type="text" name="nick" /><br /><br />
		联系电话: <input type="text" name="tel" /><br /><br />
		邮箱: <input type="text" name="email" /><br /><br />
		
		用户性别:
		<input type="radio" name="gendar" value="male"/>男
		<input type="radio" name="gendar" value="female"/>女
		
		<br /><br />
		兴趣爱好
		<input type="checkbox" name="hobby" value="eat" />吃饭
		<input type="checkbox" name="hobby" value="sleep" />睡觉
		<input type="checkbox" name="hobby" value="write code" />写代码
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				// 有id属性的
				$("input[id]").css({
					"border":"3px solid green",
					"background-color":"red"
				})

				// 找到所有的密码框
				$("input[type='password']").css({
					"border":"3px solid green",
					"background-color":"red"
				})
				
				// 除了密码框
				$("input[type!='password']").css({
					"border":"3px solid green",
					"background-color":"red"
				})
				
				// name是u开头的输入框
				$("input[name^='u']").css({
					"border":"3px solid green",
					"background-color":"red"
				})

				// name以l结尾的输入框
				$("input[name$='l']").css({
					"border":"3px solid green",
					"background-color":"red"
				})
				
				
				// name包含e的输入框
				$("input[name*='e']").css({
					"border":"3px solid green",
					"background-color":"red"
				})
				
			})
			
		</script>
	</body>
</html>

【筛选（方法）】

取得一个包含匹配的元素集合(伪数组)中每一个元素的所有子元素的元素集合。

例:(具体参考jquery文档)

 parent()父元素

 children() 儿子

  • 下拉菜单
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			ul{
				float: left;
			}			
			
			li{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<ul>
			一级菜单1
			<li>11111</li>
			<li>11111</li>
			<li>11111</li>
			<li>11111</li>
			<li>11111</li>
		</ul>
		<ul>
			一级菜单2
			<li>22222</li>
			<li>22222</li>
			<li>22222</li>
			<li>22222</li>
			<li>22222</li>
		</ul>
		<ul>
			一级菜单3
			<li>33333</li>
			<li>33333</li>
			<li>33333</li>
			<li>33333</li>
			<li>33333</li>
		</ul>
		
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				// 给ul注册鼠标移入的事件
				$("ul").mouseover(function(){
					// 拿到鼠标正移入的那个jq对象,ul对应的children是li
					$(this).children("li").show();
				});
				
				$("ul").mouseout(function(){
					$(this).children("li").hide();
				})
				
				
			})
		</script>
	</body>
</html>

 siblings() 兄弟

  • 突出显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			img{
				opacity: 0.4;
			}
				
		</style>
	</head>
	<body>
		
		<img src="img/prod1.jpg" />
		<img src="img/prod2.jpg" />
		<img src="img/prod3.jpg" />
		<br />
		<img src="img/prod4.jpg" />
		<img src="img/prod5.jpg" />
		<img src="img/prod6.jpg" />
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$("img").mouseenter(function(){
                    //siblings用于筛选同辈元素的表达式
					$(this).css("opacity", "1").siblings().css("opacity", "0.4");
				})
				
				$("img").mouseleave(function(){
					$(this).css("opacity", "0.4");
				})
				
				
			})
			
		</script>
	</body>
</html>

 

猜你喜欢

转载自blog.csdn.net/qq_36194262/article/details/83010075
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022