现在来学习jQuery
文章目录
使用jQuery
- 首先在官网中下载(https://code.jquery.com/)[https://code.jquery.com/],有
1.x
,2.x
,3.x
这样几个版本,查看京东的源代码:
发现他们使用的也是1.x
我们就也是用他,主要是因为它可以兼容更多的浏览器。
- 直接在官网找到,并引入。
或者建立一个js文件将其引入也可。
入口函数
$(document).ready(function(){
// 开始写 jQuery 代码...
});
-
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
-
如果在文档没有完全加载之前就运行函数,操作可能失败。
jQuery与JS入口函数的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function(ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
}
$(document).ready(function() {
// 1.通过jQuery入口函数可以拿到DOM元素
var $img = $("img")[0];
console.log($img);
});
</script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB199nuX9slXu8jSZFuXXXg7FXa-160-280.jpg_400x400q90.jpg_.webp" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function(ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(img).width;
console.log("JS->", width);
}
$(document).ready(function() {
// 1.通过jQuery入口函数可以拿到DOM元素
var $img = $("img");
console.log($img);
// 2.通过原生的jQuery入口函数不可以拿到DOM元素的宽高
var $width = $img.width();
console.log("jQuery", $width);
});
</script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB199nuX9slXu8jSZFuXXXg7FXa-160-280.jpg_400x400q90.jpg_.webp" alt="">
</body>
</html>
- 原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕,并且图片也加载完毕后才会执行。
- jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行。
// 原生的JS如果编写了多个入口函数,后写的会覆盖先写的
window.onload = function() {
alert("Aniu1");
}
window.onload = function() {
alert("Aniu2");
}
// jQuery中编写多个入口函数,后面的不会覆盖前面的
$(document).ready(function() {
alert("aniu1");
});
$(document).ready(function() {
alert("Aniu2");
});
- 原生的JS如果编写了多个入口函数,后写的会覆盖先写的;jQuery中编写多个入口函数,后面的不会覆盖前面的。
这就是原生JS与jQuery入口函数的两个不同点。
jQuery入口函数的其他写法
-
$(document).ready(function(){ });
-
jQuery(document).ready(function(){ });
-
$(function(){ });
-
jQuery(function(){ });
在企业开发中推荐使用第三种。
jQuery的冲突问题
当我们另一个框架也是用到$
符号的时候
并且,框架的引入在jQuery之后
那我们就不能使用$
了,这时候遇到冲突问题。
-
解决方法有两个:
-
//释放$使用权 jQuery.noconflict(); jQuery(function(){ }); //注意:释放操作必须在编写其他jQuery代码之前编写,释放之后就不能再使用$,改为使用jQuery
-
//自定义一个访问符号 var aniu = jQuery.noConflict(); jQuery(function() { alert("aniu!"); });
-
jQuery核心函数
$();
就代表调用jQuery的核心函数。
- 接收一个函数
$(function() {
alert("aniu!");
});
-
接收一个字符串
- 接收一个字符串选择器,返回一个jQuery对象,对象中保存了创建的DOM元素。
var $box1 = $(".box1"); var $box2 = $("#box2"); console.log($box1); console.log($box2);
- 接收一个代码片段,会被包装成一个jQuery对象返回给我们。
var $p = $("<p>我是一个段落</p>"); console.log($p); $box1.append($p);
-
接收一个DOM元素,会被包装成一个jQuery对象返回给我们。
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
- jQuery对象是一个伪数组:有0到length-1个的属性,并且有length属性。
静态方法
遍历循环each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态方法调用</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 原生数组
/*
注意: 第一个参数:遍历到的元素
第二个参数:当前遍历到的索引
不能遍历伪数组
*/
var arr = [1, 3, 5, 7, 9];
var obj = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
arr.forEach(function(value, index) {
console.log(index, value);
});
// obj.forEach(function(value, index) {
// console.log(index, value);
// });//报错
// jQuery的each静态方法遍历数组
/*
注意: 第一个参数:要遍历的数组
第二个参数:每遍历一个元素之后执行的回调函数
回调函数:
第一个参数:遍历到的索引
第二个参数:遍历到的元素
jQuery的each方法可以遍历伪数组
*/
$.each(arr, function(index, value) {
console.log(index, value);
});
$.each(obj, function(index, value) {
console.log(index, value);
});
</script>
<body>
</body>
</html>
注意:
- JS原生的静态方法forEach的第一个参数为value,第二个参数为index,不能遍历伪数组。
- jQuery的静态方法each回调函数中第一个参数为index,第二个参数为value,可以遍历伪数组。
遍历数组map静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态方法调用</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 原生JS的map静态方法
/*
注意: 第一个参数:遍历到的当前元素
第二个参数:遍历到的索引
第三个参数:当前遍历的数组
不能遍历伪数组
*/
var arr = [1, 3, 5, 7, 9];
var obj = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
arr.map(function(value, index, array) {
console.log(index, value, array);
});
// obj.map(function(value, index, array) {
// console.log(index, value, array);
// });//报错
/*
注意: jQuery中的map静态方法
第一个参数:需要遍历的数组
第二个参数:执行的回调函数
回调函数中:
第一个参数:遍历到的元素
第二个参数:遍历到的索引
jQuery的map静态方法可以遍历伪数组
*/
$.map(arr, function(value, index) {
console.log(index, value);
});
$.map(obj, function(value, index) {
console.log(index, value);
});
// jQuery的map静态方法与each静态方法的区别
res = $.map(obj, function(value, index) {
console.log(index, value);
});
res2 = $.each(obj, function(index, value) {
console.log(index, value);
});
console.log(res); //[]空数组
console.log(res2); //{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}返回了遍历的伪数组
res3 = res = $.map(obj, function(value, index) {
console.log(index, value);
return value + index;
});
console.log(res3);//[1, 4, 7, 10, 13]
</script>
<body>
</body>
</html>
注意:
- 原生JS中的map静态方法传递三个参数,第一个参数value,第二个参数index,第三个参数array,不能遍历伪数组。
- jQuery中的map静态方法回调函数中传递两个参数,第一个参数value,第二个参数index,可以遍历伪数组。
- jQuery中的map静态方法与each静态方法的区别:
- each静态方法默认返回值就是,遍历谁就返回谁。
- map静态方法默认的返回值是一个空数组。
- each静态方法不支持在回调函数中对遍历的数组进行处理。
- map静态方法可以在回调函数中通过return对遍历的数组进行处理。
其他静态方法
$.trim();
该方法可以将字符串两端的空格去除,并返回一个新的字符串。
var str = " aniu ";
console.log("---" + str + "---");//--- aniu ---
res = $.trim(str);
console.log("---" + res + "---");//---aniu---
$.isWindow();
该方法可以判断一个是否为window,是则返回true,不是则返回false。
<script>
var arr = [1, 3, 5, 7, 9];
var arrlike = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
var obj = {
name: "aniu",
age: 18
}
var fn = function() {}
var w = window;
console.log($.isWindow(arr));//false
console.log($.isWindow(arrlike));//false
console.log($.isWindow(obj));//false
console.log($.isWindow(fn));//false
console.log($.isWindow(w));//true
</script>
$.isFunction();
该方法可以判断是否为函数,是则返回true,不是则返回false,注意jQuery为一个立即执行函数。
<script>
var arr = [1, 3, 5, 7, 9];
var arrlike = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
var obj = {
name: "aniu",
age: 18
}
var fn = function() {}
var w = window;
console.log($.isFunction(arr));//false
console.log($.isFunction(arrlike));//false
console.log($.isFunction(obj));//false
console.log($.isFunction(fn));//true
console.log($.isFunction(w));//falue
console.log($.isFunction(jQuery));//true
</script>
$.isArray();
该方法可以判断是不是真数组,是则返回true,不是则返回false。
<script>
var arr = [1, 3, 5, 7, 9];
var arrlike = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
length: 5
};
var obj = {
name: "aniu",
age: 18
}
var fn = function() {}
var w = window;
console.log($.isArray(arr));//true
console.log($.isArray(arrlike));//false
console.log($.isArray(obj));//false
console.log($.isArray(fn));//false
console.log($.isArray(w));//false
</script>
$.holdReady()方法
在企业开发中我们在调用jQuery的入口函数前,可能需要引入其他框架,而正常情况下,在页面加载完DOM元素后就会执行jQuery的入口函数了。所以我们可以使用$.holdReady();
方法来暂停入口函数的执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态方法调用</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script>
$.holdReady(true);
$(document).ready(function() {
alert("执行入口函数");
});
</script>
<body>
<button>恢复按钮</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
alert("OK");
$.holdReady(false);
}
</script>
</body>
</html>
这样我们的窗口就不会立即弹出”执行入口函数“,而是点击了按钮后弹出”OK“,再弹出”执行入口函数“。
jQuery内容选择器
:empty
作用:找到既没有文本内容,也没有子元素的指定元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容选择器</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin-top: 5px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// :empty
var $div = $("div:empty");
console.log($div);
});
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div>
<p></p>
</div>
</body>
</html>
:parent
作用:找到含有文本内容或者含有子元素的指定元素。
<script>
$(function() {
// :parent
var $div = $("div:parent");
console.log($div);//找到后面四个
});
</script>
:contains(text)
作用:找到含有指定文本内容的指定元素。
<script>
$(function() {
// :contains(text)
var $div = $("div:contains('我是div')");
console.log($div);//找到第二、三个
});
</script>
:has(selector)
作用:找到有指定子元素的指定元素。
<script>
$(function() {
// :has(selector)
var $div = $("div:has(span)");
console.log($div);//找到第四个
});
</script>