肖sir___第二个月JQuery_05

JQuery

 

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

 

2.1 JQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

从 jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery, 如从百度中加载 jQuery

2.1 JQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

从 jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery, 如从百度中加载 jQuery

 

 

3.1 JQuery 语法

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

实例:

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

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

jQuery 入口函数:

$(document).ready(function(){

// 执行代码

});

或者

$(function(){

// 执行代码

});

JavaScript 入口函数:

$(document).ready(function(){

// 执行代码

});

3.3 JQuery 语法

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载

完后，才会执行。

 

 

4.1 JQuery 使用

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

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

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

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

元素选择器

$("p")

#id 选择器

$("#test");

.class 选择器

$(".test")

 

4.2 JQuery 使用

 

 

4.3 JQuery 使用

jQuery 事件

使用实例

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

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

实例

$("p").click(function(){

$(this).hide();

});

 

 

4.4 JQuery 使用

jQuery 更多事件