网页设计之jQuery
1.在html中引入css和jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css文件"> #引入css文件 </head> <body> <script src="jquery-1.12.4.js"></script>#引入jQuery文件,src为路径 </body> </html>
2.jQuery对象与DOM对象互相转化
将jQuery转化为DOM: $("#i1")[0] = dom
将DOM转化为jQuery: $(dom) = jQuery
$(dom)=jquery
【$('<div id='i1'>123</div>') = [div#i1]或
d='<div id='i1'>123</div>'
$(d) = [div#i1]】
3.jQuery查找元素,选择器
- id
<div id='i1'>ww</div>
$('#i1')
- class
<div class='c1'>123</div>
$('.c1')
- 标签
<div class='c1'>
<a>f</a>
<a>f</a>
</div>
$('a')找到所有的a标签
- 多选择器组合查找
$('#i1,.c1,a')
- 层级选择器
$('#i1 a') 找div id=‘i1’内的所有a标签,包括子子孙孙
$('#i1 > a') 只找div id='i1'内的所有子a标签,不包括孙a标签,所谓的孙a标签就是子div下的a标签
$('#i1 + a') 找div i1的下一个a标签,此a标签跟i1是同一级的
$('#i1 ~ a') 找div i1下边的所有兄弟标签,i1上边的就不找,此a标签跟i1是同一级的
$('#i1 a:first') 找div id='i1'内的第一个a标签 【还有last找最后一个】
$('#i1 a:eq(0)') 找div id='i1'内的所有a标签的第0个a标签【eq是等于的意思,0是索引,还有lt小于,gt大于 】
$('#i1').text() 获取div id='i1'内的内容
$('#i1').next() 找div id='i1'的下一个兄弟标签
$('#i1').prev() 找div id='i1'的上一个兄弟标签
$('#i1').prev() 找div id='i1'的上边的所有兄弟标签
$('#i1').parent() 找div id='i1'的父标签
$('#i1').children() 找div id='i1'的所有孩子标签
$('#i1').siblings() 找div id = 'i1'的所有兄弟标签
$('#i1').find('c1') 找div id='i1'内的所有class为‘c1’的标签
$('#i1').addClass('c1') 找到div id='i1'并给该div添加class 'c1'
$('#i1').removeClass('c1') 找到div id='i1'并给该div去掉class 'c1'
$('#i1').hasClass('c1') 找到div id='i1'并判断该div是否有class 'c1',有则返回true
$('#i1').toggleClass('c1') 找到div id='i1'并判断该div是否有class 'c1',有则去掉c1,没有则添加c1
$('#i1').parents() 找div id='i1'的父标签以及祖宗标签,一直到html标签
$('#i1').parentsUntil('.c1') 找div id='i1'的父标签以及祖宗标签,一直到class='.c1'标签结束
- 属性选择器
$('[alex]') 找所有属性为alex的标签。【<a alex='123'></a> <p alex='456'></p>,会找到这两个属性为alex的a、p标签】
$('[alex="123"]') 找属性为alex="123"的标签,注意引号的不同
$(':disabled') 找到所有不可编辑的标签【<input type='text' disabled />,disabled表示该输入框不可输入内容,enabled表示可以输入内容】
- 文本操作
$('#i1').text() # 获取文本内容
$('#i1').text(“1”) # 设置文本内容
$('#i1').html() #获取文本内容加网页标签
$('#i1').html("<a>1</a>")#设置文本内容加网页标签
$('#i1').val() #获取value的值
$('#i1').val(..)#设置value的值
- 属性操作
<input id='i1' type='button' value='取消' />
$('#i1').attr('value') #获取div id='i1'内的属性value的值
$('#i1').attr('value','new') #设置div id='i1'内的属性value的值为new,这种方式也可以新加一个属性
$('#i1').removeAttr('value') #删除i1标签内的value属性
# prop()专门用于chekbox,radio框的选中操作
$('#i1').prop('checked') #获取i1标签内checkbox的checked值,打上对勾则返回true
$('#i1').prop('checked', true) #设置i1标签内checkbox的checked值,true为打上对勾
$('#i1').prop('checked', false) #设置i1标签内checkbox的checked值,false为去掉对勾
$('.c1').index(2) #获取索引值2对应的标签
- 文档操作
$('#i1').append(temp) #在i1标签内部的最后添加temp,此处temp为变量
$('#i1').prepend(temp) #在i1标签内部的前边添加temp,此处temp为变量
$('#i1').after(temp) #在i1标签外部的下边添加一个兄弟temp,此处temp为变量
$('#i1').before(temp) #在i1标签外部的上边添加一个兄弟temp,此处temp为变量
$('#i1').remove() # 找到i1标签并将该标签删除
$('#i1').eq(index).remove() #index为一个数值,找到i1标签内index值为对应值的标签并删除
$('#i1').eq(index).clone() #index为一个数值,找到i1标签内index值为对应值的标签并复制
- css样式操作
var tag = document.createElement('span'); #增加一个新标签span,这时tag为DOM对象
$(tag).css('color','green'); #将DOM对象转换为jQuery对象,给标签span添加样式:颜色为green
$(tag).css('position','absolute'); #给标签添加样式position
$(tag).css('fontSize',fontSize + "px"); #给标签添加样式字体大小
$(tag).css('right',right + "px"); #给标签添加样式右边距
$(tag).css('top',top + 'px'); #给标签添加样式上边距
$(tag).css('opacity',opacity); #给标签添加样式 透明度
- 位置操作
$(window).scroolTop() 获取当前滚动条的位置
$(window).scroolTop(0) 返回顶部,即给滚动条设置一个位置
$(window).scroolLeft(0) 返回左部
$('#i1').height() =height #获取标签高度,不包括边框宽度
$('#i1').innerHeight() =padding-top + height + padding-bottom#获取标签定义高度+内边距高度
$('#i1').outerHeight() =boder-top + padding-top + height + padding-bottom + boder-bottom#获取标签定义高度+上下内边距高度+上下边框宽度
$('#i1').outerHeight(true) =boder-top + padding-top + height + padding-bottom + boder-bottom + margin-top + margin-bottom #获取标签定义高度+上下内边距高度+上下边框宽度+上下外
边距
$('#i1').offset() 获取坐标 {top:20,left:30}
$('#i1').offset().top 获取i1标签距离顶部的高度
$('#i1').offset().left 获取i1标签距离左部的高度
$('#i1').position() i1标签中含有position=absolute样式,该方法会获取i1标签与含有position=relative标签的距离
- jQuery绑定事件的四种方式:(以click事件举例)
1.$('#i1').click(function(){ }) #没有委托属性,新添加的标签,不能立即绑定事件
2.$('#i1').bind('click',function(){ #没有委托属性,新添加的标签,不能立即绑定事件
}) 绑定
$('#i1').unbind('click',function(){ 解绑
})
3.$('#i1').delegate('a','click',function(){ }) 绑定 #给i1标签下的所有a标签绑定事件。有委托属性,新添加的标签,立即可以绑定事件
$('#i1').undelegate('a','click',function(){ }) 解绑
4.$('#i1').on('click', function(){ }) 绑定 #没有委托属性,新添加的标签,不能立即绑定事件
$('#i1').on('click', function(){ }) 解绑
4.实现全选反选取消框
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环:
- $('#tb:checkbox').each(function(){
// this,在DOM中指代当前循环的元素
})
- var v = 条件 ? 真值 : 假值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll()" /> <input type="button" value="反选" onclick="reverseAll()" /> <input type="button" value="取消" onclick="cancle()" /> <table border="1"> <thead> <tr> <th>选项</th> <th>选项</th> <th>选项</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr><tr> <td><input type="checkbox"/></td> <td>2.2.2.2</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } </script> <script> function reverseAll() { $('#tb :checkbox').each(function () { //each()函数会循环遍历jQuery找到的所有标签,并给这些标签执行某函数 //this指代当前正在循环的标签(是DOM对象) /* dom实现方式 if(this.checked){ //表示如果this.checked为true,不要写成this.checked = true this.checked = false; }else { this.checked = true; } */ /*jQuery实现方式*/ if($(this).prop('checked')){ //若果checkbox被选中,则$(this).prop('checked')返回true $(this).prop('checked',false); }else { $(this).prop('checked',true); } }) } </script> <script> function cancle() { $('#tb :checkbox').prop('checked',false); } </script> </body> </html>
5.jQuery支持链式编程
菜单栏显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ //jQuery支持链式编程,可以一直点下去 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
6.表格页面编辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this指代$(".modal,.shadow")获取的标签 var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); }); </script> </body> </html>
7.标签的添加、删除、复制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { //添加 var v = $('#t1').val(); //获取输入框的值 var temp = "<li>" + v + "</li>"; //拼接要添加的内容 // $('#u1').append(temp); $('#u1').prepend(temp); // $('#u1').after(temp) // $('#u1').before(temp) }); $('#a2').click(function () { //删除 var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); 使标签为空 }); $('#a3').click(function () { //复制 var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); }) </script> </body> </html>
8. 获取输入框的内容并添加到表格,删除表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { //删除操作 $(this).parent().parent().remove(); }); function confirmModal() { //笨拙的简单添加表格 var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
9.点赞动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { //self指代参数 // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); //添加样式 $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; //自增自减 top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ //当样式达到要求时,为防止函数继续执行,需在这里将定时函数清除 clearInterval(obj); $(tag).remove(); //同时将增加的样式也清除 } }, 40); } </script> </body> </html>
10.实现可拖动的标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
11. find发现多个标签类型;判断输入框是否为空,若空则会报‘必填’;等框架加载出来就会执行函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="s5.html" method="POST"> <div><input name="n1" tex = "用户名" type="text" /></div> <div><input name="n2" tex = "密码" type="password" /></div> <div><input name="n3" tex = "邮箱" type="text" /></div> <div><input name="n4" tex = "端口" type="text" /></div> <div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" /> <img src="..."> </form> <script src="jquery-1.12.4.js"></script> <script> $(function(){// 当页面框架加载完毕后,自动执行函数,如果不加这个自执行函数,则会等当页面所有元素完全加载完毕后,再执行 $(':submit').click(function () { $('.error').remove(); var flag = true; $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v = $(this).val(); var n = $(this).attr('tex'); if(v.length <= 0){ flag = false; var tag = document.createElement('span'); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); //在标签的后边添加tag标签 // return false; 当第一个输入框未填内容时,函数不会继续执行 } }); return flag; }); }); </script> </body> </html>
12.自定义jQuery扩展两种方式
方式一:
<script>
$.fn.extend({
'wangsen':function() {
return 'sb';
}
});
$('#i1').wangsen(); //调用方式
</script>
方式二:
<script>
$.extend({
'wangsen':function() {
return 'sb';
}
});
$.wangsen(); //调用方式
</script>
方式三:将扩展写成.js文件,一定要写成自执行函数,方便封装自己的全局变量。
【使用其他现成的jQuery扩展:<script src='zidingyi.js'></script>】
/** * Created by wt on 2016/11/26. */ (function (arg) { var status = 1; //封装的自己的全局变量 arg.extend({ //自定义的扩展函数 'wangsen': function () { return 'sb'; } }); })(jQu$ery); //一定要写参数为jQuery
网页设计之jQuery的更多相关文章
- Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...
- 手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
- 网页设计、java、Andorid资源清单整理
多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术: Html, Js, Css, Ps HTML/HTML5 网页的基础Html必须知道的.但 ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- 【转】手机web——自适应网页设计(html/css控制)
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 常用网站--前端开发类+网页设计类+平面素材类+flash类
前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...
随机推荐
- jquery鼠标右键事件
$('body').live("mousedown",function(e){ $('body').bind("contextmenu",function(e) ...
- Linq to Xml读取复杂xml(带命名空间)
前言:xml的操作方式有多种,但要论使用频繁程度,博主用得最多的还是Linq to xml的方式,觉得它使用起来很方便,就用那么几个方法就能完成简单xml的读写.之前做的一个项目有一个很变态的需求:C ...
- .Net下几个服务框架介绍
简介 在公司的服务多了以后,为了调用上的方便,同时为了以后的服务治理,一般都会使用一些服务框架,这里主要介绍我知道的几个服务框架,简析一下这些服务框架的基本概念. 可投入生产环境使用的 以下两个服务框 ...
- jquery easy ui datagrid中遇到的坑爹的問題。。。
; //修改 function Update() { //獲取選中行 var selected = $("#dg1").datagrid('getSelected'); //判斷是 ...
- Android只能动态注册的广播Action
只能动态注册的广播(部分): android.intent.action.SCREEN_ON android.intent.action.SCREEN_OFF android.intent.actio ...
- mogodb3.2源码安装
mogodb3.2源码安装 下载链接: http://www.mongodb.org/downloads 1.环境准备: 1.mkdir -p /data/tgz #创建存放软件的目录 2.mkdir ...
- [转载]抓包,端口镜像,monitor session命令(转)
原文地址:抓包,端口镜像,monitor session命令(转)作者:浮云皓月 一.SPAN简介 SPAN技术主要是用来监控交换机上的数据流,大体分为两种类型,本地SPAN和远程SPAN. --Lo ...
- BZOJ3110: [Zjoi2013]K大数查询
喜闻乐见的简单树套树= =第一维按权值建树状数组,第二维按下标建动态开点线段树,修改相当于第二维区间加,查询在树状数组上二分,比一般的线段树还短= =可惜并不能跑过整体二分= =另外bzoj上的数据有 ...
- boost之lexical_cast
第一次翻译,虽然是个很简单的函数介绍... 文件boost/lexical_cast.hpp中定义了此函数: namespace boost { class bad_lexical_cast; tem ...
- 理解Kalman滤波的使用
Kalman滤波简介 Kalman滤波是一种线性滤波与预测方法,原文为:A New Approach to Linear Filtering and Prediction Problems.文章推导很 ...