前端-jQuery
概念
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,jQuery还提供了大量的插件。目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
安装
jQuery的版本:
jQuery版本有很多,分为1.x 2.x 3.x
1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
国内多数网站还在使用1.x的版本
jQuery的下载
jQuery有两个版本:生成环境使用的和开发测试环境使用的。
Production version - 用于实际的网站中,已被精简和压缩。
Development version - 用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以从 jquery.com 中下载。
jQuery的使用
jQuery 库是一个 JavaScript 文件,我们可以直接在 HTML页面中通过script 标签引用它,跟引用自己的 外部JavaScript脚本文件一样的语法。
<head> <script src="jquery-1.11.1.js">script> head>
jQuery语法结构
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作(actions)。
基础语法: $(selector).action()
说明: 美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件
文档就绪事件,实际就是文件加载事件。
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法1: $(document).ready(function(){ // 开始写 jQuery 代码... }); 写法2:简介写法-推荐 $(function(){ // 开始写 jQuery 代码... });
jQuery的ready方法与JavaScript中的onload相似,但是也有区别:
window.onload | $(document).ready() | |
执 行 次 数 | 只能执行一次,如果执行第二次,第一次的 执行会被覆盖 | 可用执行多次,不会覆盖之前的执行 |
执 行 时 机 | 必须等待网页全部加载挖完毕(包括图片 等),然后再执行包裹的代码 | 只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码 |
简 写 方 式 | 无 | $(function(){ }); |
jQuery选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
它基于已经 存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
jQuery常用函数
与标签内容相关函数
与标签属性相关函数
与标签样式相关函数
jQuery中的事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常用DOM事件列表
鼠标事件 | 键盘事件 | 表单事件 | 件 文档/窗口事件 |
click | keydown | submit | load |
dblclick | keyup | change | |
mouseover | focus | ||
mouseout | blur | ||
hover |
常用的 jQuery 事件方法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
jQuery操作DOM
元素的增加
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
元素的克隆
clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本
语法:$(selector).clone(includeEvents);
参数:可选。布尔值。规定是否复制元素的所有事件处理。默认地,副本中不包含事件处理器。
元素的替换
- replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
- replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
元素的删除
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
jQuery效果
隐藏和显示
语法:
-
- $(selector).hide([speed,callback]);
- $(selector).show([speed,callback]);
- $(selector).toggle([speed,callback]);
参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
淡入和淡出
语法:
-
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
原文:https://www.cnblogs.com/yi-ji/p/14752225.html