jQuery-----五子棋

1、效果

2、html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/gobangGame.less">
</head>

<body>
    <div class="container">
        <div class="left-board disabled"></div>
        <div class="right-operation">
            <div class="voice">
                <a href="#" class = ‘audio-control‘></a>
                <audio src="source/bgm.mp3" controls="controls" id = ‘audio‘ style="visibility: hidden;">
                    Your browser does not support the audio element.
                </audio>
            </div>
            <div class="player white-player">
                <div class="left">
                    <p><span></span></p>
                    <p><img src="imgs/white-player.png"></p>
                </div>
                <div class="right">
                    <a href="#" class=‘white-back‘></a>
                    <a href="#" class = ‘white-quit‘>投降</a>
                </div>
            </div>
            <div class="player black-player">
                <div class="left">
                    <p><span></span></p>
                    <p><img src="imgs/black-player.png"></p>
                </div>
                <div class="right">
                    <a href="#" class=‘black-back‘></a>
                    <a href="#" class = ‘black-quit‘>投降</a>
                </div>
            </div>
            <div class="time">
            	<span>
            	<span class = ‘minute‘>0</span>
            	<span>：</span>
            	<span class = ‘second‘>0</span>
            	<span>：</span>
            	<span class = ‘min-second‘>0</span>
            	</span>
            	</span>
            	<span class = ‘tip‘>
            	</span>
            </div>
            <div class = ‘who-first‘>
            	<select>
            		<option value = ‘1‘>白棋</option>
            		<option value = ‘2‘>黑棋</option>
            	</select>
            	<a href="#" class = ‘start-game-btn‘>开始游戏</a>
            	<a href="#" class = ‘restart-game-btn‘>重新开始</a>
            </div>
            <div class = ‘winner‘>
            	<span>白棋玩家赢！</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src=‘js/jquery-2.2.1.min.js‘></script>
    <script type="text/javascript" src=‘js/gobangGame.js‘></script>
</body>

</html>

　　3、less代码

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background-color: #E0AD54;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -508px;
    width: 1040px;
    height: 700px;
    .left-board {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 700px;
        background-image: url("/imgs/board.png");
        background-size: 700px 700px;
        float: left;
        p{
        	height: 50px;
        	width: 700px;
        }
        span{
        	display: inline-block;
        	width: 50px;
        	height: 50px;
        	background-size: 30px 30px;
        	background-repeat: no-repeat;
        	background-position: 10px 10px;
        	cursor: pointer;
        }
        .white{
        	background-image: url("/imgs/white.png");
        }
        .black{
        	background-image: url("/imgs/black.png");
        }
    }
    .disabled{
    	pointer-events: none;
    	cursor: hand;
    }
    .right-operation {
        position: absolute;
        top: 0;
        right: 0;
        width: 320px;
        padding: 0 0 0 20px;
        .voice {
            a {
                display: inline-block;
                width: 100px;
                height: 40px;
                background-image: url("/imgs/voice.png");
                background-size: 100px 40px;
                background-repeat: no-repeat;
                &:hover {
                    box-shadow: 0 0 10px 1px gray;
                }
            }
            .bg-running{
            	animation : demo 1s infinite;
            }
            @keyframes demo{
                0%{
                  background-image: url("/imgs/voice.png");
                }
                50%{
                    background-image: url("/imgs/voice1.png");
                }
                100%{
                	 background-image: url("/imgs/voice2.png");
                }
            }

            audio {
                visibility: visible;
            }
        }
        .player {
            width: 300px;
            height: 100px;
            margin: 20px 0 0 0;
            .left {
                float: left;
                p:nth-child(1) {
                    height: 20px;
                    span{
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background-image: url("/imgs/target.png");
                        background-size: 20px 20px;
                        background-repeat: no-repeat;
                        margin: 0 0 0 20px;
                    }
                }
                img {
                    width: 60px;
                    height: 60px;
                    cursor: pointer;
                }
            }
            .right {
                float: left;
                a:nth-child(1){
                    display: inline-block;
                    float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/back.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 30px 0 0 10px;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                    }
                }
                a:nth-child(2){
                	display: inline-block;
                	float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/quit.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 30px 0 0 10px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 20px;
                    color: white;
                    text-decoration: none;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                    }
                }
            }
        }
        .time{
        	height: 30px;
        	line-height: 30px;
        	span{
        		color: white;
        		font-size: 20px;
        		text-align:  center;
        		font-weight: bold;
        	}
        	.tip{
        		font-size: 14px;
        		color: red;
        		float: right;
        	}
        }
        .who-first{
        	height: 100px;
        	width: 320px;
        	line-height: 60px;
        	padding: 20px 0 0 0;
        	select{
        		width: 100px;
        		height: 30px;
        		margin: 4px 10px 0 0;
        		float: left;
        	}
        	a{
        		    display: inline-block;
                	float: left;
                    width: 100px;
                    height: 40px;
                    background-image: url("/imgs/quit.png");
                    background-size: 100px 40px;
                    background-repeat: no-repeat;
                    margin: 0 0 0 10px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 20px;
                    color: white;
                    text-decoration: none;
                    &:hover {
                        box-shadow: 0 0 10px 1px gray;
                  }
        	}
        	a:nth-child(3){
        		margin: 20px 0 0 120px;
        	}
        }
        .winner{
        	display: block;
        	width: 300px;
        	height: 60px;
        	line-height: 60px;
        	font-size: 30px;
        	color: red;
        	span{
        		display: none;
        	}
        }
    }
}

　　4、jquery代码

var is_white_first = true; //白棋先手
var is_white_turn = true; //轮到白棋下
var is_game_over = false;
var is_white_back = false;
var is_black_back = false;
var is_music_running = false;
var board = $(".container .left-board");
var clock;
var whiteArr = new Array();
var blackArr = new Array();
var arr1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
var arr2 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

var white_key_number = 0;
var black_key_number = 0;

var xx = [-1, -1, 0, 1];
var yy = [0, 1, 1, 1];

gobangGame();

function gobangGame() {
    initBoard();
    startGame();

    function initBoard() {
        board.empty();
        arr1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
        arr2 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
       is_white_first = true; //白棋先手
       is_white_turn = true; //轮到白棋下
        for (var i = 1; i <= 14; i++) {
            var line = $("<p></p>")
            var arr1 = new Array();
            var arr2 = new Array();
            for (var j = 1; j <= 14; j++) {
                var one = $("<span class = ‘key‘  data-x= ‘" + i + "‘ data-y = ‘" + j + "‘><span>");
                line.append(one);
            }
            board.append(line);
        }
    }

    function startGame() {
        var parent = $(".container");
        var board = parent.find(".left-board");
        var audio = parent.find("#audio");
        var audioBtn = parent.find(".voice a");
        var whitePlayerStatus = parent.find(".white-player .left p span");
        var blackPlayerStatus = parent.find(".black-player .left p span");
        var whiteBack = parent.find(".white-player .right .white-back");
        var whiteQuit = parent.find(".white-player .right .white-quit");
        var blackBack = parent.find(".black-player .right .black-back");
        var blackQuit = parent.find(".black-player .right .black-quit");
        var startGameBtn = parent.find(".who-first .start-game-btn");
        var reStartGameBtn = parent.find(".who-first .restart-game-btn");
        var winner = parent.find(".winner span");
        whitePlayerStatus.hide();
        blackPlayerStatus.hide();

        //开始游戏
        startGameBtn.on("click", function() {
            var whoFirst = parent.find(".who-first select");
            var whoFirstVal = whoFirst.val();
            white_key_number = 0;
            black_key_number = 0;
            board.removeClass("disabled");
            $(this).addClass("disabled");

            if (!is_game_over) {
                if (whoFirstVal == "1") {
                    is_white_first = true;
                    is_white_turn = true;
                    whitePlayerStatus.show();
                    blackPlayerStatus.hide();
                } else {
                    is_white_first = false;
                    is_white_turn = false;
                    whitePlayerStatus.hide();
                    blackPlayerStatus.show();
                }
                if (clock) {
                    clearInterval(clock);
                }
                setGetTime();
            }
        })

        // 背景音乐
        audioBtn.on("click", function() {
            if (is_music_running == true) { //在播放中
                audio[0].pause();
                is_music_running = false;
                $(this).removeClass("bg-running");
            } else { //背景音乐暂停中
                audio[0].play();
                is_music_running = true;
                $(this).addClass("bg-running");
            }
        })

        //重新开始游戏
        reStartGameBtn.on("click", function() {
            initBoard();
            startGameBtn.click();
            whiteArr = new Array();
            blackArr = new Array();
            winner.text("");

        })

        //白棋玩家悔棋
        whiteBack.on("click", function() {
            if (is_white_back == false) {
                var obj = (whiteArr.pop());
                parent.find(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")").removeClass("white");
                console.log(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")");
                is_white_back = true;
                is_black_back = false;
            }
        })
        //黑棋玩家悔棋
        blackBack.on("click", function() {
            if (is_black_back == false) {
                var obj = (blackArr.pop());
                parent.find(".left-board p:nth-child(" + obj.x + ") span:nth-child(" + obj.y + ")").removeClass("black");
                console.log(".left-board p:nth-child(" + obj.x + ")>span:nth-child(" + obj.y + ")");
                is_white_back = false;
                is_black_back = true;
            }
        })
        //白棋玩家放弃游戏
        whiteQuit.on("click", function() {
            winner.show();
            winner.text("黑棋玩家赢！");
            board.addClass("disabled");
            blackQuit.addClass("disabled");
            clearInterval(clock);
            is_game_over = true;
        })

        //黑棋玩家放弃游戏
        blackQuit.on("click", function() {
            winner.show();
            winner.text("白棋玩家赢！");
            board.addClass("disabled");
            clearInterval(clock);
            is_game_over = true;
            whiteQuit.addClass("disabled");
        })

        //点击棋盘下棋
        parent.on("click", ".key", function() {
            if (clock) {
                clearInterval(clock);
            }
            setGetTime();
            var x = parseInt($(this).attr("data-x"));
            var y = parseInt($(this).attr("data-y"));
            var obj = {
                "x": x,
                "y": y
            }
            if (is_white_turn) {
                white_key_number++;
                console.log("white:" + white_key_number);
                $(this).addClass("white");
                whiteArr.push(obj);
                arr1[x][y] = 1;
                // console.log(whiteArr);
                is_white_turn = false;
                whitePlayerStatus.hide();
                blackPlayerStatus.show();
                //if (white_key_number >= 5) {
                    if (checkWin(whiteArr, 1)) {
                        winner.show();
                        winner.text("白棋玩家赢！");
                        board.addClass("disabled");
                        clearInterval(clock);
                        is_game_over = true;
                    }
               // }
            } else {
                black_key_number++;
                console.log("black:" + black_key_number);
                $(this).addClass("black");
                blackArr.push(obj);
                arr2[x][y] = -1;
                is_white_turn = true;
                whitePlayerStatus.show();
                blackPlayerStatus.hide();
                //if (black_key_number >= ) {
                    if (checkWin(blackArr, -1)) {
                        winner.show();
                        winner.text("黑棋玩家赢！");
                        board.addClass("disabled");
                        clearInterval(clock);
                        is_game_over = true;
                    }
               // }
            }
        })
    }

    //设置计时
    function setGetTime() {
        var parent = $(".time");
        var minuteSpan = parent.find(".minute");
        var secondSpan = parent.find(".second");
        var minSecondSpan = parent.find(".min-second");
        var tip = parent.find(".tip");
        var date1 = new Date();
        var timeString1 = date1.getTime();
        var is_running = true;
        if (is_running) {
            is_running = false;
            clock = setInterval(function() {
                var date2 = new Date();
                var timeString2 = date2.getTime();
                var interval = timeString2 - timeString1;
                var minute = parseInt(interval / 1000 / 60);
                var second = parseInt((interval - minute * 1000 * 60) / 1000);
                var minSecond = parseInt((interval - minute * 1000 * 60 - second * 1000) / 100);
                minuteSpan.text(minute);
                secondSpan.text(second);
                minSecondSpan.text(minSecond);
                if (minute > 3 && minute < 6) {
                    tip.text("快点啊，我等到花都谢了！");
                } else if (minute >= 6 && minute < 9) {
                    tip.text("快点啊，我要打人了！");
                } else if (minute >= 9) {
                    tip.text("快点啊，我要砍人了！");
                }
            }, 100)
            is_running = true;
        }
    }
    //判断是否应赢了
    function checkWin(arr, value) {
        var len = arr.length;
        for (k = 0; k < len; k++) {
            var x = parseInt(arr[k].x);
            var y = parseInt(arr[k].y);
            if (canWin(x, y, value)) {
                return true;
            } else {
                return false;
            }
        }
    }

    function canWin(x, y, value) {
        var arr;
        if (value == 1) {
            arr = arr1;
        } else {
            arr = arr2;
        }
        for (var i = 0; i < 4; i++) {
            var num = 1;
            for (var j = 1; j < 5; j++) {
                var xxx = x + xx[i] * j;
                var yyy = y + yy[i] * j;
                if (arr[xxx][yyy] != value || !isOut(xxx, yyy)) {
                    break;
                }
                num++;
            }
            for (var j = 1; j < 5; j++) {
                var xxx = x - xx[i] * j;
                var yyy = y - yy[i] * j;
                if (arr[xxx][yyy] != value || !isOut(xxx, yyy)) {
                    break;
                }
                num++;
            }
            if (num == 5) {
                return true;
            }
        }
        return false;
    }

    function isOut(x, y) {
        return x >= 0 && x <= 14 && y >= 0 && y <= 14;
    }
}

　　5、总结

判断输赢的算法还有bug，还有就是一些操作

时间： 2024-11-03 21:03:21

jQuery-----五子棋的相关文章

jQuery网页版五子棋小游戏源码下载

体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery五子棋游戏 -</title> <script type="

CSS3实现五子棋Web小游戏，Canvas画布和DOM两种实现，并且具有悔棋和撤销悔棋功能。

用Canvas实现五子棋的思路: 1.点击棋盘,获取坐标x,y,计算出棋子的二维数组坐标i和j, 2.棋子的实现,先arc一个圆,再填充渐变色. 3.下完一步棋后切换画笔和角色. 4.赢法算法的实现:计算出整个15*15的棋盘有多少种赢法,定义一个win[]三维数组,数组的初始化如下. //赢法数组 var wins = []; for (var i = 0; i < 15; i++) { wins[i] = []; for (var j = 0; j < 15; j++) { wins[i]

多级弹出菜单jQuery插件ZoneMenu

ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码: <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

自制html五子棋

花了一个早上写的五子棋,好久不写前端都有些生疏了,有啥好的建议可以反馈给我,谢谢哈. 话不多说,开始介绍. 一,主要三部分 样式代码 <style> *{ margin:0px; padding: 0px; } #box{ width:600px; height:600px; border:1px solid; margin:0px; } .line{ border:1px solid; border-top:0px; border-left:0px; border-right:0px; wi

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(