Web基础学习笔记-jQuery

其他 2018-09-16 12:22:32 阅读次数: 0

jQuery简介

jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程。

jQuery很容易学习。

什么是jQuery

jQuery是一个JavaScript函数库。

jQuery是一个轻量级地“写的少，做的多”的JavaScript库。

jQuery库包含一下功能：

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities

除此之外，jQuery还提供了大量的插件

为什么使用jQuery

目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。

很多大公司都在使用jQuery,例如：

Google，Microsof，IBM

jQuery安装

可以通过多种方法在网页中添加jQuery。

1，从jquery.com下载jQuery库

2, 从CDN中下载jQuery,如从Google中加载jQuery

下载jQuery

有两个版本jQuery可供下载：

Production version-用于实际的网站中，已被精简和压缩。

Development version--用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从jquery.com中下下载。

jQuery库是一个JavaScript文件，您可以使用HTML的<script>标签引用它：

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

将下载的文件放在网页的同一目录下，就可以使用jQuery。

jQuery语法

通过jQuery,可以选取（查询，query) HTML元素，并对他们执行操作（action)。

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：

$(selector).aciton()
  • 美元符号定义jQuery
  • 选择符（selector)查询和查找HTML元素
  • jQuery的action()执行对元素的操作

 实例：

  • $(this).hide()-隐藏当前元素
  • $("p").hide()-隐藏所有<p>元素
  • $("p.test").hide()-隐藏所有class="test"的<p>元素 

$("test").hide()-隐藏所有id="test"的元素

jQuery入口函数：

$(document).ready(function(){
//执行代码
});
//或者
$(function(){
//执行代码
});

 JavaScript入口函数：

window.onload = function(){
//执行代码
}

 jQuery入口函数与JavaScript入口函数的区别：

jQuery的入口函数是在html所有标签（DOM)都加载之后，就会去执行。

JavaScript的window.onload事件是等到所有内容，包括外部图片之类的文件加载完成后，才会执行。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>
$(document).ready(function(){
	// alert("文档加载完毕");
	$("p").click(function(){
		$(this).hide();
	})
});

选择器

$(document).ready(function(){
	$("button").click(function(){
		$("p").text("p");
		$("#pid").text("p元素被修改了");
		$(".class").text("类选择器");
	});
});
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<p>p1</p>
	<p id="pid">p2</p>
	<p class="class">p3</p>
	<button>click me</button>
</body>
</html>

jQuery事件：

  • 常用事件方法
  • 绑定事件
  • 解除绑定事件
  • 事件的目标
  • 事件的冒泡
  • 自定义事件
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<button>click me</button>
</body>
</html>
$(document).ready(function(){
	// $("button").click(function(){ //鼠标单击
	// $("button").dblclick(function(){  //鼠标双击
	// $("button").mouseenter(function(){  //鼠标滑过
	$("button").mouseleave(function(){  //鼠标离开
		$(this).hide();
	});
});

事件之绑定，解除绑定事件

$(document).ready(function(){
	// $("#clickMeBtn").click(function(){
		// alert("hello")
	// });
	$("#clickMeBtn").bind("click",clickHandler1);//绑定事件
	$("#clickMeBtn").bind("click",clickHandler2);
	$("#clickMeBtn").unbind("click",clickHandler1);//接触绑定
	
	$("#clickMeBtn").on("click",clickHandler1);
	$("#clickMeBtn").on("click",clickHandler2);
	$("#clickMeBtn").off("click",clickHandler1);
});
function clickHandler1(e){
	console.log("clickHandler1")
}
function clickHandler2(e){
	console.log("clickHandler2")
}
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<button id="clickMeBtn">click me</button>
</body>
</html>

事件之事件目标与冒泡

$(document).ready(function(){
	$("body").bind("click",bodyHandler);
	$("div").bind("click".divHandler1);
	$("div").bind("click".divHandler2);
});
function bodyHandler(event){
	console.log(event);
}
function divHandler1(event){
	console.log(event);
	event.stopPropagation();//阻止父级冒泡
	// event.stopImmediatePropagation();//阻止所有的冒泡
}
function divHandler2(event){
	console.log(event);
}
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div style="width:300px;height:300px;background-color:aqua">
	<ul>
		<li>A<li>
		<li>B<li>
		<li>C<li>
		<li>D<li>
	</ul>
</body>
</html>

事件之自定义事件

var ClickMeBtn;
$(document).ready(function(){
	ClickMeBtn = $("#ClickMeBtn");
	ClickMeBtn.click(function(){
		var e = jQuery.Event("MyEvent");
		ClickMeBtn.trigger(e);
	});
	ClickMeBtn.bind("MyEvent",function(event){
		console.log(event);
	});
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<button id="ClickMeBtn">Click me</button>
</body>
</html>

jQuery效果

  • jQuery隐藏/显示
  • jQuery淡入淡出
  • jQuery滑动
  • jQuery动画
  • jQuery停止动画
  • jQuery Callback
  • jQuery Chaining

jQuery隐藏/显示

div{
	background:#ece023;
	width:50px;
	height:50px;
	margin:2px;
	float:right;
}
$(document).ready(function(){
	$("#hide").click(function(){
		$("p").hide(1000);//1000毫秒
	});
	$("#show").click(function(){
		$("p").show(1000);//1000ms
	});
	$("#toggle").click(function(){
		$("p").toggle(1000);
	});
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
	<!-- <p>hello</p> -->
	<!-- <button id="hide">隐藏</button> -->
	<!-- <button id="show">显示</button> -->
	<!-- <button id="toggle">隐藏/显示<button> -->
	<script>
		for(var i=0;i<5;i++){
		$("<div>").appendTo(document.body);
		}
		$("div").click(function(){
			$(this).hide(2000,function(){
				$(this).remove();
			});
		});
	</script>
</body>
</html>

jQuery淡入淡出

$(document).ready(function(){
	$("#in").on("click",function(){
		$("#div1").fadeIn(1000);
		$("#div2").fadeIn(1000);
		$("#div3").fadeIn(1000);
	});
	$("#out").on("click",function(){
		$("#div1").fadeOut(1000);
		$("#div2").fadeOut(1000);
		$("#div3").fadeOut(1000);
	});
	$("#toggle").on("click",function(){
		$("#div1").fadeToggle(1000);
		$("#div2").fadeToggle(1000);
		$("#div3").fadeToggle(1000);
	});
	$("#to").on("click",function(){
		$("#div1").fadeTo(1000,0.5);//0-1透明度
		$("#div2").fadeTo(1000,0.7);
		$("#div3").fadeTo(1000,0.3);
	});
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<button id="in">fadeIn</button>
	<button id="out">fadeOut</button>
	<button id="toggle">fadeToggle</button>
	<button id="to">fadeTo</button>
	<div id="div1" style="width:80px; display:none; height:80px; background-color:aqua"></div>
	<div id="div2" style="width:80px; display:none; height:80px; background-color:#ece023"></div>
	<div id="div3" style="width:80px; display:none; height:80px; background-color:darkgoldenrod"></div>
</body>
</html>

jQuery滑动

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<style>
		#content,#flipshow,#fliphide,#fliptoggle{
			padding:5px;
			text-align:center;
			background-color;#ece025;
			border:solid 1px #ece023;
		}
		#content{
			padding:50px;
			display:none; 
		}
	</style>
</head>
<body>
	<div id="flipshow">出现</div>
	<div id="fliphide">隐藏</div>
	<div id="fliptoggle">出现/隐藏</div>
	<div id="content">Hello World</div>
</body>
</html>
$(document).ready(function(){
	$("#flipshow").click(function(){
		$("#content").slideDown(500);
	});
	$("#fliphide").click(function(){
		$("#content").slideUp(500);
	});
	$("#fliptoggle").click(function(){
		$("#content").slideToggle(500);
	});
});

回调

$(document).ready(function(){
	$("button").click(function(){
		// $("p").hide(1000,function(){
			// alert("动画结束，这个方法被称为回调");
		// });
		$("p").css("color","red").slideUp(1000).slideDown(1000);
	});
l});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<button>隐藏</button>
	<p>hello world</p>
</body>
</html>

jQuery HTML

  • jQuery捕获
  • jQuery设置
  • jQuery添加元素
  • jQuery删除元素

jQuery捕获

$(document).ready(function(){
	// $("#btn1").click(function(){
		// alert("text:"+$("#text").text());//text只能获取内容
	// });
	// $("#btn1").click(function(){
		// alert("text:"+$("#text").html());//html可以获取标签
	// });
	$("#btn1").click(function(){
		alert("text:"+$("#text").html());//html可以获取标签
	});
	$("#btn2").click(function(){
		alert("text:"+$("#aid").attr("href"));
	});
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<p id="text">this is my webpage<a>这是一个a标签</a></p>
	<button id="btn1">点击</button>
	<p><input type="text" id="it" value="测试"></p>
	<p><a href="http:baidu.com" id="aid">百度</a></p>
	<button id="btn2">点击</button>
</body>
</html>

设置

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<p id="p1">hello world</p>
	<p id="p2">hello world</p>
	<input type="text" id="i3" value="hello world">
	<button id="btn1">按钮</button>
	<button id="btn2">按钮</button>
	<button id="btn3">按钮</button>
	<br />
	<a id="aid" href="http://www.baidu.com">百度</a>
	<button id="btn4">跳转</button>
	<br />
	<p id="p5">hello world</p>
	<button id="btn5">按钮</button>
</body>
</html>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#p1").text("极客学院");
	});
	$("#btn2").click(function(){
		$("#p2").html("<a href='http://www.jikexueyuan.com'>极客学院</a>");
	});
	$("#btn3").click(function(){
		$("#i3").val("极客学院");
	});
	$("btn4").click(function(){
		$("#aid").attr({
			"href":"http://www.baidu.com",
			"title":"hello"
		});
	});
	$("#btn5").click(function(){
		$("#p5").text(function(i,ot){
			return "old:" +ot+" new:这是新的内容"+(i);
		});
	});
	
});

添加元素

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<p id="p1">hello world</p>
	<p id="p2">hello world</p>
	<button id="btn1">按钮</button>
	<button id="btn2">按钮</button>
	<button onclick="appendText()">按钮</button>
</body>
</html>
/*
append
prepend
before
after
*/
$(document).ready(function(){
	$("#btn1").click(function(){
		// $("#p1").append("this is my webpage add content");
		$("#p1").prepend("this is my webpage add content");
	});
	$("#btn2").click(function(){
		$("#p2").before("hello");
		$("#p2").after("hello");
	});
});
function appendText(){
	/*html,jQuery,DOM
	*/
	var text1 = "<p>iwen</p>"
	var text2 = $("<p></p>").text("ime");
	var text3 = document.createElement("p");
	text3.innerHTML = "acely";
	$("body").append(text1,text2,text3);
}

删除元素

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div id="div" style="height:200px;width:200px;border:1px solid black;background-color:red" ></div>
	hello
	<p>hello world</p>
	<p>hello</p>
	</div>
	<button id="btn">删除</button>
</body>
</html>
/*
remove 删除所有的
empty 删除里面的元素
*/
$(document).ready(function(){
	$("#btn").click(function(){
		$("#div").remove();
		// $("#div").empty();
	});
});

jQuery CSS

  • jQuery 方法
  • jQuery 盒子模型

jQuery方法

.style1{
	width:100px;
	height:100px;
	background-color:aqua;
}
.style2{
	width:100px;
	height:100px;
	background-color:chocolate;
}
$(document).ready(function(){
	// $("div").css("width","100px");
	// $("div").css("height","100px");
	// $("div").css("background","red");
	// $("div").css({
		// width:"100px",
		// height:"100px",
		// backgroundColor:"#00FF00"
	// });
	$("div").addClass("style1");
	$("div").click(function(){
		// $(this).addClass("style2");
		// $(this).removeClass("style1");
		$(this).toggleClass("style2");
	});
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<link type="text/css" rel="stylesheet" href="jQCSS.css">
</head>
<body>
	<div></div>
</body>
</html>

jQuery 盒子模型

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<style>
		#div{
			width:100px;
			height:100px;
			margin:50px;
			padding:50px;
			border:2px solid aqua;
			background-color:aquamarine;
			
		}
	</style>
</head>
<body>
	<div id="div"></div>
</body>
</html>
$(document).ready(function(){
	alert($("#div").height());
	alert($("#div").innerHeight());
	alert($("#div").outerHeight());
	alert($("#div").outerHeight(true));
});

jQuery遍历

  • jQuery遍历
  • jQuery过滤

jQuery向下遍历

#div1{
	width:500px;
	height:200px;
	border:3px solid chocolate;
}
#div2{
	width:400px;
	height:150px;
	margin-top;10px;
	margin-left:10px;
	border:3px solid chocolate;
}
p{
	margin-left:10px;
	margin-top:10px;
	width:150px;
	height:80px;
	border:3px solid chocolate;
}
$(document).ready(function(){
	$("#div1").children().css({border:"3px solid black"});//儿子一级，可选参数
	$("#div1").find("p").css({border:"3px solid yellow"})//可以多级，必选参数
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<link type="text/css" href="jQCSS.css" rel="stylesheet">
</head>
<body>
	<div id="div1">div1
		<div id="div2">div2
			<p>
				<a>
					hello
				</a>
			</p>
		</div>
	</div>
</body>
</html>

jQuery向上遍历

#div1{
	width:500px;
	height:200px;
	border:3px solid chocolate;
}
#div2{
	width:400px;
	height:150px;
	margin-top;10px;
	margin-left:10px;
	border:3px solid chocolate;
}
p{
	margin-left:10px;
	margin-top:10px;
	width:150px;
	height:80px;
	border:3px solid chocolate;
}
$(document).ready(function(){
	// $("p").parent().css({border:"3px solid black});//直接父类
	// $("p").parents().css({border:"3px solid black});//所有父类
	$("p").parentsUntil("#div1").css({border:"3px solid black"});//一个区间
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<link type="text/css" href="jQCSS.css" rel="stylesheet">
</head>
<body>
	<div id="div1">div1
		<div id="div2">div2
			<p>
				<a>
					hello
				</a>
			</p>
		</div>
	</div>
</body>
</html>

jQuery同级遍历

/*
sibings()
所有同级元素全部修改
next()
下一个元素修改
nextAll()
下面所有元素修改
nextUntil()
下面元素的区间修改
prev()
preAll()
preUntil()
上面元素
*/
$(document).ready(function(){
// $("h4").siblings().css({border:"3px solid red"});
// $("h4").next().css({border:"3px solid red"});
// $("h4").nextAll()().css({border:"3px solid red"});
// $("h4").nextUntil("h6").css({border:"3px solid red"});
$("h4").prev().css({border:"3px solid red"});

});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<style>
		.bd *{
			display:block;
			border: 3px solid gray;
			color gray;
			padding:5px;
			margin:15px;
		}
	</style>
</head>
<body>
	<div class="bd">
		<p>p</p>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4>h4</h4>
		<h5>h5</h5>
		<h6>h6</h6>
	</div>
</body>
</html>

jQuery过滤

/*
first()
last()
eq()
filter()
not()
*/
$(document).ready(function(){
	// $("div p").first().css("background-color","red");
	// $("div p").last().css("background-color","red");
	// $("div p").eq(2).css("background-color","red");//指定索引
	$("div p").filter(".pclass").css("background-color","red");
	// $("div p").not(".pclass").css("background-color","red");
});

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>
	<style>
		.bd *{
			display:block;
			border: 3px solid gray;
			color gray;
			padding:5px;
			margin:15px;
		}
	</style>
</head>
<body>
	<div>
		<p>div1<p>
	</div>
	<div>
		<p class="pclass">div2</p>
	</div>
	<div>
		<p class="pclass">div3</p>
	</div>
	<div>
		<p>div4</p>
	</div>
</body>
</html>

jQuery Ajax

Ajax是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

什么是Ajax?

Ajax = 异步Javascript和XML（Asynchronous JavaScript and XML).

简短地说，在不重载整个网页的情况下，Ajax通过后台加载数据，并在网页上进行显示。

通过jQuery Ajax方法，能够使用http get和http post从远程服务器上请求文本，html,xml或json-同时能够把这些外部数据直接载入网页的被选元素中。

猜你喜欢

转载自blog.csdn.net/qq_38826019/article/details/82385427
今日推荐
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源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
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)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022