豆瓣网的jquery代码实例

 更新时间:2008年06月15日 20:01:45   作者:  
豆瓣网的jquery实例代码,效果不错,方便大家学习
在文档加载完毕后将执行的方法(参见jquery文档) 
一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外. 
比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定. 
复制代码 代码如下:

//需要手动调用 load_event_monitor(element);   方法. 
$(function() { 
 load_event_monitor(document); 
}); 
//注意这里的o对象是一个html 元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数 
//把它转化为jquery对象. 
Bowtech.init_forder = function(o) { 
 var eid = $(o).attr(“id“).split(“-“)[1]; 
 var fo = $(“#f-“+eid); 
 var unfo = $(“#unf-“+eid); 

 fo.click(function() { 
 $(o).hide(); 
 unfo.show(); 
 fo.hide(); 
 }); 
 unfo.click(function() { 
 $(o).show(); 
 fo.show(); 
 unfo.hide(); 
 }); 



jQuery.fn.extend({ 
 set_caret: function(){ 
 if(!$.browser.msie) return; 
 var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()}; 
 this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret); 
 }, 
 insert_caret:function(textFeildValue){ 
 var textObj = this[0]; 
 if(document.all && textObj.createTextRange && textObj.caretPos){ 
 var caretPos=textObj.caretPos; 
 caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == ” ? textFeildValue+” : textFeildValue; 
 } else if(textObj.setSelectionRange){ 
 var rangeStart=textObj.selectionStart; 
 var rangeEnd=textObj.selectionEnd; 
 var tempStr1=textObj.value.substring(0,rangeStart); 
 var tempStr2=textObj.value.substring(rangeEnd); 
 textObj.value=tempStr1+textFeildValue+tempStr2; 
 textObj.focus(); 
 var len=textFeildValue.length; 
 textObj.setSelectionRange(rangeStart+len,rangeStart+len); 
 textObj.blur(); 
 } else { 
 textObj.value+=textFeildValue; 
 } 
 } 
}) 

前台要用就比较简单了, 只需要这样写:

复制代码 代码如下:

<div id=”test2″ class=”mod”> 
 <h3> 
 这里可以放标题 
 </h3> 
 <div class=”j modb a_forder” id=”modb-1002″> 
 这里是一些主要的内容 
 <dl> 
 <dt>Hello world</dt> 
 <dd> 
 hahaha</dd> 
 </dl> 
 这个实验在沙加的神舟本上完成 
 </div> 
 <div class=”edit”> 
 <a id=”f-1002″ class=”forder” href=”javascript:void(0);”>[收起]</a> <a id=”unf-1002″ 
 class=”unforder” href=”javascript:void(0);”>[展开]</a> 
 </div> 
 </div> 

样式就省略了, 大家可以自己写, 最后发两个效果图:

收起时的样子

相关文章

  • html、css和jquery相结合实现简单的进度条效果实例代码

    html、css和jquery相结合实现简单的进度条效果实例代码

    这篇文章主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码,这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行了,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
    2016-10-10
  • jQuery计算文本框字数及限制文本框字数的方法

    jQuery计算文本框字数及限制文本框字数的方法

    一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)。需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数;
    2016-03-03
  • jQuery常见动画效果实现介绍

    jQuery常见动画效果实现介绍

    这篇文章主要为大家介绍了jQuery编程动画基本实现方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • jQuery Easyui实现左右布局

    jQuery Easyui实现左右布局

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。接下来通过本文给大家介绍jQuery Easyui实现左右布局,涉及到到easyui左右布局相关知识,感兴趣的朋友一起学习吧
    2016-01-01
  • jquery入门—编写一个导航条(可伸缩)

    jquery入门—编写一个导航条(可伸缩)

    编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容等等效果相当不错,感兴趣的朋友可以了解下哦
    2013-01-01
  • jquery.serialize() 函数语法及简单实例

    jquery.serialize() 函数语法及简单实例

    下面小编就为大家带来一篇jquery.serialize() 函数语法及简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jquery对复选框(checkbox)的操作汇总

    jquery对复选框(checkbox)的操作汇总

    本文给大家汇总介绍了一些jQuery操作复选框(checkbox)的方法和技巧,非常的简单实用,有需要的小伙伴可以参考下。
    2016-01-01
  • 通过jquery-ui中的sortable来实现拖拽排序的简单实例

    通过jquery-ui中的sortable来实现拖拽排序的简单实例

    下面小编就为大家带来一篇通过jquery-ui中的sortable来实现拖拽排序的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery搜索同辈元素方法

    jQuery搜索同辈元素方法

    这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery获取标签文本内容和html内容的方法

    jQuery获取标签文本内容和html内容的方法

    这篇文章主要介绍了jQuery获取标签文本内容和html内容的方法,实例分析了jQuery中text和html方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论