jquery tree 可编辑节点实现代码(jquery一句话节点菜单)

下面的代码。大家可以研究下,对于jquery的学习还是非常有好处的。
锋利的jquery中的一句话代码,实现的菜单

运行后,需要刷新下(因为是调用的外地jquery)

1-5-1

#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}

//等待dom元素加载完毕.
$(function(){
$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end()
.siblings().children("a").hide().removeClass("highlight")
})});

第1章-认识jQuery
1.1-JavaScript和JavaScript库
1.2-加入jQuery
1.3-编写简单jQuery代码
1.4-jQuery对象和DOM对象
1.5-解决jQuery和其它库的冲突
1.6-jQuery开发工具和插件
1.7-小结

第2章-jQuery选择器
2.1-jQuery选择器是什么
2.2-jQuery选择器的优势
2.3-jQuery选择器
2.4-应用jQuery改写示例
2.5-选择器中的一些注意事项
2.6-案例研究——类似淘宝网品牌列表的效果
2.7-还有其它选择器么?
2.8-小结

第3章-jQuery中的DOM操作
3.1-DOM操作的分类
3.2-jQuery中的DOM操作
3.3-案例研究——某网站超链接和图片提示效果
3.4-小结

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

运行后,需要刷新下(因为是调用的外地jquery)

li{
text-indent: 10px;
margin-left: -20px;
padding-top: 0px;
list-style: none;
}
.oline{
background-image: url(treeview-default-line.gif);
background-position: 7px 18px;
background-repeat: no-repeat;
}
.lline{

background-image: url(L.gif);
background-position: 7px 18px;
background-repeat: no-repeat;
} .expand{
background-image: url(minus.gif);
background-repeat: no-repeat;
background-position: left;
}
.colpse{
background-image: url(plus.gif);
background-repeat: no-repeat;
background-position: left;
}
label{
padding-left: 15px;
padding-top: -5px;
}
.leaf{
background-image: url(L.gif);
background-repeat: no-repeat;
background-position: left;
}
input{
border: 1px solid #CCC;
}

  1. A

    1. A-1

      1. A-1-1

        1. A-1-1-1

          1. A-1-1-1-1
      2. A-1-1
        1. A-1-1-1

          1. A-1-1-1-1
      3. A-1-1
        1. A-1-1-1

          1. A-1-1-1-1
    2. B-1
      1. B-1-1

        1. B-1-1-1

          1. B-1-1-1-1

$("li:has(ol)>label").addClass('colpse');
$('ol>li:not(:only-child)').addClass('oline');
$('ol>li:only-child').addClass('lline');
$('ol>li:last-child').addClass('lline');
$("li:has(ol)>label").toggle(
function(){
$(this).removeClass();
$(this).addClass('colpse');
$("+ol",this).children().slideUp(100);
},
function(){
$(this).removeClass();
$(this).addClass('expand');
$("+ol",this).children().slideDown(100);
}
);
$("li:has(ol)>label").click();
$("label:not(:has(ol))").dblclick(function(){
$(this).hide();
$(this).before('');
$(":button").click(function(){
$(this).prev().hide();
$(this).hide();
$(this).next().html($(this).prev().val());
$(this).next().show();
});
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2009-10-31

jquery.jstree 增加节点的双击事件代码

jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

jQuery的DOM操作之删除节点示例

如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

Jquery动态添加及删除页面节点元素示例代码

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

jQuery获取节点和子节点文本的方法

对于下面的html片段, <div id="text_test">test text<a href="techbrood.com" rel="external nofollow" >techbrood co.</a></div> 获取节点纯文本: var text = $('#text_test').text() 这个会得到"test text techbrood co.",也就

jquery获取子节点和父节点的示例代码

一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

Jquery为单选框checkbox绑定单击click事件

一.假设有如下一段html代码 复制代码 代码如下: <dd id="1"> <input id="checkbox-518" class="imagezz" name type="checkbox" value="518"> </dd> 选中事件(根据选中情况修改上一层背景): 复制代码 代码如下: var $test_image_check_box_click = f

jQuery获取单击节点对象的方法

本文实例讲述了jQuery获取单击节点对象的方法.分享给大家供大家参考,具体如下: event.target属性: <script language="JavaScript" type="text/javascript"> $("document").ready(function () { $(".menu").bind("click", function (event) { var click

jQuery删除节点的三个方法即remove()detach()和empty()

jQuery提供了三种删除节点的方法,即remove(),detach()和empty(). 测试所用HTML代码: 复制代码 代码如下: <p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝"

jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例)  如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h

jquery的父子兄弟节点查找示例代码

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

jquery实现点击TreeView文本父节点展开/折叠子节点

以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧. 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的. 首先思路是,,让文本点击的时候执行左边'+'号的事件,查看源码看到,'+'号的事件是: javascript:Tr

bootstrap treeview 扩展addNode方法动态添加子节点的方法

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API 官方api  https://www.npmjs.com/package/bootstrap-treeview 

Javascript removeChild()删除节点及删除子节点的方法

下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

bootstrap插件treeview实现全选父节点下所有子节点和反选功能

项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件.先上图: 选中父节点时,父节点下所有子节点也都全部选中,看代码 1.HTML代码 <h2>TreeView Checkable</h2> <div id="treeview-checkable"></div> 2.Json数据 function getTvStateData() { var defaultData = [ {

jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

本文实例讲述了jQuery获取父元素节点.子元素节点及兄弟元素节点的方法.分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父.子.兄弟等)的方法都是围绕这段代码来的: <ul class="par"> <li id="firstli"> <h3 class="title">条目一</h3> <ul class="par"> <li id=&

JS获取子节点、父节点和兄弟节点的方法实例总结

本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo

javascript获取网页中指定节点的父节点、子节点的方法小结

我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

解决Jstree 选中父节点时被禁用的子节点也会选中的问题

问题描述: 最近用jstree遇到一个问题,父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. 修改checkbox插件配置,将cascade_to_disabled设置为false(注:需要将配置脚本放jstree.min.js的后面) <script src="./../../dist/jstree.min.js"></script> <script> $.jstree.de

jquery的父、子、兄弟节点查找,节点的子节点循环方法

jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue