JQuery概述

JQuery

一、概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

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

---

二、JQuery语法结构

2.1、基础语法

	$(selector).cation();
	//说明	：
	//美元符号定义JQuery
	//选择符（selector） 查询 和 查找	HTML元素
	//JQuery的 action() 执行对元素的操作

2.2、文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM进行操作。

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

所以我们尽可能将所有的操作都在文档加载完毕之后实现。

//写法1：
	$(document).ready(function(){
		//开始写JQuery代码
	});


//写法2：
	$(function(){
		//开始写JQuery代码
	});

三、JQuery选择器

• 元素/标签选择器----语法：$(“标签名称”)

• #id选择器----语法：$("#p1")–页面中的元素的id是唯一的

• .class选择器----语法：$(".mydiv")

• 全局选择器----语法：$("*")

• 并集选择器----语法：$(“div,ul,li,.mydiv”)

• 后代选择器----语法：$(“form input”)

• 子选择器----语法：$(“form > input”)

• 相邻选择器----语法：$(“lable + input”)

• 同辈选择器----语法：$(“form ~ input”)

• 属性选择器—语法：$(“input[name=‘name’]”)

• 可见性选择器
  匹配可见元素：$(“div:visible”)

  匹配不可见元素：$(“input:hidden”)

---

四、JQuery中的事件

常用的DOM事件列表

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keydown	submit	load
dbclick	keyup	change
mouseover		focus
mouseout		blur
hover

---

五、JQuery操作DOM

5.1、元素的增加

• append()–在被选元素的结尾插入内容
• prepend()–在被选元素的开头插入内容
• after()–在被选元素之后插入内容
• before()–在被选元素之前插入内容

5.2、元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本

语法：$(selector).clone(includeEvents)；

参数：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

5.3、元素的替换

• replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
• replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。

5.4、元素的删除

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