前端-jQuery

标签：type   com   ===   ons   查询   下载   var   isp   选择   

概念

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相似，但是也有区别：

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

它基于已经 存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

jQuery常用函数

与标签内容相关函数

与标签属性相关函数

与标签样式相关函数

jQuery中的事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常用DOM事件列表

常用的 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 参数是隐藏或显示完成后所执行的函数名称。

前端-jQuery

标签：type   com   ===   ons   查询   下载   var   isp   选择   

原文地址：https://www.cnblogs.com/yi-ji/p/14752225.html