整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
能函數(shù)前綴
$.trim(sString);
等同于jQuery.trim(sString);
解決window.onload函數(shù)的沖突
ready()方法很好地解決了上述問題
簡單地說，這個(gè)方法純粹是對向window.load事件注冊事件的替代方法。
通過使用這個(gè)方法，可以在DOM載入就緒能夠讀取并操縱時(shí)立即調(diào)用你所綁定的函數(shù)，而99.99%的JavaScript函數(shù)都需要在那一刻執(zhí)行。
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});上述代碼簡化為
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});使用window.onload=function{ //... }
<html>
<head>
<title>$選擇器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
window.onload=function(){
var oElements=$("h2 a"); //選擇匹配元素
for(var i=0;i<oElements.length;i++)
oElements[i].innerHTML=i.toString();
}
</script>
</head>
<body>
<h2><a href="#">正文</a>內(nèi)容</h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
</body>
</html>使用$(function(){ //...})語句
<html>
<head>
<title>$選擇器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
var oElements=$("h2 a"); //選擇匹配元素
for(var i=0;i<oElements.length;i++)
oElements[i].innerHTML=i.toString();
}); //為了可讀性,單獨(dú)列一行
</script>
</head>
<body>
<h2><a href="#">正文</a>內(nèi)容</h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
</body>
</html>以上兩個(gè)結(jié)果是相同的;
jQuery加載與普通加載區(qū)別
方法 window.onload $(document).ready()
執(zhí)行時(shí)機(jī) 必須等待網(wǎng)頁中的所有內(nèi)容加載完畢后 網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,
(包括圖片才能執(zhí)行) 可能DOM元素關(guān)聯(lián)的東西并沒有加載完
編寫個(gè)數(shù) 不能同時(shí)編寫多個(gè)(后者會(huì)"覆蓋"前者) 能同時(shí)編寫多個(gè)
簡化寫法 無 $()
jquery加載事件是對"DOMContentLoaded"的封裝(而非onload)
<html>
<head>
<title>新建網(wǎng)頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
//jquery加載事件是對"DOMContentLoaded"的封裝(而非onload)
document.addEventListener('DOMContentLoaded',function(){
alert('okok I see you');
})
</script>
</head>
<body>
<h2>加載事件原理</h2>
<img src="./08.php" alt="" /><!--圖片4s后顯示-->
</body>
</html>創(chuàng)建DOM元素
var oNewP=$("<p>這是一個(gè)感人肺腑的故事</p>");以上代碼等同于
var oNewP=document.createElement("p");
var oText=document.createTextNode("這是一個(gè)感人肺腑的故事");
oNewP.appendChild(oText);jQuery還提供DOM元素中的insertAfter()方法
<html>
<head>
<title>創(chuàng)建DOM元素</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){ //ready()函數(shù)
var oNewP=$("<p>這是一個(gè)感人肺腑的故事</p>"); //創(chuàng)建DOM元素
oNewP.insertAfter("#myTarget"); //jQuery內(nèi)置的insertAfter()方法
});
</script>
</head>
<body>
<p id="myTarget">插入到這行文字之后</p>
<p>也就是插入到這行文字之前，但這行沒有id，也可能不存在</p>
</body>
</html>擴(kuò)展函數(shù)
jQuery.fn.extend(object) object采用json方式
詳細(xì)案例見：實(shí)例|實(shí)現(xiàn)復(fù)選框的全選、反選和不選
jQuery.fn.funName=function([params]){ //匿名函數(shù)也可傳入?yún)?shù)
//擴(kuò)展方法語句
}
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.fn.disable=function(){
//擴(kuò)展jQuery，表單元素統(tǒng)一disable
return this.each(function(){ //this指jQuery對象
if(typeof this.disabled !="undefined") this.disabled=true;
});
}
$.fn.enable=function(){
//擴(kuò)展jQuery，表單元素統(tǒng)一enable
return this.each(function(){
if(typeof this.disabled !="undefined") this.disabled=false;
});
}
//以上兩個(gè)擴(kuò)展函數(shù)disable()和enable()使用方法
function SwapInput(oName,oButton){
if(oButton.value=="Disable"){
//如果按鈕的值為Disable，則調(diào)用disable()方法
$("input[name="+oName+"]").disable();
oButton.value="Enable";
}else{
//如果按鈕的值為Eable，則調(diào)用enable()方法
$("input[name="+oName+"]").enable();
oButton.value="Disable"; //然后設(shè)置按鈕的值為Disable
}
}
</script>
//使用方法
<input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="SwapInput('hobby',this)"><br>
<input type="checkbox" name="hobby" id="book" value="book"><label for="book">看書</label>
<input type="checkbox" name="hobby" id="net" value="net"><label for="net">上網(wǎng)</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡覺</label></p>注意：在jQuery中除了擴(kuò)展機(jī)制(fn)this指jQuery對象之外, 其他的this均指DOM對象
解決"$"的沖突
盡管jQuery庫已經(jīng)非常強(qiáng)大, 但有些時(shí)候需要使用其他類庫框架, 因?yàn)槠渌蚣芑驇熘锌赡芤彩褂昧?#34;$", 從而發(fā)生沖突。
jQuery提供了noConflict();
使用方法:jQuery.noConflict();
conflict：沖突
以上代碼便可以使"$"按照其他javascript框架的方式運(yùn)算。這時(shí)在jQuery中便不能再使用"$",而必須使用"jQuery";
例如: $("div p")必須寫成jQuery("div p");
var jq=$.noConflict();
jq(function(){
jq('[name=username]').attr('value','123');
});實(shí)例: 加載進(jìn)度條編寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
var person={
name:'wokong',
age:18
};
var arr=[9,11,43,17,6,20];
// $.each(遍歷目標(biāo)，回調(diào)函數(shù)（索引(鍵)，值）)
$.each(arr,function (k,v) {
console.log(k,v)
});
console.log($.type($())); //檢查對象的類型
console.log($.isFunction()); //檢查是不是函數(shù)
console.log($.isArray(arr)); //檢查是不是數(shù)組
var json1='{"username":"bajie","age":18}';
// var json2="{'username':'bajie','age':18}";
// 用來把json數(shù)組或者json對象的字符串 轉(zhuǎn)換成正常的對象或者數(shù)組
console.log($.parseJSON(json1));
</script>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全選練習(xí)</title>
</head>
<body>
<form>
你愛好的運(yùn)動(dòng)是？<input type="checkbox" id="checkedAllBox"/>全選/全不選
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 選"/>
<input type="button" id="checkedNoBtn" value="全不選"/>
<input type="button" id="checkedRevBtn" value="反 選"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
功能說明:
1. 點(diǎn)擊'全選': 選中所有愛好
2. 點(diǎn)擊'全不選': 所有愛好都不勾選
3. 點(diǎn)擊'反選': 改變所有愛好的勾選狀態(tài)
4. 點(diǎn)擊'全選/全不選': 選中所有愛好, 或者全不選中
5. 點(diǎn)擊某個(gè)愛好時(shí), 必要時(shí)更新'全選/全不選'的選中狀態(tài)
6. 點(diǎn)擊'提交': 提示所有勾選的愛好
*/
$(function () {
// 獲取全選全不選的復(fù)選框
var $checkedAllBox=$('#checkedAllBox');
// 獲取所有愛好
var $items=$(':checkbox[name=items]');
// 1. 點(diǎn)擊'全選': 選中所有愛好
$('#checkedAllBtn').click(function () {
$items.prop('checked',true);
$checkedAllBox.prop('checked',true);
});
// 2. 點(diǎn)擊'全不選': 所有愛好都不勾選
$('#checkedNoBtn').click(function () {
$items.prop('checked',false);
$checkedAllBox.prop('checked',false);
});
// 3. 點(diǎn)擊'反選': 改變所有愛好的勾選狀態(tài)
$('#checkedRevBtn').click(function () {
$items.each(function () {
this.checked=!this.checked;
})
// 選中的個(gè)數(shù)和我的總數(shù)相等 說明全部選中了
// var checkedList=$(':checkbox[name=items]:checked');
// if($items.length===checkedList.length){
//// 說明全選了
// $checkedAllBox.prop('checked',true);
// }else{
//// 說明沒有全選
// $checkedAllBox.prop('checked',false);
// }
$checkedAllBox.prop('checked',$items.filter(':checked').length===$items.length);
// 不選中的長度為0 也是全選
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
});
// 4. 點(diǎn)擊'全選/全不選': 選中所有愛好, 或者全不選中
$checkedAllBox.click(function () {
$items.prop('checked',this.checked);
});
// 5. 點(diǎn)擊某個(gè)愛好時(shí), 必要時(shí)更新'全選/全不選'的選中狀態(tài)
$items.click(function () {
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
})
// 6. 點(diǎn)擊'提交': 提示所有勾選的愛好
$('#sendBtn').click(function () {
$items.filter(':checked').each(function () {
alert(this.value);
})
})
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13_元素滾動(dòng)</title>
</head>
<body style="height: 2000px;">
<div class="box" style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">設(shè)置scrollTop</button>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
需求:
1. 得到div或頁面滾動(dòng)條的坐標(biāo)
2. 讓div或頁面的滾動(dòng)條滾動(dòng)到指定位置
*/
// scrollTop() 讀取滾動(dòng)條的Y(垂直)坐標(biāo) scrollLeft（） 讀取滾動(dòng)條的X坐標(biāo)
$('#btn1').click(function () {
// console.log($('.box').scrollTop())
// body html document
// html在chrome中是有效的
// body在IE中是有效的
// html和body 只有一個(gè)能夠獲取得到值
// console.log($('body').scrollTop())
//解決方案：html和body在獲取的過程中 一個(gè)有值一個(gè)為零 所以讓這兩個(gè)獲取的值相加
// document在jQuery1.8版本以上才可以使用 但是上邊的解決方案 更加通用
// console.log($('html').scrollTop()+$('body').scrollTop());
console.log($(document).scrollTop());
})
// 2. 讓div或頁面的滾動(dòng)條滾動(dòng)到指定位置
$('#btn2').click(function () {
// $('.box').scrollTop(200);
// 設(shè)置滾動(dòng)條坐標(biāo)時(shí)和讀取一樣
// html在chrome中生效 body在IE中生效
// 解決方案：html和body同時(shí)設(shè)置就行了
// $('html,body').scrollTop(200);
// 如果jQuery1.8以上版本沒問題 document也是可以使用的
$(document).scrollTop(200);
})
</script>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#toTop{
width: 30px;
height: 40px;
background: skyblue;
text-align: center;
line-height: 20px;
font-size: 14px;
color: #fff;
position: fixed;
right:200px;
bottom:100px;
padding: 0 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 2000px">
<div id="toTop">回到頂部</div>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// 能夠?qū)崿F(xiàn)回到頂部的方案一共兩種
// 1.時(shí)間固定 則路程越長 速度越快 第一種更主流
// 2.速度固定 則路程越長 時(shí)間越長
// 動(dòng)畫總時(shí)長
var time=2000;
// 動(dòng)畫幀時(shí)長 動(dòng)畫總時(shí)長 / 動(dòng)畫幀時(shí)長=總幀數(shù)
var itemTime=20;
// 給回到頂部按鈕綁定單擊事件
$('#toTop').click(function () {
// 獲取總路程 (當(dāng)前頁面的滾動(dòng)條位置)
var offset=$('html').scrollTop() + $('body').scrollTop();
// 計(jì)算單次偏移=總路程 / (動(dòng)畫總時(shí)長 / 動(dòng)畫幀時(shí)長)
var itemOffset=offset / ( time / itemTime );
// 定時(shí)器
var timer=setInterval(function () {
// 500 -=5; 495 490 485 480 475 470 ... 0
offset -=itemOffset;
// 如果當(dāng)前的位置（offset）等于0了 說明已經(jīng)回到頂部 清除定時(shí)器
if(offset<=0){
offset=0 //修正值
clearInterval(timer);
}
// 每次調(diào)用定時(shí)器 都是修改頁面的scrollTop值 每次減小itemOffset
$('html,body').scrollTop(offset);
},itemTime)
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17_文檔_增刪改</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
/*top: 50px;*/
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<body>
<ul id="ul1">
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">EEEEE</li>
<li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
<li class="re">aaa</li>
<li title="hello">bbb</li>
<li class="box">ccc</li>
<li title="hello">ddd</li>
<li title="two">eee</li>
</ul>
<!--
1. 添加/替換元素
* append(content)
向當(dāng)前匹配的所有元素內(nèi)部的最后插入指定內(nèi)容
* prepend(content)
向當(dāng)前匹配的所有元素內(nèi)部的最前面插入指定內(nèi)容
* before(content)
將指定內(nèi)容插入到當(dāng)前所有匹配元素的前面
* after(content)
將指定內(nèi)容插入到當(dāng)前所有匹配元素的后面替換節(jié)點(diǎn)
* replaceWith(content)
用指定內(nèi)容替換所有匹配的標(biāo)簽刪除節(jié)點(diǎn)
2. 刪除元素
* empty()
刪除所有匹配元素的子元素 (掏空子元素)
* remove()
刪除所有匹配的元素 (連自己一起刪除)
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
需求:
1. 向id為ul1的ul下添加一個(gè)span(最后)
2. 向id為ul1的ul下添加一個(gè)span(最前)
3. 在id為ul1的ul下的li(title為hello)的前面添加span
4. 在id為ul1的ul下的li(title為hello)的后面添加span
5. 將在id為ul2的ul下的li(title為hello)全部替換為p
6. 移除id為ul2的ul下的所有l(wèi)i
*/
// 內(nèi)部插入:appendTo()，append(),prependTo(),prepend()
// 1. 向id為ul1的ul下添加一個(gè)span(最后)
$('<span>我是appendTo新增的span</span>').appendTo('#ul1');
$('#ul1').append('<span>我是append新增的span</span>');
// 2. 向id為ul1的ul下添加一個(gè)span(最前)
$('<span>我是prependTo新增的span</span>').prependTo('#ul1');
$('#ul1').prepend('<span>我是prepend新增的span</span>');
// 外部插入：before(),after()
// 3. 在id為ul1的ul下的li(title為hello)的前面添加span
$('#ul1>li[title=hello]').before('<span>我是before新增的span</span>');
// 4. 在id為ul1的ul下的li(title為hello)的后面添加span
$('#ul1>li[title=hello]').after('<span>我是after新增的span</span>')
// 5. 將在id為ul2的ul下的li(title為hello)全部替換為p
// $('#ul2>li[title=hello]').replaceWith('<p>我是替換的p標(biāo)簽</p>')
// 6. 移除id為ul2的ul下的所有l(wèi)i
// remove 是用于刪除節(jié)點(diǎn)的
// empty 用于掏空節(jié)點(diǎn) 刪除所有子元素 保留父元素
// $('#ul2').remove();
// $('#ul2>li').remove();
$('#ul2').empty();
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加刪除記錄練習(xí)</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 獲取三個(gè)輸入框
var $empName=$('#empName');
var $email=$('#email');
var $salary=$('#salary');
// 給提交按鈕綁定單擊事件
$('#addEmpButton').click(function () {
// 獲取三個(gè)輸入框的值
var empName=$empName.val();
var email=$email.val();
var salary=$salary.val();
// 根據(jù)輸入框的值 拼裝節(jié)點(diǎn)
// <tr>
// <td>Jerry</td>
// <td>jerry@sohu.com</td>
// <td>8000</td>
// <td><a href="deleteEmp?id=002">Delete</a></td>
// </tr>
$('<tr></tr>')
.append('<td>'+empName+'</td>')
.append('<td>'+email+'</td>')
.append('<td>'+salary+'</td>')
.append('<td><a href="deleteEmp?id=002">Delete</a></td>')
.appendTo('#employeeTable tbody').find('a').click(clickA);
// 清空三個(gè)輸入框的信息
$empName.val('');
$email.val('');
$salary.val('');
});
// 給刪除按鈕綁定單擊事件
$('a').click(clickA);
// 定義事件回調(diào)函數(shù) 你定義的 你沒調(diào)用 最終執(zhí)行了
function clickA(event) {
// 阻止默認(rèn)行為
event.preventDefault();
// 根據(jù)點(diǎn)擊的a標(biāo)簽 找到對應(yīng)的tr
var $tr=$(this).parent().parent();
// 獲取當(dāng)前行的name
var name=$tr.children(':first').html();
// var name=$tr.children().first().html();
if(confirm('你確定要?jiǎng)h除'+name+'的信息嗎？')){
$tr.remove();
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 50px;
left:30px;
}
.inner{
width: 100px;
height: 100px;
background: yellowgreen;
position: absolute;
top:50px;
}
.box{
width: 150px;
height: 150px;
background: skyblue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="inner"></div>
</div>
</div>
<button id="btn1">讀取</button>
<button id="btn2">設(shè)置</button>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// 讀取wrap相對于頁面左上角的位置
// 讀取inner相對于頁面左上角的位置
// offset 返回一個(gè)對象 有l(wèi)eft和top兩個(gè)屬性 元素相對于頁面左上角的位置
// position 返回一個(gè)對象 有l(wèi)eft和top兩個(gè)屬性 元素相對于包含塊左上角的位置
// 以上兩個(gè)方法 返回值都不帶單位 但是以像素計(jì)
// offset 傳一個(gè)對象 可以設(shè)置元素的位置 設(shè)置時(shí)不需要帶單位 不過一般不使用這種方式
$(function () {
$('#btn1').click(function () {
// console.log($('.wrap').offset());
// console.log($('.inner').offset());
console.log($('.wrap').position());
console.log($('.inner').position());
});
$('#btn2').click(function () {
$('.inner').offset({
'left':300,
'top':200
})
})
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 150px;
background: pink;
padding: 10px;
margin: 11px;
border:10px solid skyblue;
/*overflow: scroll;*/
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
var $div=$('div');
// width和height方法 返回的就是你設(shè)置給當(dāng)前元素的寬度與高度的值
console.log($div.width(),$div.height());
//內(nèi)部尺寸 包含width+padding
console.log($div.innerWidth(),$div.innerHeight());
//外部尺寸 包含width+padding+border
console.log($div.outerWidth(),$div.outerHeight());
// outerWidth和outerHeight 方法傳遞參數(shù)true 則在原有基礎(chǔ)之上添加margin的值
console.log($div.outerWidth(true),$div.outerHeight(true))
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
height: 200px;
position: absolute;
left:50px;
top:30px;
background: pink;
}
.inner{
position: absolute;
top:50px;
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
內(nèi)部div
</div>
</div>
<button id="btn1">取消綁定所有事件</button>
<button id="btn2">取消綁定某個(gè)事件</button>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// eventName:編碼方便 但只能加一個(gè)監(jiān)聽，且有的監(jiān)聽不支持
// on:編碼不方便 但是可以添加多個(gè)監(jiān)聽(多個(gè)事件相應(yīng)同一個(gè)回調(diào))，且通用
// 1.給wrap綁定點(diǎn)擊監(jiān)聽 （兩種方式）
// $('.wrap').click(function () {
// console.log('點(diǎn)了我一下1')
// });
// $('.wrap').click(function () {
// console.log('點(diǎn)了我一下2')
// });
// $('.wrap').on('click mouseleave',function () {
// console.log('點(diǎn)了我一下1')
// })
// 給inner綁定移入移出事件 三種方式
// $('.inner').mouseover(function () {
// console.log('mouseover');
// }).mouseout(function () {
// console.log('mouseout');
// })
// $('.inner').mouseenter(function () {
// console.log('mouseenter')
// }).mouseleave(function () {
// console.log('mouseleave')
// })
// hover 傳遞兩個(gè)參數(shù) 都為函數(shù) 第一個(gè)參數(shù)為移入的回調(diào)函數(shù) 第二個(gè)參數(shù)為移出的回調(diào)函數(shù)
// 如果只傳遞了一個(gè)參數(shù) 那么移入和移出都是使用這一個(gè)函數(shù)
// hover底層使用mouseenter和mouseleave實(shí)現(xiàn)的
$('.inner').hover(function () {
console.log('移入')
},function () {
console.log('移出')
})
// 事件的解綁
// off() 解除事件 默認(rèn)清除所有的事件監(jiān)聽
// off方法允許傳遞參數(shù) 參數(shù)為事件名稱的字符串
// 可用于單獨(dú)清除某個(gè)事件 如果想刪除多個(gè) 使用空格分開即可
$('#btn1').click(function () {
$('.inner').off();
});
$('#btn2').click(function () {
$('.inner').off('mouseleave mouseenter');
})
</script>
</body>
</html>歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識。
在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁。我將深入講解每個(gè)語言的基礎(chǔ)知識，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。
此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢，并了解如何應(yīng)對這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。
如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！
#春日生活打卡季#
插電混動(dòng)汽車，作為純電技術(shù)與傳統(tǒng)燃油技術(shù)的結(jié)合，這項(xiàng)技術(shù)旨在為用戶提供更多樣的駕駛選擇與用車場景、還可以提供純電駕駛的體驗(yàn)。但當(dāng)電量耗盡，車輛的行駛性能和油耗會(huì)發(fā)生怎樣的變化？這種差異是否會(huì)影響用戶的駕駛體驗(yàn)和經(jīng)濟(jì)效益呢？結(jié)合廣汽本田第五屆極限挑戰(zhàn)中，插電混動(dòng)旗艦雙子星的成績，分享你的看法？
在新能源車中，插電混動(dòng)車是一個(gè)獨(dú)特的存在，他不同于純電動(dòng)汽車，跟燃油車也有一定的區(qū)別，那么插電混動(dòng)汽車有哪些優(yōu)點(diǎn)和缺點(diǎn)。
插電混動(dòng)汽車有三大優(yōu)點(diǎn)：
1、沒有續(xù)航焦慮。
純電動(dòng)汽車有續(xù)航焦慮，只適合在城市中行駛，在高速上比較少見，這是因?yàn)楦咚俟飞系某潆姌侗容^少，而且還不發(fā)達(dá)，純電動(dòng)車跑高速總是擔(dān)心沒電了，跑長途也是如此，車主就會(huì)很焦慮。
插電混動(dòng)汽車一般是兩套動(dòng)力系統(tǒng)，一套是燃油系列，一套是電動(dòng)系統(tǒng)，兩套系統(tǒng)可以同時(shí)工作，也可以單獨(dú)工作。
在城市中行駛，插電混動(dòng)汽車可以用純電行駛，在高速公路上行駛，插電混動(dòng)汽車可以用燃油行駛，插電混動(dòng)汽車同時(shí)具備了燃油車的持久性和純電動(dòng)汽車的便利性，是兩者之間的一個(gè)過渡性產(chǎn)品。
插電混動(dòng)車沒有續(xù)航焦慮
插電混動(dòng)汽車沒有續(xù)航焦慮，既可以跑短途，也可以跑長途，還支持外放電，當(dāng)你在野外自駕游時(shí)，你的車還能成為戶外電源，供你煮飯、吃電火鍋、電燒烤，是不是很酷？
2、省油。
跟純電車比，混動(dòng)車油耗肯定高，但跟燃油車比，混動(dòng)車油耗明顯低多了。以我自己的哈弗H6 DHT-PHEV為例，在家里裝了充電樁，選擇凌晨充電，一度電5毛，電池容易是19.9度電，充滿電要10塊錢，可以跑100公里。
算起來一公里只要一毛錢，天天在城市上下班開，可以開4~5天，如果不跑長途，可以一直用電，根本不用加油，上次加了200塊錢，幾個(gè)月時(shí)間還在，根本用不到。
3、環(huán)保，動(dòng)力強(qiáng)，能掛綠牌。
國家的環(huán)保標(biāo)準(zhǔn)越來越嚴(yán)格，國6B剛剛執(zhí)行，用不了兩年，國7標(biāo)準(zhǔn)也會(huì)到來，這對燃油車來說，是一道緊箍咒，雖然能繼續(xù)上路，但有諸多限制，燃油車所能符合的環(huán)保標(biāo)準(zhǔn)太低了的話，有些大城市都進(jìn)不去了。
環(huán)保標(biāo)準(zhǔn)嚴(yán)了，有些不達(dá)標(biāo)的燃油車都沒法銷售了，也沒法過戶了，影響很大，但是，環(huán)保標(biāo)準(zhǔn)并不影響插電混動(dòng)車，因?yàn)椴咫娀靹?dòng)汽車能掛綠牌。
像北上廣深這樣的一線大城市，嚴(yán)格控制燃油車上牌，你能買車但上不了牌照，但是電動(dòng)汽車卻不受影響，在政策引導(dǎo)下，很多消費(fèi)者把眼光投入了新能源車，混動(dòng)汽車符合環(huán)保要求，能上綠牌，得到很多消費(fèi)者的喜愛。
插電混動(dòng)汽車也有三大缺點(diǎn)：
1、電池容量偏小，經(jīng)常要充電。
一般來說，混動(dòng)車的電池容量沒有純電動(dòng)汽車大，續(xù)航里程就短，以哈弗H6 DHT-PHEV為例，19.9度電的電池續(xù)航里程是110公里，實(shí)際續(xù)航里程是100公里。
如果你一天開20公里，能跑5天，那就4~5天充一次電，如果你一天開50公里，只能跑2天，那就是1~2天充一次電。
2、更換電池昂貴。
混動(dòng)汽車是必須要有電池的，沒有電池汽車開不了，這是設(shè)計(jì)好的系統(tǒng)，當(dāng)你的電池壽命達(dá)到之后，就需要更換電池，更換電池的費(fèi)用是2~5萬元，這個(gè)費(fèi)用是比較高的，目前新能源車大多還處于使用過程中，更換電池的情況較少，等到將來大規(guī)模更換電池時(shí)，就知道具體的費(fèi)用了。
3、車價(jià)比同級別車高。
同級別的混動(dòng)車比燃油車貴了4萬元左右，有人說4萬元可以加多少油，混動(dòng)車省的油都不夠車價(jià)貴，需要注意，新能源車目前沒有購置稅，按落地價(jià)算的話，相差不到3萬元左右，然后兩者之間的駕駛感受是完全不同的，開過電動(dòng)車的人對此深有體會(huì)。
----------------------------------------------------------------------------------------------------
接下來就是每文最后的前端小知識分享，因?yàn)椴┲魇乔岸顺錾恚@也算是福利吧，每文最后加個(gè)前端的小知識：
今天跟大家說的是如何在html中引入html：
目前已知的方法有三個(gè)；
1.配置tomcat來實(shí)現(xiàn)，需要后臺(tái)進(jìn)行配合，修改本地和線上的tomcat的配置，才能使用該方式
<!--#include virtual="/html/gycphlk/setTab.html" -->
2.使用jquery的load方式來實(shí)現(xiàn)，可行性需要完成測試后商榷（頁面之間數(shù)據(jù)傳輸是否可行）
3.通過iframe的引入
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
