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