1th.何谓“核心函数”?
形式如$()即为"核心函数"。
要考虑的是核心函数的参数问题,
1.如果参数是function,结构变成$(function(){}),则"核心函数"变成"入口函数",具体见前一章。
2.原生js中的选择器的获取(类似于.getElementById...)得到了简写:
$("div");
$(".box1");
$("#id1");
3.原生js中的/document.body.createElement()类似操作在jquery中得到了简写:
let $p=$("<p>这是一个P标签</p>");
document.body.append($p);
//原生js
document.body.appendChild($p);
.append后可以跟一个具体的jquery对象形如.append($("")),也可以直接跟一个字符串比如.append("")。当.append()后接的对象比较复杂比如包含多个DOM且多个DOM之间有层级关系,个人还是建议写成文本文件text(字符串)的形式(但是无论是那种方式,都要经过处理,将HTML中复制过来的代码去掉空格):
//直接后接文本的形式 没有包装成jquery对象。强烈建议!
let text1= ' <div class="mask"><div class="login"><span></span><form class="biankuang" action=""> </form></div></div>';
$("body").append(text1);
//包装成了jquery对象传进去!
let $mask = $('<div class="mask"><div class="login"><span></span><form class="biankuang" action=""> </form></div></div>')
$("body").append($mask);
要注意的是,只要使用了形如$()的形式,最终返回的都是一个jquery对象,只是这个jquery对象中包含了选择器所选中的DOM元素第(2)条,自我创建的DOM元素第(3)条.
2th.静态方法与实例方法
对于有java基础的,要学习js的静态方法与实例方法,可能仅仅就是个记忆型的问题,你要记住js的静态方法/实例方法与java的不同。
<script>
function Aclass() {}
//静态方法
Aclass.method1 = function() {
alert("this is a statciMethod");
}
//实例方法
Aclass.prototype.method = function() {
alert("this is a instancMethod,it's oriented objects");
}
Aclass.method1();
// 不要写成类似于“Aclass a=new Aclass();” 的形式,这是java的写法
// Aclass a=new Aclass();
let a = new Aclass();
a.method();
</script>
初步总结下不同:
1.js不存在真正的类的概念,在涉及到java中本该用类"class"的时候,js是用function来代替的
2.静态方法是直接加,使用也是直接使用;实例方法存在"Aclaas.prototype.method",使用的时候也是需要先创建对象(要仔细辨别与java的不同,上述代码部分标识出来了)。
3.相对于java,js中的实例方法给人的感觉就是”强行面向对象“,通过”.prototype“实现的”强行面向对象“。关于面向对象的好处,就是可以少些代码,尽可能多的达到代码的复用(这一点对于所有的面向对象的语言都是存在的)。
3th.jquery中的静态方法
注意与原生的js的方法比较,便于记忆。
数组 && 伪数组 && json
数组 :【1,2,3,4,5】
伪数组:{0:6,1:6,2:6,3:4,4:3,5:6,length:6}伪数组是相对于数组而言的,重点强调在“伪”。它有2个要素:1.有length 2.序列下标从0开始且为顺序序列
json:{"name":"purple","age":22,"gener":"female"}。没有length。下标无序。
one. $.each(xxx,function(index,value)) vs xxx.forEach(function(value,index))
格式:$.each(obj,funciton(index,value){})
// 数组arr的比较
// 原生的js只能在数组arr中使用,在伪数组f_arr以及json中无法使用,注意function中
// index value的前后位置。
arr.forEach(function(value, index) {
console.log(index - value);
console.log(index, value);
})
$.each(arr, function(index, value) {
console.log(index + value);
console.log(index, value);
})
//伪数组f_arr的比较
// Uncaught TypeError: f_arr.forEach is not a function,报错类型。
// 伪数组无法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
f_arr.forEach(function(value, index) {
console.log(index, value);
})
$.each(f_arr, function(index, value) {
console.log(index, value)
console.log(index + value)
})
// json的比较
// Uncaught TypeError: json.forEach is not a function,报错类型
// json无法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
json.forEach(function(value, index) {
console.log(index, value)
})
$.each(json, function(index, value) {
console.log(index, value);
// 字符串
console.log(index + value);
})
two. $.map(xxx,function(value,index){}) vs arr.map(function(value,index,arr))
与“one.”类似,$.map(xxx,function(value,index){})适用于数组arr/伪数组f_arr/json.依旧需要强调的是要注意参数位置/参数个数的问题。
three. $.each(xxx,function(index,value)) vs $.map(xxx,function(value,index)) vs arr.map(function(value,index,arr))
这三者的区别主要体现在返回的参数上(原数组arr都不会发生变化,变化的是新生成的arr的返回值,故原数组不做比较):
//组arr都不会发生变化,变化的是新生成的arr的返回值,故原数组不做比较
let arr1 = arr.map(function(value, index, arr) {
console.log(index, value)
// 可以使用,改变返回值
return value + 1
})
// // [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
console.log(arr1)
let arr2 = $.map(arr, function(v, i) {
console.log(" " + i, v)
// 可以使用,改变返回值
return v + 1;
})
// 空数组,length长度为0
console.log(arr2)
// undefined
let arr3 = arr.forEach(function(value, index) {
//依旧是undefiend,失效。
return value + 1;
})
console.log(arr3)
// [1, 3, 5, 6, 7, 3, 4],原数组返回。
let arr4 = $.each(arr, function(index, value) {
//依旧是原数组返回,失效。
return value+ 1;
})
console.log(arr4)
简言之,一句话:forEach/$.each返回的是undefined/原数组,都无法通过return修改返回值;map/$.map返回的是【undefined,undefined,undefined,.....】或者空数组【】,都可以通过return修改返回值(jquery与原生代码策略上的“一致性”)。
总结,
只有$.each(function(index,value))中function的参数是(index,value)顺序,其他的都是(value,index)顺序。【便于记忆】; arr.map(function(value,index,arr)) 中的function是3个参数,(value ,index,arr)。
Four. $.trim(str)
主要用于祛除字符串str两边的空格,常见于校验等操作。使用的是返回的结果,并不改变原有字符串。
let str=" 左边空五格右边空五格 ";
// 去除两边的空格
alert( "+++"+$.trim(str)+"+++") ;
alert( "+++"+str+"+++") ;
Five. $.isArray vs $.isFunction vs $.isWindow
三者的返回值都是布尔值,true/false。要特别说明的是let fn=$.isFunction(jQuery)返回值是true,表明jquery这个框架本身是个函数 ,打开jquery源代码,取首尾部分,格式形如(function())(window)[随着版本的不同,function的参数不同,可以是( window, undefined ),也可以是( global, factory )],典型的匿名函数自调用。
// 只能判别是否是“真”数组,伪数组不在其列
alert($.isArray(arr))
alert($.isArray(f_arr)) //伪数组,返回的是false
//下面两种返回ture,说明jQuery框架本身是一个自调用函数!
alert($.isFunction(jQuery));
alert($.isFunction($));
// 区分大小写,否则会报错:“jquery is not defined”.jQuery为正确。
alert($.isFunction(jquery));
//参照 window.load=function(){} 中的window。注意大小写
alert($.isWindow(w));
alert($.isWindow(window))
//Window is undefined。正确格式:window
alert($.isWindow(Winodw));
six
注意$.holdReady(false)的位置,目前来看,$.holdReady(false)只能写在html这里(行间样式)。我觉得这个可能是$.holdReady(true/false)较少用到的原因之一?!代码如下:
<script>
// 通常是成对的出现,中间包裹着“预加载”。这个预加载可以是原生的写法,也可以是
// jquery的写法。
$.holdReady(true)
$(function() {
alert("$.holdReady(true) && $.holdReady(false) 是一对好机油啊!")
})
// 写在这里貌似没用!而且还会报错。
// let btn = document.getElementsByTagName("button")[0];
// btn.onclick = function() {
// $.holdReady(flase)
// }
</script>
</head>
<body>
<!-- $.holdReady(false)必须的得写在这里啊! -->
<button type="button" name="button" onclick="$.holdReady(false)" >true --->flase </button>
</body>
<script>
// 写在这里也没有用!报错:“false” is undefined。这么设计也有好处,因为写在这里,HTML已经加载完成了,无必要再使用$.holdReady(true/false)了:
// $("button")[0].onclick = function() {
// $.holdReady(flase);
// }