文章目录
前言
一、JQuery语言介绍
一、JQuery版本：
二、JQuery源文件说明：
三、JQuery使用条件：
二、入口函数
一、第一种入口函数
二、第二种入口函数
三、JavaScript与JQuery入口函数的区别
三、JQuery的选择器
一、基本选择器
二、层级选择器
三、过滤选择器
四、属性选择器
五、筛选选择器
六、表单选择器
四、事件
一、事件处理程序
二、事件对象操作
一、绑定事件
二、解绑事件
三、触发事件
三、阻止事件冒泡和默认行为
四、事件
五、DOM对象与JQuery对象转换
六、使用JQuery操作元素样式
一、获取并设置元素样式
二、添加样式
三、移除样式
四、切换样式
五、判断是否存在样式
六、Tab栏切换案例
七、获取或设置元素宽度和高度
八、获取或设置坐标值
九、滚动条--滚动事件
七、使用JQuery操作DOM对象的属性与值
一、获取属性
二、设置属性
三、移除属性
四、获取值
五、设置值
六、获取HTML元素
七、设置HTML元素
八、获取文本内容
九、设置文本内容
八、动画
一、显示
二、隐藏
三、下拉动画，从上往下显示
四、上拉动画，从下往上隐藏
五、下拉上拉切换动画，先点击从上往下显示，后点击从下往上隐藏
六、淡入动画
七、淡出动画
八、淡入淡出动画切换，先点击淡入显示，后点击淡出隐藏
九、其他动画效果
九、节点
一、内部插入节点
二、外部插入节点
三、删除节点
四、复制节点
五、包裹节点
六、替换节点
前言
JQuery是一个快速、简洁的JavaScript框架，也是JavaScript的一个库（包），jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
一、JQuery语言介绍
一、JQuery版本：
- 1.x版本：支持IE6、IE7、IE8浏览器，初始版本，内有针对IE浏览器兼容函数。优点：兼容性非常好。缺点：体积大；增加运行负担；影响运行效率；已不再更新。
- 2.x版本：不支持IE6、IE7、IE8浏览器，升级版本，剔除了对IE浏览器的兼容函数。优点：比1.x版本体积小。缺点：无法兼容IE浏览器；已不再更新。
- 3.x版本：不支持IE6、IE7、IE8浏览器，升级版本，在2.x版本的基础上，增加了许多新特性，也改变了一些旧特性；支持最新HTML5开发语言。
二、JQuery源文件说明：
- 版本号.js：不带min，且有版本号的文件，不属于压缩文件，适用于开发、测试等环境。不能用于发布后的环境。
- 版本号.min.js：带min，且有版本号的文件，属于压缩文件，适用于开发、测试、发布等环境。
三、JQuery使用条件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引用Jquery</title>
<!-- 引用JQuery -->
<script src="./Js/jquery-1.11.1.min.js"></script>
</head>
<body>
</body>
</html>
二、入口函数
一、第一种入口函数
<script type="text/javascript">
//JQuery的第一种入口函数
$(document).ready(function(){
//可以有多个入口函数，其他相关代码
});
</script>
二、第二种入口函数
<script type="text/javascript">
//JQuery的第一种入口函数
$(function(){
//可以有多个入口函数，其他相关代码
});
</script>
三、JavaScript与JQuery入口函数的区别
- JavaScript的window.onload入口函数事件是等到所有内容、外部图片等文件加载完成之后，才去执行window.onload事件。
- JQuery的ready入口函数事件是在HTML所有标签加载完成之后，才去执行ready事件。
- JQuery能做的JavaScript都能做到；而JavaScript能做的，JQuery不一定能做到。
三、JQuery的选择器
一、基本选择器
基本选择器
| 名称 | 语义 | 代码 |
|---|
| 标签选择器 | 所有的标签，都是选择器。选择的是页面上所有这种类型的标签 | <script type="text/javascript">
//JQuery中的标签选择器
$("div").css("width","100%");
</script>
|
| ID选择器 | 任何的HTML标签都可以有id属性，表示这个标签的名字或语义。一个HTML页面，不能出现相同id属性的标签。 | <script type="text/javascript">
//JQuery基本选择器中的ID选择器
$("#logo").css("width","60px");
</script>
|
| 类选择器 | 任何的HTML标签都看可以有class属性。可以出现多个相同的class属性。同一个标签，可以同时属于多个类，可以有多个class属性，用空格隔开。 | <script type="text/javascript">
//JQuery基本选择器中的类选择器
$(".logo").css("width","60px");
</script>
|
| 并集选择器 | 两个标签或多个标签同时进行修改 | <script type="text/javascript">
//JQuery基本选择器中的并集选择器
$("h2,span").css("font-size","20px");
</script>
|
| 通配符* | HTML页面上所有的标签、内容等 | <script type="text/javascript">
//JQuery基本选择器中的通配符
$("*").css("padding","0");
</script>
|
二、层级选择器
层级选择器
| 名称 | 语义 | 代码 |
|---|
| 后代选择器 | 选择的是某个标签的后代 | <script type="text/javascript">
//JQuery基本选择器中的后代选择器
$("div a").css("padding","0");
</script>
|
| 儿子选择器 | 选择某元素的子元素 | <script type="text/javascript">
//JQuery基本选择器中的儿子选择器
$("h2>p").css("text-align","center");
</script>
|
| 兄弟选择器 | 选择紧接着某个元素的所有某个元素 | <script type="text/javascript">
//JQuery基本选择器中的兄弟选择器
$("div~p").css("font-size","20px");
</script>
|
| 下一个兄弟选择器 | 选择紧接着某个元素的所有某个元素 | <script type="text/javascript">
//JQuery基本选择器中的下一个兄弟选择器
$("div+h2").css("font-size","20px");
</script>
|
三、过滤选择器
过滤选择器
| 名称 | 语义 | 代码 |
|---|
| :first | 选择第一个元素 | <script type="text/javascript">
//选择第一个元素
$("li:first").css("font-size","20px");
</script>
|
| :last | 选择最后一个元素 | <script type="text/javascript">
//选择最后一个元素
$("li:last").css("font-size","20px");
</script>
|
| :even | 选择所有元素中偶数的元素，索引从0开始，包含0 | <script type="text/javascript">
//选择所有元素中偶数的元素，索引从0开始，包含0
//隔行变色
$("li:even").css("color","red");
</script>
|
| :odd | 选择所有元素中奇数的元素，索引从0开始 | <script type="text/javascript">
//选择所有元素中奇数的元素，索引从0开始
//隔行变色
$("li:odd").css("colo","bule");
</script>
|
| :eq(index) | 选择指定索引的元素，索引从0开始 | <script type="text/javascript">
//选择指定索引的元素，索引从0开始
$("li:eq(3)").css("font-size","20px");
</script>
|
| :gt(index) | 选择索引大于指定index的元素，索引从0开始 | <script type="text/javascript">
//选择索引大于指定index的元素，索引从0开始
$("li:gt(3)").css("font-size","20px");
</script>
|
| :lt(index) | 选择索引小于指定index的元素，索引从0开始 | <script type="text/javascript">
//选择索引小于指定index的元素，索引从0开始
$("li:lt(3)").css("font-size","20px");
</script>
|
| :header | 选择所有的标题元素 | <script type="text/javascript">
//选择所有的标题元素
$("li:header").css("font-size","20px");
</script>
|
| :animated | 选择当前正在执行所有动画的元素 | <script type="text/javascript">
//选择当前正在执行所有动画的元素
$("li:animated").css("font-size","20px");
</script>
|
| 内容过滤选择器 |
| 名称 | 语义 | 代码 |
|---|
| :contains(text) | 选择包含text文本内容的元素 | <script type="text/javascript">
//选择包含text文本内容的元素
$("p:contains(text)").css("background-color","bule");
</script>
|
| :empty | 选择不包含子元素或者文本节点的空元素 | <script type="text/javascript">
//选择不包含子元素或者文本节点的空元素
$("p:empty").css("background-color","bule");
</script>
|
| 可见性过滤选择器 |
| 名称 | 语义 | 代码 |
|---|
| :hidden | 选择所有不可见元素 | <script type="text/javascript">
//选择所有不可见元素
$("p:hidden").css("display","block");
</script>
|
| :visible | 选择所有可见元素 | <script type="text/javascript">
//选择所有可见元素
$("p:visible").css("background-color","bule");
</script>
|
四、属性选择器
属性选择器
| 名称 | 语义 | 代码 |
|---|
| [attribute] | 选择拥有此属性的元素 | <script type="text/javascript">
//选择拥有此属性的元素
$("a[href]").css("background","bule");
</script>
|
| [attribute=value] | 选择指定属性值为value的所有元素 | <script type="text/javascript">
//选择指定属性值为value的所有元素
$("a[href='baidu']").css("background","bule");
</script>
|
| [attribute!=value] | 选择指定属性值不为value的所有元素 | <script type="text/javascript">
//选择指定属性值不为value的所有元素
$("a[href!='baidu']").css("background","bule");
</script>
|
| [attribute^=value] | 选择属性值以value开始的所有元素 | <script type="text/javascript">
//选择属性值以value开始的所有元素
$("a[href^='web']").css("background","bule");
</script>
|
| [attribute$=value] | 选择属性值以value结束的所有元素 | <script type="text/javascript">
//选择属性值以value结束的所有元素
$("a[href$='com']").css("background","bule");
</script>
|
| [attribute*=value] | 选择属性值包含value的所有元素 | <script type="text/javascript">
//选择属性值包含value的所有元素
$("a[href*='w']").css("background","bule");
</script>
|
| [attrSel1][attrSel2][attrSelN] | 复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。 | <script type="text/javascript">
//选择所有符合指定属性规则的元素，都符合才会被选中。
$("a[href][title='标题']").css("background","bule");
</script>
|
五、筛选选择器
筛选选择器
| 名称 | 语义 | 代码 |
|---|
| .eq(index) | 选择指定索引的元素，索引从0开始 | <script type="text/javascript">
//选择指定索引的元素，索引从0开始
$("span").eq(1).css("font-size","40px");
</script>
|
| .first() | 选择第一个元素 | <script type="text/javascript">
//选择第一个元素
$("span").first().css("font-size","40px");
</script>
|
| .parent() | 选择父亲元素 | <script type="text/javascript">
//选择父亲元素
$("#sp").parent().css("font-size","40px");
$("p").parent("#logo").css("font-size","40px");
</script>
|
| .siblings() | 选择所有的兄弟元素 | <script type="text/javascript">
//选择所有的兄弟元素
$("#li04").siblings().css("background", "gold");
$("#li04").siblings(".liItem").css("background", "gold");
</script>
|
| .find() | 选择所有后代元素 | <script type="text/javascript">
//选择所有后代元素
$("#div").find().css("background", "gold");
$("div").find("#li04").css("background", "gold");
</script>
|
六、表单选择器
表单选择器
| 名称 | 语义 | 代码 |
|---|
| :input | 选择所有<input>等表单元素 | <script type="text/javascript">
//选择所有<input>等表单元素
$(":input").css("background-color","red");
</script>
|
| :text | 选择所有所有 type="text" 的 <input> 元素 | <script type="text/javascript">
//选择所有所有 type="text" 的 <input> 元素
$(":text").css("background-color","red");
</script>
|
| :password | 选择所有 type="password" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="password" 的 <input> 元素
$(":password").css("background-color","red");
</script>
|
| :radio | 选择所有 type="radio" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="radio" 的 <input> 元素
$(":radio").css("background-color","red");
</script>
|
| :checkbox | 选择所有 type="checkbox" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="checkbox" 的 <input> 元素
$(":checkbox").css("background-color","red");
</script>
|
| :submit | 选择所有 type="submit" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="submit" 的 <input> 元素
$(":submit").css("background-color","red");
</script>
|
| :image | 选择所有 type="image" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="image" 的 <input> 元素
$(":image").css("background-color","red");
</script>
|
| :reset | 选择所有 type="reset" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="reset" 的 <input> 元素
$(":reset").css("background-color","red");
</script>
|
| :button | 选择所有 type="button" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="button" 的 <input> 元素
$(":button").css("background-color","red");
</script>
|
| :file | 选择所有 type="file" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="file" 的 <input> 元素
$(":file").css("background-color","red");
</script>
|
| 表单对象属性过滤选择器 |
| 名称 | 语义 | 代码 |
|---|
| :enabled | 选择所有可用元素 | <script type="text/javascript">
//选择所有可用元素
$(":enabled").css("background-color","red");
</script>
|
| :disabled | 选择所有不可用元素 | <script type="text/javascript">
//选择所有不可用元素
$(":disabled").css("background-color","red");
</script>
|
| :checked | 选择所有被选中的元素，如单选框、多选框 | <script type="text/javascript">
//选择所有被选中的元素，如单选框、多选框
$(":checked").css("background-color","red");
</script>
|
| :selected | 选择所有被选中项元素，如下拉列表、列表框 | <script type="text/javascript">
//选择所有被选中项元素，如下拉列表、列表框
$(":selected").css("background-color","red");
</script>
|
四、事件
一、事件处理程序
<script type="text/javascript">
//JavaScript中的事件处理程序
/*btn按钮的点击事件，btn按钮就是事件源，去执行点击事件*/
btn.onclick = function(){
div.style.width = "400px";
}
==========================================================================================
//JQuery中的事件处理程序
/*btn按钮的点击事件，btn按钮就是事件源，去执行点击事件*/
$("#btn").click = function(){
$("div").css("background-color","red")
}
</script>
二、事件对象操作
一、绑定事件
<script type="text/javascript">
//绑定一个事件一个条件
$("button").click(function(){
alert("绑定了Click事件");
});
========================================================================================
//绑定多个事件一个条件
$("button").bind("click mouseenter",function(){
alert("绑定了Click、Mouseenter事件");
});
========================================================================================
//绑定多个事件多个条件
$("button").bind({
"click" : function(){
alert("绑定了Click事件");
},
"mouseenter" : function(){
alert("绑定了Mouseenter事件");
}
});
========================================================================================
//绑定一个事件一个条件并传递参数
$("button").bind("click","传递参数",function(event){
alert(event.data); //结果为：传递参数
});
========================================================================================
//绑定一个事件一个条件并传递参数对象
$("button").bind("click",{color : "pink"},function(event){
alert(event.data.color); //结果为：pink
});
========================================================================================
//只触发一次的事件
$("button").one("click",function(){
alert("使用One事件只能触发一次");
});
========================================================================================
//给所有的子元素绑定事件
$("ul").delegate("li","click",function(){
alert($(this).html()); //输出结果为当前点击的某个li元素
});
========================================================================================
//绑定事件，推荐使用，JQuery版本1.7+
//第一个参数为使用空格分隔的事件类型
//第二个参数为用于触发事件的元素的后代
//第三个参数为事件被触发时要传递的event.data参数
//第四个参数为该事件被触发时执行的函数
$("ul").on("click","li",{color : "pink"},function(event){
alert($(this).html()); //输出结果为当前点击的某个li元素
alert(event.data.color); //输出传递的参数：pink
});
</script>
二、解绑事件
<script type="text/javascript">
//绑定多个事件一个条件
$("button").bind("click mouseenter",function(){
alert("绑定了Click、Mouseenter事件");
});
//bind事件对应的解绑事件为unbind
$("button").unbind("mouseenter"); //只解绑Mouseenter事件，Click事件正常
========================================================================================
//给所有的子元素绑定事件
$("ul").delegate("li","click mouseenter",function(){
alert($(this).html()); //输出结果为当前点击的某个li元素
});
//delegate事件对应的解绑事件为undelegate
$("button").undelegate("mouseenter"); //只解绑Mouseenter事件，Click事件正常
========================================================================================
//绑定事件，推荐使用，JQuery版本1.7+
//第一个参数为使用空格分隔的事件类型
//第二个参数为用于触发事件的元素的后代
//第三个参数为事件被触发时要传递的event.data参数
//第四个参数为该事件被触发时执行的函数
$("ul").on("click mouseenter","li",{color : "pink"},function(event){
alert($(this).html()); //输出结果为当前点击的某个li元素
alert(event.data.color); //输出传递的参数：pink
});
//on事件对应的解绑事件为off
$("ul").undelegate("mouseenter"); //只解绑Mouseenter事件，Click事件正常
</script>
三、触发事件
<script type="text/javascript">
//触发事件，触发浏览器默认行为
$("input").select(function(){
$("input").after("文本被选中！");
});
//点击按钮触发input的select选中事件并输出文本被选中
$("button").click(function(){
$("input").trigger("select");
});
==========================================================================================
//触发事件，不会触发浏览器默认行为
$("input").select(function(){
$("input").after("文本被选中！");
});
//点击按钮不触发input的select选中事件并输出文本被选中
$("button").click(function(){
$("input").triggerHandler("select");
});
</script>
三、阻止事件冒泡和默认行为
<script type="text/javascript">
//阻止冒泡行为
$("div").on("click",function(event){
event.stopPropagation();
});
==========================================================================================
//阻止默认行为
$("div").on("click",function(event){
event.preventDefault();
});
</script>
四、事件
事件
| 事件属性 | 当以下情况发生时，执行此事件 |
|---|
| bind() | 向匹配元素附加一个或更多事件处理器，绑定事件 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件，失去焦点事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件，改变事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件，点击事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件，双击事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序 |
| error() | 触发、或将函数绑定到指定元素的 error 事件，当加载文档或图像时发生某个错误 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault() |
| event.pageX | 相对于文档左边缘的鼠标位置 |
| event.pageY | 相对于文档上边缘的鼠标位置 |
| event.preventDefault() | 阻止事件的默认动作 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值 |
| event.target | 触发该事件的 DOM 元素 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数 |
| event.type | 描述事件的类型 |
| event.which | 指示按了哪个键或按钮 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件，获得焦点事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件，某个键盘的键被按下 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件，某个键盘的键被按下或按住 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件，某个键盘的键被松开 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件，加载事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件，某个鼠标按键被按下 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件，鼠标进入元素，鼠标经过只会触发一次 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件，鼠标离开元素，鼠标经过只会触发一次 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件，鼠标被移动 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件，鼠标从某元素移开，每遇到一个子元素就会触发一次 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件，鼠标被移到某元素之上，每遇到一个子元素就会触发一次 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件，某个鼠标按键被松开 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件，文本被选定 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件，提交按钮被点击，提交事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件，用户退出页面 |
五、DOM对象与JQuery对象转换
<script type="text/javascript">
//DOM对象转换为JQuery对象
var btn = document.getElementById("btn");
$(btn).click(fuction(){
$("div").hide();
});
==========================================================================================
//JQuery对象转换为DOM对象
$("button")[1].onclick = function(){
alert("JQuery对象转换为DOM对象");
}
//另一种JQuery对象转换为DOM对象方式
$("button").get(0).onclick = function(){
alert("JQuery对象转换为DOM对象");
}
</script>
六、使用JQuery操作元素样式
一、获取并设置元素样式
<script type="text/javascript">
//获取样式
var font = $("div").css("font-size");
console.log(font);
//设置单个样式
$("div").css("width","500px");
==========================================================================================
//设置多个样式
$("div").css({"width":"500px","height":"400px","color":"red"});
==========================================================================================
//设置多个样式，循环变大字体，设置li标签的font-size
$("li").css("font-size",function(index,value){
return (index + 1) * parseInt(value) + "px";
});
</script>
二、添加样式
<script type="text/javascript">
//添加样式
//将类样式divItem添加到div标签中
$("div").addClass("divItem");
</script>
三、移除样式
<script type="text/javascript">
//移除样式
//将所有样式从div标签中移除
$("div").removeClass();
//将类样式divItem从div标签中移除
$("div").removeClass("divItem");
</script>
四、切换样式
<script type="text/javascript">
//切换样式
//先点击添加样式显示，后点击移除样式隐藏
$("#btn").click(function(){
$("li").eq(2).toggleClass("divItem");
});
</script>
五、判断是否存在样式
<script type="text/javascript">
//切换样式效果
//先点击添加样式显示，后点击移除样式隐藏
$("#btn").click(function(){
//如样式存在返回True，否则返回Flase
var hasDivClass = $("li").eq(2).hasClass("divItem");
console.log(hasDivClass); //控制台输出：True
//判断是否存在该样式，如存在就移除该样式，不存在则添加该样式
if(hasDivClass){
$("li").eq(2).removeClass("divItem");
}else{
$("li").eq(2).addClass("divItem");
}
});
</script>
六、Tab栏切换案例
<script type="text/javascript">
//Tab栏切换案例
//Tab栏切换
//当前的元素添加active类样式，其他兄弟元素移除active类样式
$(this).addClass("active").siblings().removeClass("active");
//Tab栏内容切换
$(".tab > li").mouseenter(function(){
//获取当前索引
var tabIndex = $(this).index();
//通过当前索引值为当前元素添加selected类样式，并移除main兄弟元素中的selected样式
$(".main")
.eq(tabIndex)
.addClass("selected")
.siblings(".main")
.removeClass("selected");
});
</script>
七、获取或设置元素宽度和高度
<script type="text/javascript">
//设置宽度
$("div").css("width","300px"); //以CSS方式设置div宽度
$("div").width(300); //以JQuery的width方法设置div高度
$("div").width("300px"); //以width的Height方法设置div高度
==========================================================================================
//获取宽度，CSS方式获取的结果为String类型带Px；Width方法获取的结果为Number类型不带Px；
console.log("div的宽度是：" + $("div").css("width")); //以CSS方式获取宽度
console.log("div的宽度是：" + $("div").width()); //以JQuery的Width方法获取宽度
******************************************************************************************
//设置高度
$("div").css("height","300px"); //以CSS方式设置div高度
$("div").height(300); //以JQuery的Height方法设置div高度
$("div").height("300px"); //以JQuery的Height方法设置div高度
==========================================================================================
//获取高度，CSS方式获取的结果为String类型带Px；Width方法获取的结果为Number类型不带Px；
console.log("div的高度是：" + $("div").css("height")); //以CSS方式获取高度
console.log("div的高度是：" + $("div").height()); //以JQuery的Height方法获取高度
</script>
八、获取或设置坐标值
<script type="text/javascript">
//获取当前定位的div的距离或对象
//获取上边的距离，不带Px
console.log("距离页面上边的距离：" + $("div").offset().top);
//获取左边的距离，不带Px
console.log("距离页面左边的距离：" + $("div").offset().left);
//获取距离对象，含上边和左边距离
console.log("距离页面的距离对象：" + $("div").offset());
==========================================================================================
//通过文本框设置当前定位的div的距离或对象
var txtTop = $("#txtTop").val();
var txtLeft = $("#txtLeft").val();
$("div").offset({
top : txtTop,
left : txtLeft
});
******************************************************************************************
//获取当前相对位置的div的距离或对象
//获取上边的距离，不带Px
console.log("相对于父元素上边的距离：" + $("div").position().top);
//获取左边的距离，不带Px
console.log("相对于父元素左边的距离：" + $("div").position().left);
//获取距离对象，含上边和左边距离
console.log("相对于父元素的距离对象：" + $("div").position());
</script>
九、滚动条--滚动事件
<script type="text/javascript">
//获取相对于滚动条上边偏移的值
console.log($("div").scrollTop());
//获取相对于滚动条左边偏移的值
console.log($("div").scrollLeft());
==========================================================================================
var iTop = 100, iLeft = 200;
//设置相对于滚动条上边偏移的值
$("div").scrollTop(iTop);
//设置相对于滚动条左边偏移的值
$("div").scrollLeft(iLeft);
</script>
七、使用JQuery操作DOM对象的属性与值
一、获取属性
<script type="text/javascript">
//获取input属性
$("input:eq(1)").click(function(){
var attrName = $("input:eq(0)").attr("title");
console.log(attrName);
});
</script>
二、设置属性
<script type="text/javascript">
//设置input单个属性
$("input:eq(0)").click(function(){
$(this).attr("title","动态设置的title属性");
});
//设置input多个属性
$("input:eq(0)").click(function(){
$(this).attr({"name":"inputName","title":"动态设置title","value":"动态设置value"});
});
</script>
三、移除属性
<script type="text/javascript">
//移除input属性
$("input:eq(2)").click(function(){
$("input:eq(0)").removeAttr("title");
});
</script>
四、获取值
<script type="text/javascript">
//获取值
$("input:eq(4)").click(function(){
console.log($("#txt").val());
});
</script>
五、设置值
<script type="text/javascript">
//设置值
$("input:eq(3)").click(function(){
$("#txt").val("动态设置文本框的值");
});
</script>
六、获取HTML元素
<script type="text/javascript">
//获取HTML，含标签
$("input:eq(6)").click(function(){
alert($("div").html());
});
</script>
七、设置HTML元素
<script type="text/javascript">
//设置HTML
$("input:eq(5)").click(function(){
$("div").html("<p>我是P元素</p>");
});
</script>
八、获取文本内容
<script type="text/javascript">
//获取文本内容，不含标签
$("input:eq(5)").click(function(){
alert($("div").text());
});
</script>
九、设置文本内容
<script type="text/javascript">
//设置文本内容
$("input:eq(5)").click(function(){
$("div").text("设置文本内容");
});
</script>
八、动画
一、显示
<script type="text/javascript">
//显示动画
$("button").eq(0).click(function(){
$("div").show(); //默认显示方法
$("div").show(3000); //在3秒内显示
$("div").show("slow"); //慢
$("div").show("normal"); //正常
$("div").show("fast"); //快
//Show动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").show(3000);
==========================================================================================
$("div").show(3000,function(){
alert("Show动画执行完毕后执行的函数");
});
==========================================================================================
$("div").show(3000,"linear",function(){
alert("Show动画执行完毕后执行的函数");
});
});
</script>
二、隐藏
<script type="text/javascript">
//隐藏动画
$("button:last").click(function(){
$("div").hide(); //默认隐藏方法
$("div").hide(3000); //在3秒内隐藏
$("div").hide("slow"); //慢
$("div").hide("normal"); //正常
$("div").hide("fast"); //快
//hide动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").hide(3000);
==========================================================================================
$("div").hide(3000,function(){
alert("hide动画执行完毕后执行的函数");
});
==========================================================================================
$("div").hide(3000,"linear",function(){
alert("hide动画执行完毕后执行的函数");
});
});
</script>
三、下拉动画，从上往下显示
<script type="text/javascript">
//从上往下显示
$("button:last").click(function(){
$("div").slideDown(); //默认下拉动画方法
$("div").slideDown(3000); //在3秒内下拉动画显示
$("div").slideDown("slow"); //慢
$("div").slideDown("normal"); //正常
$("div").slideDown("fast"); //快
//slideDown动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").slideDown(3000);
==========================================================================================
$("div").slideDown(3000,function(){
alert("slideDown动画执行完毕后执行的函数");
});
==========================================================================================
$("div").slideDown(3000,"swing",function(){
alert("slideDown动画执行完毕后执行的函数");
});
});
</script>
四、上拉动画，从下往上隐藏
<script type="text/javascript">
//从下往上隐藏
$("button:last").click(function(){
$("div").slideUp(); //默认上拉动画方法
$("div").slideUp(3000); //在3秒内从下往上隐藏
$("div").slideUp("slow"); //慢
$("div").slideUp("normal"); //正常
$("div").slideUp("fast"); //快
//slideUp动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").slideUp(3000);
==========================================================================================
$("div").slideUp(3000,function(){
alert("slideUp动画执行完毕后执行的函数");
});
==========================================================================================
$("div").slideUp(3000,"swing",function(){
alert("slideUp动画执行完毕后执行的函数");
});
});
</script>
五、下拉上拉切换动画，先点击从上往下显示，后点击从下往上隐藏
<script type="text/javascript">
//先点击从上往下显示，后点击从下往上隐藏
$("button:last").click(function(){
$("div").slideToggle(); //默认切换动画方法
$("div").slideToggle(3000); //在3秒内先从上往下显示，后从下往上隐藏
$("div").slideToggle("slow"); //慢
$("div").slideToggle("normal"); //正常
$("div").slideToggle("fast"); //快
//slideToggle动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").slideToggle(3000);
==========================================================================================
$("div").slideToggle(3000,function(){
alert("slideToggle动画执行完毕后执行的函数");
});
==========================================================================================
$("div").slideToggle(3000,"swing",function(){
alert("slideToggle动画执行完毕后执行的函数");
});
});
</script>
六、淡入动画
<script type="text/javascript">
//淡入动画
$("button:last").click(function(){
$("div").fadeIn(); //默认淡入动画方法
$("div").fadeIn(3000); //在3秒内淡入
$("div").fadeIn("slow"); //慢
$("div").fadeIn("normal"); //正常
$("div").fadeIn("fast"); //快
//fadeIn动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").fadeIn(3000);
==========================================================================================
$("div").fadeIn(3000,function(){
alert("fadeIn动画执行完毕后执行的函数");
});
==========================================================================================
$("div").fadeIn(3000,"swing",function(){
alert("fadeIn动画执行完毕后执行的函数");
});
});
</script>
七、淡出动画
<script type="text/javascript">
//淡出动画
$("button:last").click(function(){
$("div").fadeOut(); //默认淡出动画方法
$("div").fadeOut(3000); //在3秒内淡出
$("div").fadeOut("slow"); //慢
$("div").fadeOut("normal"); //正常
$("div").fadeOut("fast"); //快
//fadeOut动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").fadeOut(3000);
==========================================================================================
$("div").fadeOut(3000,function(){
alert("fadeOut动画执行完毕后执行的函数");
});
==========================================================================================
$("div").fadeOut(3000,"swing",function(){
alert("fadeOut动画执行完毕后执行的函数");
});
});
</script>
八、淡入淡出动画切换，先点击淡入显示，后点击淡出隐藏
<script type="text/javascript">
//先点击淡入显示，后点击淡出隐藏
$("button:last").click(function(){
$("div").fadeToggle(); //默认淡入淡出动画方法
$("div").fadeToggle(3000); //在3秒内先点击淡入显示，后点击淡出隐藏
$("div").fadeToggle("slow"); //慢
$("div").fadeToggle("normal"); //正常
$("div").fadeToggle("fast"); //快
//fadeToggle动画执行完毕后执行的函数
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为动画效果，参数为字符串类型的swing、linear
//第三个参数为动画完毕后执行的函数
$("div").fadeToggle(3000);
==========================================================================================
$("div").fadeToggle(3000,function(){
alert("fadeToggle动画执行完毕后执行的函数");
});
==========================================================================================
$("div").fadeToggle(3000,"swing",function(){
alert("fadeToggle动画执行完毕后执行的函数");
});
});
</script>
九、其他动画效果
<script type="text/javascript">
//自定义动画
$("button:last").click(function(){
//第一个参数为一组包含作为动画属性和最终的样式属性
//第二个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第三个参数为动画效果，参数为字符串类型的swing、linear
//第四个参数为动画完毕后执行的函数
$("div").animate({
"width":"500px",
"height":"500px",
"opacity":1
},3000,"swing",function(){
alert("animate动画执行完毕后执行的函数");
});
});
========================================================================================
//停止动画
$("button:last").click(function(){
//第一个参数为清空队列，默认为false，设置为True，则清空队列，可以立即结束动画
//第二个参数为完成队列，默认为false，设置为True，则完成队列，可以立即完成动画
//停止动画Stop方法常用于动画开始前的清空或完成队列效果
$("div").stop(false,true);
$("div").stop(false,true).slideDown(3000);
});
========================================================================================
//把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
$("button:last").click(function(){
//第一个参数为动画时长，可以是Number类型或是slow、normal、fast字符串类型
//第二个参数为一个0至1之间表示透明度的数字
//第三个参数为动画效果，参数为字符串类型的swing、linear
//第四个参数为动画完毕后执行的函数
$("div").fadeTo(3000,0.25,"swing",function(){
//其他相关代码
});
});
</script>
九、节点
一、内部插入节点
<script type="text/javascript">
//将P元素追加到div末尾中
//把后面的P元素追加到前面的div中的末尾
$("button:first").click(function(){
$("div").append("<p>P元素追加到div中</p>");
});
========================================================================================
//把P元素追加到div末尾中
//将前面的P元素追加到后面的div中的末尾
$("button:eq(1)").click(function(){
$("<p>P元素追加到div中</p>").appendTo($("div"));
});
========================================================================================
//将P元素追加到div的前面
//把后面的P元素追加到前面的div中的第一个
$("button:eq(2)").click(function(){
$("div").prepend("<p>P元素追加到div中</p>");
});
========================================================================================
//把P元素追加到div前面
//将前面的P元素追加到后面的div中的第一个
$("button:eq(3)").click(function(){
$("<p>P元素追加到div中</p>").prependTo($("div"));
});
</script>
二、外部插入节点
<script type="text/javascript">
//把后面的P元素追加到前面的div的后面，兄弟关系
$("button:eq(0)").click(function(){
$("div").after("<p>P元素追加到div后面</p>");
});
==========================================================================================
//把后面的P元素追加到前面的div的前面，兄弟关系
$("button:eq(1)").click(function(){
$("div").before("<p>P元素追加到div前面</p>");
});
==========================================================================================
//把前面的P元素插入到后面的div的前面，兄弟关系
$("button:eq(2)").click(function(){
$("<p>P元素追加到div前面</p>").insertBefore("div");
});
==========================================================================================
//把前面的P元素插入到后面的div的后面，兄弟关系
$("button:eq(3)").click(function(){
$("<p>P元素追加到div前面</p>").insertAfter("div");
});
</script>
三、删除节点
<script type="text/javascript">
//删除选择的元素
$("button:eq(0)").click(function(){
$("div").remove();
});
==========================================================================================
//清空子元素
$("button:eq(1)").click(function(){
$("div").empty();
//或者使用HTML方法：清空子元素
//$("div").html("");
});
</script>
四、复制节点
<script type="text/javascript">
//复制节点
$("button:eq(0)").click(function(){
//复制P节点并追加到div中的末尾
//如clone的参数为True，那么之前绑定的事件也一并复制
$("div").append($("p").clone());
});
</script>
五、包裹节点
<script type="text/javascript">
//包裹节点，将前面的span标签包裹到div内
$("button:eq(0)").click(function(){
$("<span>被div包裹在内</span>").wrap($("div"))
});
==========================================================================================
//包裹所有节点，将前面的所有li标签包裹到ul内
$("button:eq(1)").click(function(){
$("li").wraoAll($("ul"));
});
</script>
六、替换节点
<script type="text/javascript">
//替换节点，将所有的span标签替换为div标签
$("button:eq(0)").click(function(){
$("span").replaceWith($("div"));
});
</script>
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
