﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>IT博客网-asfman-文章分类-jquery</title><link>http://www.cnitblog.com/asfman/category/6665.html</link><description>有些人注定要生活在彼岸 可以亲近可以爱怜 甚至可以穷尽一生去思念 只是无法触及 有些距离 注定不能跨越 只能俩俩相望 就像有些爱只能养在心里 长在眼中 不要捧在手里 放在身边 注定只能邂逅 无法遭遇</description><language>zh-cn</language><lastBuildDate>Tue, 18 Dec 2007 16:32:59 GMT</lastBuildDate><pubDate>Tue, 18 Dec 2007 16:32:59 GMT</pubDate><ttl>60</ttl><item><title>selectors</title><link>http://www.cnitblog.com/asfman/articles/37848.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Tue, 18 Dec 2007 14:44:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37848.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37848.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37848.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37848.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37848.html</trackback:ping><description><![CDATA[E&gt;F表示匹配所有子元素，所有儿子<br>E F表示匹配所有子孙<br>E+F如果一个元素 E 直接在元素 F 之前，则匹配元素 F div+p p是div的直接兄弟<br>E~F E的所有兄弟F
<img src ="http://www.cnitblog.com/asfman/aggbug/37848.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-18 22:44 <a href="http://www.cnitblog.com/asfman/articles/37848.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>load news</title><link>http://www.cnitblog.com/asfman/articles/37734.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Sat, 15 Dec 2007 08:19:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37734.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37734.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37734.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37734.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37734.html</trackback:ping><description><![CDATA[<p>$("#test").click(GetNews);<br>function GetNews() <br>{ <br>　$(this).html("Loading News......"); <br>　$.ajax({ <br>　type:"post", <br>　<a href="http://www.cnitblog.com/asfman/admin/%22load.htm">url:"load.htm</a>", <br>　dataType:"html", <br>　data:"", <br>&nbsp; ifModified:true,<br>　success:function(result) <br>　{<br>　&nbsp;$("#test").html(result); <br>　} <br>}</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37734.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-15 16:19 <a href="http://www.cnitblog.com/asfman/articles/37734.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>关于泄漏</title><link>http://www.cnitblog.com/asfman/articles/37683.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Fri, 14 Dec 2007 00:54:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37683.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37683.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37683.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37683.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37683.html</trackback:ping><description><![CDATA[<p>经ie7测试 <br>function myButton()<br>{<br>&nbsp;&nbsp;&nbsp; var container=document.createElement("button");<br>&nbsp;&nbsp;&nbsp; /*container.style......*/<br>&nbsp;&nbsp;&nbsp; var text=document.createElement("button");<br>&nbsp;&nbsp;&nbsp; /*text.style......text.innerText......*/</p>
<p>&nbsp;&nbsp;&nbsp; text.onclick=EventBuilder(container);<br>&nbsp;&nbsp;&nbsp; //在这里无论是上面这种写法还是直接写function(){}结果占用内存都一样<br>&nbsp;&nbsp;&nbsp; //只有直接引用外部函数如text.onclick=EventBuilder才能释放button对象,减少内存<br>&nbsp;&nbsp;&nbsp; document.body.appendChild(container);<br>&nbsp;&nbsp;&nbsp; document.body.appendChild(text);<br>&nbsp;&nbsp;&nbsp; //如果onmouseover中我没有用到container 当然可以用 text=null container=null来打破循环引用<br>&nbsp;&nbsp;&nbsp; //经测试用null打不破循环<br>} </p>
<p>function EventBuilder(container)<br>{<br>&nbsp;&nbsp;&nbsp; return function(e)<br>&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(container)//这里container可访问<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text=this;//用this访问自身<br>&nbsp;&nbsp;&nbsp; }<br>} <br>for(var i =0;i&lt;5000;i++)<br>myButton()<br>//conclusion<br>闭包使返回的内部函数持有私有变量，所以此私有变量持有的dom对象不能被回收。<br>（被回收的条件：1。 没有context 2。没有被引用 ）<br>不内部写function。把内部变量传递给外部函数闭包返回不能解决问题。<br>所以唯一的方法是直接引用外部函数，如text.onclick = outFunc;</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37683.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-14 08:54 <a href="http://www.cnitblog.com/asfman/articles/37683.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css selector</title><link>http://www.cnitblog.com/asfman/articles/37659.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Thu, 13 Dec 2007 02:33:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37659.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37659.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37659.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37659.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37659.html</trackback:ping><description><![CDATA[<h2>CSS Selectors </h2>
<p>jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression. </p>
<p>For info on how CSS works feel free to read the various links: </p>
<ul lastCheckbox="null">
    <li><a class="external text" title=http://www.w3.org/TR/REC-CSS1#basic-concepts href="http://www.w3.org/TR/REC-CSS1#basic-concepts"><u><font color=#0000ff>CSS 1</font></u></a>
    <li><a class="external text" title=http://www.w3.org/TR/REC-CSS2/selector.html href="http://www.w3.org/TR/REC-CSS2/selector.html"><u><font color=#0000ff>CSS 2</font></u></a>
    <li><a class="external text" title=http://www.w3.org/TR/2005/WD-css3-selectors-20051215/ href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/"><u><font color=#0000ff>CSS 3</font></u></a> </li>
</ul>
<p>What follows is a list of supported CSS Selector expressions. </p>
<ul lastCheckbox="null">
    <li><strong>*</strong> any element
    <li><strong>E</strong> an element of type E
    <li><strong>E:nth-child(n)</strong> an E element, the n-th child of its parent
    <li><strong>E:first-child</strong> an E element, first child of its parent
    <li><strong>E:last-child</strong> an E element, last child of its parent
    <li><strong>E:only-child</strong> an E element, only child of its parent
    <li><strong>E:empty</strong> an E element that has no children (including text nodes)
    <li><strong>E:enabled</strong> a user interface element E which is not disabled
    <li><strong>E:disabled</strong> a user interface element E which is disabled
    <li><strong>E:checked</strong> a user interface element E which is checked (for instance a radio-button or checkbox)
    <li><strong>E:selected</strong> a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery
    <li><strong>E.warning</strong> an E element whose class is "warning"
    <li><strong>E#myid</strong> an E element with ID equal to "myid". (Will only match, at most, one element.)
    <li><strong>E:not(s)</strong> an E element that does not match simple selector s
    <li><strong>E F</strong> an F element descendant of an E element
    <li><strong>E &gt; F</strong> an F element child of an E element
    <li><strong>E + F</strong> an F element immediately preceded by an E element
    <li><strong>E ~ F</strong> an F element preceded by an E element
    <li><strong>E,F,G</strong> select all E elements, F elements, and G elements </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported, but different" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=4"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported.2C_but_different></a>
<h3>Supported, but different </h3>
<p>All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an <strong>@</strong> symbol). </p>
<ul lastCheckbox="null">
    <li><strong>E[@foo]</strong> an E element with a "foo" attribute
    <li><strong>E[@foo=bar]</strong> an E element whose "foo" attribute value is exactly equal to "bar"
    <li><strong>E[@foo^=bar]</strong> an E element whose "foo" attribute value begins exactly with the string "bar"
    <li><strong>E[@foo$=bar]</strong> an E element whose "foo" attribute value ends exactly with the string "bar"
    <li><strong>E[@foo*=bar]</strong> an E element whose "foo" attribute value contains the substring "bar"
    <li><strong>E[@foo=bar][@baz=bop]</strong> an E element whose "foo" attribute value is exactly equal to "bar" and whose "baz" attribute is exactly equal to "bop" </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Not supported" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=5"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Not_supported></a>
<h3>Not supported </h3>
<p>jQuery only supports selectors that actually select DOM elements - everything else is ignored. </p>
<ul lastCheckbox="null">
    <li><strong>E:link</strong>
    <li><strong>E:visited</strong> an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
    <li><strong>E:active</strong>
    <li><strong>E:hover</strong>
    <li><strong>E:focus</strong> an E element during certain user actions
    <li><strong>E:target</strong> an E element being the target of the referring URI
    <li><strong>E::first-line</strong> the first formatted line of an E element
    <li><strong>E::first-letter</strong> the first formatted letter of an E element
    <li><strong>E::selection</strong> the portion of an E element that is currently selected/highlighted by the user
    <li><strong>E::before</strong> generated content before an E element
    <li><strong>E::after</strong> generated content after an E element </li>
</ul>
<p>jQuery doesn't support the following selectors due to their lack of real-world usefulness: </p>
<ul lastCheckbox="null">
    <li><strong>E:nth-last-child(n)</strong> an E element, the n-th child of its parent, counting from the last one
    <li><strong>E:nth-of-type(n)</strong> an E element, the n-th sibling of its type
    <li><strong>E:nth-last-of-type(n)</strong> an E element, the n-th sibling of its type, counting from the last one
    <li><strong>E:first-of-type</strong> an E element, first sibling of its type
    <li><strong>E:last-of-type</strong> an E element, last sibling of its type
    <li><strong>E:only-of-type</strong> an E element, only sibling of its type
    <li><strong>E:lang(fr)</strong> an element of type E in language "fr"
    <li><strong>E[foo~="test"]</strong> an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "test"
    <li><strong>E[hreflang|="en"]</strong> an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Context and Anchoring" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=6"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Context_and_Anchoring></a>
<h3>Context and Anchoring </h3>
<p>In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function <code>$(expr, context)</code>. You can anchor a CSS-like expression to the context root by starting it with one of the selectors <code>&gt;</code>, <code>+</code>, or <code>~</code>. </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: XPath Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=7"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=XPath_Selectors></a>
<h2>XPath Selectors </h2>
<p>One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic <a class="external text" title=http://www.w3.org/TR/xpath href="http://www.w3.org/TR/xpath"><u><font color=#0000ff>XPath expressions</font></u></a>, in addition to CSS 1-3. Here are some samples: </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Location Paths" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=8"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Location_Paths></a>
<h3>Location Paths </h3>
<ul>
    <li>Relative to the entire HTML document </li>
</ul>
<pre> $("/html/body//p")
$("body//p")
$("p/../div")
</pre>
<ul>
    <li>Relative to the context node <code>this</code> </li>
</ul>
<pre> $("p/*", this)
$("/p//a", this)
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Axis Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=9"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Axis_Selectors></a>
<h3>Supported Axis Selectors </h3>
<ul>
    <li><strong>Descendant</strong> Element has a descendant element </li>
</ul>
<pre> $("//div//p")
</pre>
<ul>
    <li><strong>Child</strong> Element has a child element </li>
</ul>
<pre> $("//div/p")
</pre>
<ul>
    <li><strong>Preceding Sibling</strong> Element has an element before it, on the same axes </li>
</ul>
<pre> $("//div ~ form")
</pre>
<ul>
    <li><strong>Parent</strong> Selects the parent element of the element </li>
</ul>
<pre> $("//div/../p")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Predicates" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=10"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Predicates></a>
<h3>Supported Predicates </h3>
<ul>
    <li><strong>[@foo]</strong> Has an attribute of foo </li>
</ul>
<pre> $("//input[@checked]")
</pre>
<ul>
    <li><strong>[@foo='test']</strong> Attribute foo is equal to test </li>
</ul>
<pre> $("//a[@ref='nofollow']")
</pre>
<ul>
    <li><strong>[Nodelist]</strong> Element contains a node list, for example: </li>
</ul>
<pre> $("//div[p]")
$("//div[p/a]")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Predicates, but differently" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=11"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Predicates.2C_but_differently></a>
<h3>Supported Predicates, but differently </h3>
<ul>
    <li><strong>[last()] or [position()=last()]</strong> becomes <strong>:last</strong> </li>
</ul>
<pre> $("p:last")
</pre>
<ul>
    <li><strong>[0] or [position()=0]</strong> becomes <strong>:eq(0) or&nbsp;:first</strong> </li>
</ul>
<pre> $("p:first")
$("p:eq(0)")
</pre>
<ul>
    <li><strong>[position() &lt; 5]</strong> becomes <strong>:lt(5)</strong> </li>
</ul>
<pre> $("p:lt(5)")
</pre>
<ul>
    <li><strong>[position() &gt; 2]</strong> becomes <strong>:gt(2)</strong> </li>
</ul>
<pre> $("p:gt(2)")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=12"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Custom_Selectors></a>
<h2>Custom Selectors </h2>
<p>jQuery includes some expressions that aren't available in either CSS or XPath, but were found to be very handy, so were included. </p>
<p>The following expressions' syntax is based upon the various CSS selectors, of similar names. </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=13"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Custom_Selectors_2></a>
<h3>Custom Selectors </h3>
<ul lastCheckbox="null">
    <li><strong>:even</strong> Selects every other (even) element from the matched element set.
    <li><strong>:odd</strong> Selects every other (odd) element from the matched element set.
    <li><strong>:eq(0) and&nbsp;:nth(0)</strong> Selects the Nth element from the matched element set
    <li><strong>:gt(N)</strong> Selects all matched elements whose index is greater than N.
    <li><strong>:lt(N)</strong> Selects all matched elements whose index is less than N.
    <li><strong>:first</strong> Equivalent to <strong>:eq(0)</strong>
    <li><strong>:last</strong> Selects the last matched element.
    <li><strong>:parent</strong> Selects all elements which have child elements (including text).
    <li><strong>:contains('test')</strong> Selects all elements which contain the specified text.
    <li><strong>:visible</strong> Selects all visible elements (this includes items that have a display of block or inline, a visibility of visible, and aren't form elements of type hidden)
    <li><strong>:hidden</strong> Selects all hidden elements (this includes items that have a display of none, or a visibility of hidden, or are form elements of type hidden) </li>
</ul>
<p>Some examples: </p>
<pre> $("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("/div:contains('test')", this).hide();
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Form Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=14"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Form_Selectors></a>
<h3>Form Selectors </h3>
<p>There are a few selectors for form elements: </p>
<ul lastCheckbox="null">
    <li><strong>:input</strong> Selects all form elements (input, select, textarea, button).
    <li><strong>:text</strong> Selects all text fields (type="text").
    <li><strong>:password</strong> Selects all password fields (type="password").
    <li><strong>:radio</strong> Selects all radio fields (type="radio").
    <li><strong>:checkbox</strong> Selects all checkbox fields (type="checkbox").
    <li><strong>:submit</strong> Selects all submit buttons (type="submit").
    <li><strong>:image</strong> Selects all form images (type="image").
    <li><strong>:reset</strong> Selects all reset buttons (type="reset").
    <li><strong>:button</strong> Selects all other buttons (type="button").
    <li><strong>:file</strong> Selects all &lt;input type="file"&gt;. </li>
</ul>
<p>Also available is <strong>:hidden</strong>, see the description above for details. </p>
<p>It is recommended to provide a context when using the above: </p>
<pre> $('#myForm&nbsp;:input')
</pre>
<p>Or, if you have already a reference to your form: </p>
<pre> $('input:radio', myForm)
</pre>
<p>This would select all input elements of type radio inside myForm. Using&nbsp;:radio is mostly the same as [@type=radio], but should be slightly faster. Good to know when working with large forms</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37659.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-13 10:33 <a href="http://www.cnitblog.com/asfman/articles/37659.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>