455 lines
9.2 KiB
Markdown
455 lines
9.2 KiB
Markdown
---
|
||
title: jQuery
|
||
categories:
|
||
- Front-End
|
||
status: done
|
||
---
|
||
|
||
# 基础
|
||
|
||
在 `window` 对象中挂载了 `$`和`jQuery`
|
||
|
||
```js
|
||
window.jQuery();
|
||
window.$ = window.jQuery;
|
||
```
|
||
|
||
# 模块化
|
||
|
||
## 原始写法
|
||
|
||
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
|
||
|
||
> 缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
|
||
|
||
```js
|
||
function m1() {
|
||
//...
|
||
}
|
||
|
||
function m2() {
|
||
//...
|
||
}
|
||
```
|
||
|
||
## 对象写法
|
||
|
||
把模块写成一个对象
|
||
|
||
> 写法会暴露所有模块成员，内部状态可以被外部改写。
|
||
|
||
```js
|
||
var module1 = new Object({
|
||
_count: 0,
|
||
|
||
m1: function () {
|
||
//...
|
||
},
|
||
|
||
m2: function () {
|
||
//...
|
||
},
|
||
});
|
||
|
||
// 使用
|
||
module1.m1();
|
||
```
|
||
|
||
## IIFE 立即执行函数写法[推荐]
|
||
|
||
> 外部代码无法读取内部的成员变量
|
||
|
||
```js
|
||
var module1 = (function () {
|
||
var _count = 0;
|
||
|
||
var m1 = function () {
|
||
//...
|
||
};
|
||
|
||
var m2 = function () {
|
||
//...
|
||
};
|
||
|
||
return {
|
||
m1: m1,
|
||
m2: m2,
|
||
};
|
||
})();
|
||
|
||
console.info(module1._count); //undefined
|
||
```
|
||
|
||
## (宽)放大模式
|
||
|
||
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"
|
||
|
||
```js
|
||
var module1 = (function (mod) {
|
||
mod.m3 = function () {
|
||
//...
|
||
};
|
||
return mod;
|
||
})(module1);
|
||
```
|
||
|
||
mod 可能存在异步，不知道内部哪个部分会先加载，如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
|
||
|
||
```js
|
||
var module1 = (function (mod) {
|
||
//...
|
||
return mod;
|
||
})(window.module1 || {});
|
||
```
|
||
|
||
## 输入全局变量[推荐]
|
||
|
||
为了在模块内部调用全局变量，必须显式地将其他变量输入模块
|
||
|
||
```js
|
||
var module1 = (function ($, YAHOO) {
|
||
//...
|
||
})(jQuery, YAHOO);
|
||
```
|
||
|
||
# 链式操作
|
||
|
||
```js
|
||
$('div').find('#child').addClass('red')
|
||
// end() 函数返回上一级
|
||
$('div').find('#child').addClass('red').end().addClass（'yellow'）
|
||
```
|
||
|
||
# 选择器
|
||
|
||
## 筛选器
|
||
|
||
```js
|
||
// $('li').first()
|
||
$("li:first"); //第一个元素
|
||
// $('li').last()
|
||
$("li:last"); //最后一个元素
|
||
$("tr:even"); //索引为偶数的元素，从 0 开始
|
||
$("tr:odd"); //索引为奇数的元素，从 0 开始
|
||
// $("tr").eq(1)
|
||
$("tr:eq(1)"); //给定索引值的元素
|
||
$("tr:gt(0)"); //大于给定索引值的元素
|
||
$("tr:lt(2)"); //小于给定索引值的元素
|
||
$(":focus"); //当前获取焦点的元素
|
||
$(":animated"); //正在执行动画效果的元素
|
||
```
|
||
|
||
## 内容选择器
|
||
|
||
```js
|
||
$("div:contains('nick')"); //包含nick文本的元素
|
||
|
||
$("td:empty"); //不包含子元素或者文本的空元素
|
||
|
||
$("div:has(p)"); //含有选择器所匹配的元素
|
||
|
||
$("td:parent"); //含有子元素或者文本的元素
|
||
```
|
||
|
||
## 表单选择器
|
||
|
||
```js
|
||
$(":input"); //匹配所有 input, textarea, select 和 button 元素
|
||
|
||
$(":text"); //所有的单行文本框
|
||
|
||
$(":password"); //所有密码框
|
||
|
||
$(":radio"); //所有单选按钮
|
||
|
||
$(":checkbox"); //所有复选框
|
||
|
||
$(":submit"); //所有提交按钮
|
||
|
||
$(":reset"); //所有重置按钮
|
||
|
||
$(":button"); //所有button按钮
|
||
|
||
$(":file"); //所有文件域
|
||
|
||
$("input:radio[name=sex]:checked"); //所有name 尾input选中的元素
|
||
|
||
$("select option:selected"); //select中所有选中的option元素
|
||
```
|
||
|
||
## 查找
|
||
|
||
```js
|
||
$("#xxx"); //返回 一个 jquery 对象
|
||
|
||
$("#xxx").find(".xxx"); //查找#xxx里的.xxx元素
|
||
|
||
$("#xxx").parent(); //获取父类
|
||
|
||
$("#xxx").parents("xxx"); //获取xxx祖先
|
||
|
||
$("#xxx").children(); //获取子类
|
||
|
||
$("#xxx").siblings(); //获取同一父类的其他元素
|
||
|
||
$("#xxx").next(); //获取下一个元素
|
||
|
||
$("#xxx").prev(); //获取上一个元素
|
||
```
|
||
|
||
## 属性操作
|
||
|
||
```js
|
||
$("img").attr("src"); //返回文档中所有图像的src属性值
|
||
|
||
$("img").attr("src", "test.jpg"); //设置所有图像的src属性
|
||
|
||
$("img").removeAttr("src"); //将文档中图像的src属性删除
|
||
|
||
$("input[type='checkbox']").prop("checked", true); //选中复选框
|
||
|
||
$("input[type='checkbox']").prop("checked", false);
|
||
|
||
$("img").removeProp("src"); //删除img的src属性
|
||
```
|
||
|
||
## css 操作
|
||
|
||
```js
|
||
$("p").addClass("selected"); //为p元素加上 'selected' 类
|
||
|
||
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
|
||
|
||
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
|
||
|
||
$("p").css("color"); //访问查看p元素的color属性
|
||
|
||
$("p").css("color", "red"); //设置p元素的color属性为red
|
||
|
||
$("p").css({ color: "red", background: "yellow" }); // 设置多个属性
|
||
```
|
||
|
||
## 文档处理
|
||
|
||
内部插入
|
||
|
||
```js
|
||
$("p").append("<b>nick</b>"); //每个p元素内后面追加内容
|
||
|
||
$("p").appendTo("div"); //p元素追加到div内后
|
||
|
||
$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容
|
||
|
||
$("p").prependTo("div"); //p元素追加到div内前
|
||
```
|
||
|
||
外部插入
|
||
|
||
```js
|
||
$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
|
||
|
||
$("p").before("<b>nick</b>"); //在每个p元素同级之前插入内容
|
||
|
||
$("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面
|
||
|
||
$("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
|
||
```
|
||
|
||
## 复制
|
||
|
||
```js
|
||
$("p").clone(); //克隆元素并选中克隆的副本
|
||
|
||
$("p").clone(true); //布尔值指事件处理函数是否会被复制
|
||
```
|
||
|
||
# attr 和 prop 区别
|
||
|
||
prop 和 attr 均可获取属性值，但 prop 获取的是 `DOM 对象内置属性`。
|
||
|
||
> !! 例如 input，radio，slect 元素，请使用 prop 获取
|
||
|
||
```html
|
||
<img src="https://www.runoob.com/images/pulpit.jpg" />
|
||
<p tinyval="12"></p>
|
||
```
|
||
|
||
```js
|
||
// 因为页面源代码中没有设置 width 属性
|
||
$("img").attr("width"); // undefined
|
||
$("img").prop("width"); // 284
|
||
|
||
// 由于 tinyval 并非 HTML 标准属性
|
||
$("p").prop("tinyval"); // undefined
|
||
$("p").attr("tinyval"); // 12
|
||
```
|
||
|
||
# 事件
|
||
|
||
## 事件委托
|
||
|
||
- 可极大减少事件绑定次数，提高性能
|
||
- 可让动态加入的子元素绑定相同的命令
|
||
|
||
```js
|
||
function handleClick(event) {
|
||
// this 表示当前单击的元素
|
||
alert($(this).html());
|
||
}
|
||
// 把子级li元素的单击事件委托在父级ul身上
|
||
$("ul").delegate("li", "click", handleClick);
|
||
```
|
||
|
||
## 单事件单元素
|
||
|
||
```js
|
||
function handleClick() {}
|
||
$xxx.on("click", handleClick);
|
||
```
|
||
|
||
## 单事件多元素
|
||
|
||
```js
|
||
function handleClick() {}
|
||
$xxx.on("click", "#aaa, .bbb", handleClick);
|
||
```
|
||
|
||
## 多事件多元素
|
||
|
||
```js
|
||
function handleClick() {}
|
||
function handleMounseEnter() {}
|
||
$xxx.on(
|
||
{
|
||
click: handleClick,
|
||
mounseenter: handleMounseEnter,
|
||
},
|
||
"#aaa, .bbb"
|
||
);
|
||
```
|
||
|
||
## 一夜情事件
|
||
|
||
```js
|
||
function handleClick() {}
|
||
$xxx.one("click", handleClick);
|
||
```
|
||
|
||
# 对象操作
|
||
|
||
```js
|
||
$.trim(); //去除字符串两端的空格
|
||
|
||
$.each(); //遍历一个数组或对象，for循环
|
||
|
||
$.inArray(); //返回一个值在数组中的索引位置，不存在返回-1
|
||
|
||
$.grep(); //返回数组中符合某种标准的元素
|
||
|
||
$.extend(true, {}, a, b); // 深浅拷贝合并 a、b 到 {} 上
|
||
|
||
$.makeArray(); //将对象转化为数组
|
||
|
||
$.type(); //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
|
||
|
||
$.isArray(); //判断某个参数是否为数组
|
||
|
||
$.isEmptyObject(); //判断某个对象是否为空(不含有任何属性)
|
||
|
||
$.isFunction(); //判断某个参数是否为函数
|
||
|
||
$.isPlainObject(); //判断某个参数是否为用"{}"或"new Object"建立的对象
|
||
|
||
$.support(); //判断浏览器是否支持某个特性
|
||
```
|
||
|
||
# 禁止右键功能菜单
|
||
|
||
```js
|
||
$(window).on({
|
||
contextmenu: function () {
|
||
return false;
|
||
},
|
||
keydown: function (e) {
|
||
if (e.ctrlKey || (e.metaKey && (e.keyCode === 67 || e.keyCode === 8)))
|
||
return false;
|
||
},
|
||
});
|
||
```
|
||
|
||
# 自动修改破损图像
|
||
|
||
```js
|
||
$("img").on("error", function () {
|
||
$(this).prop("src", "img/broken.png");
|
||
});
|
||
```
|
||
|
||
# 模块化 jquery 最佳实践
|
||
|
||
```js
|
||
// xx 视图模块 #xx
|
||
(function ($, $view) {
|
||
console.log($ + "has been imported");
|
||
|
||
// 缓存 dom需要用到的 dom，提高性能
|
||
var $partA = $view.find(".partA"),
|
||
$partB = $view.find(".partB");
|
||
|
||
// 链式表结构，事件委托
|
||
$view
|
||
.on("focus", "#btnFocusPartA", handleBtnFocusPartA)
|
||
.on("click", ".btnClickPartB", handleBtnClickPartB);
|
||
|
||
// 方法，建议函数式
|
||
function handleBtnFocusPartA() {
|
||
console.log($partA + "handler");
|
||
}
|
||
|
||
function handleBtnClickPartB(e) {
|
||
console.log($partB + "handler", "，click 的 e.target" + e.target);
|
||
}
|
||
})(jQuery || window.jQuery || window.$, $("#viewModule"));
|
||
```
|
||
|
||
更骚的`路由表`的写法，搭配模块化开发更优雅，更方便管理
|
||
|
||
```js
|
||
// xx 视图模块 #xx
|
||
(function ($, $view) {
|
||
console.log($ + "has been imported");
|
||
|
||
// 缓存 dom需要用到的 dom，提高性能
|
||
var $partA = $view.find(".partA"),
|
||
$partB = $view.find(".partB");
|
||
|
||
// $view 视图的事件委托表
|
||
var eventTable = [
|
||
{
|
||
name: "focus",
|
||
elem: "#btnFocusPartA",
|
||
handler: handleBtnFocusPartA,
|
||
},
|
||
{
|
||
name: "click",
|
||
elem: ".btnClickPartB",
|
||
handler: handleBtnClickPartB,
|
||
},
|
||
];
|
||
|
||
// 注册事件
|
||
eventTable.forEach(function (item) {
|
||
$view.on(item.name, item.elem, item.handler);
|
||
});
|
||
|
||
// 方法，建议函数式
|
||
function handleBtnFocusPartA() {
|
||
console.log($partA + "handler");
|
||
}
|
||
|
||
function handleBtnClickPartB(e) {
|
||
console.log($partB + "handler", "，click 的 e.target" + e.target);
|
||
}
|
||
})(jQuery || window.jQuery || window.$, $("#viewModule"));
|
||
```
|