文章目录
前言
一、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>