jquery

最新推荐文章于 2022-11-16 10:54:32 发布

TaoYeeeee

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量109

点赞数

分类专栏：回顾前端文章标签： jquery

原文链接：https://www.antmoe.com/posts/45fed360/index.html

版权

回顾前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 的使用

下载 jQuery 或者使用 cdn
引入 jQuery 的文件
编写代码

<!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>
        $(document).ready(function () {
            alert('hello ty')
        })
    </script>
</head>

<body>

</body>

</html>

jQuery 和 JS 的加载模式

通过原生 JS 和 jQuery 都可以拿到 DOM 元素，及图片的宽高

window.onload = function () {
    // 1. 通过原生的js入口函数可以拿到DOM元素
    var img = document.getElementsByTagName('img')[0]
    console.log(img)
    // 2. 通过原生的JS入口函数可以拿到DOM元素的宽高
    var width = window.getComputedStyle(img).width
    console.log('onload: ', width)
}
$(document).ready(function () {
    // 1. 通过JQuery入口函数可以拿到DOM元素
    var $img = $('img')
    console.log($img)
    // 2. 通过JQuery入口函数可以拿到DOM元素的宽高
    var $width = $img.width()
    console.log('ready: ', $width)
})

原生的 JS 如果编写了多个入口函数，后面编写的会覆盖原来的。而 jQuery 不会覆盖

window.onload = function () {
    alert('hello ty')
}
window.onload = function () {
    alert('hello ty2')
}

只会弹出 hello ty2

$(document).ready(function () {
    alert('hello ty1')
});
$(document).ready(function () {
    alert('hello ty2')
});

hello ty1 与 hello ty2 都会弹出。

jQuery 入口函数的其他写法

// 1. 第一种写法
$(document).ready(function () {
    alert('hello ty')
});
// 第二种写法
jQuery(document).ready(function () {
    alert('hello ty')
});
// 第三种写法(推荐)
$(function () {
    alert('hello ty')
})
// 第四种写法
jQuery(function () {
    alert('hello ty')
})

jQuery 的冲突问题

释放 $ 符号
```
jQuery.noConflict()
jQuery(function () {
    alert('hello ty')
})
```
- 释放操作必须在编写其他 JQuery 代码之前编写
- 释放之后就不能在使用 $, 改为使用 jQuery

自定义访问符号

var nj = jQuery.noConflict()
nj(function () {
    alert('hello ty')
})

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. 定义一个类
function AClass() {

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

实例方法通过对象调用

// 定义一个类
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)
})

历伪数组

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)
})

TaoYeeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery

jQuery 的使用下载 jQuery 或者使用 cdn引入 jQuery 的文件编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
复制链接

扫一扫