初识jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
总结来说为下面三点：
- jQuery 是一个 JavaScript
- jQuery 极大地简化了 JavaScript 编程
- jQuery 很容易学习
使用jQuery编写HelloWorld
- 下载jQuery库
- 引入jQuery
<head>
<meta charset="UTF-8">
<title>01-初识jQuery</title>
<script src="js/jquery-1.11.3/jquery.js"></script>
</head>
- 编写helloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-jQuery-HelloWorld</title>
<script src="js/jquery-1.11.3/jquery.js"></script>
<script>
// 原生js的固定写法
window.onload = function(ev) {
};
// jQuery的固定写法
$(document).ready(function () {
alert("Hello World");
});
</script>
</head>
<body>
</body>
</html>
jQuery和js入口函数的区别
<script>
window.onload = function (ev) {
// 通过原生的js入口函数可以拿到Dom元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
// 通过原生的js入口函数可以拿到dom元素的宽高
var width = window.getComputedStyle(img).width;
console.log(width);
};
$(document).ready(function () {
// 通过jQuery入口函数可以拿到Dom元素
var $img = $("img")[0];
console.log($img);
// 通过jQuery入口函数不能拿到dom元素的宽高
var $width = $img.width();
console.log($width);
});
</script>
区别:
- 原生jQuery入口函数的加载模式不同
- 原生js会等到dom加载完毕，并且图片也加载完毕才会执行
- jQuery会等到dom加载完毕，但不会等到图片也加载完毕就会执行
<script>
window.onload = function (ev) {
alert("hello cuzz"); // 不会显示
};
window.onload = function (ev) {
alert("hello cuxx"); // 会显示
};
</script>
<script>
$(document).ready(function () {
alert("hello cuzz"); // 会显示
});
$(document).ready(function () {
alert("hello cuxx"); // 会显示
});
</script>
区别：
- 多个window.onload只会执行一次, 后面的会覆盖前面的
- 多个$(document).ready()会执行多次,后面的不会覆盖前面的
原因：
jQuery框架本质是一个闭包，每次执行我们都会给ready函数传递一个新的函数，不同函数内部的数据不会相互干扰
<script>
// 相当于这样写
var test1 = function () {
alert("hello cuzz");
}
var test2 = function () {
alert("hello cuxx");
}
$(document).ready(test1);
$(document).ready(test2);
</script>
对比：
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 |
| 执行次数 | 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 |
| 简写方案 | 无 | $(function () { }); |
jQuery的四种写法
<script>
// 第一种写法
$(document).ready(function () {
alert("hello cuzz");
});
// 第二种写法
jQuery(document).ready(function () {
alert("hello cuzz");
});
// 第三种写法
$(function () {
alert("hello cuzz");
});
// 第四种写法
jQuery(function () {
alert("hello cuzz");
});
</script>
推荐使用第三种写法
jQuery的核心函数
- jQuery(callback)，当dom加载完成之后执行传入的回调函数
<script>
$(function () {
alert("123");
});
</script>
- jQuery([sel,[context]])，接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象
<script>
$(function () {
// 利用jQuery获取的div,得到的是一个jQuery对象
var $box = $("div");
console.log($box);
// 利用原生js语法获取的div,得到的是一个js对象
var box = document.getElementsByTagName("div");
console.log(box);
});
</script>
- 原生JS对象和jQuery对象相互转换
- jQuery(html, [ownerDoc]) 根据 HTML 标记字符串，动态创建DOM 元素
<script>
$(function () {
var $eles = $("<p>我是span</p><u>我是u</u>");
// 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象
console.log($eles);
// 将创建好的DOM元素添加到body中
$("body").append($eles);
});
</script>
jQuery的本质是一个伪数组，有0到length-1的属性
jQuery静态方法
- 静态方法
<script>
// 定义一个类
function AClass() {
};
// 给这个类添加一个静态方法
AClass.staticMethod = function () {
alert("staticMethod")
};
// 静态方法的调用
AClass.staticMethod();
</script>
- 实例方法
<script>
// 定义一个类
function AClass() {
}
// 给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 实例方法的调用
var a = new AClass();
a.instanceMethod();
</script>
常用静态方法
- $.each(object, [callback])
$(function () {
// 遍历数组
var arr = [1, 3, 5, 7, 9];
// 通过原生方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 返回值: 没有返回值
var res = arr.forEach(function (ele, idx) {
console.log(idx, ele);
});
console.log(res);
// 通过jQuery静态方法遍历数组
// 第一个回调函数参数是当前遍历的索引
// 第二个回调函数参数是遍历到的元素
// 返回值: 被遍历的数组
var $res2 = $.each(arr, function (idx, ele) {
console.log(idx, ele);
});
console.log($res2);
// 遍历对象
var obj = {name: "", age:"33", gender:"male"};
// js对象没有forEach方法,所以通过forin方法遍历对象
for(var key in obj){
console.log(key, obj[key]);
}
// 通过jQuery静态方法遍历对象
$.each(obj,function (key, value) {
console.log(key, value);
});
});
- $.holdReady(hold)，传入true或false来暂停或则恢复ready()事件
- $.trim(str) 去掉字符串起始和结尾的空格
- $.isArray(obj) 判断是否是数组
- $.isFunction(obj)判断是否是函数
- $.isWindow(obj)判断是否是window对象
学习网站
在网上，发现菜鸟教程比较详细，排版也比较好，不再更新jQuery
