Python之路【第十二篇续】jQuery案例详解
jQuery
1、jQuery和JS和HTML的关系
首先了HTML是实际展示在用户面前的用户可以直接体验到的，JS是操作HTML的他能改变HTML实际展示给用户的效果！
首先了解JS是一门语言，他是运行在浏览器上的。
jQuery是什么呢？他是对JS进行了封装，成了一个类库，就类似于python中的类，我们用的时候直接掉类库了就行了非常方便。比如paramiko模块,我们要使用paramiko就得学习里面的方法。
2、jQuery分为的几部分
------找
----选择器
----筛选器
------操作
----css
----属性
----文档
------事件
----事件
----ajax请求
----json
jQuery选择器
1、id选择器-常用
id选择器，通过id去匹配元素：（#号来表示）
html代码：
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery代码：
$("#myDiv");
注：jQuery代码中的$可以理解为他就是jQuery，举例来说在们在学习python中导入了一个模块json咱们在用的时候是json.什么概念是一样的
结果：
<div id="myDiv">id="myDiv"</div>
如果id名中有特殊的符号，在特殊符号前面加上\\即可
2、元素名（标签）选择器-常用
根据指定的元素名（标签），去匹配元素。例如<div>标签、<a>标签、<p>标签等。。。
html代码：
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery代码：
$("div");
结果：（匹配所有的div标签）
[ <div>DIV1</div>, <div>DIV2</div> ]
3、指定类（指定样式类）选择器-常用
根据指定的样式类匹配元素
html代码：
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery代码：
$(".myClass");
结果：
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
4、所有元素（*），多用于结合上下文来搜索。
html代码：
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery代码：
$("*")
结果：
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
5、关联选择器（比如某个元素下的一个和多个元素匹配）
html代码：
<div id="t1">
<div>
<a>hello jQuery</a>
<span></span>
</div>
</div>
jQuery代码：
我要找到id=1下面的所有a标签，在（）内以空格分割就是谁下面的谁
$('#t1 a')
结果：
<a>hello jQuery</a>
6、组合选择器（匹配多个元素-常用）
html代码：
<a class="c1"></a>
<div class="c1"></div>
<a></a>
<span></span>
jQuery代码：
$('.c1,a')
找到html内的class=‘c1’的标签和a标签
结果：
<a class="c1"></a>
<div class="c1"></div>
<a></a>
注：上面这些选择器是最基础的也是最常用的。
7、其他的选择器
这个链接还有其他的选择器的使用，需要都看下：http://www.php100.com/manual/jquery/
8、表单form，input系列
html代码：
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" /> <input type="file" />
<input type="hidden" />
<input type="image" /> <input type="password" />
<input type="radio" />
<input type="reset" /> <input type="submit" />
<input type="text" />
<select><option>Option</option></select> <textarea></textarea>
<button>Button</button> </form>
jQuery代码：
$(':input')
上面的代码就是找到所有的input的标签
jQuery代码：
$(':text')
上面的意思是找到所有的input的标签并且type=‘text’，他和$('input[type='text']')效果是一样的
jQuery代码：
$(':text,password')
上面的意思是找到所有的input的标签并且type='text'或type='password'的标签
表单对象属性：
html代码：
<!--checked="checked" 默认选中-->
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" />
<input type="checkbox" />
jQuery代码：
$("input:checked")
找到input标签选中的标签
jQuery筛选器
1、筛选器过滤
1、eq
html代码
<p> This is just a test.</p>
<p> So is this</p>
我要找到index为1的p标签
$("p").eq(1)
效果如下：
<p> So is this</p>
注：有同学会问我用选择器也可以实现类似的效果啊？代码如下：
$('p:eq(1)')
有什么区别呢？
看下面的例子：
例子1：
innp = raw_input()
$('p').eq(innp) 例子2：
innp = raw_input()
content = "p:eq(" + innp + ")" 这里第二个例子中他是字符串，他不能直接传参数，那么jQuery的筛选器相当于对选择器进行了一些封装。
2、hasClass 判断是否有相应的样式并返回True或者False
html代码：
<div id='l1' class="protected"></div>
<div id='l2'></div>
jQuery代码：
var result = $('#l1').hasClass('protected')
result = true
var result = $('#l2').hasClass('protected')
result = false
3、map
html代码：
<table>
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td onclick="get_prev(this)">编辑</td>
</tr>
</tbody>
</table>
jQuery代码：
function get_prev(arg){
//$(arg).sibling() 当前标签的所有标签
var list = $(arg).siblings().map(function () {
//map和python中的map类似,循环每个标签并做好相应的操作
//每一个标签被循环时,都会执行map里面的函数
//将所有的结果封装到一个数组中(列表)
return $(this).text();
//返回列表
});
console.log(list[0],list[1],list[2])
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<table>
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td onclick="get_prev(this)">编辑</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function get_prev(arg){
//$(arg).sibling() 当前标签的所有标签
var list = $(arg).siblings().map(function () {
//map和python中的map类似,循环每个标签并做好相应的操作
//每一个标签被循环时,都会执行map里面的函数
//将所有的结果封装到一个数组中(列表)
return $(this).text();
//返回列表
});
console.log(list[0],list[1],list[2])
}
</script>
</body>
</html>
map实例
2、查找
在上面我们已经用过了，看下面的实例：
我们使用到了：
parent().siblings().find('.content')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.content{ }
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="change(this)" id="m1">菜单一</div>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div onclick="change(this)" id="m2">菜单二</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div onclick="change(this)" id="m3">菜单三</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function change(arg) {
//一 找到下一个标签,移除hide样式
//$(arg).next() 下一个标签
//removeClass('') 移除样式
$(arg).next().removeClass('hide');
//二 找到其他菜单,内容隐藏,添加hide
//当前标签的父亲标签$(arg).parent()
//所有父亲标签的兄弟标签
$(arg).parent().siblings().find('.content').addClass('hide');
} </script>
</body>
</html>
实例
1、children
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
html代码如下：
<p onclick="print()">Hello</p>
<div>
<span>Hello Again</span>
<div>
<span>hello shuaige</span>
</div>
</div>
<p>And Again</p>
jQuery代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.content{ }
.hide{
display:none;
}
.color_add{
background-color: red;
}
</style>
</head>
<body>
<p onclick="print()">Hello</p>
<div>
<span>Hello Again</span>
<div>
<span>hello shuaige</span>
</div>
</div>
<p>And Again</p> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
function print() {
$('div').children().addClass('color_add');
}
</script>
</body>
</html>
children
2、find
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。（去子子孙孙去找）
html代码：
<p>
<span>Hello</span>
, how are you?
</p>
jQuery代码：
$('p').find('span')
结果：
<span>Hello</span>
3、next、nextAll、nextUntil
next()同级别下的下一个标签、nextAll同级别下的当前标签下面的所有标签、nextUntil同级别下到那个一个标签为为止
这里只写nextUntil
html代码：
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd> <dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd> <dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
jQuery代码：
$('#term-1').nextUntil('#term-2').css('color','green');
$('#term-2').nextUntil('#term-3').css('backgroundColor','red');
显示效果如下：
4、prev、prevale、prevUntil 这里不在做举例，上面的next是往下，这个prev就是往上找
5、parent()、parents（）、parents
取得一个包含着所有匹配元素的唯一父元素的元素集合。
html代码如下：
<div>
<p>Hello</p>
<p>Hello</p>
</div>
<div>
<div>shuaige</div>
</div>
jQuery代码：
$('p').parent().css('background-color','red')
效果图如下：
6、串联
6.1、and（个人理解就相当于同事匹配两种规则任意规则生效即可执行后面的function）
<p>Hello</p>
<span>Hello Again</span>
jQuery代码：
$('#m1').add('span').css('backgroundColor','red')
效果图如下：
6.2、andSelf() 对之前进行筛选的的标签也进行操作
html代码&实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.content{ }
.hide{
display:none;
}
.border{
background-color: red;
}
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
$("div").find("p").andSelf().addClass("border");
</script>
</body>
</html>
代码
看jQuery代码：
$("div").find("p").andSelf().addClass("border");
如果不加andSelf（），默认指挥给他下面的p标签进行增加class类，如果加上之后就会对div这个查询条件也进行了增加
效果图如下：
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>
jQuery实例
1、左侧菜单实例（博客后会跟上一个完整一个cmdb的后台例子）
1.1、首先写出框架来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<div>
<div>
<div>菜单一</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> <div>
<div>菜单二</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div>菜单三</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script> </script>
</body>
</html>
html-框架
2.2、整理要求
要求：
当点击其中一个标签的时候，显示其标签内的内容，并且隐藏其他标签内容。所以每个标签上肯定都有一个onclick事件。
并且默认第一个菜单默认是显示的其他两个菜单是隐藏的那么就会用到“display:none;”这个参数。
那么3个菜单通过什么来判断我点击的是哪一个呢？“传参”
下面的代码先看逻辑，可以优化：（点击菜单然后在console输出选择的具体菜单项）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="change(1)" id="m1">菜单一</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div> <div onclick="change(2)" id="m2">菜单二</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div> <div onclick="change(3)" id="m3">菜单三</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function change(arg) {
//找到,到底点击那一个,通过传参,来判断!
if(arg == 1){
var menu = $('#m1'); //通过传过来的参数,去查找对应的id
}else if (arg == 2) {
var menu = $('#m2'); //通过传过来的参数,去查找对应的id
}else{
var menu =$('#m3'); //通过传过来的参数,去查找对应的id
} console.log(menu.text());
} </script>
</body>
</html>
左侧菜单_例子
效果如下：（点击在console显示点击的为哪个一个菜单）
2.3、上面的左侧菜单在写的时候如果有很多个菜单难道每次都要用if...else判断吗？
修改什么呢？看下面的代码：
在菜单哪里传参数的时候给他写一个特殊的参数：'this'这个就表示当前标签，并且js哪里也要修改，$(arg)给arg加上$()就表示给其封装成jQuery的选择器了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.hide {
display:none;
}
</style>
</head>
<body>
<div>
<div>
<div id="m1" onclick="change(this)">菜单一</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> <div>
<div id="m2" onclick="change(this)">菜单二</div>
<div class="hide" >
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div id="m3" onclick="change(this)">菜单三</div>
<div class="hide" >
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
function change(arg) {
var t = $(arg).text(); //这个$(arg)就表示你点击的是哪个一个菜单
console.log(t)
}
</script>
</body>
</html>
左侧菜单_优化
2.4、做到上面一步之后我们就需要做下面的两步
2.4.1 找到下一个标签hide样式
2.4.2 找到其他标签的内容用并隐藏（增加hide样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.content{ }
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="change(this)" id="m1">菜单一</div>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div onclick="change(this)" id="m2">菜单二</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div onclick="change(this)" id="m3">菜单三</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function change(arg) {
//一 找到下一个标签,移除hide样式
//$(arg).next() 下一个标签
//removeClass('') 移除样式
$(arg).next().removeClass('hide');
//二 找到其他菜单,内容隐藏,添加hide
//当前标签的父亲标签$(arg).parent()
//所有父亲标签的兄弟标签
$(arg).parent().siblings().find('.content').addClass('hide');
} </script>
</body>
</html>
左侧菜单实例-内带注释
2、弹框（模态对话框）修改实例（博客后会跟上一个完整一个cmdb的后台例子）
要求：
1、点击编辑的时候弹出一个对话框，在对话框内进行修改。
2、并判断内容是否为空，提示并增加颜色。
原生html内容
<table>
<thead></thead>
<tbody>
<tr>
<td>www.youku.com</td>
<td>1.1.1.1</td>
<td>8080</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td>www.baidu.com</td>
<td>2.2.2.2</td>
<td>8080</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td>www.sina.com</td>
<td>3.3.3.3</td>
<td>8080</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
</tbody>
第一步上面注册了onclick事件，当我们点击的时候出发，显示一个弹出框他本身就是存在的只是隐藏了，所以我们需要一个弹出框
这个弹出框可以修改可以提交数据至后台所以应该是一个form表单,这个先不管先来实现这个：弹出效果
第二步：
style样式：
<style>
/*模态对话框样式*/
.modal{
position: fixed;
left:50%;
top:50%;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px;
margin-top: -150px;
}
.hide{
display: none;
}
</style>
在定义一个div应用样式
<div id="dialog" class="modal hide">
<form action="" method="get">
<p> hostname:<input /></p>
<p> hostipadd:<input /></p>
<p> hostipport:<input /></p>
<input type="submit" value="提交"/>
<input type="button" value="取消"/>
</form>
</div>
定义jQuery代码
// 获取用户点击的是哪个一行,并弹出模态对话框
function GetPrev(arg){
$('#dialog').removeClass('hide')
}
第二步我们实现了，弹出模态对话框的操作，下面我们要把数据填充到，模态对话框内，首先我们的找到我们点击的的这个标签上面的标签，并且点击取消后隐藏模态对话框。
这里需要注意找到之后，要用到循环，咱们看下下面的循环！
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//获取用户点击的是哪个一行,并弹出模态对话框
function GetPrev(arg){
//获取我们点击的的<td>标签的同级别的的数据用什么?$(arg).prevAll()
//循环所有的数据,取出每一个数据的内容 //假设我这里有一个数组,我要对它进行循环.
var a = [11,22,33,44,55];
//这里用什么循环呢?在jQuery中
//$.each()它就是用来循环的,我们吧a这个数组传进去,然后在括号内增加function,数组中的每个元素就会循环执行()内定义的function
$.each(a,function (i) {console.log(a[i])});//这里看一下,这个i是怎么来的呢?这个i就类似和python中的循环类似.
//看下面的python代码:
//=================
//for i in a :
// print i
//=================
//还有就是,通过each()我很循环的时候这个i,是当前数组的"索引"(这里和python中不同)
//所以要获取内容的时候a[i]就是获取当前的内容
}
</script>
现在我们循环他然后通过ID找到对应的input的标签然后把值付给他。
//当点击时从form表单中的input标签中获取内容并赋值给模态对话框
function GetPrev(arg){
var list = [];
$.each($(arg).prevAll(),function(i) { //循环$(arg).prevAll()这里的内容,然后把值赋值给 i 这里的function(i)
var item = $(arg).prevAll()[i]; //获取值,如果不取获取到的是索引
var text = $(item).text(); //取出值然后赋值给text
list.push(text)
});
//反转列表
var new_list = list.reverse();
//把获取到的值引用到模态对话框中,赋值给value
$('#hostname').val(new_list[0]);
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]); $('#dialog').removeClass('hide');
}
上面的添加完成之后再加一个当用户点击提交的时候判断用户输入的是否正确。如果不正确提示，代码如下：
//当点击时判断用户输入的内容是否为空,如果为空提示
function SubmitForm(){
//获取form表单中input的值
//判断值是否为空
var ret = true;
//遍历所有的input,要要有控制,就讲ret设置为false
//$('input[type="text"]') 找到所有的input标签并且类型为text的标签 $(':text').each(function () { //找到所有的input标签并且类型为text的标签,找到的是个数组,吧数组赋值给each让他循环
//$(this) == 要循环的每一个元素表示当前的元素or标签
var value = $(this).val();
if(value.trim().length == 0) { //判断取消空格"trim()",之后的字符长度为0,那么执行 注意 == 才是等于 = 是赋值!
$(this).css('border-color','red');
ret = false;
}else {
$(this).css('border-color', 'green');
}
}); return ret;
}
这里需要注意下，在标签注册事件的时候需要添加一个事件，如果事件出现问题返回的是false的时候submit其实也是个事件，当咱们自己定义的事件返回为false的时候submit这个事件奖不会被触发。
<input type="submit" onclick="return SubmitForm()" value="提交"/>
最后在增加一个取消的，看下总体的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
/*模态对话框样式*/
.modal{
position: fixed;
left:50%;
top:50%;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px;
margin-top: -150px;
}
.hide{
display: none;
}
</style> </head>
<body>
<table>
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td>111</td>
<td>211</td>
<td>333</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
</tbody>
</table>
<div id="dialog" class="modal hide">
<form action="" method="get">
<p>主机名:<input type="text" id="hostname"/></p>
<p>ip地址:<input type="text" id="ip"/></p>
<p>主机名:<input type="text" id="port"/></p> <!--这里的input,本身有一个事件,我们在给他设置一个事件,并且给他返回值,如果咱们定义的事件返回值为Flase他本身自带的事件就不执行了!-->
<!--就不提交了-->
<input type="submit" onclick="return SubmitForm()" value="提交"/>
<input type="button" onclick="CanCel()" value="取消"/>
</form>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//当点击时判断用户输入的内容是否为空,如果为空提示
function SubmitForm(){
//获取form表单中input的值
//判断值是否为空
var ret = true;
//遍历所有的input,要要有控制,就讲ret设置为false
//$('input[type="text"]') 找到所有的input标签并且类型为text的标签 $(':text').each(function () { //找到所有的input标签并且类型为text的标签,找到的是个数组,吧数组赋值给each让他循环
//$(this) == 要循环的每一个元素表示当前的元素or标签
var value = $(this).val();
if(value.trim().length == 0) { //判断取消空格"trim()",之后的字符长度为0,那么执行 注意 == 才是等于 = 是赋值!
$(this).css('border-color','red');
ret = false;
}else {
$(this).css('border-color', 'green');
}
}); return ret;
} //当点击时从form表单中的input标签中获取内容并赋值给模态对话框
function GetPrev(arg){
var list = [];
$.each($(arg).prevAll(),function(i) { //循环$(arg).prevAll()这里的内容,然后把值赋值给 i 这里的function(i)
var item = $(arg).prevAll()[i]; //获取值,如果不取获取到的是索引
var text = $(item).text(); //取出值然后赋值给text
list.push(text)
});
//反转列表
var new_list = list.reverse();
//把获取到的值引用到模态对话框中,赋值给value
$('#hostname').val(new_list[0]);
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]); $('#dialog').removeClass('hide');
} //取消的操作,隐藏模态对话框
function CanCel() {
$('#dialog').addClass('hide')
}
</script>
</body>
</html>
弹出模态对话框实例-附注释
3、全选反选实例-（后台会跟上一个完整的实例）
html代码：
首先先把注册事件写上，然后在把主题的框架写好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" onclick="CheckAll()" value="全选"/>
<input type="button" onclick="CheckCancel()" value="取消"/>
<input type="button" onclick="CheckReverse()" value="反选"/> <table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
1
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
2
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
3
</td>
</tr>
</tbody> </table>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
function CheckAll(){ }
function CheckCancel(){ }
function CheckReverse(){ }
</script> </body>
</html>
先看全选：
//全选
function CheckAll() {
//$('#tb1').find(':checkbox').attr('checked','checked'); 这个方法也是可以的!通过属性修改,但是反选的时候有问题
$('#tb1').find(':checkbox').prop('checked',true); //这个方法prop是专门为checkbox 而生的
}
在看取消：
//取消
function CheckCancel() {
//取消也可以用attr来做
//$('#tb1').find(':checkbox').removeAttr('checked')
$('#tb1').find(':checkbox').prop('checked',false)
}
在看反选：
//反选
function CheckReverse() {
//找到/然后判断如果选中就给取消,如果没有选中就给选中
$('#tb1').find(':checkbox').each(function () {
//this 每一个复选框
//$(this).prop() 如果选中为True,如果未选中为false;
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
})
}
上面的代码中 这个prop是专门为checkbox和而生的，当prop的checked属性为true的时候为选中，为false的时候为未选中。
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body> <input type="button" onclick="CheckAll()" value="全选"/>
<input type="button" onclick="CheckCancel()" value="取消"/>
<input type="button" onclick="CheckReverse()" value="反选"/> <table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
1
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
2
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
3
</td>
</tr>
</tbody> </table> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//全选
function CheckAll() {
//$('#tb1').find(':checkbox').attr('checked','checked'); 这个方法也是可以的!通过属性修改,但是反选的时候有问题
$('#tb1').find(':checkbox').prop('checked',true); //这个方法prop是专门为checkbox 而生的
} //反选
function CheckReverse() {
//找到/然后判断如果选中就给取消,如果没有选中就给选中
$('#tb1').find(':checkbox').each(function () {
//this 每一个复选框
//$(this).prop() 如果选中为True,如果未选中为false;
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
})
} //取消
function CheckCancel() {
//取消也可以用attr来做
//$('#tb1').find(':checkbox').removeAttr('checked')
$('#tb1').find(':checkbox').prop('checked',false)
}
</script> </body>
</html>
全选-取消-反选-实例
CMDB实例：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心弦运维CMDB管理系统</title>
<!--导入css样式-->
<link rel="stylesheet" href="css/cmdb.css">
<!--导入头部图片样式-->
<link rel="shortcut icon" href="images/cmdb_heand_image.jpeg">
</head>
<body style="margin:0 auto">
<!--定义网页顶部 -->
<div class="top top_frame"> <div class="top_info">
<h2>运维CMDB系统</h2>
</div> </div> <!--定义主题内容框架-->
<div class="page_body">
<!--定义左侧菜单栏框架-->
<div class="page_left">
<div>
<div onclick="MenuChange(this)" class="left_menu">
搜索实例
<img class="left_menu_arrowhead" src="data:images/arrowhead.jpeg">
</div>
<div id="choose_select1" onclick="ContentChange(this)" class="left_menu_content">
<div>
<img class="left_menu_child_img" src="data:images/menu_left_chiled_left.png">
搜索实例展示
</div>
</div>
</div>
<div>
<div onclick="MenuChange(this)" class="left_menu">
多选实例
<img class="left_menu_arrowhead" src="data:images/arrowhead.jpeg">
</div>
<div id="choose_select2" onclick="ContentChange(this)" class="left_menu_content hide">
<div>
<img class="left_menu_child_img" src="data:images/menu_left_chiled_left.png">
多选实例展示
</div>
</div>
</div>
<div>
<div onclick="MenuChange(this)" class="left_menu">
模态实例
<img class="left_menu_arrowhead" src="data:images/arrowhead.jpeg">
</div>
<div id="choose_select3" onclick="ContentChange(this)" class="left_menu_content hide">
<div>
<img class="left_menu_child_img" src="data:images/menu_left_chiled_left.png">
模态实例展示
</div>
</div>
</div>
<div>
<div onclick="MenuChange(this)" class="left_menu">
作业实例
<img class="left_menu_arrowhead" src="data:images/arrowhead.jpeg">
</div>
<div id="choose_select4" onclick="ContentChange(this)" class="left_menu_content hide">
<div>
<img class="left_menu_child_img" src="data:images/menu_left_chiled_left.png">
作业实例展示
</div>
</div>
</div>
</div>
<!--定义右侧内容框架,里面保存内容-->
<div class="page_right">
<!--搜索实例展示-->
<div>
<div id="content_1" class="content_master">
<div style="height: 150px;width:400px;background-color: #eff2f6;">
<form style="position:absolute;top: 65px;left: 100px;" action="https://www.sogou.com/web?">
<input id="search" class="font_color" name="query" type="text" value="请输入搜索内容"/>
<input type="submit" value="搜索"/>
</form>
</div> </div>
</div>
<!--多选实例展示-->
<div>
<div id="content_2" class="content_master hide">
<div style="position:relative;height: 150px;width:400px;background-color: #eff2f6;">
<div style="position:absolute;top: 20px;left: 120px;">
<input type="button" onclick="CheckAll_1()" value="全选"/>
<input type="button" onclick="CheckCancel_1()" value="取消"/>
<input type="button" onclick="CheckReverse_1()" value="反选"/> <table style="position:absolute;left: 30px;" border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
1
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
2
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
3
</td>
</tr>
</tbody>
</table>
</div> </div>
</div>
</div>
<!--模态对话框实例-->
<div>
<div id="content_3" class="content_master hide">
<div style="position:relative;height: 150px;width:400px;background-color: #eff2f6;">
<table style="position: absolute;top:40px;left: 50px;" border="1">
<thead></thead>
<tbody>
<tr>
<td>wwww.baidu.com</td>
<td>1.1.1.1</td>
<td>8080</td>
<td onclick="GetPrev(this)" style="cursor: pointer;">编辑</td>
</tr>
<tr>
<td>www.youku.com</td>
<td>2.2.2.2</td>
<td>8080</td>
<td onclick="GetPrev(this)" style="cursor: pointer;">编辑</td>
</tr>
<tr>
<td>www.shuaige.com</td>
<td>3.3.3.3</td>
<td>8080</td>
<td onclick="GetPrev(this)" style="cursor: pointer;">编辑</td>
</tr>
</tbody>
</table>
<div id="dialog" class="modal hide">
<form style="margin-top: 70px;margin-left: 90px;" action="" method="get">
<p>主机名:<input type="text" id="hostname"/></p>
<p>ip地址:<input type="text" id="ip"/></p>
<p>主机名:<input type="text" id="port"/></p> <!--这里的input,本身有一个事件,我们在给他设置一个事件,并且给他返回值,如果咱们定义的事件返回值为Flase他本身自带的事件就不执行了!-->
<!--就不提交了-->
<input style="margin-left: 35px;" type="submit" onclick="return SubmitForm()" value="提交"/>
<input type="button" onclick="CanCel()" value="取消"/>
</form>
</div>
</div>
</div>
</div>
<!--作业实例-->
<div>
<div id="content_4" class="content_master hide">
<div style="position:relative;height: 350px;width:1000px;background-color: #eff2f6;">
<div style="position: absolute;top: 50px;left: 100px;">
<input onclick="CheckAll()" type="button" value="全选"/>
<input onclick="CheckCancel()" type="button" value="取消"/>
<input onclick="CheckReverse()" type="button" value="反选"/>
<input id="select" type="button" value="进入编辑模式"/>
<input onclick="save_woker()" type="button" value="保存"/> <table id="cmdb_form" border="1">
<thead></thead>
<tbody id="table_list">
<tr>
<td>选择</td>
<td>序号</td>
<td>IP</td>
<td>掩码</td>
<td>网关</td>
</tr>
<tr>
<td><input class="cmdbchose" type="checkbox"/></td>
<td class="cselect">1</td>
<td>192.168.0.101</td>
<td>255.255.255.0</td>
<td>192.168.0.1</td>
</tr>
<tr>
<td><input class="cmdbchose" type="checkbox"/></td>
<td class="cselect">2</td>
<td>192.168.0.101</td>
<td>255.255.255.0</td>
<td>192.168.0.1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> <!--导入jQuery文件-->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/cmdb.js"></script>
<script>
//网页文字头,使用跑马灯实例
setInterval('Run_going()',1000); </script>
</body>
</html>
html代码
CSS代码：
/*========================================定义顶部样式========================================*/
.top{
background-color: #84bdf6;
}
/*定义顶部框架*/
.top_frame {
height: 80px;
position:relative;
} /*使用关联选择器为使用了top_frame下面的div应用样式*/
.top_frame .top_info {
position: absolute;
top: 10px;
bottom: 10px;
width: 300px;
height: 60px;
margin-left: 50px;
float:left;
}
/*使用关联选择器为使用了top_frame下面的<h1>标签设置样式*/
.top_frame .top_info h2 {
position: absolute;
bottom: 1px;
color: #fcfcfd;
} /*========================================定义下部分样式========================================*/
/*==============定义左侧样式===========*/
.page_body{
background-color: #f0f2f4;
}
/*定义左侧样式*/
.page_body .page_left{
position:absolute;
top: 80px;
left: 0px;
bottom: 0px;
width:300px;
overflow: auto;
background-color: #f3f5f7;
} /*定义左侧主菜单栏样式*/
.page_left .left_menu{
background-image: url(../images/menu_background_color.png);
margin-top: 5px;
margin-left: 10px;
cursor: pointer;;
} /*定义选择点击下啦菜单的小图片样式*/
.left_menu_arrowhead{
margin-right: 10px;
float: right;
height: 15px;
width: 15px; } /*定义左侧子菜单栏样式*/
/*增加子div的样式*/
.left_menu_content{
margin-top: 3px;
background-color: #ffffff;
margin-left: 10px; } .left_menu_child_img{
margin-left: 10px;
height: 15px;
width: 15px;
} /*使用关联定义left_menu_content下的div的样式*/
.left_menu_content div{
margin-top: 10px;
} .hide{
display: none;
} .left_menu_content_border{
border-left:3px solid blue;
} /*==============定义右侧样式===========*/
/*定义右侧框架*/
.page_body .page_right{
position: absolute;
top:80px;
bottom:0px;
left:302px;
right:0px;
overflow: auto;
} /*是搜索框默认样式*/ /*搜索实例总框体展示样式*/
.content_master{
position:absolute;
top: 200px;
left: 250px;
/*background-color: red;*/
} .black{
color:red;
}
/*需要添加搜索框默认字体样色*/
.font_color{
color: #dde3e9;
} /*定义弹出框样式*/
.modal{
position: fixed;
left:50%;
top:50%;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px;
margin-top: -150px;
} /*定义作业样式*/
.cselect{
}
/*给点击进入编辑模式按钮设置样式*/
.select_color{
background-color: sandybrown;
}
.cmdbchose{ } .change_modecolor{
background-color:#D3FF93;
}
css代码
jQuery代码：
/**
* Created by luotim on 16/2/25.
*/ //所有的jQuery的详细注释都在 //网页头,应用跑马灯实例
function Run_going(){
var content = document.title;
var firstChar = content.charAt(0);
var sub = content.substring(1,content.length);
document.title = sub + firstChar;
} //定义左侧菜单栏,点击隐藏效果
function MenuChange(arg){
//一 找到下一个标签,移除hide样式
//$(arg).next() 下一个标签
//removeClass('') 移除样式
$(arg).next().removeClass('hide');
//二 找到其他菜单,内容隐藏,添加hide
//当前标签的父亲标签$(arg).parent()
//所有父亲标签的兄弟标签siblings()
$(arg).parent().siblings().find('.left_menu_content').addClass('hide'); }
//定义左侧菜单栏,子菜单栏的进/出效果
$('.left_menu_content').hover(function () {
//滑进去的操作
$(this).css("background-color","#84bdf6");
$(this).addClass('left_menu_content_border');
},function () {
//划出后的操作
$(this).css('background-color','#ffffff');
$(this).removeClass('left_menu_content_border')
}); //定义左侧菜单栏,子菜单栏点击,变更右侧内容效果
function ContentChange(arg){
//var value_id = ;
if($(arg).attr('id') == 'choose_select1'){
$('#content_1').removeClass('hide');
$('#content_1').parent().siblings().find('.content_master').addClass('hide');
} if($(arg).attr('id') == 'choose_select2'){
$('#content_2').removeClass('hide');
$('#content_2').parent().siblings().find('.content_master').addClass('hide');
}
//var value_id = ;
if($(arg).attr('id') == 'choose_select3'){
$('#content_3').removeClass('hide');
$('#content_3').parent().siblings().find('.content_master').addClass('hide');
} if($(arg).attr('id') == 'choose_select4'){
$('#content_4').removeClass('hide');
$('#content_4').parent().siblings().find('.content_master').addClass('hide');
} } //定义搜索实例效果
$('#search').focus(function () {
$(this).val("");
$(this).removeClass('font_color');//当获得焦点的时候添加addClass样式
}).blur(function () {
if($(this).val() == ''){$(this).val('请输入搜索内容');$(this).addClass('font_color')}//失去焦点的时候添加样式和value
}); //定义多选\反选\取消实例
//全选
function CheckAll_1() {
//$('#tb1').find(':checkbox').attr('checked','checked'); 这个方法也是可以的!通过属性修改,但是反选的时候有问题
$('#tb1').find(':checkbox').prop('checked',true); //这个方法prop是专门为checkbox 而生的
} //反选
function CheckReverse_1() {
//找到/然后判断如果选中就给取消,如果没有选中就给选中
$('#tb1').find(':checkbox').each(function () {
//this 每一个复选框
//$(this).prop() 如果选中为True,如果未选中为false;
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
})
} //取消
function CheckCancel_1() {
//取消也可以用attr来做
//$('#tb1').find(':checkbox').removeAttr('checked')
$('#tb1').find(':checkbox').prop('checked',false)
} //定义模态对话框
//当点击时判断用户输入的内容是否为空,如果为空提示
function SubmitForm(){
//获取form表单中input的值
//判断值是否为空
var ret = true;
//遍历所有的input,要要有控制,就讲ret设置为false
//$('input[type="text"]') 找到所有的input标签并且类型为text的标签 $(':text').each(function () { //找到所有的input标签并且类型为text的标签,找到的是个数组,吧数组赋值给each让他循环
//$(this) == 要循环的每一个元素表示当前的元素or标签
var value = $(this).val();
if(value.trim().length == 0) { //判断取消空格"trim()",之后的字符长度为0,那么执行 注意 == 才是等于 = 是赋值!
$(this).css('border-color','red');
ret = false;
}else {
$(this).css('border-color', 'green');
}
}); return ret;
} //当点击时从form表单中的input标签中获取内容并赋值给模态对话框
function GetPrev(arg){
var list = [];
$.each($(arg).prevAll(),function(i) { //循环$(arg).prevAll()这里的内容,然后把值赋值给 i 这里的function(i)
var item = $(arg).prevAll()[i]; //获取值,如果不取获取到的是索引
var text = $(item).text(); //取出值然后赋值给text
list.push(text)
});
//反转列表
var new_list = list.reverse();
//把获取到的值引用到模态对话框中,赋值给value
$('#hostname').val(new_list[0]);
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]); $('#dialog').removeClass('hide');
} //取消的操作,隐藏模态对话框
function CanCel() {
$('#dialog').addClass('hide')
} //作业js
//作业全选
function CheckAll() {
//$('#tb1').find(':checkbox').attr('checked','checked'); 这个方法也是可以的!通过属性修改,但是反选的时候有问题
$('#table_list').find(':checkbox').prop('checked',true); //这个方法prop是专门为checkbox 而生的
//找到所有选中的td并循环
if($('#select').attr('status') == 'on'){ //判断编辑模式是否选中，如果选中执行
//找到ID为cmdb_form，下面所有选中了的标签下的td标签,但是刨除序列号$('#cmdb_form').find(':checkbox').parent().nextAll().not('.cselect') $('#table_list').find(':checkbox').parent().nextAll().not('.cselect').each(function () {
//循环取出的每一个td标签，并获取里面的值
// 并且判断td标签内的孩子是否为input，如果是什么都不做，如果不是执行修改字符串为input标签
if($(this).children().is('input')){console.log('The children type is input so do not running coding')}else{
var old = $(this).text();
//对取出来的值进行拼接
var temp ="<input value='"+old+"'>";
//然后赋值
$(this).html(temp);}
}) }
} //作业反选
function CheckReverse() {
//找到input标签为checkbox 然后判断如果选中就给取消,如果没有选中就给选中
$('#table_list').find(':checkbox').each(function () { //首先判断是否为编辑状态
if($('#select').attr('status') == 'on'){
//如果为编辑状态
if($(this).prop('checked')){
//如果选中了，首先把他的选中状态取消并且，把他的input标签改为字符串类型
// 状态给为取消
$(this).prop('checked',false);
//把父级别下面的所有input标签改为字符串
$(this).parent().nextAll().not('.cselect').each(function () {
//取出input标签内的内容
var input_info = $(this).children().val();
//并赋值给td标签
$(this).html(input_info);
});}else{
//如果没有选中，首先把他的状态改为选中，并且把他的字符串赋值给input标签
//改为选中
$(this).prop('checked',true);
//并把兄父级别下面的字符串赋值给input标签
$(this).parent().nextAll().not('.cselect').each(function () {
//取出他的值来
var old = $(this).text();
//对取出来的值进行拼接
var temp ="<input value='"+old+"'>";
//然后赋值
$(this).html(temp);})
}}else{
//如果不是编辑状态
if($(this).prop('checked')){
//如果不是编辑状态把选中的给取消
$(this).prop('checked',false);
}else{
//如果不是编辑状态把未选中的给选中
$(this).prop('checked',true);
}}
})
} //作业取消
function CheckCancel() {
//取消也可以用attr来做
//$('#tb1').find(':checkbox').removeAttr('checked')
$('#table_list').find(':checkbox').prop('checked',false);
//不管是选中，只要点击取消我就去找到所有的td转为input的标签全部转回td标签
$('#cmdb_form').find(':checkbox').parent().nextAll().not('.cselect').find(':input').each(function () {
var input_info = $(this).val();
$(this).parent().html(input_info);
})
} //编辑按钮功能
$('#select').toggle(
//进入编辑模式执行的function
function () {
$(this).addClass('select_color');
$(this).attr('status','on');
console.log($(this).attr('status'))
},
function () {
//退出编辑模式执行的function
$(this).removeClass('select_color');//移除按钮上的样式
$(this).removeAttr('status');//删除自定义属性
//不管是选中，只要你退出编辑模式我就去找到所有的td转为input的标签全部转回td标签
//并判断值是否为空
$('#cmdb_form').find(':checkbox').parent().nextAll().not('.cselect').find(':input').each(function () {
if($(this).val().length == '0'){alert('Sorry the value can not be null')}else{
var input_info = $(this).val();
$(this).parent().html(input_info);
$('.cmdbchose').prop('checked',false)
} })}
); //定义单选功能
$('.cmdbchose').click(function () {
//判断是否为编辑模式
if($('#select').attr('status') == 'on'){
if($(this).prop('checked')){
//如果被选中了，取消选中并把input标签内的value取出并改为字符串
//alert('is chose')
//找到当前父标签的兄弟标签并刨除.cselect类的标签
$(this).parent().siblings().not('.cselect').each(function () {
var old = $(this).text();
//对取出来的值进行拼接
var temp ="<input value='"+old+"'>";
//然后赋值
$(this).html(temp);
})
}else{
//如果没有被选中，选中并把字符串取出来赋值给input标签
//alert('not be chose')
//如果没有被选中，找到父亲标签的兄弟标签，并取出里面的input的value并改为字符串
$(this).parent().siblings().not('.cselect').each(function () {
console.log($(this));
var input_info = $(this).children().val();
$(this).html(input_info);
})
}}
}); //定义作业保存按钮功能 function save_woker(){
//找到input标签为checkbox 然后判断如果选中就给取消,如果没有选中就给选中
$('#table_list').find(':checkbox').each(function () {
//判断是否为编辑状态
if($('#select').attr('status') == 'on'){
//判断这个标签是否为选中状态
if($(this).prop('checked')){
//判断值是否空，
//如果为空，报警
//如果不为空然后把input标签的内容写入text，然后取消选中状态
//把父级别下面的所有input标签刨除..cselect标签的所有标签
$(this).parent().nextAll().not('.cselect').each(function () {
//判断，任意一个值为空都不行
if($(this).children().val().length == '0'){(alert('Sorry the value can not be null'))}else{
//如果值不为空，那么保存
//取出input标签内的内容
var input_info = $(this).children().val();
//并赋值给td标签
$(this).html(input_info);
console.log($(this))
} });
//保存完成之后，取消所有选中项目
$('#table_list').find(':checkbox').prop('checked',false)
}
}
});
}
jQuery代码
Python之路【第十二篇续】jQuery案例详解的更多相关文章
- Python之路(第二十二篇) 面向对象初级：概念、类属性
一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...
- Python之路(第十二篇)程序解耦、模块介绍\导入\安装、包
一.程序解耦 解耦总的一句话来说,减少依赖,抽象业务和逻辑,让各个功能实现独立. 直观理解“解耦”,就是我可以替换某个模块,对原来系统的功能不造成影响.是两个东西原来互相影响,现在让他们独立发展:核心 ...
- Python之路【第二十一篇】Django ORM详解
ORM回顾 关系对象映射(Object Relational Mapping,简称ORM). django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表. 对于ORM框 ...
- Python开发【第二十二篇】：Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- “全栈2019”Java异常第二十二章：try-with-resources语句详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- 二十二、mysql索引原理详解
背景 使用mysql最多的就是查询,我们迫切的希望mysql能查询的更快一些,我们经常用到的查询有: 按照id查询唯一一条记录 按照某些个字段查询对应的记录 查找某个范围的所有记录(between a ...
- [转载]JavaEE学习篇之——JQuery技术详解
原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...
- J2EE学习篇之--JQuery技术详解
前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- Python之路【第五篇续】：面向对象编程二
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABgQAAALaCAIAAABxja8cAAAgAElEQVR4nOzd6X9Tdd74/+uv+f5uzF
随机推荐
- bzoj1787
lca裸题,画画图看看就可以了,找出那个一次公共祖先,求距离 #include<iostream> #include<set> #include<cstring> ...
- Echarts-画叠加柱状图，双折线图
导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> js如下 load ...
- 使用fiddler查看https请求
首先点击菜单栏Tools>>>Fiddler Options>>>HTTPS 把Decrypt HTTPS Traffic 复选框勾选上 勾上之后,会弹窗提示你. ...
- wow.js使用方法
近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简 ...
- sublime text 3之快捷键操作
1.安装插件 https://packagecontrol.io/installation 2.将 Tab缩进(制表符缩进) 改为 4个空格 打开Preferences -> Settings- ...
- Web前端性能优化教程06：减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- eclipse下查看jdk源码
打开eclipse,点 "window"-> "Preferences" -> "Java" -> "Insta ...
- 【BZOJ-1046】上升序列 DP + 贪心
1046: [HAOI2007]上升序列 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3723 Solved: 1271[Submit][Stat ...
- 【poj3422】 Kaka's Matrix Travels
http://poj.org/problem?id=3422 (题目链接) 题意 N*N的方格,每个格子中有一个数,寻找从(1,1)走到(N,N)的K条路径,使得取到的数的和最大. Solution ...
- Linq Like
Like的操作,有点像in,但是,方向变了.什么意思呢.就是你给定一个字符串,去寻找数据中某个字段包含这个字符串.就是给定的字符串是某字段的子集.Sql Script是这么写的. Selec * fr ...