jQuery补充
文章目录
- 简介
- 安装
- 语法
- 选择器
-
- 元素选择器
- #id 选择器
- .class 选择器
- 事件
-
- 常用事件方法
- 效果
-
- 显示隐藏
- 淡入淡出
- 滑动
- 动画
- 停止动画
- 获取内容和属性
- 添加元素
- 删除元素
- 操作css
- 父辈
孔子云：温故而知新，可以为师矣
第一次学习的时候云里雾里，通过对前端半年多的学习，再来学习一下jQuery，希望可以有收获，并用在以后的开发中。
简介
什么是jQuery
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
安装
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
案例： - $(this).hide() - 隐藏当前元素
选择器
jQuery 中所有选择器都以美元符号开头：$()
元素选择器
$("p")
#id 选择器
$("#test")
.class 选择器
$(".test")
事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
常用事件方法
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个
元素上触发时，隐藏当前的
元素：
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
效果
显示隐藏
hide() 和 show()
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
淡入淡出
fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。. 可选的 callback 参数是
fading 完成后所执行的函数名称
fadeOut() 淡出可见元素
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称
fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
滑动
slideDown() 向下滑动元素。
$(selector).slideDown(speed,callback);
slideUp() 向上滑动元素
$(selector).slideUp(speed,callback);
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
停止动画
stop()
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
获取内容和属性
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值
添加元素
append() - 在被选元素的结尾插入内容
$("p").append("追加文本");
prepend() - 在被选元素的开头插入内容
$("p").prepend("在开头追加文本");
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
删除元素
remove() - 删除被选元素（及其子元素）
$("#div1").remove();
empty() - 从被选元素中删除子元素
$("#div1").empty();
操作css
addClass() - 向被选元素添加一个或多个类
$("div").addClass("important");
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
父辈
parent() parent()
方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
$(document).ready(function(){
$("span").parent();
});
parents()
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()