jQuery基本静态方法详解
jQuery中文文档:https://www.jquery123.com/
http://jquery.cuishifeng.cn/index.html
jquery冲突问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery-1冲突问题</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
// $(function () {
// alert("hello inj");
// });
//1、接收一个函数
$(function () {
alert("hello world");
//2、接收一个字符串
//2.1接收一个字符串选择器
//返回一个Jquery对象,对象中保存了找到的DOM元素
var $box1=$(".box1");
var $box2=$("#box2");
console.log($box1);
console.log($box2);
//3、接收一个字符串代码片段
//返回一个Jquery对象,对象中保存了创建的DOM元素
var $p=$("<p>我是段落</p>");
console.log($p);
$box1.append($p);
//4、接收一个DOM元素
//会被包装成一个JQuery对象返回给我们
var span=document.getElementsByTagName("span")[0];
// console.log(span);原生dom元素
var $span=$(span);
console.log($span);
$box1.append($span);
})
</script>
</head>
<body>
<div class="box1">nihao</div>
<div id="box2">nihaotwo</div>
<span>我是span</span>
</body>
</html>
jquery静态方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery静态方法</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 1.定义一个类
function Aclass() {
}
//2.给这个类添加一个静态方法
//直接添加给类的就是静态方法
Aclass.staticMethod=function () {
alert("staticMehtod");
}
//静态方法通过类名调用
Aclass.staticMethod();
//3.给这个类添加一个实例方法
Aclass.prototype.instanceMethod=function () {
alert("实例方法");
}
//实例方法通过类的实例调用
//创建一个实例(创建一个对象)
var a=new Aclass();
a.instanceMethod();
</script>
</head>
<body>
</body>
</html>
each、map方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态方法each方法</title>
<script src="js/jquery-3.3.1.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);
// })
//1.利用jQuery的each静态方法遍历数组
/*
第一个参数:当前遍历到的索引,
第二个参数:遍历到的元素
注意点:jquery的each方法是可以遍历伪数组的
obj为伪数组
*/
$.each(arr,function (index,value) {
console.log(index,value);
});
$.each(obj,function (index,value) {
console.log(index,value);
})
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态方法map方法</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
var arr=[1,3,5,7,9];
//1.利用原生Js的map方法遍历
/*
第一个参数:当前遍历的元素
第二个参数:当前遍历到的索引
第三个参数:当前遍历到的数组
注意点:和原生forEach一样,不能遍历伪数组
arr.map(function (value,index,array) {
console.log(index,value,array);
})
*/
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
/*
第一个参数:要遍历的数组
第二个参数:每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数:遍历到的元素
第二个参数:遍历到的索引
注意点:和jquery中的each静态方法一样,map静态方法也可以遍历伪数组
*/
$.map(obj,function (index,value) {
console.log(index,value);
});
var res=$.map(obj,function (index,value) {
console.log(index,value);
return index+value;//返回了index+value
});
var res1=$.each(obj,function (index,value) {
console.log(index,value);
return index+value;//没有任何变化
});
console.log(res);
console.log(res1);
/*
jquery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是,遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理,
然后生成一个新的数组返回
*/
</script>
</head>
<body>
</body>
</html>
jquery其他静态方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的其他静态方法</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
var str=" inj ";
var res=$.trim(str);//去除字符串前后的字符串
console.log("----"+str+"----");
console.log("----"+res+"----");
var arr=[1,2,3,4,5];//真数组
var arrlike={0:1,1:2,2:3,3:4,4:5,length:5};//伪数组
var obj={"name":"inj",age:"33"};//对象
var fun=function(){};//函数
var w=window;//windows对象
var res=$.isWindow(w);
console.log(res);
var res1=$.isArray(arrlike);
console.log(res1);//伪数组不是真数组,只有真数组返回true
var res2=$.isFunction(fun);
console.log(res2); //jQuery本质就是一个方法
</script>
</head>
<body>
</body>
</html>
holdReady方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态方法holdReady方法</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$.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);//只是用来暂停回复ready事件
}
</script>
</body>
</html>
我想给她买兰博基尼