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