0
点赞
收藏
分享

微信扫一扫

Jquery 总结

灯火南山 2022-03-26 阅读 38
jquery

一、jquery

1.简介
在这里插入图片描述
A.就是对js的一个简单的封装 优化Html文档操作 事件处理 动画设计 ajax交互
B.适配了各种主流的浏览器
C.轻量级的前端框架
2.下载
官网下载地址：https://jquery.com/

二、引入jquery

1.1 step01 将jquery.js放入到js文件夹下
在这里插入图片描述
step03 新建html界面 引入js文件

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

1.2 CDN引入
使用网站中的jquery文件 可以不用进行下载 直接引入网站中资源
1.2.1 百度 CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

1.2.2 新浪 CDN

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

1.2.2 Google CDN

<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
  1. jquery的准备函数
    1.jquery的符号:$
    2.准备函数的特点:
    A.准备函数有多种写法
    B.js的window.onload准备函数优先于jquery的准备函数执行
    C.jquery的准备函数可以定义多个 都会执行 js中准备函数只执行一次
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<body>
		<script>
			window.onload=function(){
				alert("2222");
			};
			window.onload=function(){
				alert("333");
			}
			$(function(){
				alert("1111");
			});
			$(document).ready(function(){
				alert("44444444");
			});
		</script>
	</body>
</html>

三、 jquery与js之间的相互转换

1.jquery 转换为js ==> jquery[0] 或者 jquery.get(0);
2.js 转换为jquery ==>$(js对象)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<body>
		<input type="text" value="aaaaaaaaa" id="tv_uname" />
		<input type="button" value="点击" onclick="show()"/>
		<script>
			function show(){
				alert(document.getElementById("tv_uname").value);
				var uname= document.getElementById("tv_uname");
				alert($(uname).val())
				var juname =$(uname);
				alert(juname[0].value);
				alert(juname.get(0).value);
			}
			
			
		</script>
	</body>
</html>

四、 jquery 的三种基本选择器

在这里插入图片描述
和css三种选择器一样
注意点:类选择器与标签选择器 返回多个还是单个都是js对象数组 id选择器返回一个是jquery对象

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

	<body>
		<input type="button" value="点击01" onclick="show01()" />
		<input type="button" value="点击02" onclick="show02()" />
		<input type="button" value="点击03" onclick="show03()" />
		<p>
			<input type="checkbox" class="tv_class" value="球王邓灯" />球王邓灯
			<input type="checkbox" value="睡王程奔" />睡王程奔
			<input type="checkbox" value="嫖王雷凌" />嫖王雷凌
		</p>
		<input type="text" id="tv_uname" />
		<script>
			function show01(){
				alert($("#tv_uname").val());
			}
			function show02(){
				//alert($(".tv_calss").val());
				//返回的是一个js数组
				var arrays = $(".tv_class");
				for (var i = 0; i < arrays.length; i++) {
					alert(arrays[i].value);
				}
			}
			function show03(){
				var arrays=$("input");
				for (var i = 0; i < arrays.length; i++) {
					alert(arrays[i].value);
				}
			}
		</script>
	</body>

</html>

五.jquery 的事件

注意点:jquery中事件同js时间比将on去除
在这里插入图片描述
在这里插入图片描述
理解代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

	<body>
		<input type="button" id="tv_but01" value="点击" />
		<input type="button" id="tv_but02" value="双击" />
		<p>昆明飞往广州</p>
		<input type="text" id="tv_u" />
		<h3>周末反反复复放</h3>
        <script>
        	$("#tv_but01").click(function(){
        		alert("点击事件");
        	});
        	$("#tv_but02").dblclick(function(){
        		alert("双击");
        	});
        	$("p").mouseout(function(){
        		console.log("移出")
        	}).mouseover(function(){
        		console.log("移入");
        	});
        	$("#tv_u").blur(function(){
        		$(this).css({"background-color":"red"});
        	}).focus(function(){
        		$(this).css({"background-color":"#ffffff"});
        	});
        	$("h3").hover(function(){
        		console.log("1111");
        	},function(){
        		console.log("22222");
        	});
        		
		</script>

	</body>

</html>

六.jquery 特效

8.1 显示与隐藏
在这里插入图片描述
8.2 淡入淡出
在这里插入图片描述
8.3 滑动
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<input type="button" value="显示" id="tv_show" />
		<input type="button" value="隐藏" id="tv_hide" />
		<input type="button" value="显示隐藏" id="tv_show_hide" />
		<div></div>
		<script>
			$("#tv_hide").click(function() {
				/*$("div").hide(1000,function(){
				alert("11111");
				})*/
				// $("div").fadeOut(5000);
				$("div").slideUp(2000);
			});
			$("#tv_show").click(function() {
				// $("div").show(1000,function(){
				// alert("22222");
				// })
				// $("div").fadeIn(5000);
				$("div").slideDown(2000);
			});
			$("#tv_show_hide").click(function() {
				//$("div").toggle(2000);
				$("div").slideToggle(2000);
			})
		</script>
	</body>

</html>

七、jquery动画

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<style>
		div{
			width: 200px;
			height:200px;
			background-color: red;
			position: relative;
		}
	</style>
	<body>
		<div></div>
		<button id="tv_id">点击</button>
		<button id="tv_stop">停止</button>
		<script>
			$("#tv_id").click(function(){
				$("div").animate({
					/*left:"250px",
					opacity:"0.5",
					height:"+=150px",*/
					width:"toggle"
				},4000);
			});
			$("#tv_stop").click(function(){
				$("div").stop();
			});
		</script>
		
	</body>
</html>

八、jquery 操作DOM

8.1 属性操作方法
在这里插入图片描述
和js的innerHtml innertext value 属性名="" 的作用一样，不过js是写在（）内 例如：获取属性值 js是 标签对象.属性名 jquery是标签对象.attr(属性名) 更改 js是 标签对象.属性名=更改的值 jquery是标签对象.attr(属性名,更改的值)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	</head>

	<body>
		<input type="button" value="点击01" onclick="show01()" />
		<input type="text" id="tv_uname" />
		<input type="checkbox" id="tv_check" value="槟榔" />槟榔
		<div id="tv_div"><span>睡着了</span></div>
		<img src="img/gm01.jpg" />
		<script>
			function show01() {
				//alert($("img").attr("src"));//img/gm01.jpg
				//alert($("img").prop("src"));//http://127.0.0.1:8020/day06/img/gm01.jpg
				//$("#tv_check").attr("checked",true);//勾选选择框
				$("#tv_check").prop("checked",true);//勾选选择框
				//alert($("#tv_div").html());//<span>睡着了</span>
				//alert($("#tv_div").text());//睡着了
				//$("#tv_div").html("<span style='color:red'>太难了</span>");//将睡着了换成红色的睡着了
				//$("#tv_div").text("<span style='color:red'>太难了</span>");//<span style='color:red'>太难了</span>
				//alert($("#tv_uname").val());//弹出输入框里的值
				//$("#tv_uname").val("呵呵呵");//输入框填入呵呵呵
			}
		</script>
	</body>

</html>
举报

相关推荐

JQuery总结

jquery

jQuery操作----总结

javascriptViewUI选择器jQuerycss代码人生

jquery相关总结

jQueryAjaxCSSJavaScriptSafariHtml/CSS前端开发

jQuery事件总结

jquerysed事件冒泡虚拟化云计算

jQuery笔记总结篇

前端学习笔记jQuery@花城鱼前端学习前端面试H5前端jQuery 复习架构前后端分离

Jquery常用技巧总结

jquery前端

jquery使用技巧总结

jQueryAjaxJavaScriptIEprototypeMySQL数据库

jquery---$.extend()用法总结

jquery默认值空类云平台云计算

jQuery选择器总结

jqueryhtml选择器子节点表单Python后端开发

JQuery笔记总结【五】--事件

jqueryjavascript前端
0 条评论