jquery之核心，包括核心函数，对象访问，数据缓存，队列控制，插件机制
2017-11-20 00:44
567 查看
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对象，返回这个对象中第一个元素在原先集合中的索引位置
c7cc
// $('#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>
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对象，返回这个对象中第一个元素在原先集合中的索引位置
c7cc
// $('#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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 数据缓存 队列控制 插件机制 多库共存
- jQuery入门(2)：核心（核心函数,对象访问，多库共存）
- JQuery 参考手册 学习笔记（3）-jquery 数据缓存、队列控制
- jQuery技术实例(对象访问,属性,CSS 类,核心函数)
- IE下jquery 访问 XML 数据时发生 parsererror, TypeError: 缺少对象 错误的解决方案
- C++友元friend ——利用friend修饰符，可以让设定的外部函数访问对象中被保护数据
- jQuery 核心函数以及jQuery对象
- jQuery 核心函数以及jQuery对象
- 利用数据缓存机制提高智能设备应用程序的数据访问性能
- 【jquery】jQuery 核心函数以及jQuery对象(推荐)
- jQuery源码分析(版本1.6.1)___构造jQuery对象-源码结构和核心函数
- 【Android核心基础02】 - 界面布局、测试、数据存储访问、权限控制、XML
- 利用数据缓存机制提高智能设备应用程序的数据访问性能
- c++指针深入全面总结--包括对象数据成员和成员函数的指针
- jQuery源码分析-构造jQuery对象-源码结构和核心函数
- jQuery 核心函数以及 jQuery 对象
- 利用数据缓存机制提高智能设备应用程序的数据访问性能
- jQuery数据篇-底层函数队列操作
- jQuery 核心4_插件机制