属性 我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById（"a"）取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery里$（"#a"）将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$（"#a"）.scr（）将得到5.jpg,$（"#a"）.scr（"1.jpg"）将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作herf（） herf（val） 说明：对jQuery对象属性herf的操作。 < a href ="1.htm" id ="test" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " #test " ）.href（））; " #test " ）.href（ " 2.html " ）; 运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.htmlherf（） herf（val） html（） html（val） id（） id （val） name（） name （val） rel（） rel （val） 操作 after（html） 在匹配元素后插入一段html < a href ="#" id ="test" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " #test " ）.after（ " <b>Hello</b> " ）; 执行后相当于： < a href ="#" id ="test" onClick ="jq（）" > jQuery </ a >< b > Hello </ b > after（elem） after（elems） 将指定对象elem或对象组elems插入到在匹配元素后 < p id ="test" > after </ p >< a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能 function jq（）{ " a " ）.after（$（ " #test " ））; 执行后相当于 < a href ="#" onClick ="jq（）" > jQuery </ a >< p id ="test" > after </ p > append（html）在匹配元素内部，且末尾插入指定html < a href ="#" id ="test" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ < b > Hello </ b > "）; 执行后相当于 < a href ="#" onClick ="jq（）" > jQuery < b > Hello </ b ></ a > 同理还有append（elem） append（elems） before（html） before（elem） before（elems）请执行参照append和after的方来测试、理解！ap pendTo（expr） 与append（elem）相反 < p id ="test" > after </ p >< a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能 function jq（）{ " a " ）. appendTo （$（ " #test " ））; 执行后相当于 < p id ="test" > after < a href ="#" onClick ="jq（）" > jQuery </ a > </ p > clone（） 复制一个jQuery对象 < p id ="test" > after </ p >< a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " #test " ）.clone（）.appendTo（$（ " a " ））; 复制$（"#test"）然后插入到<a>后,执行后相当于 < p id ="test" > after </ p >< a href ="#" onClick ="jq（）" > jQuery </ a >< p id ="test" > after </ p > empty（） 删除匹配对象的所有子节点 < div id ="test" > < span > span </ span > < p > after </ p > </ div > < a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " #test " ）.empty（）; 执行后相当于 < div id ="test" ></ div >< a href ="#" onClick ="jq（）" > jQuery </ a > insertAfter（expr） insertBefore（expr） prepend （html） prepend （elem） prepend （elems） 在匹配元素的内部且开始出插入 < p id ="a" > p </ p > < div > div </ div > 执行 $（"#a"）.append（$（"div"）） 后相当于 < p id ="a" > < div > div </ div > </ p > 执行 $（"#a"）.appendTo（$（"div"）） 后 相当于 < div > < p id ="a" > p </ p > </ div > 执行 $（"#a"）.prepend （$（"div"）） 后 相当于 < p id ="a" > < div > div </ div > </ p > remove（） 删除匹配对象 < p > Test Paragraph. </ p > < a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " p " ）.wrap（ " <div class="wrap"></div> " ）; 执行后相当于 < div class ="wrap" >< p > Test Paragraph. </ p ></ div > wrap（elem） 将匹配对象包含在给出的对象内 < p > Test Paragraph. </ p >< div id ="content" ></ div > < a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ " p " ）.wrap（ document.getElementById（"content"） ）; 执行后相当于 < div id ="content" >< p > Test Paragraph. </ p ></ div > 遍历、组合 add（expr） 在原对象的基础上在附加符合指定表达式的jquery对象 < p > Hello </ p >< p >< span > Hello Again </ span ></ p >< a href ="#" onClick ="jq（）" > jQuery </ a > jQuery代码及功能： function jq（）{ var f = $（ " p " ）.add（ " span " ）; for （ var i = 0 ;i < $（f）.size（）;i ++ ）{ 执行$（"p"）得到匹配<p>的对象，有两个，add（"span"）是在（"p"）的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$（"p"）.add（"span"）是3个对象的集合，分别是[<p>Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。add（el） 在匹配对象的基础上在附加指定的dom元素。 add（els） 在匹配对象的基础上在附加指定的一组对象，els是一个数组 。< p > Hello </ p >< p >< span > Hello Again </ span ></ p > jQuery代码及功能： function jq（）{ var f = $（ " p " ）.add（[document.getElementById（ " a " ）, document.getElementById（ " b " ）]） for （ var i = 0 ;i < $（f）.size（）;i ++ ）{ 注意els是一个数组，这里的[ ]不能漏掉。ancestors （） 一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了） < div > < p > one </ p > < span > < u > two </ u > </ span > </ div > jQuery代码及功能： function jq（）{ var f = $（ " u " ）.ancestors（）; for （ var i = 0 ;i < $（f）.size（）;i ++ ）{ 第一个对象是以<u>的父节点的内容为对象，[ <u>two</u> ]ancestors （expr） 在ancestors（）的基础上之取符合表达式的对象 children（） 返回匹配对象的子介点 < p > one </ p > < div id ="ch" > < span > two </ span > </ div > jQuery代码及功能： function jq（）{ " #ch " ）.children（）.html（））; $（"#ch"）.children（）得到对象[ <span>two</span> ].所以.html（）的结果是”two”children（expr） 返回匹配对象的子介点中符合表达式的节点 < div id ="ch" > < span > two </ span > < span id ="sp" > three </ span > </ div > jQuery代码及功能 function jq（）{ " #ch " ）.children（“#sp”）.html（））; $（"#ch"）.children（）得到对象[<span>two</span><span id="sp">three</span> ].parent （） parent （expr）取匹配对象父节点的。参照children帮助理解 contains（str） 返回匹配对象中包含字符串str的对象 < p > This is just a test. </ p >< p > So is this </ p > jQuery代码及功能： function jq（）{ " p " ）.contains（ " test " ）.html（））; $（"p"）得到两个对象，而包含字符串”test”只有一个。所有$（"p"）.contains（"test"）返回 [ <p>This is just a test.</p> ]end（） 结束操作,返回到匹配元素清单上操作前的状态 .filter（expr） filter（exprs） 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“[ ]” < p > Hello </ p >< p > Hello Again </ p >< p class ="selected" > And Again </ p > jQuery代码及功能： function jq（）{ " p " ）.filter（ " .selected " ）.html（）） $（"p"）得到三个对象，$（"p"）.contains（"test"）只返回class为selected的对象。find（expr） 在匹配的对象中继续查找符合表达式的对象 < p > Hello </ p >< p id ="a" > Hello Again </ p >< p class ="selected" > And Again </ p > Query代码及功能： function jq（）{ " p " ）.find（ " #a " ）.html（）） 在$（"p"）对象中查找id为a的对象。is（expr） 判断对象是否符合表达式,返回boolen值 < p > Hello </ p >< p id ="a" > Hello Again </ p >< p class ="selected" > And Again </ p > Query代码及功能： function jq（）{ " #a " ）.is（ " p " ））; 在$（"#a "）是否符合jquery表达式。next（） next（expr） 返回匹配对象剩余的兄弟节点 < p > Hello </ p >< p id ="a" > Hello Again </ p >< p class ="selected" > And Again </ p > jQuery代码及功能 function jq（）{ " p " ）.next（）.html（））; " p " ）.next（ " .selected " ）.html（））; $（"p"）.next（）返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象prev （） prev （expr） 参照next理解 not（el） not（expr） 从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。 < p > one </ p >< p id ="a" > two </ p > < a href ="#" onclick ="js（）" > jQuery </ a > jQuery代码及功能： function js（）{ " p " ）.not（document.getElementById（ " a " ））.html（））; " p " ）.not（“#a”）.html（））; $（"p"）由两个对象，排除后的对象为[<p>one</p> ]siblings （） siblings （expr） jquery匹配对象中其它兄弟级别的对象 < p > one </ p > < div > < p id ="a" > two </ p > </ div > < a href ="#" onclick ="js（）" > jQuery </ a > jQuery代码及功能： function js（）{ " div " ）.siblings（）.eq（ 1 ）.html（））; $（"div"）.siblings（）的结果实返回两个对象[<p>one</p>，<a href="#" onclick="js（）">jQuery</a> ]其他 addClass（class） 为匹配对象添加一个class样式 attr （name） 获取第一个匹配对象的属性 < img src ="test.jpg" />< a href ="#" onclick ="js（）" > jQuery </ a > jQuery代码及功能： function js（）{ " img " ）.attr（ " src " ））; 返回test.jpgattr （prop） 为第一个匹配对象的设置属性，prop为hash对象，用于为某对象批量添加众多属性 < img />< a href ="#" onclick ="js（）" > jQuery </ a > jQuery代码及功能： function js（）{ " img " ）.attr（{ src: " test.jpg " , alt: " Test Image " }）; 运行结果相当于<img src="test.jpg" alt="Test Image"/>attr （key,value） 为第一个匹配对象的设置属性，key为属性名，value为属性值 < img />< a href = " # " onclick = " js（） " > jQuery </ a > jQuery代码及功能 function js（）{ " img " ）.attr（“src”,”test.jpg”）; 运行结果相当于<img src="test.jpg"/>removeAttr （name） 将第一个匹配对象的某个属性移出 < img alt ="test" />< a href ="#" onclick ="js（）" > jQuery </ a > jQuery代码及功能： function js（）{ " img " ）. removeAttr（ " alt " ）; 运行结果相当于<img />toggleClass （class） 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象 < p > Hello </ p >< p class ="selected" > Hello Again </ p >< a href ="#" onclick ="js（）" > jQuery </ a > $（"p"）的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
收藏该网址
易网时代-编程资源站 
<p id="test">after</p><a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能 function jq（）{