大纲
一、jQuery简介
二、jQuery 和Dom关系及jQuery版本
1、jQuery版本
2、jQuery和Dom转换
三、jQuery 选择器
1.1、基本
1.2、层级
2、基本筛选器
3、属性选择器
4.1、表单
4.2、表单对象属性
四:jQuery 示例
1、示例:全选、反选、取消
2.1、筛选器示例:左侧菜单点击展开内容
2.2、筛选器
3.1、jQuery 文本、样式以、属性、文档处理操作
3.2、示例:模态对话框
4、示例:tab切换菜单
5、示例:点赞以及jQuery css操作
6、示例:拖动面板以及位置操作
7.1、jQuery绑定事件及示例
7.2、JQuery事件之阻止事件发生 及示例:表单验证
五、jQuery 扩展

一、jQuery简介

jQuery分为两部分:

  • 查找元素
  • 操作元素

jQuery 中文文档

jQuery官网地址

二、jQuery 和Dom关系及jQuery版本

1、jQuery版本

当前jQuery版本:这里使用的1.x系列最新版本

1.x系列 兼容性最好,1系列当前最新1.12
2.x系列
3.x系列 最新的版本,IE低版本不再支持

下载的时候有两个版本:一个标准版、一个min压缩版。测试时使用标准版,线上建议使用压缩版。

下载后,引入jQuery类库:

<head>
<link rel="stylesheet" href="1.css">
<!--引入css文件-->
<style>
/* 写css样式 */
</style> <script src="jquery-1.12.4.js"></script>
<!--引入jQuery类库,JavaScript一般放到body尾部-->
<script>
// script 代码。调用使用 jQuery.xxx
// jQuery.xxx <==> $.xxx $等同于jQuery关键字
</script>
</head>

2、jQuery和Dom转换

> $('#i1')     // jQuery获取
[<input type="text" id="i1">]
> document.getElementById('i1') // dom获取
<input type="text" id="i1">
> $('#i1')[0] // jQuery对象转换为dom对象
<input type="text" id="i1">
> $(document.getElementById('i1')) // dom对象转换为jQuery对象
[<input type="text" id="i1">]
// 转换:
// jquery对象[0] => Dom对象
// Dom对象 => $(Dom对象)

三、jQuery 选择器

1.1、基本

    1. id 选择器

      $('#id')

    1. class 选择器

      <div class='c1'></div>

      $(".c1")

    1. 标签 选择器

      <a>f</a>

      $('a')

    1. 组合

      $(' a, .c1, #i10 ')

1.2、层级

  • $(‘#i10 a’) 子子孙孙(i10里所有a标签)
  • $(‘#i10>a’) 儿子(只取子标签里的a标签)
  • prev + next 下一个标签
  • prev ~ siblings 兄弟标签

2、基本筛选器

:first          // 获取匹配的第一个元素
:last
:not(selector) //去除所有与给定选择器匹配的元素
// 在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index) :gt(index) :lt(index)
// 等于 大于 小于
:header // 匹配如 h1, h2, h3之类的标题元素

3、属性选择器

之前的内容,没有对自定义属性进行查找的,如:<a fgf='22'></a>

jQuery 支持对自定义属性的获取查找

$('[fgf]')       // 具有fgf属性的所有标签
$('[fgf="22"]') // fgf属性等于22的标签
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

4.1、表单

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")    // 不使用表单选择器,也能实现
$(':text') // 使用表单选择器

4.2、表单对象属性

:enabled        // 可编辑,默认就是
:disabled // 不可编辑
:checked // 被选中(单选框、复选框)
:selected // 被选中(下拉框)

四:jQuery 示例

1、示例:全选、反选、取消

相关知识点:

- 选择器
- .prop
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
- .each
jQuery方法内置循环: $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){
// k当前索引
// this,DOM,当前循环的元素 $(this)
})
- 三元运算 var v = 条件 ? 真值 : 假值
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th><th>IP</th><th>PORT</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>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
} // .prop 专门对checked操作
function cancelAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){ // .each 循环选中的每一个元素
/* Dom实现
if(this.checked){
this.checked = false;
}else{
this.checked = true;
} */
// this,代指当前循环的每一个元素;三元运算var v = 条件? 真值:假值
var v = $(this).prop('checked')?false:true;
// console.log(k,this);
$(this).prop('checked',v);
})
}
</script>
</body>

2.1、筛选器示例:左侧菜单点击展开内容

筛选器:

$(this).next()         // 下一个
$(this).prev() // 上一个
$(this).parent() // 父
$(this).children() // 孩子
$('#i1').siblings() // 兄弟(不包含自己)
$('#i1').find('#i1') // 子子孙孙中查找

添加移除样式:

$('#i1').addClass(..)  // 添加样式
$('#i1').removeClass(..)// 移除样式

示例:

<head>
<style>
.header{
background-color: royalblue;
}
.content{
min-height: 70px;
}
.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(){
// 当前点击的标签 $(this); .next 获取某个标签的下一个标签
// $(this).next().removeClass('hide'); 移除hide属性
// $(this).parent().siblings().find('.content').addClass('hide')
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
// 链式编程
})
</script>
</body>

2.2、筛选器

$('#i1').next()				// 下一个			$('#i1').prev()    //往上找
$('#i1').nextAll() // 下面所有 $('#i1').prevAll()
$('#i1').nextUntil('#ii1') // 下面直到哪里 $('#i1').prevUntil('#ii1')
$('#i1').parent() // 父标签
$('#i1').parents() // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil() //查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1) <——> $('li:eq(1)')
first()
last()
hasClass(class)

3.1、jQuery 文本、样式以、属性、文档处理操作

  • 文本操作:
$(..).text()            // 获取文本内容
$(..).text("<a>1</a>") // 设置文本内容 $(..).html() // 获取
$(..).html("<a>1</a>") // 设置 $(..).val() // 获取
$(..).val(..) // 设置
  • 样式操作:

addClass
removeClass
toggleClass 比如实现网页开关灯功能

开关灯示例:

<head>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" />
<div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
// if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
// }else{
// $('.c1').addClass('hide');
// }
$('.c1').toggleClass('hide'); // 一句搞定
})
</script>
</body>
  • 属性操作:
// 专门用于做自定义属性
$(..).attr('n') // 获取
$(..).attr('n','v') // 设置
$(..).removeAttr('n') // 删除 <input type='checkbox' id='i1' />
// 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug,所以用prop
$(..).prop('checked')
$(..).prop('checked', true)
  • 文档处理:
append    // 往后加
prepend // 往前加
after // 紧挨着后面
before // 紧挨着前面 remove // 删除
empty // 只清空内容 clone // 克隆一份数据

3.2、示例:模态对话框

<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>
</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');
} 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>

4、示例:tab切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>

上面是通过自定义属性实现的,下面不用自定义属性,用索引也能实现。

index 获取索引位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容一</div>
<div class="hide" >内容二</div>
<div class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>

5、示例:点赞以及jQuery css操作

Query css处理操作

            $('t1').css('样式名称', '样式值')
点赞:
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小,位置

点赞示例

<!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>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
});
function AddFavor(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>

6、示例:拖动面板以及位置操作

  • 位置操作:
$(window).scrollTop()   // 获取windows滑轮位置  // 注意是谁的滑轮
$(window).scrollTop(0) // 设置windows滑轮位置
scrollLeft([val]) // 左右滚动滑轮设置 $('#i1').offset() // 获取标签位置
offset().left // 指定标签在html中的坐标位置
offset().top // 指定标签在html中的坐标位置
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<!--    position()      指定标签相对父标签(找到relative)标签的坐标-->
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
<script> // 纯高度,边框,外边距,内边距
$('i1').height() // 获取标签的高度 纯高度
$('i1').innerHeight() // 获取自身高度+padding;
$('i1').outerHeight() // 参数:false-->获取自身高度+padding+border;
$('i1').outerHeight(true) // 获取自身高度+padding+border+margin;
</script>

7.1、jQuery绑定事件及示例

  • 绑定事件知识点:
  // DOM: 三种绑定方式
// jQuery:四种
// 第一种:
$('.c1').click()
$('.c1').....
// 第二种:
$('.c1').bind('click',function(){ // 绑定
}) $('.c1').unbind('click',function(){ // 解绑
})
// 第三种:*******有特殊功能,看示例(一开始并没有绑定事件,当点击的时候才给绑定事件)
$('.c').delegate('a', 'click', function(){ // 绑定、委托
}) $('.c').undelegate('a', 'click', function(){ // 解绑
})
// 第四种:上面调用的实际上都是这种
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
  • 示例:添加内容,并自动绑定事件
  <body>
<input id="t1" type="text" />
<input id="a1" 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);
});
// 第三种绑定方式
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
// 第一种绑定方式
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// 第二种绑定方式
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// 第四种绑定方式
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
</script>
</body>

7.2、JQuery事件之阻止事件发生 及示例:表单验证

a标签是不是默认有个onclick事件,如果再给绑定一个onclick事件会怎么样?

默认:先执行绑定事件,在执行a标签的默认事件。

阻止事件发生
return false
# 当页面框架加载完成之后,自动执行
$(function(){
$(...)
})

示例:

<body>
<!--Dom方式:onclick里需要加return-->
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a>
<!--jQuery方式:-->
<a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
// Dom方式:
function ClickOn() {
alert(123);
return true; // true:执行后面操作,dom绑定里需要加return
}
// jQuery方式:
$('#i1').click(function () {
alert(456);
return false; // false:不执行后面操作
})
</script>
</body>
  • 示例:表单验证
<!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(){
//
// });
$(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);
// return false; // 加上false后,第一个不合法,后面不通过
}
});
return flag;
});
});
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// })
</script>
</body>
</html>

五、jQuery 扩展

如果想自定义jQuery功能,可以如下定义:

  • $.extend $.方法
  • $.fn.extend $(..).方法
<body>
<script src="jquery-1.12.4.js"></script>
<script>
var v = $.wangsen();
alert(v);
// $('#i1').css()
// $.ajax()
// 第二种写法:.fn.extend
$.fn.extend({
"name1": function () {
return 'fgf00';
}
});
var v2 = $('#i1').hanyang();
alert(v);
// 第一种写法:.extend
$.extend({
'name2': function () {
return 'fgf01';
}
});
var v1 = $.wangsen();
alert(v);
</script>
</body>

如果引入第三方jQuery扩展,全局变量、扩展名,可能重复,因此使用还是都定义自执行函数。

(function (arg) {
var status = 1;
arg.extend({
'name': function () {
return 'fgf';
}
});
})(jQu$ery);

jquery 知识整理的更多相关文章

  1. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  2. ORACLE FLASHBACK DATABASE 知识整理

    1.知识储备 1)    只有SYSDBA有权执行,闪回前一定要记录当前SCN 2)    需要停机,并要求处于ARCHIVELOG模式中 3)    闪回日志不能被复用和归档,是自动管理的.RVWR ...

  3. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

  4. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  5. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  6. wifi基础知识整理

    转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...

  7. 数据库知识整理<一>

    关系型数据库知识整理: 一,关系型数据库管理系统简介: 1.1使用数据库的原因: 降低存储数据的冗余度 提高数据的一致性 可以建立数据库所遵循的标准 储存数据可以共享 便于维护数据的完整性 能够实现数 ...

  8. 【转载】UML类图知识整理

    原文:UML类图知识整理 UML类图 UML,进阶必备专业技能,看不懂UML就会看不懂那些优秀的资料. 这里简单整理 类之间的关系 泛化关系(generalization) 泛化(generalize ...

  9. Linux进程管理知识整理

    Linux进程管理知识整理 1.进程有哪些状态?什么是进程的可中断等待状态?进程退出后为什么要等待调度器删除其task_struct结构?进程的退出状态有哪些? TASK_RUNNING(可运行状态) ...

随机推荐

  1. LC 655. Print Binary Tree

    Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...

  2. js 中文字符串转base64

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ssh 的一个坑

    概述 今天我碰到 fabric 和 ssh 的一个坑,记录下来,供以后开发时参考,相信对其他人也有用. ssh 今天用 ssh 登录远程服务器用不了 npm,查了下,发现原因是: ssh登录时不会加载 ...

  4. Oracle 设置主键自增长

    如果想在Oracle数据库里实现数据表主键自增,我们似乎没有办法像MySql般直接定义列的属性来实现.不过对于这个数据库的常用功能,我们还是有办法实现的.这里将展示使用触发器来实现主键自增. 1.准备 ...

  5. Django FBV CBV以及使用django提供的API接口

    FBV 和 CBV 使用哪一种方式都可以,根据自己的情况进行选择 看看FBV的代码 URL的写法: from django.conf.urls import url from api import v ...

  6. JsonResponse简单使用

    一个简单的django项目 urlpatterns = [ # views.hello 是执行views中的hello函数 # name 是URL的别名 url(r'^hello/', views.h ...

  7. 使用gimp画线、矩形、圆等

    使用gimp画线.矩形.圆等 https://blog.csdn.net/tody_guo/article/details/7628508 2012年06月03日 19:08:47 Tody Guo  ...

  8. Spring:注解(@suppresswarnings,@Valid,初始化静态配置数据,定时任务,@EnableAutoConfiguration)

    1.@suppresswarnings(" ") 2.@Valid @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字 ...

  9. 什么是maven?maven中的pom文件是做什么的?

    Maven 是专门用于构建和管理Java相关项目的管理工具. 1.使用Maven管理的Java 项目都有着相同的项目结构 2.统一维护jar包 POM是项目对象模型(Project Object Mo ...

  10. Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths)

    Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths) 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向 ...