JQuery基础

概念·简介

JQuery实质上是一个JavaScript库，它极大的简化了JavaScript的编程，是一个JavaScript文件，后缀名为“.js”。

JQuery官网上提供了有两种JQuery文件可供下载，一种是压缩版的，另一种是未被压缩的。两者的区别就是：前者未排版，无注释，文件容量小；后者是经过排版的，有注释，容量大。两者皆可使用，看个人喜好需求下载。

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

标注： 除此之外，Jquery还提供了大量的插件。

安装

在网页中引入JQuery安装有两种方式：①从JQuery官网下载JQuery文件到本地，从本地引入至网页

例如

<script src="js/jquery-3.2.1.min.js"></script>

②从CDN载入JQuery

例如

//新浪CDN：
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
//百度CDN：
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
//谷歌CDN：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
//又拍云CDN：
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">

使用百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

JQuery语法

通过JQuery语法，可以选取HTML元素，对其进行操作。

基础语法：＄(selector).action()

• •  美元符号定义 jQuery
  •  选择符（selector）"查询"和"查找" HTML 元素
  •  jQuery 的 action() 执行对元素的操作

①元素选择：$('元素名')

②ID名选择：$('#id')

③class类名选择：$('.className')

④属性选择：$("元素名[属性]")

⑤当前选择：$(this)  选取当前元素

⑥偶数选择：$("tr:even") 选取偶数位置的tr元素

⑦奇数选择：$("tr:odd")  选取奇数位置的tr元素

文档就绪事件：

在编写JQuery代码前，通常会将JQuery代码放在一个document.ready函数中，即：

$(document).ready(function(){

   // 开始写 jQuery 代码...

 }); 

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

标注：还有一种简介的写法，其功能与上面的相同

$(function(){
//开始写JQuery代码
})

JQuery事件

上面所讲的$(document).ready(function(){})也是一个JQuery事件

JQuery事件是为事件处理特别设计的。JQuery事件类似于原生JavaScript BOM事件，常见的事件有鼠标事件、键盘事件、表单事件、文档窗口事件

①鼠标单击事件：$('selector').click(function(){执行代码})
②鼠标双击事件：$("selector").dblclick(function(){执行代码})

③鼠标移入事件：$("selector").mouseenter(function(){执行代码})

④鼠标移出事件：$("selector").mouseleave(function(){执行代码})

⑤键盘按下事件：$("selector").keydown()

⑥键盘松开事件：$("selector").keyup()

⑦获得焦点：$("selector").foucs()

⑧失去焦点：$("selector").blur()

········

特别讲解：鼠标悬停事件：$("selector").hover(function(){},function(){}),此方法模拟鼠标悬停事件，里面有两个匿名函数，第一个函数执行鼠标移入事件，第二个函数执行鼠标移出事件