Jquery节点遍历next与nextAll方法使用示例

2016-09-08 12:33:12 88必发客户端

Jqeruy节点遍历<!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> <title></title> <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> //节点遍历 /*--next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素--*/ $(function () { /* $("div").click(function () { alert($(this).next("div").text()) //效果:当单击AA的时候会弹出BB,当点击BB的时候会弹出CC,当点击CC的时候会弹出空的警告框(因为CC这个div节点后挨着它的是p元素,所以就弹出一个空的警告框),当点击FF的时候会弹出KK,当点击KK的时候会弹出空的警告框,(因为KK这个div节点后没有同辈的div元素挨着它了,所以就弹出一个空的警告框) */ /*--nextAll()方法用于获取“节点之后”所有的元素--*/ /* $("div,p").click(function () { alert($(this).nextAll().text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有标签的text(); }) */ /* $("div,p").click(function () { alert($(this).nextAll("p").text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有p标签的text(); }) */ /* $("div").click(function () { $(this).nextAll("div").css("background", "red"); //当点击div标签的时候将它后面的所有div标签的背景都设为红色 }) */ /* $("div").click(function () { $.each($(this).nextAll("div"), function () { $(this).css("background-color", "red") })//当点击div标签的时候将它后面的所有div标签的背景都设为红色,与上面的那一条效果是一样的(解释:先取得当前点击的div标签后面的所有div标签,然后对它进行遍历,然后通过后面的匿名函数将取得的所有div标签的背景设为红色)注意这前后两个this意思是不一样的:前面的this指的是当前点击的div标签,后面的thi是:在获取到当前点击的div标签的“后面的div标签”后,遍历他们的每一个div,后面的thi是:在后面的匿名函数正在处理的“当前遍历到的div标签” 【前面的是当前点击的div,后面的匿名函数的真正处理的当前div】 }) */ $("div,p").click(function () { //$(this).css("background", "red"); $(this).siblings().css("background", "yellow"); //将当前点击的div或者P标签背景设为红色,其他的兄弟标签背景设为黄色 $(this).css("background", "red").siblings().css("background",

方法说明:输出规范格式的path字符串。语法:复制代码 代码如下:path.normalize(p)由于该方法属于path模块,使用前需要引入path模块(var path= require(“path”) )例子:复制代码 代码如下:path.normalize('/foo/bar//baz/asdf/quux/..')// returns'/foo/bar/baz/asdf'源码:复制代码 代码如下:// windows version   exports.normalize = function(path) {     var result = splitDeviceRe.exec(path),         device = result[1] || '',         isUnc = device && device.charAt(1) !== ':',         isAbsolute = exports.isAbsolute(path),         tail = result[3],         trailingSlash = /[\\\/]$/.test(tail);      // If device is a drive letter, we'll normalize to lower case.     if (device && device.charAt(1) === ':') {       device = device[0].toLowerCase() + device.substr(1);     }      // Normalize the tail path     tail = normalizeArray(tail.split(/[\\\/]+/).filter(function(p) {       return !!p;     }), !isAbsolute).join('\\');      if (!tail && !isAbsolute) {       tail = '.';     }     if (tail && trailingSlash) {       tail += '\\';     }      // Convert slashes to backslashes when `device` points to an UNC root.     // Also squash multiple slashes into a single one where appropriate.     if (isUnc) {       device = normalizeUNCRoot(device);     }      return device + (isAbsolute ? '\\' :

本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下:1. 动态创建表格(代码不兼容IE6)<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>动态创建表格</title><script type="text/javascript">function AppendTableData() { var table = document.getElementById("tblMain"); var data = { "百度": "http://www.baidu.com", "脚本之家": "http://www.jb51.net", "搜狐": "http://www.sohu.com" }; for (var key in data) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerText = key; //FireFox不支持innerText,只能使用innerHTML tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>"; tr.appendChild(td2); table.appendChild(tr); }}</script></head><body> <table id="tblMain"></table> <input type="button" value="动态添加网格数据" onclick="AppendTableData()" /></body></html>2. 动态创建表格(兼容IE6、IE7)<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>添加网格数据(处理了IE兼容问题)</title> <script type="text/javascript"> function AppendData() { var data = {"脚本之家":"http://www.jb51.net", "百度":"http://www.baidu.com", "搜狐": "http://www.sohu.com"}; var table = document.getElementById("tblMain"); for (var key in data) { var value = data[key]; var tr = table.insertRow(-1); //FireFox必须使用-1这个参数 var td1 = tr.insertCell(-1); td1.innerText = key; var td2 = tr.insertCell(-1); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; } } </script></head><body> <table border="1" id="tblMain"></table> <input type="button" value="添加网格数据(处理了IE兼容问题)" onclick="AppendData()" /></body></html>3. 动态创建表格(兼容IE6、IE7)<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态创建表格(处理IE6兼容问题)</title> <script type="text/javascript"> function AppendTableData() { var table = document.getElementById("tblMain"); var data = { "百度": "http://www.baidu.com", "脚本之家": "http://www.jb51.net", "搜狐": "http://www.sohu.com" }; for (var key in data) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerText = key; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>"; tr.appendChild(td2); //table.appendChild(tr); 把这一句替换掉 table.tBodies[0].appendChild(tr); } } </script></head><body> <!--由于动态添加的数据在debugbar中看生成的HTML代码发现, 会自动添加一个<tbody> 并且内容是空的,把我们动态生成的数据给冲掉了, 所以我们手工添加一个<tbody> tr添加到这个<tbody>下面 --> <table id="tblMain"><tbody></tbody></table> <input type="button" value="动态添加网格数据" onclick="AppendTableData()" /></body></html>希望本文所述对大家的javascript程序设计有所帮助。

众所周知,异步是得天独厚的特点和优势,但同时在程序中同步的需求(比如控制程序的执行顺序为:func1 -> func2 ->func3 )也是很常见的。本文就是对这个问题记录自己的一些想法。需要执行的函数:复制代码 代码如下:var func1 = function(req,res,callback){  setTimeout(function(){    console.log('in func1');    callback(req,res,1);    },13000);}var func2 = function(req,res,callback){   setTimeout(function(){    console.log('in func2');    callback(req,res,2);  },5000);}var func3 = function(req,res,callback){  setTimeout(function(){    console.log('in func3');    callback(req,res,3);     },1000);}可以看出在func1,func2和func3中都是用了setTimeout函数,执行的时间分别为13秒,5秒和1秒。由于nodejs异步的特性,如果使用普通的函数调用方法:复制代码 代码如下:var req = null;var res = null;var callback = function(){};func1(req,res,callback);func2(req,res,callback);func3(req,res,callback);输出内容:复制代码 代码如下:in func3in func2in func1原因是因为nodejs是异步的,func2不会等func1执行完毕后再执行,而是立即执行(func3也是如此)。由于func3的运行时间最短而率先结束,func2次之,func1最后。但这明显不是我们想要的结果。怎么办?解决办法一:callback复制代码 代码如下://深层嵌套var req = null;var res = null;func1(req,res,function(){  func2(req,res,function(){    func3(req,res,function(){      process.exit(0);       })    });  });这种方法虽然能快速的解决,但暴露的问题也很明显,一是代码维护不方面,二是代码的深层嵌套看起来很不舒服。这种方法并不可取。解决方法二:递归调用复制代码 代码如下:function executeFunc(funcs,count,sum,req,res){  if(count == sum){     return ;    }   else{    funcs[count](req,req,function(){       count++;       executeFunc(funcs,count,sum,req,res);    });   }  }//同步调用var req = null;var res = null;var funcs = [func1,func2,func3];var len = funcs.length;executeFunc(funcs,0,len,req,res);先将多个函数组成一个数组。再可以利用递归函数的特性,使程序按照一定的顺序执行。解决方法三:调用类库 随着nodejs的发展,响应的类库也越来越多。Step和async 就是其中不错的。1.Step的调用相对比较清爽:复制代码 代码如下:Step(  function thefunc1(){    func1(this);  },  function thefunc2(finishFlag){    console.log(finishFlag);    func2(this);  },  function thefunc3(finishFlag){    console.log(finishFlag);  });2.async 的 series方法,就本例而言,它的调用方法:复制代码 代码如下:var req = null;var res = null;var callback = function(){};async.series(  [    function(callback){      func1(req,res,callback);    },      function(callback){      func2(req,res,callback);    },    function(callback){      func3(req,res,

本文实例讲述了JS小游戏的象棋暗棋源码,分享给大家供大家参考。具体如下:游戏运行后如下图所示:Javascript 部分:/** chinese chess * Author: fdipzone * Date: 2012-06-24 * Ver: 1.0 */ var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','images/a7.gif','images/b1.gif','images/b2.gif','images/b3.gif','images/b4.gif','images/b5.gif','images/b6.gif','images/b7.gif','images/bg.gif','images/bg_over.gif','images/bg_sel.gif']; var chess_obj = new ChessClass(); window.onload = function(){ $('init_btn').onclick = function(){ chess_obj.init(); } var callback = function(){ chess_obj.init(); } img_preload(gameimg, callback); } // chess class function ChessClass(){ this.chess = []; this.boardrows = 4; this.boardcols = 8; this.area = 82; this.player = 1; // 1:red 2:green this.selected = null; // selected chess this.chesstype = ['', 'a', 'b']; this.isover = 0; } // init ChessClass.prototype.init = function(){ this.reset_grade(); this.create_board(); this.create_chess(); this.create_event(); this.player = 1; this.selected = null; this.isover = 0; disp('init_div','hide'); } // create board ChessClass.prototype.create_board = function(){ var board = ''; for(var i=0; i<this.boardrows; i++){ for(var j=0; j<this.boardcols; j++){ board = board + '<div id="' + i + '_' + j + '"><img src="images/chessbg.gif" /></div>'; } } $('board').innerHTML = board; $('board').style.width = this.boardcols * (this.area + 2) + 'px'; $('board').style.height = this.boardrows * (this.area + 2) + 'px'; } // create random chess ChessClass.prototype.create_chess = function(){ // 32 chesses var chesses = ['a1','b7','a2','b7','a2','b7','a3','b7','a3','b7','a4','b6','a4','b6','a5','b5', 'a5','b5','a6','b4','a6','b4','a7','b3','a7','b3','a7','b2','a7','b2','a7','b1']; this.chess = []; while(chesses.length>0){ var rnd = Math.floor(Math.random()*chesses.length); var tmpchess = chesses.splice(rnd, 1).toString(); this.chess.push({'chess':tmpchess, 'type':tmpchess.substr(0,1), 'val':tmpchess.substr(1,1), 'status':0}); } } // create event ChessClass.prototype.create_event = function(){ var self = this; var chess_area = $_tag('div', 'board'); for(var i=0; i<chess_area.length; i++){ chess_area[i].onmouseover = function(){ // mouseover if(this.className!='onsel'){ this.className = 'on'; } } chess_area[i].onmouseout = function(){ // mouseout if(this.className!='onsel'){ this.className = ''; } } chess_area[i].onclick = function(){ // onclick self.action(this); } } } // id change index ChessClass.prototype.getindex = function(id){ var tid = id.split('_'); return parseInt(tid[0])*this.boardcols + parseInt(tid[1]); } // index change id ChessClass.prototype.getid = function(index){ return parseInt(index/this.boardcols) + '_' + parseInt(index%this.boardcols); } // action ChessClass.prototype.action = function(o){ if(this.isover==1){ // game over return false; } var index = this.getindex(o.id); if(this.selected == null){ // 未选过棋子 if(this.chess[index]['status'] == 0){ // not opened this.show(index); }else if(this.chess[index]['status'] == 1){ // opened if(this.chess[index]['type'] == this.chesstype[this.player]){ this.select(index); } } }else{ // 已选过棋子 if(index != this.selected['index']){ // 與selected不是同一位置 if(this.chess[index]['status'] == 0){ // 未打开的棋子 this.show(index); }else if(this.chess[index]['status'] == -1){ // 點空白位置 this.move(index); }else{ // 點其他棋子 if(this.chess[index]['type']==this.chesstype[this.player]){ this.select(index); }else{ this.kill(index); } } } } } // show chess ChessClass.prototype.show = function(index){ $(this.getid(index)).innerHTML = '<img src="images/' + this.chess[index]['chess'] + '.gif" />'; this.chess[index]['status'] = 1; // opened if(this.selected!=null){ // 清空選中 $(this.getid(this.selected.index)).className = ''; this.selected = null; } this.change_player(); this.gameover(); } // select chess ChessClass.prototype.select = function(index){ if(this.selected!=null){ $(this.getid(this.selected['index'])).className = ''; } this.selected = {'index':index, 'chess':this.chess[index]}; $(this.getid(index)).className = 'onsel'; } // move chess ChessClass.prototype.move = function(index){ if(this.beside(index)){ this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; this.remove(this.selected['index']); this.show(index); } } // kill chess ChessClass.prototype.kill = function(index){ if(this.beside(index)==true && this.can_kill(index)==true){ this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; this.remove(this.selected['index']); var killed = this.player==1? 2 : 1; $('grade_num' + killed).innerHTML = parseInt($('grade_num' + killed).innerHTML)-1; this.show(index); } } // remove chess ChessClass.prototype.remove = function(index){ this.chess[index]['status'] = -1; // empty $(this.getid(index)).innerHTML = ''; $(this.getid(index)).className = ''; } /* check is beside * @param index 目標棋子index * @param selindex 执行的棋子index,可为空, 为空则读取选中的棋子 */ ChessClass.prototype.beside = function(index,selindex){ if(typeof(selindex)=='undefined'){ if(this.selected!=null){ selindex = this.selected['index']; }else{ return false; } } if(typeof(this.chess[index])=='undefined'){ return false; } var from_info = this.getid(selindex).split('_'); var to_info = this.getid(index).split('_'); var fw = parseInt(from_info[0]); var fc = parseInt(from_info[1]); var tw = parseInt(to_info[0]); var tc = parseInt(to_info[1]); if(fw==tw && Math.abs(fc-tc)==1 || fc==tc && Math.abs(fw-tw)==1){ // row or colunm is same and interval=1 return true; }else{ return false; } } /* check can kill * @param index 被消灭的棋子index * @param selindex 执行消灭的棋子index,可为空, 为空则读取选中的棋子 */ ChessClass.prototype.can_kill = function(index,selindex){ if(typeof(selindex)=='undefined'){ // 没有指定执行消灭的棋子 if(this.selected!=null){ // 有选中的棋子 selindex = this.selected['index']; }else{ return false; } } if(this.chess[index]['type']!=this.chesstype[this.player]){ if(parseInt(this.chess[selindex]['val'])==7 && parseInt(this.chess[index]['val'])==1){ // 7 can kill 1 return true; }else if(parseInt(this.chess[selindex]['val'])==1 && parseInt(this.chess[index]['val'])==7){ // 1 can't kill 7 return false; }else if(parseInt(this.chess[selindex]['val']) <= parseInt(this.chess[index]['val'])){ // small kill big return true; } } return false; } // change player ChessClass.prototype.change_player = function(){ if(this.player == 1){ this.player = 2; // to green $('grade_img2').className = 'img_on'; $('grade_img1').className = 'img'; }else{ this.player = 1; // to red $('grade_img1').className = 'img_on'; $('grade_img2').className = 'img'; } } // reset grade ChessClass.prototype.reset_grade = function(){ $('grade_img1').className = 'img_on'; $('grade_img2').className = 'img'; $('grade_num1').innerHTML = $('grade_num2').innerHTML = 16; $('grade_res1').className = $('grade_res2').className = 'none'; $('grade_res1').innerHTML = $('grade_res2').innerHTML = ''; } // game over ChessClass.prototype.gameover = function(){ if($('grade_num1').innerHTML==0 || $('grade_num2').innerHTML==0){ // 任一方棋子为0 this.isover = 1; this.show_grade(); disp('init_div','show'); }else{ if(this.can_action()==false){ this.isover = 1; this.show_grade(); disp('init_div','show'); } } } // show grade ChessClass.prototype.show_grade = function(){ var num1 = parseInt($('grade_num1').innerHTML); var num2 = parseInt($('grade_num2').innerHTML); if(num1>num2){ // 红方胜 $('grade_res2').innerHTML = 'LOSS'; $('grade_res2').className = 'loss'; $('grade_res1').innerHTML = 'WIN'; $('grade_res1').className = 'win'; }else if(num1<num2){ // 黑方胜 $('grade_res1').innerHTML = 'LOSS'; $('grade_res1').className = 'loss'; $('grade_res2').innerHTML = 'WIN'; $('grade_res2').className = 'win'; }else{ // 平局 $('grade_res1').innerHTML = $('grade_res2').innerHTML = 'DRAW'; $('grade_res1').className = $('grade_res2').className = 'draw'; } } // check chess can action ChessClass.prototype.can_action = function(){ var chess = this.chess; for(var i=0,max=chess.length; i<max; i++){ if(chess[i].status==0){ // 有未翻开的棋子 return true; }else{ if(chess[i].status==1 && chess[i].type==this.chesstype[this.player]){ // 己方已翻开的棋子 if(this.beside(i-this.boardcols, i) && (chess[i-this.boardcols].status==-1 || this.can_kill(i-this.boardcols,i) )){ // 上 return true; } if(this.beside(i+this.boardcols, i) && (chess[i+this.boardcols].status==-1 || this.can_kill(i+this.boardcols,i) )){ // 下 return true; } if(this.beside(i-1, i) && (chess[i-1].status==-1 || this.can_kill(i-1,i) )){ // 左 return true; } if(this.beside(i+1, i) && (chess[i+1].status==-1 || this.can_kill(i+1,i) )){ // 右 return true; } } } } return false; } /** common function */ // get document.getElementBy(id) function $(id){ this.id = id; return document.getElementById(id); } // get document.getElementsByTagName function $_tag(name, id){ if(typeof(id)!='undefined'){ return $(id).getElementsByTagName(name); }else{ return document.getElementsByTagName(name); } } /* div show and hide * @param id dom id * @param handle show or hide */ function disp(id, handle){ if(handle=='show'){ $(id).style.display = 'block'; }else{ $(id).style.display = 'none'; } } /* img preload * @param img 要加载的图片数组 * @param callback 图片加载成功后回调方法 */ function img_preload(img, callback){ var onload_img = 0; var tmp_img = []; for(var i=0,imgnum=img.length; i<imgnum; i++){ tmp_img[i] = new Image(); tmp_img[i].src = img[i]; if(tmp_img[i].complete){ onload_img ++; }else{ tmp_img[i].onload = function(){ onload_img ++; } } } var et = setInterval( function(){ if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback clearInterval(et); callback(); } },200); }完整实例代码点击此处本站下载。相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。