JavaScript实现添加、查找、删除元素

代码很简单,这里就不多废话了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
.reply {
  width: 500px;
  height: 100%;
  overflow: hidden;
  background-color:#CCC;
  margin-top: 10px;
}
.infoArea {
  width: 380px;
  height: 100%;
  overflow: hidden;
}
.words {
  width: 380px;
  height: auto;
  margin: 5px 0px;
  float: left;
  font-size: 14px;
}
.time {
  margin-left: 10px;
  margin-bottom: 3px;
  width: 150px;
  height: 20px;
  line-height: 20px;
  float: left;
  font-family: 楷体;
  font-size: 14px;
  color: #999;
}
.replyButton {
  width: 60px;
  height: 20px;
  float: left;
  margin-bottom: 10px;
}
.replyButton input {
  font-size: 12px;
}
#cancelButton {
  visibility: hidden;
}
</style>
</head>

<body>
<div class="reply">
 <div class="infoArea">
  <div class="words"><a href="">中央情报局</a>:中央情报局</div>
  <div class="time">2014年5月4日21:56</div>
  <div class="replyButton">
   <input type="button" id="submitButton" value="回复" onClick="showReplyArea(this)" />
  </div>
  <div class="replyButton">
   <input type="button" id="cancelButton" value="取消" onClick="hideReplyArea(this)" />
  </div>
 </div>
</div>
<script>
//显示文本框的函数
function showReplyArea(src)
{
  inputText = document.createElement("DIV");
  inputText.className = "inputText";
  inputText.style.width = '100%';
  inputText.style.height = '75px';
  inputText.style.margin = '3px 0';
  inputText.style.cssFloat = 'left';

  var grandfather = src.parentNode.parentNode.parentNode;
  grandfather.appendChild(inputText);

  form1 = document.createElement("FORM");
  form1.action = "";
  form1.method = "post";
  inputText.appendChild(form1);

  inputTextArea = document.createElement("TEXTAREA");
  inputTextArea.style.width = '380px';
  inputTextArea.style.height = '40px';
  inputTextArea.style.marginLeft = '60px';
  inputTextArea.style.marginTop = '3px';
  inputTextArea.style.cssFloat = 'left';
  inputTextArea.style.resize = 'none';

  textSubmit = document.createElement("INPUT");
  textSubmit.type = 'submit';
  textSubmit.value = '提交';
  textSubmit.style.marginLeft = '80px';
  textSubmit.style.cssFloat = 'left';

  form1.appendChild(inputTextArea);
  form1.appendChild(textSubmit);

  cancelButton = grandfather.getElementsByTagName("INPUT").item(1);
  cancelButton.style.visibility = 'visible';
  submitButton = src;
  submitButton.disabled = true;
}
//隐藏文本框的函数
function hideReplyArea(src)
{
  var grandfather = src.parentNode.parentNode.parentNode;
  var inputText = grandfather.getElementsByClassName('inputText').item(0);
  grandfather.removeChild(inputText);

  cancelButton = src;
  cancelButton.style.visibility = 'hidden';
  submitButton = grandfather.getElementsByTagName("INPUT").item(0);
  submitButton.disabled = false;
}

//下面为调试时测试用函数,做完后就没用了,但也是很经典的一段代码,就留在这里了。
function showNode()
{
  var i = 4;
  submitButton = document.getElementById('submitButton');
  i = submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value;
  alert(i);
}
</script>
</body>
</html>

示例二:

window.onload = function(){
var gaga = document.getElementById( "gaga" );
addClass( gaga,"gaga1" )
addClass( gaga,"gaxx" );
removeClass( gaga,"gaga1" )
removeClass( gaga,"gaga" )
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
};
};
};

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2015-06-29

Javascript实现快速排序(Quicksort)的算法详解

目前,最常见的排序算法大概有七八种,其中"快速排序"(Quicksort)使用得最广泛,速度也较快.它是图灵奖得主C. A. R. Hoare(1934--)于1960时提出来的. "快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元素,都移到"基准"的左边:所有大于"基准"的元素,都移到"

js实现的二分查找算法实例

本文实例讲述了js实现的二分查找算法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> </style> <script type="text/javascript"> var binarySearch = function(array, s

javascript折半查找详解

折半查找法: 在有序表中,把待查找数据值与查找范围的中间元素值进行比较,会有三种情况出现: 1)     待查找数据值与中间元素值正好相等,则放回中间元素值的索引. 2)     待查找数据值比中间元素值小,则以整个查找范围的前半部分作为新的查找范围,执行1),直到找到相等的值. 3)     待查找数据值比中间元素值大,则以整个查找范围的后半部分作为新的查找范围,执行1),直到找到相等的值 4)     如果最后找不到相等的值,则返回错误提示信息. 按照二叉树来理解:中间值为二叉树的根,前半部

JavaScript中几种排序算法的简单实现

排序算法的实现 我的JS水平就是渣渣,所以我就用类似于JAVA和C的方式来写JavaScript的排序算法了. 而且这里我不讲算法原理,仅仅只是代码实现,可能会有Bug,欢迎大家博客评论指导. 插入排序 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已

JS折半插入排序算法实例

本文实例讲述了JS折半插入排序算法.分享给大家供大家参考,具体如下: function pushArrayWithIndex(arr, index, value) { // 将元素添加到数组的指定位置 var temArr = arr.slice(0, index); temArr.push(value); return temArr.concat(arr.slice(index)); } /* test for pushArrayWithIndex var arr = [1, 2, 3, 4,

js正则查找match()与替换replace()用法实例

本文实例讲述了js中正则的查找match()与替换replace()的用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> //string.match(正则):正则查找字符串,返回符合正则的字符或字符串 function t1(){  var con = document.getElementsByName('content')[0].value;/

javascript笛卡尔积算法实现方法

本文实例讲述了javascript笛卡尔积算法实现方法.分享给大家供大家参考.具体分析如下: 这里可根据给的对象或者数组生成笛卡尔积 //笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIndex = null; var tempCount = 0; var temp = []; //根据参数列生成指针对象 for(var index in list)

JavaScript使用二分查找算法在数组中查找数据的方法

本文实例讲述了JavaScript使用二分查找算法在数组中查找数据的方法.分享给大家供大家参考.具体分析如下: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序排列,将表中间位置记录的关键字与查找关键字比较,如果两者相等,则查找成功:否则利用中间位置记录将表分成前.后两个子表,如果中间位置记录的关键字大于查找关键字,则进一步查找前一子表,否则进一步查找后一

javascript常用经典算法实例详解

本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要搜索的值 function linearSearch(A, x) { for (var i = 0; i < A.length; i++) { if (A[i] == x) { return i; } } return -1; } 二分查找(又称折半查找) - 适用于已排好序的

js数组去重的5种算法实现

1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已

javascript查找字符串中出现最多的字符和次数的小例子

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS查找字符串中出现最多的字符及个数统计

例如:求字符串'nininihaoa'中出现次数最多字符 var str = "nininihaoa"; var o = {}; for (var i = 0, length = str.length; i < length; i++) { var char = str.charAt(i); if (o[char]) { o[char]++; //次数加1 } else { o[char] = 1; //若第一次出现,次数记为1 } } console.log(o); //输出的

C++找出字符串中出现最多的字符和次数,时间复杂度小于O(n^2)

已知字符串"aabbbcddddeeffffghijklmnopqrst"编程找出出现最多的字符和次数,要求时间复杂度小于O(n^2) /******************************************************** Copyright (C), 2016-2017, FileName: main9 Author: woniu201 Description:求字符串中出现次数最多的字符和次数 ******************************

php使用substr()和strpos()联合查找字符串中某一特定字符的方法

本文实例讲述了php使用substr()和strpos()联合查找字符串中某一特定字符的方法.分享给大家供大家参考.具体分析如下: 要求:在下面的字符串中查找双竖线前面的字符,大多数清空下使用explode()函数,但项目过程中使用了太多的explode(),所以找到了下面的方法. <?php $str="admin||46cc468df60c961d8da2326337c7aa58||0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,";

php strstr查找字符串中是否包含某些字符的查找函数

PHP 判断字符串是否包含其它字符 以下几个函数均可用来判断某字符串是否包含另外一个字符串PHP 中判断一个字符串是否包含其它字符是很常见的操作. 虽然很简单,但还是写了几个函数,质量可能不是很高,权当锻炼. 如果这几个函数恰好能帮上你的忙,我将会很高兴的.这几个函数中,我比较喜欢第四个... 复制代码 代码如下: <?php /** * 以下几个函数均可用来判断某字符串是否包含另外一个字符串 * PHP 中判断一个字符串是否包含其它字符是很常见的操作. * 虽然很简单,但还是写了几个函数,质量

JavaScript计算字符串中每个字符出现次数的小例子

代码如下: 复制代码 代码如下: function numInstring(str){    str=str.replace(/ /ig,"");    var strArr=str.split("");    var result=[],beforeLength,afterLength,reg;    for(var i=0;i<strArr.length;i++){        if(str.indexOf(strArr[i])!=-1){       

js替换字符串中所有指定的字符(实现代码)

第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argumen

java 判断字符串中是否有重复字符的示例

如下所示: /** * 判断字符串是否包含重复字符 * @param str * @return */ public static boolean containRepeatChar(String str){ if(str==null||str.isEmpty()){ return false; } char[] elements=str.toCharArray(); for(char e:elements){ if(str.indexOf(e)!=str.lastIndexOf(e)){ re

JS查找字符串中出现次数最多的字符

在一个字符串中,如 'zhaochucichuzuiduodezifu',我们要找出出现最多的字符.本文章将详细说明方法思路. 先介绍两个string对象中的两个方法:indexOf()和charAt()方法 indexOf()方法介绍 返回某个指定的字符串值在字符串中首次出现的位置 charAt()方法介绍 返回某个指定位置的字符 先做一个小测试,找到字符串'woainixiaoli'中的每一个'i'出现的位置. <script> var arr = 'woainixiaoli'; var

JS实现求字符串中出现最多次数的字符和次数示例

本文实例讲述了JS实现求字符串中出现最多次数的字符和次数.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &