专栏首页小康的自留地二、jQuery核心函数和工具方法

二、jQuery核心函数和工具方法

jQuery核心函数

jQuery的核心函数就是$();,圆括号内可以传递函数、字符串选择器、字符串代码片段、DOM元素等。

  • 传递函数
$(function () {
    alert(1)
})
  • 字符串选择器返回一个jQuery对象,对象中保存了找到的DOM元素
$(function () {
    var $box1 = $(".box1")
    var $box2 = $("#box2")
    console.log($box1)
    console.log($box2)
})

  • 字符串代码片段返回一个jQuery对象,对象中保存了创建的DOM元素
$(function () {
    var $p = $('<p>我是段落</p>')
    console.log($p)
})

  • 接收一个DOM元素DOM元素会被包装成一个jQuery对象返回。
$(function () {
    var span = document.getElementsByTagName('span')[0]
    console.log(span)
    var $span = $(span)
    console.log($span)
})

jQuery对象

jQuery对象是一个伪数组对象(有0到length-1的属性,并且有length属性)

$(function () {
    var $div = $('div')
    console.log($div)
})

静态方法与实例方法

  1. 静态方法通过类名调用
// 1. 定义一个类
function AClass() {

}
// 2. 给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
    alert('staticMethod')
}
// 静态方法通过类名调用
AClass.staticMethod();

  1. 实例方法通过对象调用
// 定义一个类
function AClass() {

}
// 给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
    alert('instanceMethod')
}

// 创建一个实例(创建一个对象)
var a = new AClass()
// 实例方法通过类的实例调用
a.instanceMethod()

each方法

原生forEach方法可以遍历数组,但不可以遍历伪数组。

var arr = [1, 3, 5, 7, 9]
/*
        原生遍历:
        第一个参数:遍历到的元素
        第二个参数,遍历到的索引
        注意:原生forEach只能遍历数组,不能遍历伪数组
        */
arr.forEach(function (value, index) {
    console.log(index, value)
})

// 伪数组测试
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }
obj.forEach(function (value, index) {
    console.log(index, value)
})

jQuery的each方法既可以遍历数组,又可以遍历伪数组

var arr = [1, 3, 5, 7, 9]
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }       
$.each(arr, function (index, value) {
    console.log(index, value)
})
$.each(obj, function (index, value) {
    console.log(index, value)
})

map方法

原生map方法可以遍历数组,但不可以遍历伪数组。

var arr = [1, 3, 5, 7, 9]
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }
// 1. 利用原生的JS的map方法遍历
/*
        第一个参数:当前遍历到的元素
        第二个参数:当前遍历到的索引
        第三个参数:当前被遍历的数组
        注意点:
        不能遍历伪数组
        */
arr.map(function (value, index, arr) {
    console.log(value, index, arr)
})
obj.map(function (value, index, arr) {
    console.log(value, index, arr)
})

jQuery的map方法既可以遍历数组,又可以遍历伪数组

var arr = [1, 3, 5, 7, 9]
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }     
$.map(arr, function (value, index) {
    console.log(value, index)
})
$.map(obj, function (value, index) {
    console.log(value, index)
})

jQuery中的each静态方法和map静态方法的区别

  1. each静态方法默认的返回值就是遍历谁就返回谁,而map静态方法默认的返回值就是一个空数组
  1. each静态方法不支持在回调函数中对遍历的数组进行处理,map静态方法可以在回调函数中通过return对遍历的数组进行处理

去掉字符串首尾空格

$.trim(str),该方法返回一个新的字符串。

var str = '    tzk    '
var $res = $.trim(str)
console.log('---' + str + '---') // ---    tzk    ---
console.log('---' + $res + '---') // ---tzk---

判断传入的对象是否是window对象

$.isWindow(obj),该方法返回一个布尔值。如果传入对象是window则返回true,否则返回false。

var w = window
var res = $.isWindow(w);
console.log(res) //true

判断是否为数组

$.isArray(arr),该方法返回一个布尔值,只有数组才会返回true,其他类型均返回false(包括伪数组)。

判断是否为函数

$.isFunction(fn),该方法返回一个布尔值。只有是一个函数时,才会返回true。

var res = $.isFunction(fn)

jQuery的本质上就是一个函数。

暂停ready的执行

默认情况下当页面加载完毕,JQuery的ready入口函数将会自动执行。.holdReady(true)可以暂停入口函数的执行,而.holdReady(false)可以恢复执行。

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 06JavaScript作用域与对象

    即使我们在定义这个函数之前调用它,函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。

    Dreamy.TZK
  • 05JavaScript函数

    利用JavaScript第二个特性(少传入不报错),我们可以在一个函数中实现多个不同的功能。

    Dreamy.TZK
  • 原生JS实现一个Ajax跨域请求

    Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jes...

    Dreamy.TZK
  • 深入理解JavaScript系列(46):代码复用模式(推荐篇)

    同时,ECMAScript5也提供了类似的一个方法叫做Object.create用于继承对象,用法如下:

    用户4962466
  • nodejs记录1——async函数

    其实手动配置babel环境并不难,记录下步骤: 1、首先npm init创建一个nodejs项目 2、全局安装babel-cli处理工具:npm i babel...

    用户1141560
  • mui 百度语音识别转换文字

      用mui混合开发的APP,现有一个功能需求就是语音转换成文字,并把语音进行保存。对此考虑两种选择讯飞和百度。最终选择了百度语音。

    kmonkey
  • 解决getUserMedia is not implemented in this browser报错

    使用新版chrome/edge浏览器,在确定浏览器支持的情况下,调用navigator.mediaDevices.getUserMedia仍然提示浏览器不支持:

    TLingC
  • Openlayers4中风场的实现

    [lat, lon, wd, ws],其中:lat为纬度;lon为经度;wd为风向;ws为风速。

    lzugis
  • 基于sshd建立k8s临时混合云解决方案

    使用新版chrome/edge浏览器,在确定浏览器支持的情况下,调用navigator.mediaDevices.getUserMedia仍然提示浏览器不支持:

    机械视角
  • JavaScript面试题补充(1---5)

    在IT界中,JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水。但在你被一家公司聘用之前,你...

    用户1272076

扫码关注云+社区

领取腾讯云代金券