Jquery基础学习（1）4.4

来源：互联网发布：海量大数据面试编辑：程序博客网时间：2024/05/17 08:04

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

一.概述：

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;}//红色DIVvar 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;}

0 0