申明:以下资料有些摘自引路蜂博主归纳教程;
一.概述:
jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明:
jQuery 是开源软件,使用MIT许可证授权。[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。
jQuery有下列特色:
- 跨浏览器的DOM元素选择
- DOM巡访与更改:支援CSS 1-3与 基本的XPath,jQuery 1.2版以后默认取消XPath支持,改为插件支持
- 事件(Events)
- CSS操纵
- 特效和动画(移动显示位置、淡入、淡出)
- Ajax
- 延伸性(Extensibility)
- 工具:例如浏览器版本和
each
函数。 - JavaScript插件
- 轻量级
二.工具:
本人还是使用editPlus来做的练习,在学习之前,需要下载好jQueryapi包,我用的是jquery-1.9.1.js,放在你网页文件同目录,然后直接引入方式和js文件一样:<script src="jquery-1.9.1.js"></script>;然后就可以用jQuery了;
三.基本语法:
$(selector).action()
- $ 符合定义这是一个jQuery语句
- (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样。
- action() 定义操作该HTML元素的方法。
文档准备好事件
几乎所有的jQuery 都有如下的代码:
$(document).ready(function(){
// jQuery methods go here...
});
这为Document Ready事件处理器以防止jQuery在页面没有完成载入前就执行。从而可以避免下面类似情况发生:
试图隐藏尚未创建好的元素
试图获取尚未载入的图片的大小
这个方法也可以使用下面简化的方法:
$(function(){
// jQuery methods go here...
});
你可以选择你喜欢的方式,但通常还是采用$(document).ready(function(){的方式以便于代码的阅读。
四.selector:
jQuery Selector 是jQuery库中非常重要的一个组成部分。
jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始。
选择HTML标记
选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有<p>元素
#id 选择
jQuery #id 选择器用来选择定义了id 属性的元素,网页上元素的id应保证是唯一的,你可以使用id来选择单个唯一的元素。
.class 选择器
jQuery .class 选择器选择所有定义了class属性为制定值的所有元素,
代码案例:html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery selector Demos</title
<link rel="stylesheet" type="text/css" href="lianxi1_css .css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="lianxi1_js.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery选择器案例:
*/
$(document).ready(function(){
$("#hide_Html").click(function(){
$("h2").hide();
});
$("#hide_Class").click(function(){
$(".Class_selector").hide();
});
$("#hide_Id").click(function(){
$("#Id_selector").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p class="Class_selector">This is a paragraph</p>
<p id="Id_selector">This is another paragraph</p>
<button id="hide_Html">HTML_selctor hide</button>
<button id="hide_Class">Class_selctor hide</button>
<button id="hide_Id">Id_selctor hide</button>
</body>
</html>
五.event:
常见的jQuery事件:
$(document).ready()
文档准备好事件,在文档完全载入后执行。
click()
用户单击某个HTML元素后调用,比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容:
dblclick()
双击某个HTML标记时调用,mouseenter()
在鼠标进入某个HTML元素时触发,mouseleave()
在鼠标进入离开某个HTML元素时触发,mousedown()
在按下鼠标左键时触发
mouseup()
在某个元素上释放鼠标左键时触发,
hover()在鼠标指针放在某个元素之上时触发,为mouseenter和mouseleave的组合,它的第一个回调函数中鼠标进入时调用,第二个回调函数在鼠标离开时执行
focus()
当某个表单输入域获得焦点时调用,
blur()
当某个表单输入域失去焦点时调用,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery event Demos</title>
<link rel="stylesheet" type="text/css" href="event.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery常用事件案例:
*/
$(document).ready(function(){
$("#click_event").click(function(){
alert("点击事件");
});
$("#dblclick_event").dblclick(function(){
alert("双击事件");
});
$("#mouseenter_event").mouseenter(function(){
alert("鼠标进入事件");
});
$("#mouseleave_event").mouseleave(function(){
alert("鼠标移出事件");
});
$("#mousedown_event").mousedown(function(){
alert("鼠标左键按下事件");
});
$("#mouseup_event").mouseup(function(){
alert("鼠标左键释放事件");
}
);
$("#hover_event").hover(function(){
alert("鼠标悬停事件");
},
function(){
alert("鼠标移出");
}
);
$("#focus_event").focus(function(){
alert("输入框获得焦点事件");
});
$("#focus_event").blur(function(){
alert("输入框失去焦点事件");
});
});
</script>
</head>
<body>
<div id="click_event">click</div>
<div id="dblclick_event">dblclick</div>
<div id="mouseenter_event">mouseenter</div>
<div id="mouseleave_event">mouseleave</div>
<div id="mousedown_event">mousedown</div>
<div id="mouseup_event">mouseup</div>
<div id="hover_event">hover</div>
<input type="text" id="focus_event" value="输入/失去框获得焦点事件"/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
}
六.显示和隐藏内容:
jQuery的hide()和show()可以用来显示和隐藏内容
基本语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度,可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数,在显示或隐藏结束时调用。
jQuery toggle()方法
使用toggle()方法,可以实现交替显示和隐藏内容
其基本语法如下:
$(selector).toggle(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度,可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数,在显示或隐藏结束时调用
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery hide- show Demos</title>
<link rel="stylesheet" type="text/css" href="hide- show.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="hide- show.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:hide- show案例:
*/
$(document).ready(function(){
//$(selector).hide(speed,callback);
//speed可以为:fast slow 微秒数
$("#hide_bnt").click(function(){
$("div").hide("fast",function(){
alert("快速隐藏");
})
});
//$(selector).show(speed,callback);
$("#show_bnt").click(function(){
$("div").show("slow",function(){
alert("慢慢显示");
});
});
//$(selector).toggle(speed,callback);
$("#toggle_bnt").click(function(){
$("div").toggle("slow",function(){
alert("切换显示隐藏");
});
});
});
</script>
</head>
<body>
<div>hide or show me!!</div>
<input type="button" value="hide" id="hide_bnt"/>
<input type="button" value="show" id="show_bnt"/><br/>
<input type="button" value="toggle" id="toggle_bnt"/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
}
七.淡入淡出效果
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn()方法
fadeIn() 实现淡入效果,其基本语法如下:
$(selector).fadeIn(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
fadeOut()方法
fadeOut() 实现淡出效果,其基本语法如下:
$(selector).fadeOut(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
fadeToggle()方法
fadeToggle() 交替进行fadeIn()和fadeOut(),如果元素是淡出的,那么fadeToggle()将淡入该元素,如果之前是淡入的,fadeToggle将淡出该元素。
其基本语法如下:
$(selector).fadeToggle(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
fadeTo()方法
fadeTo() 实现淡化到指定的透明度,其基本语法如下:
$(selector).fadeTo(speed,opacity,callback);
必需参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个必须参数为透明度,值域为0到1之间。
可选参数为回调函数,在fadeIn()方法结束后调用。
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery fade Demos</title>
<link rel="stylesheet" type="text/css" href="fade.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="fade.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:fade案例:
*/
//$(selector).fadeIn(speed,callback);
$(document).ready(function(){
$("#fadeIn_bnt").click(function(){
$("div").fadeIn("slow",function(){
alert("慢慢淡入");
});
});
//$(selector).fadeOut(speed,callback);
$("#fadeOut_bnt").click(function(){
$("div").fadeOut("slow",function(){
alert("慢慢淡出");
});
});
//$(selector).fadeToggle(speed,callback);
$("#fadeToggle_bnt").click(function(){
$("div").fadeToggle("slow",function(){
alert("切换淡入淡出");
});
});
//$(selector).fadeTo(speed,opacity,callback);
$("#fadeTo_bnt").click(function(){
$("div").fadeTo("slow","0.5",function(){
alert("慢慢淡到透明度为原来50%");
});
});
});
</script>
</head>
<body>
<div>fadeIn or fadeOut or fadeToggle or fadeTo me!!</div>
<input type="button" value="fadeIn" id="fadeIn_bnt"/>
<input type="button" value="fadeOut" id="fadeOut_bnt"/><br/>
<input type="button" value="fadeToggle" id="fadeToggle_bnt"/>
<input type="button" value="fadeTo" id="fadeTo_bnt"/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
}
八.滑动效果
jQuery支持使用下面方法来实现HTML元素的滑动效果:
- slideDown()
- slideUp()
- slideToggle()
slideDown方法
用来实现向下滑动动画效果,其基本语法为:
$(selector).slideDown(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideDown()方法结束后调用。
slideUp方法
用来实现向上滑动动画效果,其基本语法为:
$(selector).slideUp(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。
slideToggle方法
用来实现交替显示向上向下滑动动画效果,如果之前是下滑显示,slideToggle则显示slideUp(),反之显示slideDown
其基本语法为:
$(selector).slideToggle(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery slide Demos</title>
<link rel="stylesheet" type="text/css" href="slide.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="slide.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:fade案例:
*/
//$(selector).slideDown(speed,callback);
$(document).ready(function(){
$("#slideDown_bnt").click(function(){
$("div").slideDown("slow",function(){
alert("慢慢滑下");
});
});
//$(selector).slideUp(speed,callback);
$("#slideUp_bnt").click(function(){
$("div").slideUp("slow",function(){
alert("慢慢划上");
});
});
//$(selector).slideToggle(speed,callback);
$("#slideToggle_bnt").click(function(){
$("div").slideToggle("slow",function(){
alert("切换画上滑下");
});
});
});
</script>
</head>
<body>
<input type="button" value="slideDown" id="slideDown_bnt"/><br/>
<input type="button" value="slideUp" id="slideUp_bnt"/><br/>
<input type="button" value="slideToggle" id="slideToggle_bnt"/>
<div>slideDown or slideUp or slideToggle me!!</div>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
display:none;
}
九.动画效果
前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果。
基本语法如下:
$(selector).animate({params},speed,callback);
必选的参数为params,定义CSS用于动画效果的的属性。
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在animate()方法结束后调用
要注意的是,缺省情况下,所有HTML元素的位置的固定的,不能移动,因此如果需要修改HTML元素的位置,需要事先将它们的CSS属性的位置设置为relative, fixed, 或absolute。
使用animate 修改多个属性
注意:基本所有的CSS属性都可以在animation中使用,颜色修改不在jQuery核心库中,需要Color Animiation插件来完成。
使用属性相对值
对于CSS属性,除了上面使用的绝对大小,也可以使用相对值来定义,使用 “+”“-”。
使用预定义的值
也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “toggle”:
使用队列功能
缺省jQuery支持将多个animation功能串起来构从一个队列,然后一个一个的执行队列中的指令。
jQuery的使用stop()方法在动画结束之前停止动画。
基本语法如下:
$(selector).stop(stopAll,goToEnd);
可选参数stopAll 指明是否同时清除“动画队列”,缺省为false.意味着只停止当前活动的动画,之后的动画则继续运行。
可选参数goToEnd 指明是否立即结束当前动画,缺省为false.
因此缺省的stop()动作为终止指定HTML元素的当前动画效果
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery animate Demos</title>
<link rel="stylesheet" type="text/css" href="animate.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="animate.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:animate案例:
*/
//$(selector).animate({params},speed,callback);
$(document).ready(function(){
//使用animate 修改多个属性
$('#animate1_bnt').click(function(){
$('div').animate({
left:'200px',
opacity:'0.5',
height:'200px',
width:'100px'
},"slow",function(){alert("动画演示完毕");});
});
//使用属性相对值
$('#animate2_bnt').click(function(){
$('div').animate({
left:'+=200px',
height:'+=100px',
width:'+=100px'
},"slow",function(){alert("动画演示完毕");});
});
//使用预定义的值
$('#animate3_bnt').hover(function(){
$('div').animate({
height:'toggle',
},"slow");
});
//使用队列功能
$('#animate4_bnt').click(function(){
var div=$('div');
div.animate({left:'300px'},'slow');
div.animate({left:'100px'},'slow');
div.animate({opacity:'0.5'},'slow');
div.animate({opacity:'1'},'slow');
});
//终止动画
//$(selector).stop(stopAll,goToEnd);
//可选参数stopAll 指明是否同时清除“动画队列”,
//缺省为false.意味着只停止当前活动的动画,之后的动画则继续运行。
//可选参数goToEnd 指明是否立即结束当前动画,缺省false.
$('#stop_animate_bnt').click(function(){
$('div').stop(true,false);
});
});
</script>
</head>
<body>
<div>animate me!!</div>
<input type="button" value="动画修改属性绝对值" id="animate1_bnt"/><br/>
<input type="button" value="动画修改属性相对值" id="animate2_bnt"/><br/>
<input type="button" value="使用预定义的值" id="animate3_bnt"/><br/>
<input type="button" value="使用队列功能" id="animate4_bnt"/><br/>
<input type="button" value="动画终止" id="stop_animate_bnt"/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
/*display:none;*/
left:150px;
position:absolute;
}
十.方法链:
jQuery支持将多个方法链接在一起,比如介绍的多个animation(),这个链接也可以应用到其它方法,构成一个方法链。
使用这个方法,对于同一个元素,链接多个方法,浏览器无需多次查找HTML元素。
代码案例:
html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery 方法连 Demos</title>
<link rel="stylesheet" type="text/css" href="fangfalian.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="fangfalian.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:方法链案例:
*/
//注意方法之间是通过.来链接的,不需要中间加;
//类似于animate的队列动画
$(document).ready(function(){
$("#fangfalian_bnt").click(function(){
$('div')
.css("width","600px")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<div>方法链测试!!</div>
<input type="button" value="方法链测试" id="fangfalian_bnt"/><br/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
/*display:none;*/
left:150px;
position:absolute;
}
十一.HTML GET
jQuery库包含了很多用来改变和操作HTML元素及其属性的方法。
其中一个非常重要的部分就是jQuery可以用来操作DOM。
本篇介绍使用jQuery来取得DOM节点元素的值或属性。
其中三个简单而有用的方法如下:
- text() – 设置或取得指定元素的文本内容。
- html() – 设置或取得指定元素的内容(包括HTML标记)
- val() – 设置或取得表单某个输入域的值。
除了上面的方法外,attr()方法用来取得某个元素的属性:
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery get Demos</title>
<link rel="stylesheet" type="text/css" href="get.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="get.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:get案例:
*/
$(document).ready(function(){
//text() – 设置或取得指定元素的文本内容。
$("#text_bnt").click(function(){
alert("text:"+$('div').text());
});
//html() – 设置或取得指定元素的内容(包括HTML标记)
$("#html_bnt").click(function(){
alert("html:"+$('div').html());
});
//val() – 设置或取得表单某个输入域的值。
$("#val_bnt").click(function(){
alert("输入域中信息:"+$('#testVal').val());
});
//attr()方法用来取得某个元素的属性:
$("#attr_bnt").click(function(){
alert("div中的id属性:"+$('div').attr("id"));
});
});
</script>
</head>
<body>
<div id="testDiv"><span>get测试!!text() or html() or val() or attr()</span></div>
<input type="text" name="testVal" id="testVal"/><br/>
<input type="button" value="获得div内的文本信息" id="text_bnt"/><br/>
<input type="button" value="获得div内的html信息" id="html_bnt"/><br/>
<input type="button" value="获得输入域中的信息" id="val_bnt"/><br/>
<input type="button" value="获得div的id属性值" id="attr_bnt"/><br/>
</body>
</html>
CSS文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
/*display:none;*/
left:150px;
position:absolute;
}
十二.HTML SET
上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值。
- text() – 设置或取得指定元素的文本内容。
- html() – 设置或取得指定元素的内容(包括HTML标记)
- val() – 设置或取得表单某个输入域的值。
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery set Demos</title>
<link rel="stylesheet" type="text/css" href="set.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="set.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:set案例:
*/
$(document).ready(function(){
var div=$('div');
//text() – 设置或取得指定元素的文本内容。
$("#text_bnt").click(function(){
div.text("通过text()设置文本信息");
});
//html() – 设置或取得指定元素的内容(包括HTML标记)
$("#html_bnt").click(function(){
div.html("<b>通过html()来设置html信息</b>");
});
//val() – 设置或取得表单某个输入域的值。
$("#val_bnt").click(function(){
$("#testVal").val("通过val()来设置输入域文本信息");
});
//attr()方法用来取得某个元素的属性:
$("#attr_bnt").click(function(){
div.attr({
"title":"this is ne div",
"id":"testDiv"
});
alert("id:"+$("div").attr("id"));
});
});
</script>
</head>
<body>
<div id="testDiv" title="this is old div"><span>set测试!!text() or html() or val() or attr()</span></div>
<input type="text" name="testVal" id="testVal"/><br/>
<input type="button" value="设置div内的文本信息" id="text_bnt"/><br/>
<input type="button" value="设置div内的html信息" id="html_bnt"/><br/>
<input type="button" value="设置输入域中的信息" id="val_bnt"/><br/>
<input type="button" value="设置div的id属性值" id="attr_bnt"/><br/>
</body>
</html>
css文件:
div{
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
/*display:none;*/
left:150px;
position:absolute;
}
十三.添加HTML元素
使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素:
- append() – 在指定的元素的尾部添加一个新内容。
- prepend() -在指定的元素里前部添加新内容。
- after() – 在指定元素后添加新内容
- before() -在指定元素的前面添加新内容。
乍一看append,prepend 和after,before似乎功能一样,但append,prepend指在选中的元素本身(内部)的前面和后面,而after,before指在选择中的元素的前面和后面。
append(),prepend()支持同时插入多个元素, 同样after,before也支持同时插入多个元素代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery add Demos</title>
<link rel="stylesheet" type="text/css" href="add.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:add案例:
*/
//元素创建函数:
$(document).ready(function(){
function createElement(){
//append(),prepend()支持同时插入多个元素,下面的例子添加三个使用不同方法创建的新元素:
//1.通过html元素直接创建
//var div1="<div id='appendDiv'>prepend</div>"
//2.通过Jquery来添加
//var div2=$("<div id='appendDiv'></div>").text("prepend");
//3.通过DOM来添加:
var div3=document.createElement("div");
div3.id='appendDiv';
div3.innerText="prepend";
return div3;
}
//红色DIV
var div=$('#innerDiv');
//prepend() -在指定的元素里前部添加新内容。
$("#prepend_bnt").click(function(){
div.prepend(createElement());
});
//append() – 在指定的元素的尾部添加一个新内容。
$("#append_bnt").click(function(){
div.append(createElement());
});
//after() – 在指定元素后添加新内容
$("#after_bnt").click(function(){
div.after(createElement());
});
//before() -在指定元素的前面添加新内容。
$("#before_bnt").click(function(){
div.before(createElement());
});
});
</script>
</head>
<body>
<div id="testDiv" title="this is old div">
<div id="innerDiv">测试元素的添加方法</div>
</div>
<input type="button" value="div内头部添加元素" id="prepend_bnt"/><br/>
<input type="button" value="div内尾部添加元素" id="append_bnt"/><br/>
<input type="button" value="div前面添加元素" id="before_bnt"/><br/>
<input type="button" value="div后面添加元素" id="after_bnt"/><br/>
</body>
</html>
css文件:
#testDiv{
border:1px solid red;
width:150px;
height:150px;
background-color:blue;
/*display:none;*/
left:300px;
position:absolute;
}
#innerDiv{
border:1px solid red;
width:100px;
height:100px;
background-color:red;
/*display:none;*/
}
#appendDiv{
border:1px solid red;
width:50px;
height:50px;
background-color:yellow;
/*display:none;*/
}
十四.删除HTML元素
jQuery使用下面两个方法来删除或是清空某个HTML元素。
- remove() – 删除指定的元素(包括其子元素)
- empty() – 清空指定元素的子元素
jQuery的remove()方法也支持一个参数,可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery delete Demos</title>
<link rel="stylesheet" type="text/css" href="delete.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="delete.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:add案例:
*/
//元素创建函数:
$(document).ready(function(){
//remove() – 删除指定的元素(包括其子元素)
$("#delSelf_bnt").click(function(){
alert("aa");
$("#innerDiv").remove();
});
//empty() – 清空指定元素的子元素
$("#delChild_bnt").click(function(){
$("#innerDiv").empty();
});
//remove()方法也支持一个参数,可以用于过滤一些需要删除的HTML元素。
$("#delSpecial_bnt").click(function(){
$("div").remove("#innerDiv")
});
});
</script>
</head>
<body>
<div id="testDiv" title="this is old div">
<div id="innerDiv">元素的删除方法</div>
</div>
<input type="button" value="删除子元素" id="delChild_bnt"/><br/>
<input type="button" value="删除元素(包含自身)" id="delSelf_bnt"/><br/>
<input type="button" value="删除特定条件元素" id="delSpecial_bnt"/><br/>
</body>
</html>
css文件:
#testDiv{
border:1px solid red;
width:150px;
height:150px;
background-color:blue;
/*display:none;*/
left:300px;
position:absolute;
}
#innerDiv{
border:1px solid red;
width:100px;
height:100px;
background-color:red;
/*display:none;*/
}
#appendDiv{
border:1px solid red;
width:50px;
height:50px;
background-color:yellow;
/*display:none;*/
}
十五.设置或去的元素的CSS class
jQuery支持方法用来操作HTML元素的CSS 属性
下面的方法为jQuery 提供的CSS操作方法:
- addClass() – 为指定的元素添加一个或多个CSS类。
- removeClass() – 为指定的元素删除一个或多个CSS类。
- toggleClass() – 为指定的元素在添加/删除CSS类之间切换。
- css() -设置或是取得CSS类型属性。
你也可以在addClass 添加多个类的名称,
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery add-remove-class Demos</title>
<link rel="stylesheet" type="text/css" href="add-remove-class.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="add-remove-class.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:add-remove-class案例:
*/
$(document).ready(function(){
//addClass() – 为指定的元素添加一个或多个CSS类
$("#addClass_bnt").click(function(){
alert("aa");
$(".testDiv").addClass("yellow");
});
//removeClass() – 为指定的元素删除一个或多个CSS类。
$("#delClass_bnt").click(function(){
//注意可以在类参数表中加入多个类,直接以空格隔开
$(".testDiv").removeClass("blue yellow");
});
//toggleClass – 为指定的元素在添加/删除CSS类之间切换。
$("#toggleClass_bnt").click(function(){
$(".testDiv").toggleClass("blue yellow");
});
});
</script>
</head>
<body>
<div class="testDiv blue">addClass or removeClass or toggleClass</div>
<input type="button" value="添加CSSclass" id="addClass_bnt"/><br/>
<input type="button" value="删除CSSclass" id="delClass_bnt"/><br/>
<input type="button" value="切换CSSclass" id="toggleClass_bnt"/><br/>
</body>
</html>
CSS文件:
.testDiv{
border:1px solid red;
width:150px;
height:150px;
/*display:none;*/
left:300px;
position:absolute;
}
.blue{
background-color:blue;
}
.yellow{
background-color:yellow;
}
十六.css()方法
Query 的css()方法用来设置或读取HTML元素的css属性。
读取元素的CSS语法语法如下:
css(“propertyname“);
使用下面的语法来设置HTML元素的CSS属性:
css(“propertyname“,”value“);
css()也支持同时多个CSS属性:其语法如下:
css({“propertyname“:”value“,”propertyname“:”value“,…});
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery css Demos</title>
<link rel="stylesheet" type="text/css" href="css.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="css.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:css案例:
*/
$(document).ready(function(){
//读取元素的CSS语法语法如下:css(“propertyname“);
$("#getCSS_bnt").click(function(){
alert($(".testDiv").css("height"));
});
//使用下面的语法来设置HTML元素的CSS属性:css(“propertyname“,”value“);
$("#setCSS_bnt").click(function(){
$(".testDiv").css("background-color","yellow");
});
//可以设置多个CSS属性:
$("#setCSS2_bnt").click(function(){
$(".testDiv").css({
"background-color":"pink",
"height":"300px"
});
});
});
</script>
</head>
<body>
<div class="testDiv">读写HTML元素的css 属性 </div>
<input type="button" value="获得CSS属性" id="getCSS_bnt"/><br/>
<input type="button" value="设置CSS属性" id="setCSS_bnt"/><br/>
<input type="button" value="设置多个CSS属性" id="setCSS2_bnt"/><br/>
</body>
</html>
CSS文件:
.testDiv{
border:1px solid red;
width:150px;
height:150px;
background-color:blue;
/*display:none;*/
left:300px;
position:absolute;
}
十七.控制HTML元素的大小:
- width()
- height()
jQuery width()和height()方法
width()用来设置或取得元素的宽度,height()设置和取得元素的高度。
代码案例:
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery width-height Demos</title>
<link rel="stylesheet" type="text/css" href="width-height.css"></link>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="width-height.js"></script>
<script type="text/javascript" language="javascript">
/*
功能:jQuery:width-height案例:
*/
$(document).ready(function(){
//width()用来设置或取得元素的宽度,
$("#getWidth_bnt").click(function(){
alert($(".testDiv").width());
});
$("#setWidth_bnt").click(function(){
$(".testDiv").width(300);
});
//height()设置和取得元素的高度。
$("#getHeight_bnt").click(function(){
alert($(".testDiv").height());
});
$("#setHeight_bnt").click(function(){
$(".testDiv").height(300);
});
});
</script>
</head>
<body>
<div class="testDiv">获得或设置元素大小高度属性 </div>
<input type="button" value="获得width" id="getWidth_bnt"/><br/>
<input type="button" value="设置width" id="setWidth_bnt"/><br/>
<input type="button" value="获得height" id="getHeight_bnt"/><br/>
<input type="button" value="设置height" id="setHeight_bnt"/><br/>
</body>
</html>
css文件:
.testDiv{
border:1px solid red;
width:150px;
height:150px;
background-color:blue;
/*display:none;*/
left:300px;
position:absolute;
}