【jQuery】核心函数和工具方法

最新推荐文章于 2020-07-19 15:38:22 发布

韶音鄀逝

最新推荐文章于 2020-07-19 15:38:22 发布

阅读量189

点赞数

分类专栏： jQuery 文章标签： jquery js

本文链接：https://blog.csdn.net/XHoler/article/details/106795065

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery核心函数和工具方法

核心函数

$()和jQuery() 代表调用jQuery的核心函数

能接收的参数如下:

接收一个函数

$(function(){
	console.log('函数')
})

接受字符串

接收字符串选择器: 返回一个jQuery对象，对象中保存了找到的DOM元素

var $box1 = $('.box1');
var $box2 = $('#box2');

console.log('box1>>>', $box1);
console.log('box2>>>', $box2);

接收代码片段: 返回一个jQuery对象，对象中保存了创建的DOM元素

var $p = $("<p>段落</p>");
var $h1 = $('<h1>标题一</h1>')

console.log('p>>>', $p);

$box1.append($h1);
$box1.append($p);

接收一个DOM元素: 会被包装成一个jQuery对象返回给我们

var span = document.getElementsByTagName('span')[0];
console.log('span>>>', span)

var $span = $(span);
console.log('$span>>>', $span)

jQuery对象

jQuery对象是一个伪数组
伪数组的定义：有0到length-1的属性，且有length属性的对象就是伪数组

jQuery静态方法

静态方法和实例方法

静态方法: 直接添加给类的方法

// 定义一个类
function oneClass(){}

// 静态方法: 直接添加给类的方法
oneClass.staticMethod = function(){
    console.log('This is staticMethod');
}
// 静态方法通过类名调用
oneClass.staticMethod();

实例方法: 添加到类原型上的方法

// 定义一个类
function oneClass(){}

// 实例方法: 添加到类原型上的方法
oneClass.prototype.instanceMethod = function(){
    console.log('This is instanceMethod');
}
var a = new oneClass(); // 创建类的实例（对象）
// 实例方法通过类的实例（对象）调用
a.instanceMethod();

each静态方法

jQuery的each静态方法遍历数组

var arr = [1,2,3,4,5,6]
var obj = {0:2, 1:4, 2:6, 3:8, 4:10, length:5}

/*
	- index: 当前遍历到的索引
	- value: 遍历到的元素
*/
$.each(arr,function(index, value){
    console.log('arrEach:', index, value)
})
$.each(obj, function (index, value) {
    console.log('objEach:', index, value)
})

jQuery的each静态方法能遍历数组，也可以遍历伪数组

原生forEach方法遍历数组

var arr = [1,2,3,4,5,6]
var obj = {0:2, 1:4, 2:6, 3:8, 4:10, length:5}

/*
	- index: 当前遍历到的索引
	- value: 遍历到的元素
*/
arr.forEach(function(value, index){
    console.log('arrForEach:', index, value)
})

// 报错
// obj.forEach(function(value, index){
//     console.log('objForEach:', index, value)
// })

原生的forEach方法只能遍历数组，不能遍历伪数组

map静态方法

jQuery的map静态方法：

var arr = [1, 2, 3, 4, 5, 6]
var obj = { 0: 2, 1: 4, 2: 6, 3: 8, 4: 10, length: 5 }

$.map(arr,function(value, index){
    console.log('mapArr>>>', index, value);
})

$.map(obj, function (value, index) {
    console.log('mapObj>>>', index, value);
})
/*第一个参数: 要遍历的数组
  第二个参数: 每遍历一个元素之后执行的回调函数
  回调函数参数:
    value: 当前遍历元素
    index: 当前遍历到的索引
*/

和jQuery中的Each静态方法一样，map静态方法也可以遍历伪数组
each静态方法和map静态方法的区别:
1. 返回值
  - each静态方法默认返回值是遍历谁就返回谁
  - map静态方法默认的返回值是一个空数组
2. 处理数组
  - each静态方法不支持在回调函数中对遍历的数组进行处理
  - map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回

原生js的map方法:

var arr = [1, 2, 3, 4, 5, 6]
var obj = { 0: 2, 1: 4, 2: 6, 3: 8, 4: 10, length: 5 }

/*
value: 当前遍历元素
index: 当前遍历到的索引
array: 当前被遍历的数组
*/
arr.map(function(value, index, array) {
    console.log('arr>>>', index, value, array);
})

// 报错
// obj.map(function (value, index, array) {
//     console.log(index, value, array)
// })

和原生forEach一样，不能遍历伪数组

holdReady静态方法

作用暂停ready执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>holdReady</title>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        /* 
            $.holdReady()作用: 暂停ready执行
            值为true时暂停，值为false时恢复
        */
        $.holdReady(true);
        $(function(){
            alert('hello')
        })
    </script>
</head>
<body>
    <button>ready事件</button>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function(){
            $.holdReady(false);
        }
    </script>
</body>
</html>

其他函数

$.trim() : 去除字符串两边的空格

// 返回值: 去除空格之后的字符串
var str = '    ssr    ';
console.log('----' + str + '----')
var newStr = $.trim(str);
console.log('----' + newStr + '----')

$.isWindow() : 判断传入对象是不是window对象

// 返回值：true/false
var res = $.isWindow(win)
console.log('isWindow>>>', res)

$.isArray() : 判断传入对象是不是真数组

// 返回值：true/false
var resArr = $.isArray(arr)
console.log('isArray>>>', resArr)

$.isFunction() : 判断传入对象是不是函数

jQuery本质上是一个匿名函数

// 返回值：true/false
var resFun = $.isFunction(jQuery)
console.log('isFunction>>>', resFun)

韶音鄀逝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录