豆瓣网的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>

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

收起时的样子

(0)

相关推荐

  • 豆瓣网的jquery代码实例

    在文档加载完毕后将执行的方法(参见jquery文档)  一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.  比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定.  复制代码 代码如下: //需要手动调用 load_event_monitor(element);   方法.  $(function() {   load_event_monitor(document);  });  //注意这里的o对象是一个html 元素而非是一个jquery对象

  • Python爬取豆瓣视频信息代码实例

    这篇文章主要介绍了Python爬取豆瓣视频信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 这里是爬取豆瓣视频信息,用pyquery库(jquery的python库). 一:代码 from urllib.request import quotefrom pyquery import PyQuery as pqimport requestsimport pandas as pddef get_text_page (movie_name)

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • 修改或扩展jQuery原生方法的代码实例

    修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery实现拖动调整表格单元格大小的代码实例

    jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style ty

  • jquery删除指定子元素代码实例

    jquery删除指定子元素代码实例: 本章节介绍一下如何利用jQuery实现删除指定子元素. 如何利用原生javascript实现此功能可以参阅原生javascript删除指定子元素代码实例一章节. 其实实现此功能的方式有很多种,下面介绍一下其中比较常见的一种. 代码实例如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title>我们</title>

  • 使用jquery 的ajax 与 Java servlet的交互代码实例

    这篇文章主要介绍了使用jquery 的ajax 与 Java servlet的交互代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 由于是使用jquery的 所以别忘记导入jq 下面是jsp文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!

  • jquery对输入框内容的数字校验代码实例

    这篇文章主要介绍了jquery对输入框内容的数字校验代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接在input属性框中添加keyup事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js&quo

随机推荐