Jquery基础学习（1）4.4

最新推荐文章于 2021-04-05 16:50:19 发布

u010092682

最新推荐文章于 2021-04-05 16:50:19 发布

阅读量675

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wangbinhui81218/article/details/22945773

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

申明：以下资料有些摘自引路蜂博主归纳教程；

一.概述：

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() – 设置或取得表单某个输入域的值。

同样为元素的属性赋值也使用attr()方法，

代码案例：

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;
}

u010092682

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础学习（1）4.4

申明：jQuery是一套跨浏览器的JavaScript函式库，简化HTML与JavaScript之间的操作，下面为摘自Wikepedia上的jQuery说明：jQuery 是开源软件，使用MIT许可证授权。[4] jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发
复制链接

扫一扫