<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>19~Blog &#124; &#187; jquery</title>
	<atom:link href="http://www.ll19.com/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ll19.com</link>
	<description>今天总是好过昨天~</description>
	<lastBuildDate>Fri, 02 Jul 2010 13:10:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>JQUERY记录:UI使用和cookie插件</title>
		<link>http://www.ll19.com/cookie-jqueryui.html</link>
		<comments>http://www.ll19.com/cookie-jqueryui.html#comments</comments>
		<pubDate>Mon, 27 Oct 2008 07:04:19 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Collect]]></category>
		<category><![CDATA[cookie]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.ll19.com/?p=129</guid>
		<description><![CDATA[jQuery记录:UI使用和cookie插件.

首先是cookie：不知道从哪里找的例子中带了一个jQuery.cookie的插件，没有仔细看代码只是大致看了下例子中的用法，可以直接在前台设置记录信息在cookie中。比如下面，每次都会记录用户上次访问的站点，打开时候ALERT。现在还没有想到站点有什么地方会用到，不过一定会有用的 = =。

1
2
$thispath = $_SERVER&#91;'HTTP_HOST'&#93;;
$thisurl = $_SERVER&#91;'REQUEST_URI'&#93;;


1
2
3
4
5
jQuery&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
var view_url = jQuery.cookie&#40;'view_url'&#41;;
alert &#40;view_url&#41;;
jQuery.cookie&#40;'view_url', &#34;&#60;?php echo &#34;http://&#34;.$thispath.$thisurl; ?&#62;&#34;);
&#125;&#41;



之后是jQuery.UI的一个应用：IPHONE用多了总是想去来回拖拽 = =，如果你用过wp-pagenavi这个插件就可以下载下面的那个UI例子来输出成下面的样子。这个JS想到哪写到哪的，= = 所以实现的可能有点幼稚~人生就是这样的~
 -= UI例子下载 =-  &#124;  -= cookie插件 =- 





]]></description>
		<wfw:commentRss>http://www.ll19.com/cookie-jqueryui.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JQUERY和XML</title>
		<link>http://www.ll19.com/jquery_xml_ajax.html</link>
		<comments>http://www.ll19.com/jquery_xml_ajax.html#comments</comments>
		<pubDate>Wed, 06 Aug 2008 10:11:20 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.ll19.com/?p=112</guid>
		<description><![CDATA[JQUERY.AJAX访问XML的问题.
不是直接.ajax访问.XML后缀的文件，而是访问对数据进行简单的封装了的xml字符串（对于一般复杂结构数据的传输，像查询出的记录）~比如我下面这段用dom4j生成的XML字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Response.setContentType&#40;&#34;text/html;charset=UTF-8&#34;&#41;;
&#160;
PrintWriter writer = Response.getWriter&#40;&#41;;
String PK_ID = Request.getParameter&#40;&#34;selectxmmc&#34;&#41;;
&#160;
Connection connection = null;
PreparedStatement statementQuery = null;
Document doc = DocumentHelper.createDocument&#40;&#41;;
&#160;
try &#123;
	connection = DatabaseHelper.getConnection&#40;componentManager&#41;;
	statementQuery = connection
			.prepareStatement&#40;&#34;select * from oa_sdsl_ss_xm where PK_ID = ?&#34;&#41;;
	statementQuery.setString&#40;1, PK_ID&#41;;
	ResultSet rs = statementQuery.executeQuery&#40;&#41;;
	Element root = doc.addElement&#40;&#34;root&#34;&#41;;
	while &#40;rs.next&#40;&#41;&#41; &#123;
		Element xm = root.addElement&#40;&#34;xm&#34;&#41;;
		Element dd = xm.addElement&#40;&#34;dd&#34;&#41;;
		dd.addText&#40;rs.getString&#40;&#34;xmdd&#34;&#41;&#41;;
		Element xmfr = xm.addElement&#40;&#34;xmfr&#34;&#41;;
		xmfr.addText&#40;rs.getString&#40;&#34;xmfr&#34;&#41;&#41;;
		Element jsdw = xm.addElement&#40;&#34;jsdw&#34;&#41;;
		jsdw.addText&#40;rs.getString&#40;&#34;jsdw&#34;&#41;&#41;;
	&#125;
	rs.close&#40;&#41;;
&#160;
	statementQuery.close&#40;&#41;;
	statementQuery = null;
	connection.commit&#40;&#41;;
	connection.close&#40;&#41;;
	connection = null;
&#160;
	writer.print&#40;doc.asXML&#40;&#41;&#41;;
	writer.close&#40;&#41;;
&#160;
&#125; catch &#40;Exception [...]]]></description>
		<wfw:commentRss>http://www.ll19.com/jquery_xml_ajax.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery-WordPress的全站Ajax加载</title>
		<link>http://www.ll19.com/jquery-wordpress-ajax.html</link>
		<comments>http://www.ll19.com/jquery-wordpress-ajax.html#comments</comments>
		<pubDate>Fri, 11 Jul 2008 21:15:37 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.ll19.com/?p=104</guid>
		<description><![CDATA[利用jQuery来简单实现WordPress的全Ajax加载.
现在站点已经完成了大部分链接的AJAX加载。我的做法是因为每次打开文章只需要SINGLE部分，打开首页面之类只需要INDEX部分，所以HEADER,SIDEBAR,FOOT就加载一次就行了。
在INDEX和SINGLE的相关部分加了一句：

1
2
3
4
5
6
7
8
9
10
11
&#60;?php 
$glll=$_POST&#91;&#34;glll&#34;&#93;;
if &#40;$glll != &#34;ajax&#34;&#41; &#123;
get_header&#40;&#41;; 
&#125;
?&#62;
&#60;?php 
if &#40;$glll != &#34;ajax&#34;&#41; &#123;
get_footer&#40;&#41;; 
&#125;
?&#62;

就是说判断什么时候来读取HEADER和FOOT，一般如果从搜索引擎或者其他链接进来是不会post一个值为ajax的参数glll的，所以我们在自己页面点击的时候就可以传这个参数进来判断他不去执行HEADER,SIDEBAR,FOOT之类了。
然后在HEADER的末尾

1
&#60;div id=&#34;ajaxPost&#34; style=&#34;margin:0; padding:0;&#34;&#62;

和FOOT的最上面

1
&#60;/div&#62;

这个ID叫ajaxPost的DIV就用做每次点击链接来替换相应内容，比如我首页输出了文章的标题链接我点击他来AJAX在当前页面：

1
2
&#60;!-- 这是我的文章标题链接 --&#62;
&#60;h2&#62;&#60;a href=&#34;&#60;?php the_permalink&#40;&#41;; ?&#62;&#34; id=&#34;entry-post-&#60;?php the_ID&#40;&#41; ?&#62;&#34;  title=&#34; Link to &#60;?php the_title&#40;&#41;; ?&#62; ...GL`LL.&#34;  name=&#34;PostID-&#60;?php the_ID&#40;&#41; ?&#62;&#34; rel=&#34;bookmark&#34;&#62;&#60;?php the_title&#40;&#41;; ?&#62;&#60;/a&#62;&#60;/h2&#62;


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
&#60;!-- 之后标题下直接添加相关JS --&#62;
&#60;script type=&#34;text/javascript&#34;&#62;
jQuery&#40;'#entry-post-&#60;?php the_ID() ?&#62;'&#41;.click&#40;function&#40;&#41; &#123;
&#60;!-- 点击之后再替换URL成&#34;#&#34;,因为我觉得链接是要全部输出来才好，毕竟要让搜索引擎收录的。 --&#62;
jQuery&#40;'#entry-post-&#60;?php the_ID() ?&#62;'&#41;.attr&#40;&#34;href&#34;,&#34;#&#34;&#41;;
&#60;!-- #ajaxPost 在加载成功前就显示等待加载之类的文字 --&#62;
document.getElementById&#40;&#34;ajaxPost&#34;&#41;.innerHTML = &#34;&#60;div  [...]]]></description>
		<wfw:commentRss>http://www.ll19.com/jquery-wordpress-ajax.html/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>站点的顺序（分段）加载</title>
		<link>http://www.ll19.com/jquery-wordpress.html</link>
		<comments>http://www.ll19.com/jquery-wordpress.html#comments</comments>
		<pubDate>Thu, 19 Jun 2008 13:19:57 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Collect]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.ll19.com/?p=102</guid>
		<description><![CDATA[利用jQuery来控制WordPress的加载显示顺序.



因为我就想把页面的这些DIV先显示出来（不加载东西，只在里面写些LOADING之类的文字），之后在根据重要的和不重要的依次加载。或者比如我这个页面很多的无聊内容可我又不想去掉些什么，页面太杂乱（快成试验田了），上面的很多FLASH之类（或者很多人的TOP会有比较大的图片）。所以顺序从上到下加载等显示出posts就会花些时间，必要的是先显示出posts部分之后再从上到下依次显示，虽然加载的内容还是一样多，但是能控制他的打开顺序也不错，起码这样速度慢的时候也让人有个盼头。
当时在网络搜索了一下类似的顺序加载方法，搜索到最多的无非就是说比如：

1
&#60;div id=&#34;top&#34;&#62;- Loading... -&#60;/div&#62;

之后在页面的最下部：

1
2
3
4
5
&#60;div id=&#34;topLoading&#34; style=&#34;display:none&#34;&#62;- 需要加载的具体内容 -&#60;/div&#62; 
&#160;
&#60;script type=&#34;text/javascript&#34;&#62;
document.getElementById&#40;&#34;top&#34;&#41;.innerHTML=document.getElementById&#40;&#34;topLoading&#34;&#41;.innerHTML;
&#60;/script&#62;

这样就可以把#top放在最后再加载了。这样做还是可以的，比如我先就把posts输出之后，footer里再把这些乱起八糟的都写上来输出top，sidebar这些。不过感觉效果不是特别好，还是想用jQuery。
我不知道我这想法对不对，因为试过了jQuery.load()和jQuery.ajax()这两个方法确实也能来用做顺序加载，但是这两个方法如果输出了JS输出的东西就会出错，比如我的FLASH是用JS输出的：

1
2
3
4
&#60;script language=&#34;JavaScript&#34;&#62;
var scrollWidth = document.body.scrollWidth;
writeflashhtml&#40;&#34;_swf=http://www.ll19.com/glll/flash/new/FootFlash.swf?scrollWidth=&#34;+scrollWidth, &#34;_height=45&#34; ,&#34;_wmode=transparent&#34;,&#34;_width=100%&#34;,&#34;_quality=high&#34;&#41;;
&#60;/script&#62;

这样在我LOAD完这部分把他赋给对应的DIV时就会出问题，要么显示不出来要么光显示这部分这个页面反而没了（在FF和IE的情况），所以最后用了clone(true)这个方法。 

API中clone(true)的解释：
元素以及其所有的事件处理并且选中这些克隆的副本，在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
true (Boolean) : 设置为true以便复制元素的所有事件处理。
所以就可以用这个判断是否加载完了一个文章了。
比如我的index页是类似这样写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
&#160;
&#60;?php 
$showIndexPost = &#34;&#34;;
?&#62;
&#160;
&#60;div id=&#34;posts-&#60;?php the_ID&#40;&#41; ?&#62;-text&#34;&#62;人生很多时候是需要等待的,对吧。&#60;font face=&#34;Tahoma&#34; size=&#34;-3&#34; style=&#34;padding: 10px 0 10px 0&#34;&#62;&#124; - For the post No.&#60;?php the_ID&#40;&#41; ?&#62; - &#124;&#60;/font&#62;&#60;img src=&#34;http://www.ll19.com/glll/images/busy.gif&#34;  border=&#34;0&#34; /&#62;&#60;/div&#62;
&#60;div id=&#34;posts-&#60;?php the_ID&#40;&#41; ?&#62;&#34; style=&#34;display:none&#34;&#62;
&#60;?php the_content&#40;&#41;; ?&#62;
&#60;h2&#62;&#60;?php wp_link_pages&#40;&#41;; ?&#62;&#60;/h2&#62;
&#60;/div&#62;
&#160;
&#60;script type=&#34;text/javascript&#34;&#62;
&#60;?php [...]]]></description>
		<wfw:commentRss>http://www.ll19.com/jquery-wordpress.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery简单实现WordPress的Ajax留言</title>
		<link>http://www.ll19.com/plugin-jquery-wordpress-search-ajax-comment.html</link>
		<comments>http://www.ll19.com/plugin-jquery-wordpress-search-ajax-comment.html#comments</comments>
		<pubDate>Fri, 02 Nov 2007 05:12:05 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.ll19.com/index.php/94/plugin-jquery-wordpress-search-ajax-comment/</guid>
		<description><![CDATA[利用jQuery插件(jQueryForm)来超级简单实现WordPress的ajax留言.



也有很多类似的WordPress插件，以前也用过PHOTOTYPE的AJAX留言插件，但是根据自己站的情况来做的话会省去很多不必要的代码，而且安装太多插件站点变慢也是肯定的。
jQueryForm：http://www.malsup.com/jquery/form/
ajax留言用到jQueryForm插件，jQueryForm是jQuery提交整个表单最好用的插件之一，下面一个例子（拿WP的留言表单举例）：

1
2
3
4
5
6
7
8
&#60;form action=&#34;***/***.php&#34; method=&#34;post&#34; id=&#34;commentform&#34;&#62;
&#60;input type=&#34;text&#34; name=&#34;author&#34; id=&#34;author&#34; value=&#34;&#34; tabindex=&#34;1&#34;/&#62;
&#60;input type=&#34;text&#34; name=&#34;email&#34; id=&#34;email&#34; value=&#34;&#34; tabindex=&#34;2&#34;/&#62;
&#60;input type=&#34;text&#34; name=&#34;url&#34; id=&#34;url&#34; value=&#34;&#34; tabindex=&#34;3&#34; /&#62;
&#60;textarea name=&#34;comment&#34; id=&#34;comment&#34; tabindex=&#34;4&#34;&#62;&#60;/textarea&#62;
&#60;input name=&#34;submit&#34; type=&#34;submit&#34; id=&#34;submit&#34; tabindex=&#34;5&#34; value=&#34;(Submit comment)&#34;/&#62;
&#60;input type=&#34;hidden&#34; name=&#34;comment_post_ID&#34; value=&#34;postid&#34; /&#62;
&#60;/form&#62;

之后下面加入这段JS：

1
2
3
4
5
6
7
8
9
10
$&#40;'#commentform #submit'&#41;.click&#40;function&#40;&#41; &#123;
   $&#40;'#commentform'&#41;.ajaxForm&#40;function&#40;&#41; &#123; 
   	success: function&#40;result&#41; &#123;
    alert&#40;&#34;Thank you for your comment!&#34;&#41;; 
	&#125;,
	error : [...]]]></description>
		<wfw:commentRss>http://www.ll19.com/plugin-jquery-wordpress-search-ajax-comment.html/feed</wfw:commentRss>
		<slash:comments>48</slash:comments>
		</item>
		<item>
		<title>Jquery应用-全屏切换.</title>
		<link>http://www.ll19.com/plugin-jquery.html</link>
		<comments>http://www.ll19.com/plugin-jquery.html#comments</comments>
		<pubDate>Tue, 02 Oct 2007 21:41:16 +0000</pubDate>
		<dc:creator>19.</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.ll19.com/?p=91</guid>
		<description><![CDATA[Jquery记录.



WORDPRESS升级到2.3后重做了皮肤，并且从prototype转为jquery，BLOG中用了jquery很多初级效果，这里提供一个全屏切换，有助我们在发表文章时候需要切换全屏来看的内容（比如代码），如下：
（注：这里用了jQuery.noConflict();，将$方法用jQuery代替。）

加大字号减小字号全屏-页面-切换


相关JS(点击上方按钮切换全屏观看):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
jQuery.noConflict&#40;&#41;; //将$方法用jQuery代替
function fontBigger&#40;elt&#41;
&#123;
	//var work = jQuery(elt).parent().next(); //或者父目录的下一个目录
	var work = jQuery&#40;&#34;div[name='&#34;+elt+&#34;']&#34;&#41;;
	work.each&#40;function&#40;&#41;&#123;
		jQuery&#40;this&#41;.html&#40;&#34;&#60;span class='fontwrap' style='font-size:100%'&#62;&#34;+jQuery&#40;this&#41;.html&#40;&#41;+&#34;&#60;/span&#62;&#34;&#41;;
		var wrap=jQuery&#40;this&#41;.children&#40;'.fontwrap'&#41;;
		var m = wrap.css&#40;'fontSize'&#41;.match&#40;/(d+(?:.d+)?)(.*)/&#41;;
		wrap.css&#40;'fontSize', &#40;1.2 * parseFloat&#40;m&#91;1&#93;&#41;&#41; + m&#91;2&#93;&#41;;
	&#125;&#41;;
&#125;
function fontSmaller&#40;elt&#41;
&#123;
	//var work = jQuery(elt).parent().next();
	var work = jQuery&#40;&#34;div[name='&#34;+elt+&#34;']&#34;&#41;;
	work.each&#40;function&#40;&#41;&#123;
	jQuery&#40;this&#41;.html&#40;&#34;&#60;span class='fontwrap' style='font-size:100%'&#62;&#34;+jQuery&#40;this&#41;.html&#40;&#41;+&#34;&#60;/span&#62;&#34;&#41;;
	var wrap=jQuery&#40;this&#41;.children&#40;'.fontwrap'&#41;;
	var m = wrap.css&#40;'fontSize'&#41;.match&#40;/(d+(?:.d+)?)(.*)/&#41;;
	wrap.css&#40;'fontSize' , &#40;parseFloat&#40;m&#91;1&#93;&#41; /1.2&#41; + m&#91;2&#93;&#41;;
	&#125;&#41;;
&#125;
function texteOnly&#40;elt,th&#41;
&#123;
	//var texte = jQuery(elt).parent().next(); 
	var texte = jQuery&#40;&#34;div[name='&#34;+elt+&#34;']&#34;&#41;;
	jQuery&#40;&#34;body&#34;&#41;.toggleClass&#40;'onlytext_wrapper'&#41;; //BODY的CLASS＝onlytext_wrapper
	if &#40;this&#91;'backTextOnly'&#93;&#41; &#123; 
		texte.removeClass&#40;&#34;onlytext&#34;&#41;; 
		texte.addClass&#40;&#34;ottextq&#34;&#41;; //全屏用CLASS=onlytext
		jQuery&#40;th&#41;.parent&#40;&#41;.insertBefore&#40;jQuery&#40;&#34;#marktextonly&#34;&#41;&#41;.after&#40;texte&#41;;
		jQuery&#40;&#34;#marktextonly&#34;&#41;.remove&#40;&#41;;
		jQuery&#40;'body'&#41;.children&#40;&#41;.show&#40;&#41;;
		this.backTextOnly = false;
		return;
	&#125;
	//点击全屏
	texte.removeClass&#40;&#34;ottextq&#34;&#41;; [...]]]></description>
		<wfw:commentRss>http://www.ll19.com/plugin-jquery.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
