`

jquery 添加和移除节点 jquery 的简单实例应用

阅读更多
代码
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->var allSchool = new Array();
var clickCity = "";
var citys = [
    {city:
"北京市",
    libs:[
    {name:
"北京工业201大学馆藏书目",vals:"201"},
    {name:
"北京工业202大学馆藏书目",vals:"202"}
    ]
    },
    {city:
"天津市",
    libs:[
    {name:
"天津工业203大学馆藏书目",vals:"203"},
    {name:
"天津工业204大学馆藏书目",vals:"204"}
    ]
    }
];

$(document).ready(
function(){
$(
"#BtKeySearch").bind("click",function (){
var keywords =$("#idKeyword").val();
var searchtype =getSelect("column");
var searchmodel  = getSelect("condition");
//var schooltype=getSelect("libs");
var schooltype=getSelect("selectedLibs");
$.cookie(
'the_libs', schooltype, { expires: 7 }); 
alert(
"do.php?"+"keywords="+keywords+"&sourcetype="+searchtype+"&searchtype="+searchmodel+"&searchmodel=1&sort=1&schooltype="+schooltype+"&page=1");


})
$(
"#advanceSearch").bind("click",function(){
var idSpanSearch = document.getElementById("idSpanSearch");
idSpanSearch.style.display
="block";
})
  
 })
 
function getSelect(names)
{
    
var vals = "";
    
var eles = document.getElementsByName(names);
    
for(var i=0;i<eles.length;i++)
    {
    
if(eles[i].checked)
    vals
+=eles[i].value+",";
    }
    vals 
= vals.length>0?(vals.substring(0,vals.length-1)):("");
return vals;
}
//改变库
function changeVal(temp)
{
clickCity
=temp;
  
var library = "";
 
for(var i=0;i<citys.length;i++)
 {
 
//判断城市
 if(citys[i].city==temp)
 {
   
//寻找书库
  for(var j=0;j<citys[i].libs.length;j++)
  {
    
var state =false;
     
for(var k=0;k<allSchool.length;k++)
     {
         
if(allSchool[k]==citys[i].libs[j].vals)
         {
         state
=true;
         
break;
         }
     }
     
if(!state)
  library 
+="<li><input type='checkbox' name='libs' onclick='if(this.checked)appendHtml(\""+citys[i].libs[j].name+"\",\""+citys[i].libs[j].vals+"\",0);$(this).parent().remove();' value='"+citys[i].libs[j].vals+"'/>"+citys[i].libs[j].name+"</li>";
  }
  
break;
 
// 查找到跳出
 }
 }
 $(
"#libs").html(library);
}
//追加文本
function appendHtml(text,values,type)
{

    
for(var i=0;i<allSchool.length;i++)
    {
    
if(values==allSchool[i])
    
return;
    }
    
if(type=="0")
  $(
"#idSelectedSchool").append("<li title=\""+text+"\"><input type=\"checkbox\" onclick=\"removeArray('"+values+"',0);$(this).parent().remove();\"  name=\"selectedLibs\"  checked=\"checked\" value=\""+values+"\"/>"+text+"</li>")
  
else
  $(
"#idSelectedSchool").append("<li title=\""+text+"\"><input type=\"checkbox\" onclick=\"removeArrayDian('"+text+"','"+values+"');$(this).parent().remove();\"  name=\"selectedLibs\"  checked=\"checked\" value=\""+values+"\"/>"+text+"</li>")
  allSchool.push(values);
}
//改变样式
function changeClass(classid)
{
 
for(var i=0;i<22;i++)
 {
   $(
"#city00"+i.toString()).attr("class"," ");
 }
  $(
"#"+classid).attr("class","selected");
}    
//移除记录的值
function removeArray(val,type)
{
var tempArr = new Array();
for(var i=0;i<allSchool.length;i++)
{
 
if(allSchool[i]!=val)
 {
 tempArr.push(allSchool[i]);
 }
}
allSchool
=tempArr;
//如果是一个城市 添加下面的项

if(type=="0")
{
     
for(var i=0;i<citys.length;i++)
     {
     
//判断城市
         if(citys[i].city==clickCity)
         {
           
//寻找书库
              for(var j=0;j<citys[i].libs.length;j++)
              {
                  
if(val==citys[i].libs[j].vals)
                  {
                   $(
"#libs").append("<li><input type='checkbox' name='libs' onclick='if(this.checked)appendHtml(\""+citys[i].libs[j].name+"\",\""+citys[i].libs[j].vals+"\",0);$(this).parent().remove();' value='"+citys[i].libs[j].vals+"'/>"+citys[i].libs[j].name+"</li>");
                  
break;
                  }
              }
              
break;
              
// 查找到跳出
         }
     }
 }
 
else
 {
 
var tempArr = new Array();
for(var i=0;i<allSchool.length;i++)
{
 
if(allSchool[i]!=val)
 {
 tempArr.push(allSchool[i]);
 }
}
allSchool
=tempArr;
   $(
"#idDianziQiKuan").append("<li><input type='checkbox' name='libs' onclick='if(this.checked)appendHtml(\""+citys[i].libs[j].name+"\",\""+citys[i].libs[j].vals+"\",1);$(this).parent().remove();' value='"+citys[i].libs[j].vals+"'/>"+citys[i].libs[j].name+"</li>");
 }
 

}
function removeArrayDian(text,value)
{
  $(
"#idDianziQiKuan").append("<li><input type='checkbox' name='libs' onclick='if(this.checked)appendHtml(\""+text+"\",\""+value+"\",1);$(this).parent().remove();' value='"+value+"'/>"+text+"</li>");
}
function displayDiv(obj)
{
document.getElementById(obj).style.display
=document.getElementById(obj).style.display=="block"?("none"):("block");
}

 

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->

 

分享到:
评论

相关推荐

    JQuery插件-JQuery的几个精典应用实例

    本教程将探讨几个jQuery的精彩应用实例,包括菜单设计、文件上传、树形结构、表单验证以及滑动效果,帮助你深入理解并熟练运用jQuery。** ### 1. 菜单设计 创建动态交互式菜单是jQuery的一大强项。利用`click`事件...

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...

    50个Jquery经典实例

    本文将深入探讨50个jQuery经典实例,这些实例覆盖了jQuery的多种核心功能,包括DOM操作、事件处理、动画效果、Ajax请求以及插件应用等。** 1. **DOM操作**:jQuery提供了方便的DOM选择器,如`$("#id")`选择ID为`id`...

    DOM和JQuery简单易学实例

    DOM将网页内容抽象成一系列节点,包括元素节点、文本节点、属性节点等,形成一个树状结构,称为DOM树。在.NET环境中,DOM可以通过`System.Xml`命名空间下的类来实现,如`XmlDocument`和`XmlNode`等。 JQuery是一个...

    jquery dtree 实例 动态实现无限树形菜单(增删改查)

    这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单,并实现基本的数据操作功能,包括添加、删除、修改和查询。下面我们将深入探讨这个主题。 首先,jQuery dTree是一个轻量级的插件,它基于...

    JQUERY 应用实例

    本教程通过一系列实际应用实例,旨在深入理解和熟练掌握 jQuery 的核心特性和常见用途。** 在 "JQUERY 应用实例" 中,我们将探讨以下关键知识点: 1. **DOM 操作**:jQuery 提供了一系列方法来操作 HTML 文档对象...

    jquery移动节点实例

    总的来说,jQuery的`append()`方法是移动和插入节点的强大工具,它使得在JavaScript中处理DOM变得更加简单。结合其他类似的方法,开发者可以构建出高度响应和灵活的前端应用。本文实例所展示的技巧是jQuery学习过程...

    JQuery常见节点操作实例分析

    JQuery作为流行的JavaScript库,极大地简化了在网页上进行DOM操作的过程。在网页开发中,对元素节点的添加和删除是最基本的操作之一,而JQuery提供了...掌握JQuery的这些常见节点操作对于开发动态网页和应用至关重要。

    jQuery DOM节点操作源码

    在提供的"第6章 DOM节点操作.pdf"中,可能详细解释了上述各个知识点,并通过实例代码`code1`和`code2`进行了演示。对于初学者来说,这些资源将有助于理解和实践jQuery的DOM操作,提升Web开发技能。记得结合实际项目...

    jQuery树形结构菜单代码.zip

    总的来说,这个压缩包提供了一个学习和应用jQuery树形菜单的起点,无论是初学者还是经验丰富的开发者,都可以从中了解到如何利用jQuery创建交互式的菜单系统。通过研究和理解这些文件,你可以掌握如何结合HTML、CSS...

    jquery图片浏览例子

    在本实践案例中,我们探讨的是使用jQuery库创建一个简单的图片浏览应用。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及AJAX交互等常见任务。在这个"jquery图片浏览例子"中,我们将深入...

    jquery 动态遍历select 赋值的实例

    这是一个非常有用的jQuery方法,可以移除集合中所有匹配元素的子节点,从而确保在添加新的option之前select列表是空的。 以上就是这篇关于"jquery动态遍历select赋值的实例"中涉及的主要知识点。通过本文的介绍和...

    jquery 树的样本

    本文将深入探讨如何利用jQuery实现一个高效、易用的树形控件,并通过实例分析其核心原理和应用技巧。 ### 1. jQuery与树形结构 jQuery 是一个轻量级的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及...

    锋利的jQuery_高清_书签.part2

    1.3.2 编写简单的jQuery代码 1.3.3 jQuery代码风格 1.4 jQuery对象和DOM对象 1.4.1 DOM对象和jQuery对象简介 1.4.2 jQurey对象和DOM对象的相互转换 1.4.3 实例研究 1.5 解决jQuery和其他库的冲突 1.6 jQuery开发工具...

    JQuery 经典实例

    这个压缩包中包含的"JQuery"文件夹,很显然是对jQuery的一些经典应用实例,对于学习和掌握jQuery非常有帮助。接下来,我们将深入探讨其中可能涵盖的知识点。 ### 1. jQuery选择器 jQuery的选择器是其强大功能的...

    《锋利的jQuery》实例源码

    此外,`$(selector).append()`、`.prepend()`、`.after()`和`.before()`等方法可以方便地插入、添加或移除DOM节点。 2. **事件处理**:jQuery简化了事件绑定,如`$("#element").click(function() {})`用于绑定点击...

    jQuery_zTree v3.5

    - **添加**:可以通过 API 动态添加新的节点,方便地进行数据更新。 - **删除**:可以轻松移除不再需要的节点。 - **修改**:允许对节点的文本、图标、状态等属性进行实时修改。 - **选择与取消选择**:支持单选...

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...

    jQuery删除/清空指定元素的所有子节点实例代码

    `detach()`方法用于移除元素同时保留所有绑定的事件和jQuery数据,而`remove()`方法则是彻底移除元素,包括其绑定的事件和数据。 这两个方法在操作上与`empty()`相似,但它们的作用对象是元素本身而非仅子节点。 3...

    dtree+jquery 动态实现无限树形菜单 (包括增删改查)

    最后,压缩包中的"dtree_JQuery实例.动态生成树"可能是包含示例代码和HTML文件的资源,可以帮助开发者快速理解和应用上述功能。通过查看和运行这些实例,可以直观地了解dtree与jQuery如何协同工作,以及如何实现动态...

Global site tag (gtag.js) - Google Analytics