jQuery笔记一——静态方法与内容选择器
现在来学习jQuery
文章目录
- 使用jQuery
- 入口函数
- jQuery与JS入口函数的区别
- jQuery入口函数的其他写法
- jQuery的冲突问题
- jQuery核心函数
- 静态方法
- 遍历循环each
- 遍历数组map静态方法
- 其他静态方法
- $.holdReady()方法
- 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入口函数的区别
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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之后![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3sOe40hb-1595058794655)(/Users/mac/Desktop/MarkDown /jQuery/笔记1/9.jpg)]](http://img.e-com-net.com/image/info8/04da3d23a84e482bbe6358e4ef5a0d3a.jpg)
那我们就不能使用$了，这时候遇到冲突问题。
-
解决方法有两个：
-
//释放$使用权 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 = $("我是一个段落
"); console.log($p); $box1.append($p);
-
接收一个DOM元素,会被包装成一个jQuery对象返回给我们。
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjgquZl3-1595058794660)(/Users/mac/Desktop/MarkDown /jQuery/笔记1/12.jpg)]](http://img.e-com-net.com/image/info8/dfc840ea27d04130b9543e4e72cee142.jpg)
- jQuery对象是一个伪数组：有0到length-1个的属性，并且有length属性。
静态方法
遍历循环each
<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静态方法
<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();方法来暂停入口函数的执行。
<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作用：找到既没有文本内容，也没有子元素的指定元素。
<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>我是divdiv>
<div>他们我是div123div>
<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>