jQuery基础学习笔记_第1页
jQuery基础学习笔记_第2页
jQuery基础学习笔记_第3页
jQuery基础学习笔记_第4页
jQuery基础学习笔记_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1. jquery 基础1.1如果你了解javascript语言，那将对你掌握jquery如虎添翼，因为jquery本 身就是javascript,只不过是把javascript代码包装成拿过來就能实现特定功 能的代码库！例如，我们想改变页而屮所冇段落标签屮的文本内容：javascript 代码:var page_ps = documentgetelementsbytagname(; for(var i - 0; i < page_ps.length; i+)page_psiinnerhtml - "hello imooci°jquery 代码:$ (f,pn)htm

2、l(nhello imooc! n);以上两段代码完成的功能是一样的。由此可以看出，jquery史加的简洁方便， 我们在处理dom时不必关心功能的实现细节。$ 0就是jquery中的函数，它的功能是获得()小指定的标签元素。如示例屮$( “p”)会得到一组p标签兀素, 其中“p”表示css中的标签选择器。$()屮的()不一定是指定元索，也可能是函 数。在jquery中$()方法等价于jquery0方法，前者比较常用，是后者的简写。一 般只有在$ ()与其它语言冲突时才会使用jquery()方法。2. jquery基础选择器2.1 #id选择器(使用身份证号来找人)jqucry能使用css选择器

3、來操作网页中的标签元素。如杲你想耍通过一个id号 去杳找一个元素，就可以使用如下格式的选择器：其屮#my_id表示根据id选择器获取页而屮指定的标签元素，且返回唯一一个元 素。例如:<body><div id=rr divt est" ></div></body><script typerext/javascript">$ c#divt est*). html c 设 s div的内容“); </ script >嘿，jquery,我想找到上面那个divl在浏览器屮显示的效果:=回 n / d #id选

4、擇器x .c d file:/e:/slnopjquery/l-l.html芒三设萱div的内容从图屮可以看出，通过#id选择器的方式获取元素，并在元素屮调html ()方法 为id二"divtest"的div元索设置了文字显示在页面中。此外，htmlo方法的功能是设置或获取元素中显示的内容，针对该方法我们在后 而的章节屮会冇详细介绍。2.2 element选择器(寻找铅笔)在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的div. span各个元索， 虽然同属于一个容器，但有各自的功能，jquery中可以根据元索名查找元索， 格式如b ：$( "element”

5、)其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们 就可画iffljt,通过元索名找到元索就可以对它进行操作了。如下图所示：在页而屮，根据元素名找到了一个元素，并将它显示的字体加粗。<body>< div i d= “ divt e st" > 我变胖 了 </ div> </body><script type=" t ext/j avascript，v>$ (" div") css (" f ont-weight", " bold&qu

6、ot;); </script>在浏览器屮显示的效果:从上面图中可以看出，根据元素的名称可以查找到该元素，并调用css()方法将 设置该元索内容中文字显示的样式。此外，csso方法的功能是设置或获取元索的某项样式属性，它的更多功能我们 将在后续的章节中有详细的介绍。$(,button,).attr(,disabled,'z,truen); attr()方法的功能是设置或获取元素的某项属性值。2.3 class选择器(寻找红色铅笔)我们在上一小节介绍了通过使用元素名称查询元素的方法，其实，述可以通过元 素的类别屈性杳找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元 素的

7、某个特征进行查找，它的调用格式如下：$( “.class” )其屮.class参数表示元素的css类别(类选择器)名称。例如，在页面中，通过class选择器获取某个元索，并显示该元索的class类别 名称，如卜图所示：<style tyfie="text/css"> red color:red;</style></head> <body>通过癸送援眾名找刊忻青:<div id=*' divtest" class=6 red" >我穿红衣了 </div> </body&g

8、t;<script type=，vt ext/javascrijft，v>var sclassname = $ c*. red"). att r (" class*1);$(" red") html(sclassname):</script>在浏览器小显示的效果:从图中可以看出，通过class选择器的方式获取元素，并调用元素的attr()方 法获取元素的类别名称，并将名称显示在页而屮。2.4 *选择器(取走全部铅笔)有一个非常“牛”的选择器，号选择器，它的功能是获取页面中的全部元 素,“全部”啊!包括headbody、script

9、这些元素,相当于可以取走你 文貝盒中的所有铅笔，格式为：$( “*” )选择器中的参数就一个“*”，既没有号，也没有“”号。由于该选择器 的特殊性，它常与其他元索组合使用，表示获取其他元索中的全部子元索。如下图所示：使用*选择器，获取div中的所冇子元索并设置三个子元索显示相 同的内容。<body><div><span></ span<p></p><label></label></div></body><script type="t ext/javascript&q

10、uot;> $cdiv *").htmir我们是一家人");</script>在浏览器小显示的效果:厂口 回n/ d国器xjvc file:/e:/slnopjquery/4-l.html!=我们是一家人我们是一家人我们是一家人 丄由于三个元素都包含在div元素屮，因此，它们都是div元素的子元素，那么， 就可以使用$( “div*”)的方式获取&iv元素中的这三个子元素，并使用html () 方法来设置它们显示的内容。实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓 慢，这个选择器也需要谨慎使用。2.5 selebsele2

11、*selen 选择器有时需耍精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜 欢的笔，就需要调用selel,sele2,selen选择器，它的调用格式如下：$ ( "selel, sele2, selen” )其中参数sclck sclc2到sclcn为有效选择器，每个选择器z间用“，”号隔 开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$( “.class”)、 $( "selector")选择器等。例如，通过选择器获取其屮的任意两个元素，并将它们显示的内容设为相同，如 图所示：<body><div></

12、div><span></span><p></p></body><script type=rrt ext/javascript ">scdip.htmir我们的身份很特殊");</script>在浏览器中显示的效果:=:selel,sele2,selen®b§ x ,. i <- - c d file:/e:/slnopjquery/5-l.html =我们的身份很特殊我们的身份很特殊虽然页面中添加了三个元索，但是通过使用$( “div,p”)选择器方式获取了其

13、中 的div和p元素，并设置它们显示的内容。2.6 ance desc 选择器本节开始，我们将介绍层次性选择器。在实际应用开发屮，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层 次选择器，可以快速定位某一层次的一个或多个元索，ance desc选择器就是其 中z,它的调用格式如b ：$("ance desc)其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写) 表示父元素；desc参数(descendant后代的简写)表示后代元素，即包括子元 索、孙元索等等。两个参数都可以通过选择器來获取。比如家族姓氏“div”， 家族几代人里，都有名字里

14、带“spam”的，就可以用这个ance dcsc选择器把 这几个人给定位岀来。例如，使用层次选择器，获取div元素中的全部span元素，并设置它们显示 的内容，在如下图所示：<body><div>码农家族<p><span></ span</p><span></span></div></body><scriptext/j avascript * >$cdiv spanw).htmlc我们是一个家族下的子孙")；</script>在浏览器小显示的效果:

15、从图屮可以看出，使用层次选择器$(divspan)获取了在div元素屮的两个元 索，一个是5元索中的子元索，另一个是p元索外的同级元索，但它们都是在 一个div元索下，也就是说在一个“家族”下。2.7 parent > child 选择器与上一节介绍的ance desc选择器相比，parent child选择器的范围要小些， 它所选择的口标是子集元素，相当于一个家庭屮的子辈们，但不包括孙辈，它的 调用格式如下：$( uparent child” )child参数获取的元索都是parent选择器的子元索，它们之间通过“”符号来 表示一种层次关系。如图所示:<body><d

16、iv> 码农家族<p><span></span></p><span></span><span></span></div><span></span></body><script type=，vtext/j avascript>$cdiv>span.htmir我们是一个家庭下的子辈们")；</script>在浏览器中显示的效果：| ”回 |£3>1,；pare nt > child: xc

17、 d file:/e:/slnopj( =码农家族p标签无秦我们是一个家庭下的子辈们我们是一个家庭下的子辈们'u标签元養刁从图中可以看出,使用$(divspa)选择器代码，获取的是div “家庭中”全 部“子辈”span元素，不包括“孙辈” span元素和“家庭外”的span元素。2.8 prev + next 选择器俗话说“远亲不如近邻”,而通prev + next选择器就可以查找与“prev”元 素紧邻的下一个“next”元素，格式如下：$( “prev + next” )其中参数prev为任何有效的选择器，参数“nexl”为另外一个有效选择器，它 们之间的“ + ”表示一种上下的

18、层次关系，也就是说，“prev”元素最紧邻的下 一个元素由“next”选择器返回的并且只返回唯的一个元素。例如，使用prev + next选择器，获取p>元素最近邻的下一个元素，如下图所 示：<div>码农家竦span我是 spanl </ spanp>我是e先生</p>span我是 span2</span< sp an> 我是 sp an3 </sp an></div><span></span></body>script type="text/javascript

19、'$ （vspanohtml （"我是p先生楼下紧邻的码友"）；</script>在浏览器中显示的效果：2.9 prev siblings 选择器与上一节屮介绍的prev + next层次选择器相同，prev siblings选择器也是 查找prev元素z后的相邻元素，但前者只获取第一个相邻的元素，而后者则获 取prev元素后面全部相邻的元素，它的调用格式如下：$ ( "prev j siblings” ) 其屮参数prev与siblings两者z间通过符号形成一种层次相邻的关系, 表明siblings选择器获取的元素都是prev元素之后的同辈

20、元素。例如，使用prev nexl选择器，获取p>元素后面相邻的全部元素，并设置它 们在页面中显示的内容，如下图所示：<body><div>码农家族<span></ span><p></p><span></span><span></span></div><span></span></body><script type=,vtex七门刘址匚上匚卩七"$（vspan"）.html（w我们是p先生楼下的

21、码友j ;</script>在浏览器屮显示的效果:可以看出，调用$ （pspan）选择器代码，获取了p>元素下而两个（全部）的<span> 元素，该元素不包含邙>元素上面的元素和不属于同辈范围的元素。3. jquery过滤性选择器3.1:first过滤选择器木章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配, 书写时以“：”号开头，通常用于杳找集合元素中的某一位置的单个元素。在jquery屮，如果想得到一组相同标签元素屮的第1个元素该怎样做呢？在下面的示例代码中你可能注意到我们会使用$( uli:first")注意：书写时以号开头

22、。<body><div>改变第一行"橘子"文字颜色：</div> <ul><li> 橘子 </li><li> 香蕉 </li><li> 葡萄 </li>苹果 </li><li> 西瓜 </li></ul></body><script type=*text/javascript*>$(ti: first") css ("color", "red&q

23、uot;): </script>运行结果:-口 kj。:firsts-sfsx c d file:/e:/slnopjquery/ch2/l-l.html：j =改变第一行橘子"文字颜色：橘子 香蕉 葡萄4 4 e 平果 西瓜使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获 取指定的一组元索中的第一个元索。:last3.2 :eq(index)过滤选择器如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用:eq (index)其中参数index表示索引号(b

24、p： 一个整数)，它从0开始，如果index的值为 3,表示选择的是第4个元素。例如：<body><div>改变中间行"苹果"文宁颜色：</div><ul><li> 橘子 </li><li> 香 k/li>葡萄 </li><li> 苹果 </li><li> 西瓜 </li></ul></body><script type=，vtext/javascript">$ (" l

25、i: eq(3)") css (" color", “ red");</script>在浏览器中显示的效果:从图小可以看出，通过调用$(li:cq(3)过滤选择器代码，获取了第4个li> 元索，并使用css()方法设置了该元索在页面屮显示的文字样式。3.3 :contains(text)过滤选择器与上一节介绍的:eq (index)选择器按索引查找元素相比，有时候我们可能希望按 照文本内容來查找一个或多个元素，那么使用：contains (text)选择器会更加方 便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，

26、获取包含“text”字符串内容的全部元素对彖。其中参数text表示页面中的文 字。例如：<body><div>改变包含"土聂"宁符内容的颜色：</div> <ul><li>我是土聂一族</li><li>我是手机一族</li><h> 土聂就是我</li><h>我是奋斗一族</li><h> 土族我最爱</li></ul></body><script type="text/j

27、avascript">$ c' li: contains (? 土寿)") css ("color", "red"); </script>:contain s(text)qi®s x- c 0 file:/e:/slnopjquery/ch2/4-l.html三改变包含土豪"字符內容的颜色：我是土豪一族我是手机一族 ' 土豪'就是我我是奋斗一族 土族我最爱从图中可以看出，调用1 i: contains c±豪'）代码，可以很方便地获取li中包 含'

28、土豪'字符内容的全部元素，并且只要与选择的元素中或了元素中包含该字 符内容，就可以被选中。注意：li:containsc±豪'）土豪为什么必须加单引号呢？因为它是一个字符串, 而不是一个变量，所以不加单或双引号的话是会报错的。5. jquery操作d0m元素5.1使用attr（）方法控制元素的属性attr（）方法的作用是设置或者返回元素的屈性，其中attr（®性名）格式是获取 元素屈性名的值，（屈性名，屈性值）格式则是设置元素屈性名的值。例如，使用attr（性名）的格式获取页而屮0元素的“href”屈性值，并将该 值的内容显示在span元素中，如下图所示：&

29、lt;body><h3>attr ()方法获取元素属性</h3><a h"f二"hi:td：/127 0 0 1" id二"al">点我就走</a> <div>我要去的地方是：<span id=<*tip*></span></div> <script type="text/javascript"> var $url = $attr("href");$ (" #t ip"

30、;). html ($url):</script></body>从图屮可以看岀，通过attr()方法可以方便地获取元索屮指定属性名称的内容, 并将获取的内容通过html()方法显示在页面中。5.2操作元素的内容使用html ()和tcxt()方法操作元素的内容，当两个方法的参数为空时，表示获 取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。例如，分别使用html ()和text()方法获取一个元索的内容，并将获取的内容显 示在不同的div元素中，如下图所示：<body><h3>html ()和text ()方法获取元素内容&l

31、t;/h3><div id=，v cont ent "><i> 我的身体有点歪哦 </i></div> < div i d= “ htmlx/ div><div id二气 ext"x/div><script type="t ext/javascript">var $html = $ (，v#cont ent"). html (): var $t ext = $ (，v#cont ent"). t ext (): $c#htjnlw).html($

32、html): $ ("#t ext"). t ext ($t ext);</script></body>在浏览器屮显示的效果:c d file:/e:/slnopjquery/ch4/2-l.html 三html ()和text ()方法获取元素内容卜这是原文内咨我的身体有点歪哦 我的身体有点歪峨 我的身体有点歪哦从图中可以看hl, htmlo方法可以获取元素的html内容，|大i此，原文中的格式 代码也被一起获取，rfo' tcxto方法只是获取元素中的文本内容，并不包含html 格式代码，所以它显示的内容并没有变“歪”。5.3操作元素的样

33、式通过addclasso和css()方法叮以方便地操作元素中的样式，前者括号中的参数 为壇加元索的样式名称，后者直接将样式的属性内容写在括号中。例如，使用addclasso方法，改变div>元素的背景色和文字颜色，如下图所示：<style type二"teict/css"divpadding: 8px;width: 180px: bluebackground-color: blue; whitecolor: wliite;</style></head><body><h3>addclass ()方法设置元素样式<

34、;/h3><div id二"cont ent" >我穿了 一件蓝色外衣div><script type="text/javascript">$ c' #cont ent") addclass (" blue whit e"):</script></body>|在浏览器屮显示的效果:从图中可以看出，通过addclasso方法为div元素增加了两个样式名称，从而 改变了div元素的背景和文字颜色，增加多个样式名称时，要用空格隔开。css()方法和addclass

35、方法用法类似，只是需要去设置具体样式了。设置单个 css 样式：$ (”#content") css ("background-color", "red");设置多个css样式，设置方式为json格式。即strl：str2，"str3":"str4$ (#content). css (，zbackground-color" :red", "color" :#fff )5.4移除属性和样式使用removeattr (name)和removeclass (class)分别可以实现

36、移除元素的属性和 样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样 式名 例如，使用removeattr()方法移除o元索中的“href”属性，如下图所示:<body><h3 > remove at t r ()方法移除元素.属性</h3><a h"f="httd：/127cici 1" id二"al">点我裁走</a> <div>我要去的地方是：<span id=" tip'' ></span><

37、;/div> <script type="text/javascript">$ (，v#arv) removeattr ("href");var $url = $(“#al") attr ("href"); $ c'#tip"). html ($url):</script></body>在浏览器中显示的效果:从图中口j以看出，使用removeattr()方法移除元索的“href”属性后，再次显 示元素的“href”屈性值时，则为空值，a元素中的文字也丢失可点击的效杲

38、。5.5使用append()方法向元素内追加内容append (content)方法的功能是向指定的元素中追加内容，被追加的content参 数，可以是字符、html元素标记，还可以是一个返冋字符串内容的函数。例如，在页面的<body>元素中追加一个貝有“id”、“title”屈性和显示内容 的div>元素,如下图所示:<body><h3>append ()方法追加內咨</h3><script type=<vtext/j avascriptvar $html=rf<div id=? test? title=? hi? &g

39、t;我是动态创建的</div>"$("body") append ($html):</script></body>在浏览器中显示的效果:& c d file:/e:/slnopjquery/ch4/5-2.html 三append ()方法追加内容我是调用醪创建的i ib、一 从图中可以看岀，rtt丁使用append()方法在body元素中追加了一些html元素 标记，因此追加后，这些元素标记直接生成对应的元素和属性显示在页面中。追加一个函数：<body><h3>append()方法追加内容<

40、;/h3><script type=mtext/javascriptm>function rethtml() var $html = m<div id=,test, title=,hii>我是调用函数创建的</div>m return $html;$(” body m)append(rethtml();</script></body>56使用appendto()方法向被选元素内插入内容appendto()方法也可以向指定的元素内插入内容，它的使用格式是：$(content) appendto (selector)参数conten

41、t农示需要插入的内容，参数selector农示被选的元素，即把 content内容插入selector元素内，默认是在尾部。例如，使用appendto()方法，将div夕卜的span元素插入div内，如下图所<body><h3>appendto ()方法插入内容</h3><div><span class="greens</span> </div><span class="red">小免子</span <script type二气ext/javascript&quo

42、t; $ (" red") appendto ("div"):</script></body>在浏览器中显示的效杲:appendtoo方法追加内乏x c file:/e:/slnopjquery/ch4/6-l.html 三 iappendto ()方法插入内容从图小可以看出，使用appendto()方法将类别名为“red”的span元素插入到 div元索的尾部，相当于追加的效果。调用appendto()方法将定义的字符串变量插入指定元素内<body><h3>appendto()方法插入内容 </h3

43、><div><span class=mgreenm>ds-j </span></div><script type=mtext/javascriptm>var $html = *'<span class=,red, >小青蛙</span> $($html). appendto( mdiv*');</script>|</bodv>5.7使用before()和after()在元素前后插入内容使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整

44、个 元素的前面和后面插入指定的元素或内容，调用格式分别为：$ (selec tor) before (co nt ent)和$ (selector) after (content)其中参数content表示插入的内容，该内容可以是元素或html字符吊。例如，调用before()方法在一个<span>元索插入另一个<span>元索，如下图所 示：<body><h3>bef o"()方法在元素之前插入内咨</h3><span class=" green">我们交个朋友吧！ </span>

45、;<script tyi：ie=rrt ext/javascript，v>var $html 二 *' <span class=red'>土聂，</span>a$(" green")before;</script></body>在浏览器中显示的效杲:从图中口j以看出，使用before ()方法将html格式的内容插入到原有xspan>元索 内容z前，而并不仅是它的内部文木。5.8使用clone。方法复制元素调用clone()方法可以生成一个被选元素的副木，即复制了一个被选元素，包含 它的节点、

46、文本和属性，它的调用格式为：$ (selector) clone ()其中参数selector可以是一个元素或html内容。例如，使用clone()方法复制页面屮的一个<span>元索，并将复制后的元素追加 到页面的后面，如下图所示：<body><h3>使用clone ()方法复制元素</h3><span class二"red" title二"hi"我是美猴王</span><script type=，yt ext/javascript >$ ("body")

47、 append($ (" red") clone ();</script></body>在浏览器屮显示的效果:r d 映。2 一<-c _ file:/e:/slnopjquery/ch4/8-l.html=使用clone ()方法复制元素原有元素夏制后新追加的元素从图中可以看出，使用clone()方法复制元素时，不仅复制了该元素的文本和节 点，还将它的“title”屈性也一起复制过来了。5.9替换内容replacewi th()和replaceal 1 ()方法都町以用于替换元索或元索中的内容，但它 们调用时，内容和被替换元索所在的位置不同，

48、分别为如下所示：$ (selector) replacewith (content)和$ (content) replaceall (selector)参数selector为被替换的元索，content为替换的内容。例如，调用replacewith()方法将页面中<span>元素替换成一段html字符串， 如下图所示：<body><h3>使用replacewith ()方法替换元素内容</h3><span class=" green" title="hi，v>我是扁丝</span><sc

49、ript type="text/javascript">var $html = "<span class=? red" title=? hi? >我是土</span>" $(" green") replacewith($html);</script></body>在浏览器中显示的效果:czjd，吏用替淇元素和內容xc file:/e:/slnopjquery/ch4/9-l.html e使用replacewith ()方法替换元素内容我是属丝我是土豪替换后替换前从图屮可以

50、看出，使用replacewitho方法替换类别名为“green”的span元 素，替换之后，旧元素完全由新替换的元素所取代。使用replaceallo方法替换元素<body>使用replaceall()方法昔换元素内容</h3><span class="greenm title="hi">我是属丝</span><script type=,text/javascript">var $html = m<span class='red' title= * hi1 >我是土豪

51、 </span>m;$($html) ,replaceall(n .green*');</script></body>5.10使用wrap()和wraplnner()方法包裹元素和内容wrap()和wraplnncr ()方法都可以进彳亍元素的包裹，但前者用于包裹元素本身, 后者则用于包裹元素中的内容，它们的调用格式分别为：$ (selector) wrap (wrapper)和$ (selector) wraplnner (wrapper) 参数selector为被包裹的元素，wrapper参数为包裹元素的格式。 例如，调用wrap。方法,将<

52、;span>用div>元素包裹起來,如下图所示: <body><h$>使用wrap ()方法包裏元素</h3><span class=" red"' t itle="'hi" >我被绿丝带包h 7 </span><script type=，ytext/javascript'v>$ (" red") wrap (，v<div></div>"):</script></body>

53、;在浏览器中显示的效果:从图中可以看出，红色区域的span元素被蓝色边框的div元素通过wrap ()方 法包裹起来。5.11使用each()方法遍历元素使用each()方法可以遍历指定的元素集合，在遍历时，通过冋调函数返冋遍历 元素的序列号，它的调用格式为：$ (selector) each(function(index)参数function为遍历时的冋调函数，index为遍历元素的序列号，它从0开始。例如，遍历页血中的span元素，当元素的序列号为2时，添加名为“focus” 的样式，如下图所示：<body><h3>使用each ()方法遍历元素</h3>

54、;<span class=，v green" >§</span><span class=，v green" </span><span class=，v green" >ffl ® </span>span class=，v green"ft </span><script type=，vtext/javascript" >$ ("span") each(funct ion (index) if (index = 2) $

55、(this) addclass("focus"): )；</script></body>在浏览器中显示的效果：亠i = i 回p 使用昂ch0方法遍万元素 ；c d file:/e:/slnopjquery/ch4/ll-l.html 三使用each()方法遍历元素香產桃子i葡萄荔枝从图屮可以看岀，在使用each()方法遍历span元素时，回调函数屮的“index” 参数为元素的序列号，它从0开始，当为2时,表示第3个span元素增加样式。5.12使用removeoo empty(防法删除元素remove ()方法删除所选元素木身和了元素，该方法可以

56、通过添加过滤参数指定需 要删除的某些元素，而empty ()方法则只删除所选元素的了元素。例如，调用remove()方法删除span元素屮类别名为“red”的，如下图所示:<body>使用remove ()方法刪除元素</h3> <span class=<，green'>§sb</span> <span class二"ted">桃子 </span> span class=，vgreen，v >ffi §</span> span class二"

57、red">荔枝</3戸曲 <script type='ftext/javascript ">$ (" span") remove (" red");</script></body>在浏览器屮显示的效果:从图中可以看出，使用remove（，z. red"）方法只是把span元素屮类别名为“red” 的这部分元素给删除了。使用empty ()方法删除全部<span>元素的子元素内容。<body>使用empty ()方法删|远；素</乜>

58、<span class=mgree香蕉</5pmn> <span class=r,greenm</span> <span class=mgreen*'></span> <span class=mgreenm></span><script type=mtext/javascriptn> $(mspanm).empty(h.green”)； </script></body>使用empty 0方法删除元素6jquery事件与应用6.1页面加载时触发ready()事件read

59、y ()事件类似于onload ()事件，但前者只要页面的dom结构加载后便触发, 而后者必须在页面全部元素加载成功才触发,ready ()可以写多个，按顺序执行。 此外，下列写法是相等的：$ (document). ready (function () )等价于$ (function () );例如，当触发页面的ready ()事件时，在<div>元素中显示一句话。如下图所示：<body><h3>页面载入时触发ready ()事件</h3><div id="tip"></div><script

60、type="t ext/javascript >$(document)ready(function () $r#tipw).htmir我被加载了!、)；</script>在浏览器中显示的效果:从图中可以看出，当页面的dom框架完成加载后，便触发ready 0事件，在该事 件中，通过id号为“lip”的元素，调用html ()方法在页面中显示一段字符。在ready ()事件屮，绑定一个按钮的单击事件。<body><h3>页面载入时触发ready ()事件</h3><div id=mtipmx/div><input

61、id="btntestm type=hbutton1' value=m点下我"/><script type=htext/javascripth> $(function() $(m#btntestm) bind( r,clickh，function $(m#tipm).html(-我被点击了 ！ ”)； )；|)；</script></body>页面载入时触发readyo事件我被点击了!i点下我6.2使用bind。方法绑定元素的事件bindo方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定 的事件名称，事件屮执行的函数内容就可以，它的绑定格式如下：$(selector)bind(event, data function) 参数event为事件名称，多个事件名称用空格隔开function为事件执行的函 数。例如，绑定按钮的单击事件，单击按钮吋，该按钮变为不可用。如下图所示：<body&

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论