手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:jquery

取得html中的comment的内容

Submitted by gouki on 2013, July 16, 6:47 PM

 Html中的comment其实也有nodeType的，只是我们一直不用罢了。它的nodeType = 8哦。于是，就有了一个基于jQuery的插件：comments

它来自：http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm

JavaScript代码
  1. <--- --------------------------------------------------------------------------------------- ----  
  2.       
  3.     Blog Entry:  
  4.     jQuery Comments() Plug-in To Access HTML Comments For DOM Templating  
  5.       
  6.     Author:  
  7.     Ben Nadel / Kinky Solutions  
  8.       
  9.     Link:  
  10.     http://www.bennadel.com/index.cfm?event=blog.view&id=1563  
  11.       
  12.     Date Posted:  
  13.     Apr 14, 2009 at 7:01 PM  
  14.       
  15. ---- --------------------------------------------------------------------------------------- --->  
  16.   
  17.   
  18. // This jQuery plugin will gather the comments within  
  19. // the current jQuery collection, returning all the  
  20. // comments in a new jQuery collection.  
  21. //  
  22. // NOTE: Comments are wrapped in DIV tags.  
  23.    
  24. jQuery.fn.comments = function( blnDeep ){  
  25.     var blnDeep = (blnDeep || false);  
  26.     var jComments = $( [] );  
  27.    
  28.     // Loop over each node to search its children for  
  29.     // comment nodes and element nodes (if deep search).  
  30.     this.each(  
  31.         function( intI, objNode ){  
  32.             var objChildNode = objNode.firstChild;  
  33.             var strParentID = $( this ).attr( "id" );  
  34.    
  35.             // Keep looping over the top-level children  
  36.             // while we have a node to examine.  
  37.             while (objChildNode){  
  38.    
  39.                 // Check to see if this node is a comment.  
  40.                 if (objChildNode.nodeType === 8){  
  41.    
  42.                     // We found a comment node. Add it to  
  43.                     // the nodes collection wrapped in a  
  44.                     // DIV (as we may have HTML).  
  45.                     jComments = jComments.add(  
  46.                         "<div rel='" + strParentID + "'>" +  
  47.                         objChildNode.nodeValue +  
  48.                         "</div>"  
  49.                         );  
  50.    
  51.                 } else if (  
  52.                     blnDeep &&  
  53.                     (objChildNode.nodeType === 1)  
  54.                     ) {  
  55.    
  56.                     // Traverse this node deeply.  
  57.                     jComments = jComments.add(  
  58.                         $( objChildNode ).comments( true )  
  59.                         );  
  60.    
  61.                 }  
  62.    
  63.                 // Move to the next sibling.  
  64.                 objChildNode = objChildNode.nextSibling;  
  65.    
  66.             }  
  67.    
  68.         }  
  69.         );  
  70.    
  71.     // Return the jQuery comments collection.  
  72.     return( jComments );  
  73. }  

代码其实并不多，大概知道就好，本来是用phpQuery也这样写的。但发现。。。stick的时候，即使我选择了nodeType=8也取不到值。我晕啊，最后我只能用正则将注释取出来当成内容用了。

早先有人把代码扔在textarea里，用来当成数据加载，现在也有人开始无耻的利用注释了。真不厚道

 

 

Tags: jquery, comment

Javascript | 评论:2 | 阅读:43348

jQuery UI中sortable的表单提交

Submitted by gouki on 2013, July 1, 10:12 AM

 jqueryUI库中提供了一些封装好的，性能也算是比较好的一些工具，比如排序：sortable

在做分类的时候，这个功能就有点好了，直接拿它来排序，但是大家都觉得sortable怎么提交呢？提交的时候怎么把ID和数据传过去呢？要知道这。。TMD只是一个li，连form都没有，怎么办？

其实也算是比较方便的

JavaScript代码
  1. $('.xxx').sortable(function(){    
  2.     'update':function(event,ui){  
  3.         var ids = $(this).sortable('toArray').toString();    
  4.         $.post('xxx',{"id":ids},function(){    
  5.             //..    
  6.         })    
  7.     }  
  8. })  
  9. $('.xxx').disableSelection();     

主要就那个sortable('toArray')，看了一下手册，默认是使用了id，所以偷懒的话，你就把你的信息扔在id里就OK了。虽然就html规范来说，id不能是数字，但是你可以自己组装，然后post过去的时候，再解析嘛。

就是这样简单

Tags: jquery, sortable

Javascript | 评论:0 | 阅读:20556

新版jQuery去掉了一些组件

Submitted by gouki on 2013, June 10, 12:12 AM

 在用一个jQuery插件的时候，突然报错：b.browser undefined。。。

最初的时候想想不太可能啊？browser的判断不是从1.2.1的时候就一直就有了吗？于是搜索了一下jquery.mini.js，搜索browser，居然找不到。。。。

然后去官网看了一下，看到官方居然有这么一段：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

居然建议我们加载migrate，打开这个文件搜索browser。。果然找到了。

于是在项目里加入这一行，不报错的。做个记录。（不就7K嘛。干嘛不放进去，真是的。。）

Tags: jquery

Javascript | 评论:0 | 阅读:19228

推荐插件：jquery-bbq

Submitted by gouki on 2012, June 7, 8:48 AM

什么 是jquery BBQ?
这是一个jquery插件，BBQ的意思是back button & query。你知道的，以前的jqueryTAB在点击后都无法通过后退和前进恢复原来的点击事件等。而BBQ在每次点击的时候都相当于在历史里加入了一个记录。也就因此可以使得我们能够通过浏览器的前进、后退来重现刚才的点击。

官网在这里：https://github.com/cowboy/jquery-bbq

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

This plugin and the jQuery urlInternal plugin supersede the URL Utils plugin.

Note: If you’re using jQuery 1.3.2 or earlier and need BBQ to merge query string or fragment params containing [], you’ll want to include the jQuery 1.4 .param method in your code.

Also, my article Cooking BBQ: the original recipe gives a history of jQuery BBQ along with some plugin authoring guidelines, if you’re interested.

What jQuery BBQ allows you to do:

While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read the documentation, and check out the full examples listed above.

  • Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (new in jQuery 1.4, read more here). (example)
  • Merge any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL.
  • Update the “URL attribute” (ie. a[href], img[src], form[action], etc) in multiple elements, merging any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL, which is then set into that attribute.
  • Push (and retrieve) bookmarkable, history-enabling “state” objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications (example 1, example 2, example 3)
  • Bind event handlers to a normalized, cross-browser hashchange event (example 1, example 2, example 3)

 

These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
http://benalman.com/code/projects/jquery-bbq/examples/deparam/

Tags: jquery, jquery-bbq

Javascript | 评论:1 | 阅读:24946

笔记：removeAttr

Submitted by gouki on 2011, December 20, 12:02 PM

这个标题我扔到PHP分类下当然是有原因的。。
因为我最近在尝试用phpQuery来分析数据，但这些数据最终的样式都和我真正想要的还是有点区别，所以我要去除其中的样式，还要删除空标签，但:empty标签删除的太厉害了。不太敢用
所以我还是用正则来删除一级的标签。

除了空标签还有这些带样式的，我开始是用pq("xxx")->css("");来设置空标签，但总觉得不爽，因为这样会生成<p style="">这种多余的内容。
找了一点资料，其实jQuery的removeAttr就可以有这个功能啦。于是乎，pq("xxx")->removeAttr("style")，就解决了

做个笔记

Tags: phpquery, jquery

PHP | 评论:0 | 阅读:17926

Records:7012345678910›»