jQuery 要领整顿

2024年5月17日 131次阅读 来源: 欧西里斯的天秤

jQuery 简介

jQuery 是一个轻量级操纵 DOM 的 JS 库，重要包含以下功用：

  • HTML 元素拔取和操纵
  • HTML 事宜函数
  • HTML DOM 遍历和修正
  • CSS 操纵
  • JavaScript 殊效和动画
  • AJAX
  • 基于 jQuery 的插件

jQuery 的上风在于兼容于一切主流浏览器, 包含 Internet Explorer 6!

jQuery 语法

$(selector).action()

文档加载停当事宜

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

// 简写体式格局
$(function() {
  // 代码...
});

$(document).ready 与 window.onload 的区分

$(document).ready 和 window.onload 都是在都是在页面加载完实行的函数，大多数情况下差异不大。

$(document).ready:是 DOM 构造绘制终了后就实行，没必要比及加载终了。 意义就是 DOM 树加载终了，就实行，没必要比及页面中图片或其他外部文件都加载终了。而且能够写多个.ready。

window.onload:是页面一切元素都加载终了，包含图片等一切元素。只能实行一次。

jQuery 选择器

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

$(‘*’)

​$(‘p’)

$(‘ul li’)

​$(‘ul li:last-child’)

…

jQuery 事宜

鼠标事宜键盘事宜表单事宜文档/窗口事宜
clickkeypresssubmitload
dbclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
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() 渐变成给定不透明度

    $(selector).fadeTo(speed,opacity,callback);

    opacity 值为 0 与 1 之间

滑动

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

动画

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

参数申明是不是必需
params定义构成动画的 css 属性必需
speed速率，毫秒，也能够为‘slow’、‘fast‘可选
callback回掉函数可选

实例

$("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() 要领返回不婚配规范的一切元素。
    原文作者：欧西里斯的天秤
    原文地址: https://segmentfault.com/a/1190000018582509
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞