学习JQuery——简介

前言

JQuery简介

JQuery语法

JQuery入口函数

[对比JavaScript 入口函数](#对比JavaScript 入口函数)

前言

前言

JQuery简介

JQuery官网

官方描述：

jQuery是一个快速、小巧且功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax等简单易用的应用程序接口可以在多种浏览器上工作。通过多功能性和可扩展性的结合，JQuery改变了数百万人编写JavaScript的方式。

我的理解：

JQuery是一个轻量级的JavaScript函数库。"写更少的代码，做更多的事情"。

JQuery库包含的功能：

HTML元素选取（操作）、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX异步请求方式等。

JQuery语法

JQuery通过选取HTML元素，并对选取的HTML元素进行某些操作。

语法：$(selector ).action()

javascript 复制代码

$(this).hide() //隐藏当前元素

$("p").hide //隐藏所有标签未P的元素

$("p.btn").hide //隐藏所有class = "btn" 的标签是p的元素

$("#btn").hide() //隐藏id="btn"的元素

JQuery入口函数

javascript 复制代码

$(function(){
    //执行代码
    });

javascript 复制代码

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

就是在 DOM 加载完成后才可以对 DOM 进行操作。

对比JavaScript 入口函数

javascript 复制代码

window.onload = function () {
    // 执行代码
}

区别：

|------|-------------------|---------------------------------------|
| | JQuery | JavaScript |
| 执行时机 | jQuery入口函数可以书写多次 | window.onload只能书写一次，如果写多次，后面的会覆盖前面的 |
| 执行次数 | dom结构渲染完毕即可执行内部代码 | 等网页（页面文档、外部的js文件、css文件、图片）加载完毕才执行内部代码 |

JQuery选择器

JQuery允许对HTML元素组或者单个元素进行操作。

基于已经存在的CSS选择器，也可以自定义选择器。

所有的选择器都以$()开头。

元素选择器

jQuery 元素选择器基于元素名选取元素。

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>JQuery元素选择器</title> 
<script src="https://cdn.staticfile.net/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	//$("button")选取button元素
  $("button").click(function(){
	 //$("p")选取p元素
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>JQuery标题</h2>
<p>JQuery段落。</p>
<button>点我JQuery段落隐藏</button>
</body>
</html>

除此之外，JQuery还有#id 选择器、.class 选择器。

JQuery事件

页面对不同访问者的响应叫做事件。

常见 DOM 事件：

鼠标事件

1.click() 方法是当按钮点击事件被触发时会调用一个函数。

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>点击事件</title> 
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

2.dblclick()方法是当双击元素时，会发生 dblclick 事件

3.mouseenter()方法是当鼠标指针穿过元素时，会发生 mouseenter 事件。

4.mouseleave()方法是当鼠标指针离开元素时，会发生 mouseleave 事件。

5.mousedown()方法是当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

6.mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件。

7.hover()方法用于模拟光标悬停事件。

8.focus()当元素获得焦点时，发生 focus 事件。

9.blur()当元素失去焦点时，发生 blur 事件。

键盘事件

keydown- 键按下的过程,keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）
keypress - 键被按下
keyup - 键被松开