JQuery基础学习总结
JQuery基础学习总结
简单总结下JQuery：
一：事件
1.change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<select id="s">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<div></div>
<script type="text/javascript">
$(function () {
$("#s").change(function(){
$("div").html("您选择的是:"+$(this).val())
})
});
</script> </body>
</html>
change
2.hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
sda
</div>
<script type="text/javascript">
$(function () {
$("div").hover(
function(){
$(this).addClass("red")
},
function(){
$(this).removeClass("red")
}
)
});
</script> </body>
</html>
hover
3.toggleClass事件：实现点击鼠标样式切换，可以和hover比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
sdaasdas
</div>
<script type="text/javascript">
$(function () {
$("div").click(function(){
$("div").toggleClass("red");
})
});
</script> </body>
</html>
toggleClass
4.one事件：一次性事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div >cao</div>
<script type="text/javascript">
$(function () {
var n = 20;
$("div").one("click",function(){
n++;
$(this).css("font-size",n+"px");
}) });
</script> </body>
</html>
one
5. click事件：鼠标单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="test">
点击触发
</div>
<script type="text/javascript">
$(function(){
$("#test").click(function(e){
// alert(e.target.innerHTML);
alert(e.target.id);
})
});
</script> </body>
</html>
click
6.dblclick事件：鼠标双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>点我</div> <p>我变颜色</p>
<script type="text/javascript">
$(function () {
$("div").dblclick(function(){
$("p").css("color","red")
})
});
</script>
</body>
</html>
dblclick
7.siblings事件：选择除了自己以外的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li class="l1">草莓</li>
<li class="l2">香蕉</li>
<li class="l3">橘子</li>
<li class="l4">苹果</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$(".l1").siblings().css("border", "1px red solid");
});
</script> </body>
</html>
siblings
8.next事件：选择自己的相邻元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li class="l1">草莓</li>
<li class="l2">香蕉</li>
<li class="l3">橘子</li>
<li class="l4">苹果</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$(".l1").next().css("border", "1px red solid");
});
</script> </body>
</html>
next
9.内容添加事件：包括append;appendTo;after;before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
<span id="sp">曹</span>
</div>
<p id="p">曹泰</p>
</body>
<script type="text/javascript">
var $h = "<div>我是添加的</div>";
$("body").append($h); //不能直接写便签名字，或者类名，把$h添加到body元素之后
$("#p").appendTo("span"); //可以直接写便签名字，或者类名，把p元素添加到span元素之后 $("#sp").after("<a href=''>曹之后添加</a>"); //在元素之后添加
$("#sp").before("<a href=''>曹之前添加</a>"); //在元素之前添加 $("body").append($("#p").clone()); //克隆
</script>
</html>
内容添加
10.删除事件：remove;empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body> <span class="s">我是曹泰</span>
<span class="s1">我是曹泰1</span> </body>
<script type="text/javascript">
// $("span").remove(); //移除span标签
// $("span").empty(); //移除span标签
// $("span").remove(".s"); // 移除span标签中的s
$(".s1").empty("span");// .s1标签的内容
</script>
</html>
删除
11.bind,unbind事件：绑定,解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript"> $(function () {
// $("div").bind("click dblclick",function(){
// $(this).css("color","red");
// })
$("div").bind({
click:function(){
$(this).css("color","red");
},
dblclick:function(){
$(this).css("background-color","blue");
}
});
$("input").bind("click",function(){
$("div").unbind();
})
});
</script> </body>
</html>
bind,unbind
12.on,off事件：绑定，解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript"> $(function () {
$("div").on({
click:function(){
$(this).css("color","red");
},
dblclick:function(){
$(this).css("background-color","blue");
}
});
$("input").on("click",function(){
$("div").off();
})
});
</script> </body>
</html>
on,off
13.show,hide事件：显示隐藏事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<!--分别对显示和隐藏绑定-->
<img src="../../样式练习/images/2.png">
<input type="button" class="show" value="显示" disabled/>
<input type="button" class="hide" value="隐藏"/> <!--只绑定一个button-->
<!--<img src="../../样式练习/images/2.png">-->
<!--<input type="button" class="hide" value="隐藏"/>--> </body>
<script type="text/javascript">
$(function(){
//分别对显示和隐藏绑定
$(".show").bind("click",function(){
$("img").show(1000,function(){
$(".show").attr("disabled",true);
$(".hide").attr("disabled",false);
});
});
$(".hide").bind("click",function(){
$("img").hide(1000,function(){
$(".hide").attr("disabled",true);
$(".show").attr("disabled",false);
});
}); //只绑定一个button
// $(".hide").bind("click",function(){
// $("img").toggle(1000,function(){
// $(".hide").val()=="隐藏" ? $(".hide").val("显示"): $(".hide").val("隐藏");
// })
// }) })
</script>
</html>
show,hide
14.mousemove事件：鼠标移动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: 0;
}
div{
border: 1px solid salmon;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="n1">
<p>鼠标在此区域移动触发mousemove</p>
<span class="s1">移动的X位置</span>
<span class="s2">移动的Y位置</span>
</div>
<script type="text/javascript"> $(function () {
$("#n1").mousemove(function(e){
$(".s1").html("移动的X位置:"+e.pageX);
$(".s2").html("移动的Y位置:"+e.pageY);
}) });
</script> </body>
</html>
mousemove
15.mouseenter,mouseleave事件:鼠标移入移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover/mouseout</title>
<style type="text/css">
.main{width:150px;height: 50px;line-height:50px;text-align:center;background-color:#8C0000;color:#fff;position:relative}
.list{width:148px;height: 200px;color:#f00;border:1px solid red;position: absolute;top:50px;display:none}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="main">
标题
<div class="list">
下拉列表
</div>
</div>
<script type="text/javascript">
$(function () {
$(".main").mouseenter(function () {
$(".list").css("display","block");
}).mouseleave(function () {
$(".list").css("display","none");
});
});
</script>
</body>
</html>
mouseenter,mouseleave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover与mouseenter</title>
<style type="text/css">
div{width:350px;height:150px;padding:5px;margin:5px;border:1px solid #ccc;}
p{height: 50px;border:1px solid red;margin:30px;}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="aa">
<p>鼠标离开此区域触发mouseover事件</p>
<span>冒泡事件触发次数</span>
</div>
<div class="bb">
<p>鼠标离开此区域触发mouseenter事件</p>
<span>冒泡事件触发次数</span>
</div>
</body>
<script type="text/javascript">
$(function(){
var i=0;
$(".aa").mouseover(function(){
$(".aa span").html("mouseover事件触发的次数："+(++i));
});
var n=0;
$(".bb").mouseenter(function(){
$(".bb span").html("mouseover事件触发的次数："+(++n));
})
});
</script>
</html>
mouseover冒泡
16.focus,blur事件：聚焦,失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点/失焦</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<from>
<div></div>
<input type="text" value="">
</from>
</body>
<script type="text/javascript">
$(function () {
$("input").focus(function(){
$("div").html("请您输入您的姓名");
}).blur(function(){
if($(this).val().length==0){
$("div").html("您的名称不能为空");
}
});
});
</script>
</html>
focus,blur
二：方法
1.arrt方法：获取指定属性名的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<a href="http://127.0.0.1" id="a1">点我就ok</a>
<div>我要取得地方是:<span id="tip"></span></div>
</body>
<script type="text/javascript">
$("#a1").removeAttr("href");
var $url=$("#a1").attr("href");
$("#tip").html($url); // js方法
// var a = document.getElementById("a1");
// alert(a.getAttribute("href")); </script>
</html>
attr
例子：表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.red {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="f">
<input type="text"/>
<select id="i" multiple="multiple">
<option id="o" value="曹泰">选1</option>
<option selected="selected">选2</option>
<option >选3</option>
<option >选4</option>
<option selected="selected">选5</option>
</select>
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
<br/>
A<input type="checkbox"/>
B<input type="checkbox"/>
C<input type="checkbox"/>
D<input type="checkbox"/>
</form>
<br/>
<div>asc</div>
</body>
<script type="text/javascript">
$(function () {
$("#f :input").addClass("red");
$("#f input:text").addClass("red");
// $("#f :text").addClass("red");
$("#f :radio").attr("disabled", "true"); $("#f :checkbox").attr("checked", "checked");
$("#f :checkbox").attr("disabled", "true"); $("#i :selected").html("你被选中了");
alert($("#i #o").val());
$("div").html("<b>你被选中了</b>"); });
</script>
</html>
表单练习
2.替换方法：replaceWith;replaceAll;warp:warpInner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body> <span class="s">我是曹</span>
<span class="s">我是曹</span> </body>
<script type="text/javascript">
// $(".s").replaceWith("<div class='red'>想你了</div>");//span添加了div便签，div包裹span var $h ="<div class='red'>你好</div>";
$($h).replaceAll(".s"); //替换所有的span标签 // $(".s").wrap("<p class='red'>aa</p>"); //span添加了p便签，p包裹span
// $(".s").wrapInner("<i></i>"); //span添加了i便签，span包裹i </script>
</html>
替换方法
3.遍历：children,parent,parents,find
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li>草莓<span>我的最爱</span></li>
<li>香蕉</li>
<li class="l3">橘子</li>
<li><span>苹果</span></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
// $("ul li").each(function(i){
// if(i==1){
// $(this).css("color","red");
// }
// }); // $("ul").children().css("color", "red"); //查找下一辈 （向下找）
// $("ul").children("span").css("color", "red"); //查找下一辈，不能实现查找span （向下找）
// $(".l3").parent().css("border", "1px solid red"); //查找父亲（向上找） // $("li").find("span").css("color", "red"); //查找下辈所有的 （向下找）
// $(".l3").parents().css("border", "1px solid red"); //查找所有祖辈 （向上找）
// $(".l3").parents(".d").css("border", "1px solid red"); //查找祖辈到d （向上找） });
</script> </body>
</html>
遍历
三：选择器
选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// $("p").html("hello");
// }
// )
// $(function () {
// $("p").html("元素选择器");
// }
// );
// $(function () {
// $("#id").html("id选择器");
// }
// );
// $(function () {
// $(".ul").html("类选择器");
// }
// );
// $(function () {
// $("p a").html("祖孙选择器");
// });
// $(function () {
// $(".div1,.div2").html("div");
// }); $(function () {
// $("div>p").html("hello"); // div的直系亲属 // $("span+p").html("hello"); // span下面的p标签
$("p~span").css('color','red')
})
</script>
</head>
<body>
<!--------------------------------------------------------------------> <!--<p>-->
<!--<p>-->
<!--<p>--> <!--------------------------------------------------------------------> <!--<div id="id"></div>-->
<!--<ul class="ul">-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--</ul>--> <!--------------------------------------------------------------------> <!--<p><a></a></p>--> <!--<div class="div1"></div>-->
<!--<div class="div2"></div>--> <!--------------------------------------------------------------------> <!--<div>-->
<!--<p>ad</p>-->
<!--<span> <p>ad</p></span>-->
<!--</div>-->
<!--<p>ads</p>--> <!--<p>asd</p>--> <!--------------------------------------------------------------------> <!--<div>-->
<!--<span>曹</span>-->
<!--<p></p>-->
<!--<p>曹</p>-->
<!--<p>曹</p>-->
<!--</div>--> <!--------------------------------------------------------------------> <p>阿三djasdj；lkj</p>
<span>adssdada</span>
<span>adssdada</span>
<a><span></span></a> </body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<ul>
<li title="我是曹泰">asdsda</li>
<li title="曹泰是我">asdddd</li>
<li title="曹泰">asdddd</li>
</ul>
<script type="text/javascript">
$(function(){
$("li[title = '曹泰']").css("color","red");
// $("li[title != '我是']").css("color","blue");
// $("li[title *= '曹泰']").css("font-weight","bold");
});
</script>
</body>
</html>
属性选择器
过滤选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
// $(function(){
// $("ul li:first").html("1");
// $("ul li:first").css("color","red");
// // n从0开始
// $("ul li:eq(1)").html("2");
// $("ul li:eq(2)").html("3");
//
// $("ul li:last").html("4");
// $("ul li:last").css("color","red");
// }); // $(function(){
//// 含有曹泰的li变为红色
// $("li:contains('曹泰')").css('color',"red");
// }) // $(function () {
//// 含有a的p变为红色
// $("p:has('span')").css('color', "red");
// });
//
// $(function () {
// var $s=$("p:hidden").html();
// $("div").html($s);
// });
// $(function () {
// var $s=$("p:hidden").html();
// $("div").html($s);
// }); $(function () {
var $s=$("p:visible").html();
$("div").html($s);
});
</script>
</head>
<body>
<!--<ul>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--</ul>-->
<br/>
<!--<ul class="ul1">-->
<!--<li>曹泰阿斯顿撒旦</li>-->
<!--<li>帅阿斯</li>-->
<!--<li>曹泰爱神的箭</li>-->
<!--</ul>-->
<br/>
<!--<p>as<span>a阿斯顿</span></p>-->
<br/>
<!--<div></div>-->
<!--<p style="display: none">隐藏</p>-->
<br/>
<p>我是</p>
<div></div>
</body>
</html>
过滤选择器1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:first-child").css("color","red");
$("li:last-child").css("color","red");
$("li:nth-child(2)").css(("background-color"),("green"));
// 就是指的第二个,n从1开始
});
</script>
<body>
</head>
<ul>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
</ul>
<ul>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
</ul>
</body>
</html>
过滤选择器2
JQuery基础学习总结的更多相关文章
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- jQuery 基础学习笔记总结（一）
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
- 【jQuery基础学习】12 jQuery学习感想
学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都 ...
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
随机推荐
- 被误解的 MVC 和被神化的 MVVM
被误解的 MVC 和被神化的 MVVM 被误解的 MVC MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (contro ...
- hdu 畅通工程再续
http://acm.hdu.edu.cn/showproblem.php?pid=1875 #include <cstdio> #include <cstring> #inc ...
- LeetCode_Restore IP Addresses
Given a string containing only digits, restore it by returning all possible valid IP address combina ...
- Qt编程之qrc文件的链接
在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...
- BZOJ1430: 小猴打架
1430: 小猴打架 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 328 Solved: 234[Submit][Status] Descripti ...
- DSP与单片机的区别
以前刚学习单片机时,经过一订的编程,能实现很多不同的功能,当时就觉得单片机真的是神通广大.后来接触到DSP,发现DSP处理数字在通信上,更加方便.于是我就很好奇的问自己,DSP和单片机,究竟有什么区别 ...
- cf493D Vasya and Chess
D. Vasya and Chess time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- PC-CSS-多浏览器支持HTML5
非IE:article, section, aside, hgroup, nav, header, footer, figure, figcaption {display: block;}IE:< ...
- POJ2151Check the difficulty of problems 概率DP
概率DP,还是有点恶心的哈,这道题目真是绕,问你T个队伍.m个题目.每一个队伍做出哪道题的概率都给了.冠军队伍至少也解除n道题目,全部队伍都要出题,问你概率为多少? 一開始感觉是个二维的,然后推啊推啊 ...
- HDU 2845 Beans （DP）
Problem Description Bean-eating is an interesting game, everyone owns an M*N matrix, which is filled ...