jquery之核心，包括核心函数，对象访问，数据缓存，队列控制，插件机制

最新推荐文章于 2021-04-26 19:34:15 发布

kevin_love_it

最新推荐文章于 2021-04-26 19:34:15 发布

阅读量274

点赞数 1

分类专栏： javaScript/jquery 文章标签： javascript jquery jsp html css

javaScript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jquery中的核心函数，对象访问，数据缓存，队列控制，插件机制

jquery有两种用法，一种是$，还有一种是jQuery，那么这两种方式在使用上有什么区别呢？

答案是这两种用法没什么区别，只是别名而已，用$要比jQuery简短一些、方便一些，另外其他的前端框架也都用到$符号，如果想不跟其他框架冲突，建议使用jQuery方式。

还有种方法就是换一个新的缩写：

1、调用jquery的noConflict函数

JQuery.noConflict();//让jquery放弃对$的使用权，交给其他js框架使用

2、声明新的缩写

var $j = Jquery

使用$j 来代替 $ 以防止$命名冲突。

$和$()的区别：

$可以调用那些不需要操作对象的方法（像java代码中的静态方法，不用声明对象就可以操作），如$.prototype，如果是给某个对象赋值（注意，这里有操作对象），就需要用$('#abc').val('123')的方式，因为像val()等方法中会用到$(this)去操作当前对象。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>jquery core</title>
	<script src="../../Document/lib/jquery-3.2.1.min.js"></script>
	<style type="text/css">
		.test {
			background-color:#FF4321;
		}		
		.active {
			background-color:#029AE5;
		}

		.divClass { 
			margin:3px; 
			width:40px; 
			height:40px;
			position:
			absolute; 
			left:0px; 
			top:30px; 
			background:green; 
			display:none; 
		}

		div.newcolor { 
			background:blue; 
		}

		span { 
			color:red; 
		}
	</style>
</head>
<body>
	<h2>核心</h2>
	<div style="width:100%;background-color:#dcdcdc">
			<form action="">
				
			</form>

			<!-- <img src="01.jpg" /> -->
			<!-- <img src="02.jpg" /> -->

			<button id="btn">Change colors</button>
			<span></span> 
			<div></div> 
			<div></div>

			<div></div> 
			<div></div>
			<div id="stop1">Stop here</div> 
			<div></div>

			<div></div>
			
			<ul>
				<li id="foo">foo</li>
				<li id="bar">bar</li>
				<li id="baz">baz</li>
			</ul>
	
			<button id="show">Show Length of Queue</button>
			<span></span>
			<button id="start">Start</button>
			<button id="stop">Stop</button>
			<div class="divClass,newcolor"></div>

			<input type="checkbox" />
			<input type="radio" />
			
		<script type="text/javascript">
		// ##################################	

		// 【1】jQuery 核心函数

		// ##################################
		// jQuery([sel,[context]]) 
		
		// $("div > p");
		// $(myForm.elements).hide();
		// $(document.body).css( "background", "black" );
		// $("input:radio", document.forms[0]);// 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
		// $("div", xml.responseXML);// 在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。

		// ==============================================
		
		// jQuery(html,[ownerDoc])1.8*

		// $("<div>", {
		// 	"class": "test",
		// 	text: "Click me!触发该div的test类",
		// 	click: function(){
		// 		$(this).toggleClass("test");
		// 	}
		// }).appendTo("body");

		// $("<input>",{
		// 	type:"text",
		// 	val:"Test",
		// 	focusin:function(){
		// 		$(this).addClass("active");
		// 	},
		// 	focusout:function(){
		// 		$(this).removeClass("active");
		// 	}
		// }).appendTo("form");

		// ==============================================
		// jQuery(callback) $(document).ready()的简写。 当DOM加载完成后，执行其中的函数

		// $(function(){
		//   // 文档就绪
		// });
		// ==============================================
		// jQuery.holdReady(hold) 延迟就绪事件，直到已加载的插件

		// $.holdReady(true);
		// $.getScript("E:\\Workspace/HelloJS/trunk/Document/lib/jquery-3.2.1.min.js", function() {
		// 	$.holdReady(false);
		// });

		// ##################################	

		// 【2】jQuery 对象访问
		
		// ##################################
		
		// $(element).each(callback) 以每一个匹配的元素作为上下文来执行一个函数。
		// $("img").each(function(i){
		// 	this.src="0"+(i+1)+".jpg";
		// });

		$("#btn").click(function(){
			$("div").each(function(index,domEle){
				// domEle==this
				$(this).css("background-color","yellow");
				if($(this).is("#stop")){
					$("span").text("stop at div index #"+index);
					return false;
				}
			});
		});

		// alert($("img").length); // 对象元素的个数==size()方法已经过期

		// ==============================================
		// alert($("img").get(0).src);

		// reverse() 方法
		// var srcs = [];
		// srcs[0] = $("img").get(0).src;
		// srcs[1] = $("img").get(1).src;
		// alert(srcs.reverse());

		// ==============================================

		// index返回索引位置0开始
		// $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
		// $('li').index($('#bar')); //1，传递一个jQuery对象
		// $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
		// $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
		// $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。 

		// ##################################

		// 【3】jQuery 数据缓存
		
		// ##################################

		// data([key],[value])
		// removeData([name|list])1.7*
		// $.data(ele,[key],[val])

		// alert($("div").data("blah"));  // undefined
		// $("div").data("blah", "hello");  // blah设置为hello
		// alert($("div").data("blah"));  // hello
		// $("div").data("blah", 86);  // 设置为86
		// alert($("div").data("blah"));  //  86
		// $("div").removeData("blah");  //移除blah
		// alert($("div").data("blah"));  // undefined

		// $("div").data("test", { first: 16, last: "pizza!" });
		// alert($("div").data("test").first);  //16;
		// alert($("div").data("test").last);  //pizza!;

		// h5规范 data-test
		// $(document.body).append("<div id='id03' data-test='this is test'></div>");
		// $("<div id='id03' data-test='this is test'></div>").appendTo(document.body);
		// alert($("#id03").data("test"));

		// $("div").data("foo", "52");
		// $("div").data("bar", "test");

		// ##################################

		// 【4】jQuery 队列控制  显示或操作在匹配元素上执行的函数队列

		// $("#show").click(function () {
		//       var n = $("div").queue("fx");
		//       $("span").text("Queue length is: " + n.length);
		// });
		// function runIt() {
		//       $("div").show("slow");
		//       $("div").animate({left:'+=200'},2000);
		//       $("div").slideToggle(1000);
		//       $("div").slideToggle("fast");
		//       $("div").animate({left:'-=200'},1500);
		//       $("div").hide("slow");
		//       $("div").show(1200);
		//       $("div").slideUp("normal", runIt);
		// }
		// runIt();
		// ------------------------
		// $("#start").click(function () {
		// 	$("div").show("slow");
		// 	$("div").animate({left:'+=200'},5000);
		// 	$("div").queue(function () {
		// 		$(this).addClass("newcolor");
		// 		$(this).dequeue();
		// 	});
		// 	$("div").animate({left:'-=200'},1500);
		// 	$("div").queue(function () {
		// 		$(this).removeClass("newcolor");
		// 		$(this).dequeue();
		// 	});
		// 	$("div").slideUp();
		// });
		// $("#stop").click(function () {
		// 	$("div").queue("fx", []);
		// 	$("div").stop();
		// });
		// ------------------------
		// $(document.body).click(function () {
		// 	$("div").show("slow");
		// 	$("div").animate({left:'+=200'},2000);
		// 	$("div").queue(function () {
		// 		$(this).addClass("newcolor");
		// 		$(this).dequeue();
		// 	});
		// 	$("div").animate({left:'-=200'},500);
		// 	$("div").queue(function () {
		// 		$(this).removeClass("newcolor");
		// 		$(this).dequeue();
		// 	});
		// 	$("div").slideUp();
		// });
		
		// ##################################

		// 【5】jQuery 插件机制

		jQuery.fn.extend({
			check: function() {
				return this.each(function() { this.checked = true; });
			},
			uncheck: function() {
				return this.each(function() { this.checked = false; });
			}
		});

		jQuery.extend({
			min: function(a, b) { return a < b ? a : b; },
			max: function(a, b) { return a > b ? a : b; }
		});

		// alert($.min(2,3));
		// alert(jQuery.min(4,5));

		// alert($.max(2,3));

		// alert($("input[type=checkbox]").check().val());
		// alert($("input[type=radio]").uncheck().val());

		(function($) { 
			$(function() {
		    // 使用 $ 作为 jQuery 别名的代码
			});
		})(jQuery);
		
		</script>
	</div>
	</div>
</body>
</html>