HTML基础

2019独角兽企业重金招聘Python工程师标准>>>

概念·简介

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

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

 

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
标注： 除此之外，Jquery还提供了大量的插件。

安装

从网页中引入JQuery安装有两种方法：

从JQuery官网下载JQuery文件到本地，从本地引入至网页
例如：

<javascript scr="js/jquery-3.2.1.min.js"></javascript>
从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(){}),此方法模拟鼠标悬停事件，里面有两个匿名函数，第一个函数执行鼠标移入事件，第二个函数执行鼠标移出事件
--------------------- 
作者：WinkJie 
来源：优快云 
原文：https://blog.youkuaiyun.com/qq_36662459/article/details/90732416 
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://my.oschina.net/WinkJie/blog/3057153