jQuery 功能擴展

能函數前綴

$.trim(sString);

等同于jQuery.trim(sString);

解決window.onload函數的沖突

ready()方法很好地解決了上述問題

簡單地說，這個方法純粹是對向window.load事件注冊事件的替代方法。

通過使用這個方法，可以在DOM載入就緒能夠讀取并操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。

$(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>內容</h2>
<h2>正文<a href="#">內容</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();
}); //為了可讀性,單獨列一行
</script>
</head>
<body>
<h2><a href="#">正文</a>內容</h2>
<h2>正文<a href="#">內容</a></h2>
</body>
</html>

以上兩個結果是相同的;

jQuery加載與普通加載區別

方法 window.onload $(document).ready()

執行時機必須等待網頁中的所有內容加載完畢后網頁中的所有DOM結構繪制完畢后就執行,

(包括圖片才能執行) 可能DOM元素關聯的東西并沒有加載完

編寫個數不能同時編寫多個(后者會"覆蓋"前者) 能同時編寫多個

簡化寫法無 $()

jquery加載事件是對"DOMContentLoaded"的封裝(而非onload)

<html>
<head>
<title>新建網頁</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>

創建DOM元素

var oNewP=$("<p>這是一個感人肺腑的故事</p>");

以上代碼等同于

var oNewP=document.createElement("p");
var oText=document.createTextNode("這是一個感人肺腑的故事");
oNewP.appendChild(oText);

jQuery還提供DOM元素中的insertAfter()方法

<html>
<head>
<title>創建DOM元素</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){ //ready()函數
    var oNewP=$("<p>這是一個感人肺腑的故事</p>"); //創建DOM元素
    oNewP.insertAfter("#myTarget"); //jQuery內置的insertAfter()方法
});
</script>
</head>
<body>
<p id="myTarget">插入到這行文字之后</p>
<p>也就是插入到這行文字之前，但這行沒有id，也可能不存在</p>
</body>
</html>

擴展函數

jQuery.fn.extend(object) object采用json方式

詳細案例見：實例|實現復選框的全選、反選和不選

jQuery.fn.funName=function([params]){ //匿名函數也可傳入參數

//擴展方法語句

}

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.fn.disable=function(){
//擴展jQuery，表單元素統一disable
return this.each(function(){ //this指jQuery對象
if(typeof this.disabled !="undefined") this.disabled=true;
});
}
$.fn.enable=function(){
//擴展jQuery，表單元素統一enable
return this.each(function(){
if(typeof this.disabled !="undefined") this.disabled=false;
});
}
//以上兩個擴展函數disable()和enable()使用方法
function SwapInput(oName,oButton){
if(oButton.value=="Disable"){
//如果按鈕的值為Disable，則調用disable()方法
$("input[name="+oName+"]").disable();
oButton.value="Enable";
}else{
//如果按鈕的值為Eable，則調用enable()方法
$("input[name="+oName+"]").enable();
oButton.value="Disable"; //然后設置按鈕的值為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">上網</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡覺</label></p>

注意：在jQuery中除了擴展機制(fn)this指jQuery對象之外, 其他的this均指DOM對象

解決"$"的沖突

盡管jQuery庫已經非常強大, 但有些時候需要使用其他類庫框架, 因為其他框架或庫中可能也使用了"$", 從而發生沖突。

jQuery提供了noConflict();

使用方法:jQuery.noConflict();

conflict：沖突

以上代碼便可以使"$"按照其他javascript框架的方式運算。這時在jQuery中便不能再使用"$",而必須使用"jQuery";

例如: $("div p")必須寫成jQuery("div p");

var jq=$.noConflict();
jq(function(){
    jq('[name=username]').attr('value','123');
});

實例: 加載進度條編寫

.1jQuery工具方法:

<!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(遍歷目標，回調函數（索引(鍵)，值）)

$.each(arr,function (k,v) {

console.log(k,v)

});

console.log($.type($())); //檢查對象的類型

console.log($.isFunction()); //檢查是不是函數

console.log($.isArray(arr)); //檢查是不是數組

var json1='{"username":"bajie","age":18}';

// var json2="{'username':'bajie','age':18}";

// 用來把json數組或者json對象的字符串 轉換成正常的對象或者數組

console.log($.parseJSON(json1));

</script>

</body>

</html>

2.2jQuery愛好選擇器練習:

<!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>全選練習</title>

</head>

<body>

<form>

你愛好的運動是？<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. 點擊'全選': 選中所有愛好

2. 點擊'全不選': 所有愛好都不勾選

3. 點擊'反選': 改變所有愛好的勾選狀態

4. 點擊'全選/全不選': 選中所有愛好, 或者全不選中

5. 點擊某個愛好時, 必要時更新'全選/全不選'的選中狀態

6. 點擊'提交': 提示所有勾選的愛好

*/

$(function () {

// 獲取全選全不選的復選框

var $checkedAllBox=$('#checkedAllBox');

// 獲取所有愛好

var $items=$(':checkbox[name=items]');

// 1. 點擊'全選': 選中所有愛好

$('#checkedAllBtn').click(function () {

$items.prop('checked',true);

$checkedAllBox.prop('checked',true);

});

// 2. 點擊'全不選': 所有愛好都不勾選

$('#checkedNoBtn').click(function () {

$items.prop('checked',false);

$checkedAllBox.prop('checked',false);

});

// 3. 點擊'反選': 改變所有愛好的勾選狀態

$('#checkedRevBtn').click(function () {

$items.each(function () {

this.checked=!this.checked;

})

// 選中的個數和我的總數相等 說明全部選中了

// 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. 點擊'全選/全不選': 選中所有愛好, 或者全不選中

$checkedAllBox.click(function () {

$items.prop('checked',this.checked);

});

// 5. 點擊某個愛好時, 必要時更新'全選/全不選'的選中狀態

$items.click(function () {

$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);

})

// 6. 點擊'提交': 提示所有勾選的愛好

$('#sendBtn').click(function () {

$items.filter(':checked').each(function () {

alert(this.value);

})

})

})

</script>

</body>

</html>

2.3jQuery元素滾動:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>13_元素滾動</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">設置scrollTop</button>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

/*

需求:

1. 得到div或頁面滾動條的坐標

2. 讓div或頁面的滾動條滾動到指定位置

*/

// scrollTop() 讀取滾動條的Y(垂直)坐標 scrollLeft（） 讀取滾動條的X坐標

$('#btn1').click(function () {

// console.log($('.box').scrollTop())

// body html document

// html在chrome中是有效的

// body在IE中是有效的

// html和body 只有一個能夠獲取得到值

// console.log($('body').scrollTop())

//解決方案：html和body在獲取的過程中 一個有值一個為零 所以讓這兩個獲取的值相加

// document在jQuery1.8版本以上才可以使用 但是上邊的解決方案 更加通用

// console.log($('html').scrollTop()+$('body').scrollTop());

console.log($(document).scrollTop());

})

// 2. 讓div或頁面的滾動條滾動到指定位置

$('#btn2').click(function () {

// $('.box').scrollTop(200);

// 設置滾動條坐標時和讀取一樣

// html在chrome中生效 body在IE中生效

// 解決方案：html和body同時設置就行了

// $('html,body').scrollTop(200);

// 如果jQuery1.8以上版本沒問題 document也是可以使用的

$(document).scrollTop(200);

})

</script>

</body>

2.4jQuery回到頂部練習:

<!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">

// 能夠實現回到頂部的方案一共兩種

// 1.時間固定 則路程越長 速度越快 第一種更主流

// 2.速度固定 則路程越長 時間越長

// 動畫總時長

var time=2000;

// 動畫幀時長 動畫總時長 / 動畫幀時長=總幀數

var itemTime=20;

// 給回到頂部按鈕綁定單擊事件

$('#toTop').click(function () {

// 獲取總路程 (當前頁面的滾動條位置)

var offset=$('html').scrollTop() + $('body').scrollTop();

// 計算單次偏移=總路程 / (動畫總時長 / 動畫幀時長)

var itemOffset=offset / ( time / itemTime );

// 定時器

var timer=setInterval(function () {

// 500 -=5; 495 490 485 480 475 470 ... 0

offset -=itemOffset;

// 如果當前的位置（offset）等于0了 說明已經回到頂部 清除定時器

if(offset<=0){

offset=0 //修正值

clearInterval(timer);

}

// 每次調用定時器 都是修改頁面的scrollTop值 每次減小itemOffset

$('html,body').scrollTop(offset);

},itemTime)

})

</script>

</body>

</html>

2.5jQuery:文檔增刪改:

<!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)

向當前匹配的所有元素內部的最后插入指定內容

* prepend(content)

向當前匹配的所有元素內部的最前面插入指定內容

* before(content)

將指定內容插入到當前所有匹配元素的前面

* after(content)

將指定內容插入到當前所有匹配元素的后面替換節點

* replaceWith(content)

用指定內容替換所有匹配的標簽刪除節點

2. 刪除元素

* empty()

刪除所有匹配元素的子元素 (掏空子元素)

* remove()

刪除所有匹配的元素 (連自己一起刪除)

-->

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

/*

需求:

1. 向id為ul1的ul下添加一個span(最后)

2. 向id為ul1的ul下添加一個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下的所有li

*/

// 內部插入:appendTo()，append(),prependTo(),prepend()

// 1. 向id為ul1的ul下添加一個span(最后)

$('<span>我是appendTo新增的span</span>').appendTo('#ul1');

$('#ul1').append('<span>我是append新增的span</span>');

// 2. 向id為ul1的ul下添加一個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標簽</p>')

// 6. 移除id為ul2的ul下的所有li

// remove 是用于刪除節點的

// empty 用于掏空節點 刪除所有子元素 保留父元素

// $('#ul2').remove();

// $('#ul2>li').remove();

$('#ul2').empty();

</script>

</body>

</html>

2.6jQuery學生管理系統練習:

<!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>添加刪除記錄練習</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 () {

// 獲取三個輸入框

var $empName=$('#empName');

var $email=$('#email');

var $salary=$('#salary');

// 給提交按鈕綁定單擊事件

$('#addEmpButton').click(function () {

// 獲取三個輸入框的值

var empName=$empName.val();

var email=$email.val();

var salary=$salary.val();

// 根據輸入框的值 拼裝節點

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

// 清空三個輸入框的信息

$empName.val('');

$email.val('');

$salary.val('');

});

// 給刪除按鈕綁定單擊事件

$('a').click(clickA);

// 定義事件回調函數 你定義的 你沒調用 最終執行了

function clickA(event) {

// 阻止默認行為

event.preventDefault();

// 根據點擊的a標簽 找到對應的tr

var $tr=$(this).parent().parent();

// 獲取當前行的name

var name=$tr.children(':first').html();

// var name=$tr.children().first().html();

if(confirm('你確定要刪除'+name+'的信息嗎？')){

$tr.remove();

}

}

})

</script>

</body>

</html>

2.7jQuery- offset和position:

<!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">設置</button>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// 讀取wrap相對于頁面左上角的位置

// 讀取inner相對于頁面左上角的位置

// offset 返回一個對象 有left和top兩個屬性 元素相對于頁面左上角的位置

// position 返回一個對象 有left和top兩個屬性 元素相對于包含塊左上角的位置

// 以上兩個方法 返回值都不帶單位 但是以像素計

// offset 傳一個對象 可以設置元素的位置 設置時不需要帶單位 不過一般不使用這種方式

$(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>

2.8jQuery元素的尺寸:

<!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方法 返回的就是你設置給當前元素的寬度與高度的值

console.log($div.width(),$div.height());

//內部尺寸 包含width+padding

console.log($div.innerWidth(),$div.innerHeight());

//外部尺寸 包含width+padding+border

console.log($div.outerWidth(),$div.outerHeight());

// outerWidth和outerHeight 方法傳遞參數true 則在原有基礎之上添加margin的值

console.log($div.outerWidth(true),$div.outerHeight(true))

</script>

</body>

</html>

2.9jQuery事件的綁定和解綁:

<!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">

內部div

</div>

</div>

<button id="btn1">取消綁定所有事件</button>

<button id="btn2">取消綁定某個事件</button>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// eventName:編碼方便 但只能加一個監聽，且有的監聽不支持

// on:編碼不方便 但是可以添加多個監聽(多個事件相應同一個回調)，且通用

// 1.給wrap綁定點擊監聽 （兩種方式）

// $('.wrap').click(function () {

// console.log('點了我一下1')

// });

// $('.wrap').click(function () {

// console.log('點了我一下2')

// });

// $('.wrap').on('click mouseleave',function () {

// console.log('點了我一下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 傳遞兩個參數 都為函數 第一個參數為移入的回調函數 第二個參數為移出的回調函數

// 如果只傳遞了一個參數 那么移入和移出都是使用這一個函數

// hover底層使用mouseenter和mouseleave實現的

$('.inner').hover(function () {

console.log('移入')

},function () {

console.log('移出')

})

// 事件的解綁

// off() 解除事件 默認清除所有的事件監聽

// off方法允許傳遞參數 參數為事件名稱的字符串

// 可用于單獨清除某個事件 如果想刪除多個 使用空格分開即可

$('#btn1').click(function () {

$('.inner').off();

});

$('#btn2').click(function () {

$('.inner').off('mouseleave mouseenter');

})

</script>

</body>

</html>

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

#春日生活打卡季#

插電混動汽車，作為純電技術與傳統燃油技術的結合，這項技術旨在為用戶提供更多樣的駕駛選擇與用車場景、還可以提供純電駕駛的體驗。但當電量耗盡，車輛的行駛性能和油耗會發生怎樣的變化？這種差異是否會影響用戶的駕駛體驗和經濟效益呢？結合廣汽本田第五屆極限挑戰中，插電混動旗艦雙子星的成績，分享你的看法？

在新能源車中，插電混動車是一個獨特的存在，他不同于純電動汽車，跟燃油車也有一定的區別，那么插電混動汽車有哪些優點和缺點。

插電混動汽車有三大優點：

1、沒有續航焦慮。

純電動汽車有續航焦慮，只適合在城市中行駛，在高速上比較少見，這是因為高速公路上的充電樁比較少，而且還不發達，純電動車跑高速總是擔心沒電了，跑長途也是如此，車主就會很焦慮。

插電混動汽車一般是兩套動力系統，一套是燃油系列，一套是電動系統，兩套系統可以同時工作，也可以單獨工作。

在城市中行駛，插電混動汽車可以用純電行駛，在高速公路上行駛，插電混動汽車可以用燃油行駛，插電混動汽車同時具備了燃油車的持久性和純電動汽車的便利性，是兩者之間的一個過渡性產品。

插電混動車沒有續航焦慮

插電混動汽車沒有續航焦慮，既可以跑短途，也可以跑長途，還支持外放電，當你在野外自駕游時，你的車還能成為戶外電源，供你煮飯、吃電火鍋、電燒烤，是不是很酷？

2、省油。

跟純電車比，混動車油耗肯定高，但跟燃油車比，混動車油耗明顯低多了。以我自己的哈弗H6 DHT-PHEV為例，在家里裝了充電樁，選擇凌晨充電，一度電5毛，電池容易是19.9度電，充滿電要10塊錢，可以跑100公里。

算起來一公里只要一毛錢，天天在城市上下班開，可以開4~5天，如果不跑長途，可以一直用電，根本不用加油，上次加了200塊錢，幾個月時間還在，根本用不到。

3、環保，動力強，能掛綠牌。

國家的環保標準越來越嚴格，國6B剛剛執行，用不了兩年，國7標準也會到來，這對燃油車來說，是一道緊箍咒，雖然能繼續上路，但有諸多限制，燃油車所能符合的環保標準太低了的話，有些大城市都進不去了。

環保標準嚴了，有些不達標的燃油車都沒法銷售了，也沒法過戶了，影響很大，但是，環保標準并不影響插電混動車，因為插電混動汽車能掛綠牌。

像北上廣深這樣的一線大城市，嚴格控制燃油車上牌，你能買車但上不了牌照，但是電動汽車卻不受影響，在政策引導下，很多消費者把眼光投入了新能源車，混動汽車符合環保要求，能上綠牌，得到很多消費者的喜愛。

插電混動汽車也有三大缺點：

1、電池容量偏小，經常要充電。

一般來說，混動車的電池容量沒有純電動汽車大，續航里程就短，以哈弗H6 DHT-PHEV為例，19.9度電的電池續航里程是110公里，實際續航里程是100公里。

如果你一天開20公里，能跑5天，那就4~5天充一次電，如果你一天開50公里，只能跑2天，那就是1~2天充一次電。

2、更換電池昂貴。

混動汽車是必須要有電池的，沒有電池汽車開不了，這是設計好的系統，當你的電池壽命達到之后，就需要更換電池，更換電池的費用是2~5萬元，這個費用是比較高的，目前新能源車大多還處于使用過程中，更換電池的情況較少，等到將來大規模更換電池時，就知道具體的費用了。

3、車價比同級別車高。

同級別的混動車比燃油車貴了4萬元左右，有人說4萬元可以加多少油，混動車省的油都不夠車價貴，需要注意，新能源車目前沒有購置稅，按落地價算的話，相差不到3萬元左右，然后兩者之間的駕駛感受是完全不同的，開過電動車的人對此深有體會。

----------------------------------------------------------------------------------------------------

接下來就是每文最后的前端小知識分享，因為博主是前端出身，這也算是福利吧，每文最后加個前端的小知識：

今天跟大家說的是如何在html中引入html：

目前已知的方法有三個；

1.配置tomcat來實現，需要后臺進行配合，修改本地和線上的tomcat的配置，才能使用該方式

2.使用jquery的load方式來實現，可行性需要完成測試后商榷（頁面之間數據傳輸是否可行）

3.通過iframe的引入

在線咨詢

上一篇：ios7.1.2越獄美化插件推薦
下一篇：自定義icon轉css文件，手機端必用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商