jquery 知识整理
大纲
一、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 和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、基本
id 选择器
$('#id')
class 选择器
<div class='c1'></div>$(".c1")
标签 选择器
<a>f</a>$('a')
组合
$(' 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 知识整理的更多相关文章
- Kali Linux渗透基础知识整理（二）漏洞扫描
Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...
- ORACLE FLASHBACK DATABASE 知识整理
1.知识储备 1) 只有SYSDBA有权执行,闪回前一定要记录当前SCN 2) 需要停机,并要求处于ARCHIVELOG模式中 3) 闪回日志不能被复用和归档,是自动管理的.RVWR ...
- js事件(Event)知识整理
事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下 鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- wifi基础知识整理
转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...
- 数据库知识整理<一>
关系型数据库知识整理: 一,关系型数据库管理系统简介: 1.1使用数据库的原因: 降低存储数据的冗余度 提高数据的一致性 可以建立数据库所遵循的标准 储存数据可以共享 便于维护数据的完整性 能够实现数 ...
- 【转载】UML类图知识整理
原文:UML类图知识整理 UML类图 UML,进阶必备专业技能,看不懂UML就会看不懂那些优秀的资料. 这里简单整理 类之间的关系 泛化关系(generalization) 泛化(generalize ...
- Linux进程管理知识整理
Linux进程管理知识整理 1.进程有哪些状态?什么是进程的可中断等待状态?进程退出后为什么要等待调度器删除其task_struct结构?进程的退出状态有哪些? TASK_RUNNING(可运行状态) ...
随机推荐
- OGG 从Oracle备库同步数据至kafka
OGG 从Oracle备库同步数据至kafka Table of Contents 1. 目的 2. 环境及规划 3. 安装配置JDK 3.1. 安装jdk 3.2. 配置环境变量 4. 安装Data ...
- Java Web使用过滤器防止Xss攻击，解决Xss漏洞
转: Java Web使用过滤器防止Xss攻击,解决Xss漏洞 2018年11月11日 10:41:27 我欲乘风,直上九天 阅读数:2687 版权声明:本文为博主原创文章,转载请注明出处!有时候 ...
- Spring-AOP简单实现方式
AOP的专业术语: 1.创建Maven管理项目: pom.xml导入依赖 <properties> <!-- springframe 版本控制 --> <spring.v ...
- Bat：Basic knowledge（同时运行多条命令，连接SqlServer执行sql，单个bat打开多个tomcat，cmd切换命令行编码，根据PID结束端口号）
1.Windows7环境下命令行一次运行多条命令 Windows7命令行(cmd)下,如果想一次运行多条命令可能用到的连接符个人了解到的有三个:&&,||和&. aa & ...
- 【.NET】无法加载协定为“ServiceReference1.ReportWsSoap”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。
前言 引用websevice时,有时会出现如下错误: 异常详细信息: System.InvalidOperationException: 无法加载协定为“ServiceReference1.Repor ...
- 微信小程序页面阻止默认滑动事件
在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小 ...
- axios在Vue中的简单应用（一）
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- Shell脚本中的shebang到底是什么
使用类Unix系统的同学可能都对"#!"这个符号并不陌生,但是你真的了解它吗? 这个符号的名称,叫做"Shebang"或者"Sha-bang" ...
- C++学习笔记-C++与C语言的一些区别
本文主要是整理一些C++与C的一些小的区别,也就是在使用C与C++时候需要注意的一些问题,C++是以C语言为基础的,并且完全兼容C语言的特性 注释 C语言的注释形式为 /* 注释内容 */ 而C++提 ...
- VBNET线程和委托20191223
1.每个程序有一个主线程,如果一个循环处于主线程中,程序在较长的循环,将出现“不响应”的情况. 线程在System.Threading中.线程创建可专用于一个功能块(方法.函数), 线程的开始用Sta ...