jQuery 方法整理

时间 2019-11-08

标签 jquery 方法整理栏目 JQuery 繁體版

原文原文链接

jQuery 简介

jQuery 是一个轻量级操做 DOM 的 JS 库，主要包含如下功能：javascript

HTML 元素选取和操做
HTML 事件函数
HTML DOM 遍历和修改
CSS 操做
JavaScript 特效和动画
AJAX
基于 jQuery 的插件

jQuery 的优点在于兼容于全部主流浏览器, 包括 Internet Explorer 6!css

jQuery 语法

$(selector).action()

文档加载就绪事件html

$(document).ready(function() {
  // 代码...
});

// 简写方式
$(function() {
  // 代码...
});

$(document).ready 与 window.onload 的区别java

$(document).ready 和 window.onload 都是在都是在页面加载完执行的函数，大多数状况下差异不大。
$(document).ready:是 DOM 结构绘制完毕后就执行，没必要等到加载完毕。意思就是 DOM 树加载完毕，就执行，没必要等到页面中图片或其余外部文件都加载完毕。而且能够写多个.ready。
window.onload:是页面全部元素都加载完毕，包括图片等全部元素。只能执行一次。

jQuery 选择器

jQuery 选择器基于已经存在的 CSS 选择器jquery

$('*')
$('p')
$('ul li')
$('ul li:last-child')
...

jQuery 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

经常使用的 jQuery 事件方法浏览器

click() 点击事件
dbclick() 双击事件
mouseenter() 鼠标穿过元素事件
mouseleave() 鼠标离开元素事件
mousedown() 鼠标移动到元素上方按下鼠标事件
mouseup() 鼠标按住移动到元素上方松开鼠标事件
hover() 鼠标悬停事件
focus() 表单元素聚焦事件
blur() 表单元素失去焦点事件
submit() 表单提交事件
change() 表单元素值改变事件
keypress() 键盘键按住事件
keydown() 键盘键按下事件
keyup() 键盘键松开事件
load() 指定元素加载完成式执行事件（1.8 版本后废弃）
resize() 窗口大小改变事件
scroll() 滚动监听事件

jQuery 效果

$(selector).action(speed,callback)

变量	说明
selector	选择器
action	事件
speed	速度，毫秒，也能够为‘slow’、‘fast‘
callback	回掉函数

显示隐藏

hide() 隐藏元素
show() 显示元素
toggle() 显示被隐藏的元素，隐藏已显示的元素

淡入淡出

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 已淡出的元素淡入，已淡入的元素淡出
fadeTo() 渐变为给定不透明度app

$(selector).fadeTo(speed,opacity,callback);
opacity 值为 0 与 1 之间

滑动

slideDown() 向下滑动展开元素
slideDown() 向上滑动收起元素
slideToggle() 已展开元素上滑收起，已收起元素下滑展现

动画

$(selector).animate({params},speed,callback);

参数	说明	是否必须
params	定义造成动画的 css 属性	必须
speed	速度，毫秒，也能够为‘slow’、‘fast‘	可选
callback	回掉函数	可选

实例ide

$("button").click(function() {
  $("div").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});

中止动画

$(selector).stop(stopAll, goToEnd);

参数	说明	是否必须
stopAll	是否应该清除动画队列，默认是 false	可选
goToEnd	是否当即完成当前动画	可选

jQuery 链(Chaining)

经过 jQuery，能够把动做/方法连接在一块儿。函数

Chaining 容许咱们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就没必要屡次查找相同的元素。动画

$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

// "p1" 元素首先会变为红色，而后向上滑动，再而后向下滑动

jQuery HTML

jQuery 提供一系列与 DOM 相关的方法，这使访问和操做元素和属性变得很容易。

获取内容和属性

获取内容

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值

获取属性

attr() 设置或者返回所选的属性的值

// 获取属性
$('#test').attr('href'）

// 设置属性
$('#test').attr('href','http://www.baidu.com')

$('#test').attr({
    href: 'http://www.baidu.com',
    title: '百度'
})

// 回掉函数
$('#test').attr('href', function(i, origValue){
    // i 被选元素列表中当前元素的下标
    // origValue 原始值
    return origValue + '/jquery'
  })

添加删除元素

append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素以后插入内容
before() 在被选元素以前插入内容
remove() 删除被选元素（及其子元素）
empty() 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，容许您对被删元素进行过滤。该参数能够是任何 jQuery 选择器的语法。下面的代码表示删除全部 p 元素中类名是 italic 的元素

$('p').remove('.italic')

获取并设置 css 类

addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操做
css() 设置或返回样式属性

// 返回样式属性
$("p").css("background-color");

// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

尺寸方法

width() 元素宽度
height() 元素高度
innerWidth() 包含 padding 宽度
innerHeight() 包含 padding 高度
outerWidth() 包含 padding、border 宽度
outerHeight() 包含 padding、border 高度
outerWidth(true) 包含 padding、border、margin 宽度
outerHeight(true) 包含 padding、border、margin 高度

元素遍历

祖先元素：

parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents() 返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素。

$(document).ready(function() {
  // div > ul > li > span
  $("span").parentsUntil("div");
  // 返回 ul 和 li
});

后代元素：

children() 返回被选元素的全部直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function() {
  $("div").find("span");
});

同胞元素：

siblings() 返回被选元素的全部同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的全部跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的全部跟随的同胞元素。
prev() 返回被选元素的上一个同胞元素。
prevAll() 返回被选元素以前的全部的同胞元素。
prevUntil() 返回介于两个给定参数之间的全部前方的同胞元素。

元素过滤：

first() 返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。
filter() 方法容许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的全部元素。