jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

出太阳下雨�

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量169

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/A20190518/article/details/101050222

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

jQuery简介

jQuery是JavaScript和query的简写， jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西（ The Write Less, Do More）。它是最常被用到的 JavaScript 库之一。
优点：
1、轻量级。核心文件オ几十kb，不会影响页面加载速度
2、跨浏览器兼容。基本兼容了现在主流的浏览器
3、链式编程、隐式迭代
4、对事件、样式、动画支持,大大简化了DOM操作
5、支持插件扩展开发。有着丰富的第三方的插件,例如树形菜单、日期控件、轮插图等
6、免费、开源
使用：使用时非常简单，只需下载jquery文件，使用一行代码引入即可。

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

jQuery易混方法区分

1、first和first-child
HTML结构：

<ul>
	<!--<p>11</p>-->
	<li>John</li>
	<li>Karl</li>
	<li>Brandon</li>
</ul>
<ul>
	<li>Glen</li>
	<li>Tane</li>
	<li>Ralph</li>
</ul>

JS代码：

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	console.log($("ul li:first")); //只匹配一个元素
	//加入<p>11</p>之后，<li>John</li>的那个li，仍会选中
	//first只选中第一个元素
			
	console.log($("ul li:first-child")); // 为每个父元素匹配作为第一个子元素存在的集合
	//加入<p>11</p>之后，<li>John</li>的那个li不会选中，因为他不再是第一个子元素
	//<li>Glen</li>的那个li
</script>

2、even和odd
HTML结构：

<ul>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<li>John</li>
	<li>Karl</li>
	<li>Brandon</li>
</ul>
<ul>
	<li>Glen</li>
	<li>Tane</li>
	<li>Ralph</li>
</ul>

JS代码：

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	console.log($("ul>li:even()"));
	//even表示选取索引值的偶数 0 2 4
	//第一个 第三个 第五个会显示红色背景
	$("ul>li:even()").css("background","red");	
</script>

3、empty和remove和detach
HTML结构：

<p>hahaha <span>span</span></p>

JS代码：

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	// 1、empty()清空内部的东西，但元素仍保留
	$("p").empty(); //只剩一个<p></p>空标签
	*/
						
	/*
	// 2、remove() 删除掉该标签及该标签内的所有元素
	// 但不会从jQuery对象中删除，因而将来可再使用，但其绑定的事件、附加的数据会被删除
	$("span").click(function(){
		console.log("span被点击");
	})
	var $div = $("span").remove();
	$("p").append($div);
	//因为remove不保留状态，再点击时，控制台不会打印
	*/
			
	// 3、detach() 使用detach，仍会保留其状态，如绑定的事件等
	$("span").click(function(){
		console.log("span被点击");
	})
	var $div = $("span").detach();
	$("p").append($div);
	// detach之后，再添加，点击之后，控制台仍可打印span被点击
</script>

4、动画函数stop的几种使用
HTML结构

<input type="button" value="停止动画">
<div></div>

CSS样式

<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background: red;
	}
</style>

JS代码

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		// 页面加载之后，延时1s，执行两个动画函数
		$("div").delay(1000).animate({"width":"500px"},2000);
		$("div").animate({"height":"500px"},2000);
		$('input').click(function(){
				
			//$("div").stop(); // 停止当前动画，继续执行下次动画
			//$("div").stop(true); // 停止当前动画，清空动画序列，不再执行之后的动画
			$("div").stop(true,true); // 立即完成当前动画,清空动画序列，不再执行之后的动画
				
			//finish直接完成所有动画
			//$("div").finish();
		})
	})
</script>

5、on和bind事件处理
HTML结构

<div>
	<p>ppp</p>
	<input type="button" value="按钮" />
</div>

CSS结构

<style type="text/css">
	div{width: 100px;height: 100px;background: red;}
</style>

JS代码

<script type="text/javascript">
	// on支持事件委托 bind不支持事件委托
	$(function(){
		/*
		//给div绑定多个事件
		$("div").on("click mouseover",function(){
			console.log("div移入或者被点击");
		})
		//移除某个事件
		$("div").off("mouseover");
		*/
				
		/*$("div").on("click","input",function(){
			console.log("事件委托，当按钮被点击时起作用");
		})*/
				
		// hover 移入，移出
		$("div").hover(function(){
			$(this).css("background","green");
		},function(){
			$(this).css("background","blue");
		})
	});
</script>

6、currentTarget和target事件对象
HTML结构

<div>
	<input type="button" value="按钮" />
</div>

CSS结构

<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background: red;
	}
</style>

JS代码

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		// 当前事件源currentTarget为事件冒泡到哪个DOM对象上，哪个DOM对象就是当前事件源，会发生变化
				
		// 事件源target 为事件发生的DOM对象，尽管事件冒泡到别的DOM对象上，仍是那一个原本的事件源
				
		$("div").on("click",function(e){
			var evt = e || event;
			console.log("事件源"+evt.target["outerHTML"]);
					
			console.log("当前事件源"+evt.currentTarget["outerHTML"]);
			console.log("div点击事件");
		});
			
		$("input").on("click",function(e){
			var evt = e || event;
			console.log("事件源"+evt.target["outerHTML"]);
			console.log("当前事件源"+evt.currentTarget["outerHTML"]);
			console.log("input点击事件");
		});
				
	});
</script>

7、ajax实现jsonp的两种方式

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//跨域 使用$.getJSON
	$.getJSON("http://api.k780.com:88/?app=weather.future&weaid=zhengzhou&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",function(data){
		console.log(data);
	});
			
	// 使用 $.ajax实现jsonp的跨域，需设置dataType: "jsonp"
	$.ajax({
		type: "get",
		url: "http://api.k780.com:88/?app=weather.future&weaid=zhengzhou&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
		dataType: "jsonp",
		success: function(data) {
			console.log(data);
		}
	});
</script>

jQuery实现全选，反选

HTML结构

全选：<input type="checkbox" id="checkAll"><br/>
反选：<input type="checkbox" id="checkOther">
<ul>
	<li><input type="checkbox"></li>
	<li><input type="checkbox"></li>
	<li><input type="checkbox"></li>
	<li><input type="checkbox"></li>
	<li><input type="checkbox"></li>
</ul>

JS代码

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#checkAll").click(function(){
			$("li input").prop("checked",$(this).prop("checked"));
		});
				
		$("li input").click(function(){
			if($("li input:checked").length == $("li").length){
				$("#checkAll").prop("checked",true);
			}else{
				$("#checkAll").prop("checked",false);
			}
		});
				
		$("#checkOther").click(function(){
			$("li input").map(function(){
				$(this).prop("checked",!$(this).prop("checked"));
			})
		})
				
	})
</script>