jQuery 2
jQuery的冲突问题
因为什么引起的冲突？打个比方： $这个符号，如何引入的js代码之中，出现在引入的好几个js文件中。那么将会使用最后引入的js规则
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-jQuery冲突问题title>
<script src="js/jquery-1.12.4.js">script>
<script src="js/test.js">script>
<script>
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
jQuery.noConflict();
//————————————————————————————————————————————————————————————
// 2.自定义一个访问符号
var cr = jQuery.noConflict();
cr(function () {
alert("hello lnj");
});
script>
head>
<body>
body>
html>
jQuery核心函数能接收哪些参数？
- 能接收一个函数
- 能接收字符串选择器
- 能接收一个字符串代码片段
- 能就收一个DOM元素
jQuery的forEach方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-静态方法each方法title>
<script src="jQuery-1.8.3.js">script>
<script>
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
/*
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
注意点:
原生的forEach方法只能遍历数组, 不能遍历伪数组
*/
arr.forEach(function (value, index) {
console.log(index, value);
});
obj.forEach(function (value, index) {
console.log(index, value);
});
// 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
注意点:
jQuery的each方法是可以遍历伪数组的
*/
$.each(arr, function (index, value) {
console.log(index, value);
});
$.each(obj, function (index, value) {
console.log(index, value);
});
script>
head>
<body>
body>
html>
jQuery中的Map方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-静态方法map方法title>
<script src="jQuery-1.8.3.js">script>
<script>
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
// 1.利用原生JS的map方法遍历
/*
第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组
注意点:
和原生的forEach一样,不能遍历的伪数组
*/
arr.map(function (value, index, array) {
console.log(index, value, array);
});
obj.map(function (value, index, array) {
console.log(index, value, array);
});
/*
第一个参数: 要遍历的数组
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素
第二个参数: 遍历到的索引
注意点:
和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
*/
var Res = $.map(obj, function (value, index) {
console.log(index, value);
});
var mapRes = $.map(obj, function (value, index) {
console.log(index, value);
return value + index;
});
var res2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;
});
var MapRes2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;
});
/*
jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
*/
console.log(res);
console.log(mapRes);
console.log(res2);
console.log(MapRes2);
script>
head>
<body>
body>
html>
jQuery其他静态方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-jQuery中的其它静态方法title>
<script src="jQuery-1.8.3.js">script>
<script>
/*
$.trim();
作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串
*/
/*
var str = " lnj ";
var res = $.trim(str);
console.log("---"+str+"---");
console.log("---"+res+"---");
*/
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
// 对象
var obj = {
"name": "lnj",
age: "33"
};
// 函数
var fn = function () {
};
// window对象
var w = window;
/*
$.isWindow();
作用: 判断传入的对象是否是window对象
返回值: true/false
*/
var res = $.isWindow(w);
console.log(res);
/*
$.isArray();
作用: 判断传入的对象是否是真数组
返回值: true/false
*/
var res = $.isArray(w);
console.log(res);
/*
$.isArray();
作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:
jQuery框架本质上是一个函数
(function( window, undefined ) {
})( window );
*/
var res = $.isFunction(jQuery);
console.log(res);
script>
head>
<body>
body>
html>
hold-ready
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jQuery-1.8.3.js">script>
<title>Documenttitle>
<script>
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
script>
head>
<body>
<button>回复ready事件button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
$.holdReady(false);
}
script>
body>
html>