整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)習(xí)目標(biāo)
jQuery是對(duì)JavaScript的封裝，它是免費(fèi)、開源的JavaScript函數(shù)庫(kù)，jQuery 極大地簡(jiǎn)化了 JavaScript 編程。
jQuery和JavaScript它們的作用一樣，都是負(fù)責(zé)網(wǎng)頁行為操作，增加網(wǎng)頁和用戶的交互效果的，只不過jQuery簡(jiǎn)化了JavaScript編程，jQuery實(shí)現(xiàn)交互效果更簡(jiǎn)單。
學(xué)習(xí)目標(biāo)
<script src="js/jquery-1.12.4.min.js"></script>
我們知道使用js獲取標(biāo)簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設(shè)置了一個(gè)函數(shù)來獲取標(biāo)簽元素，而jquery提供了ready函數(shù)來解決這個(gè)問題，保證獲取標(biāo)簽元素沒有問題，它的速度比原生的 window.onload 更快。
入口函數(shù)示例代碼:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生就是獲取的div：' + oDiv);
};
$(document).ready(function(){
var $div = $('#div01');
alert('jquery獲取的div：' + $div);
});
</script>
<div id="div01">這是一個(gè)div</div>
入口函數(shù)的簡(jiǎn)寫示例代碼:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生就是獲取的div：' + oDiv);
};
/*
$(document).ready(function(){
var $div = $('#div01');
alert('jquery獲取的div：' + $div);
});
*/
// 上面ready的寫法可以簡(jiǎn)寫成下面的形式：
$(function(){
var $div = $('#div01');
alert('jquery獲取的div：' + $div);
});
</script>
<div id="div01">這是一個(gè)div</div>
學(xué)習(xí)目標(biāo)
jquery選擇器就是快速選擇標(biāo)簽元素，獲取標(biāo)簽的，選擇規(guī)則和css樣式一樣。
示例代碼:
$('#myId') //選擇id為myId的標(biāo)簽
$('.myClass') // 選擇class為myClass的標(biāo)簽
$('li') //選擇所有的li標(biāo)簽
$('#ul1 li span') //選擇id為ul1標(biāo)簽下的所有l(wèi)i標(biāo)簽下的span標(biāo)簽
$('input[name=first]') // 選擇name屬性等于first的input標(biāo)簽
說明:
可以使用length屬性來判斷標(biāo)簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。
$(function(){
result = $("div").length;
alert(result);
});
學(xué)習(xí)目標(biāo)
選擇集過濾就是在選擇標(biāo)簽的集合里面過濾自己需要的標(biāo)簽
has方法的示例代碼:
<script>
$(function(){
// has方法的使用
var $div = $("div").has("#mytext");
// 設(shè)置樣式
$div.css({"background":"red"});
});
</script>
<div>
這是第一個(gè)div
<input type="text" id="mytext">
</div>
<div>
這是第二個(gè)div
<input type="text">
<input type="button">
</div>
eq方法的示例代碼:
<script>
$(function(){
// has方法的使用
var $div = $("div").has("#mytext");
// 設(shè)置樣式
$div.css({"background":"red"});
// eq方法的使用
var $div = $("div").eq(1);
// 設(shè)置樣式
$div.css({"background":"yellow"});
});
</script>
<div>
這是第一個(gè)div
<input type="text" id="mytext">
</div>
<div>
這是第二個(gè)div
<input type="text">
<input type="button">
</div>
學(xué)習(xí)目標(biāo)
選擇集轉(zhuǎn)移就是以選擇的標(biāo)簽為參照，然后獲取轉(zhuǎn)移后的標(biāo)簽
選擇集轉(zhuǎn)移的示例代碼:
<script>
$(function(){
var $div = $('#div01');
$div.prev().css({'color':'red'});
$div.prevAll().css({'text-indent':50});
$div.next().css({'color':'blue'});
$div.nextAll().css({'text-indent':80});
$div.siblings().css({'text-decoration':'underline'})
$div.parent().css({'background':'gray'});
$div.children().css({'color':'red'});
$div.find('.sp02').css({'font-size':30});
});
</script>
<div>
<h2>這是第一個(gè)h2標(biāo)簽</h2>
<p>這是第一個(gè)段落</p>
<div id="div01">這是一個(gè)<span>div</span><span class="sp02">第二個(gè)span</span></div>
<h2>這是第二個(gè)h2標(biāo)簽</h2>
<p>這是第二個(gè)段落</p>
</div>
學(xué)習(xí)目標(biāo)
jquery中的html方法可以獲取和設(shè)置標(biāo)簽的html內(nèi)容
示例代碼:
<script>
$(function(){
var $div = $("#div1");
// 獲取標(biāo)簽的html內(nèi)容
var result = $div.html();
alert(result);
// 設(shè)置標(biāo)簽的html內(nèi)容，之前的內(nèi)容會(huì)清除
$div.html("<span style='color:red'>你好</span>");
// 追加html內(nèi)容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="div1">
<p>hello</p>
</div>
說明:
給指定標(biāo)簽追加html內(nèi)容使用append方法
學(xué)習(xí)目標(biāo)
之前使用css方法可以給標(biāo)簽設(shè)置樣式屬性，那么設(shè)置標(biāo)簽的其它屬性可以使用prop方法了。
示例代碼:
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a = $("#link01");
var $input = $('#input01')
// 獲取元素屬性
var sId = $a.prop("id");
alert(sId);
// 設(shè)置元素屬性
$a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});
// 獲取value屬性
// var sValue = $input.prop("value");
// alert(sValue);
// 獲取value屬性使用val()方法的簡(jiǎn)寫方式
var sValue = $input.val();
alert(sValue);
// 設(shè)置value值
$input.val("222222");
})
</script>
<a id="link01">這是一個(gè)鏈接</a>
<input type="text" id="input01" value="111111">
說明: 獲取value屬性和設(shè)置value屬性還可以通過val方法來完成。
學(xué)習(xí)目標(biāo)
示例代碼:
<script>
$(function(){
var $li = $('.list li');
var $button = $('#button1')
var $text = $("#text1");
var $div = $("#div1")
// 鼠標(biāo)點(diǎn)擊
$li.click(function(){
// this指的是當(dāng)前發(fā)生事件的對(duì)象，但是它是一個(gè)原生js對(duì)象
// this.style.background = 'red';
// $(this) 指的是當(dāng)前發(fā)生事件的jquery對(duì)象
$(this).css({'background':'gold'});
// 獲取jquery對(duì)象的索引值,通過index() 方法
alert($(this).index());
});
// 一般和按鈕配合使用
$button.click(function(){
alert($text.val());
});
// 獲取焦點(diǎn)
$text.focus(function(){
$(this).css({'background':'red'});
});
// 失去焦點(diǎn)
$text.blur(function(){
$(this).css({'background':'white'});
});
// 鼠標(biāo)進(jìn)入
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// 鼠標(biāo)離開
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="點(diǎn)擊">
</div>
說明:
jQuery常用事件:
學(xué)習(xí)目標(biāo)
事件代理就是利用事件冒泡的原理(事件冒泡就是事件會(huì)向它的父級(jí)一級(jí)一級(jí)傳遞),把事件加到父級(jí)上，通過判斷事件來源，執(zhí)行相應(yīng)的子元素的操作，事件代理首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
事件冒泡代碼:
<script>
$(function(){
var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.click(function(){
alert($(this).html());
});
$div2.click(function(){
alert($(this).html());
});
});
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
說明:
當(dāng)點(diǎn)擊子元素div，它的點(diǎn)擊事件會(huì)向它父元素傳遞，也會(huì)觸發(fā)了父元素的點(diǎn)擊事件，這就是事件冒泡。
一般綁定事件的寫法:
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件代理的寫法
$(function(){
$list = $('#list');
// 父元素ul 來代理 子元素li的點(diǎn)擊事件
$list.delegate('li', 'click', function() {
// $(this)表示當(dāng)前點(diǎn)擊的子元素對(duì)象
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
delegate方法參數(shù)說明:
delegate(childSelector,event,function)
學(xué)習(xí)目標(biāo)
JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、函數(shù)等都可以認(rèn)為是對(duì)象，此外，JavaScript 允許自定義對(duì)象，對(duì)象可以擁有屬性和方法。
創(chuàng)建自定義javascript對(duì)象有兩種方式:
Object類創(chuàng)建對(duì)象的示例代碼:
<script>
var person = new Object();
// 添加屬性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
alert(this.name);
}
// 調(diào)用屬性和方法：
alert(person.age);
person.sayName();
</script>
對(duì)象字面量創(chuàng)建對(duì)象的示例代碼:
<script>
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 調(diào)用屬性和方法：
alert(person2.age);
person2.sayName();
</script>
說明:
調(diào)用屬性和方法的操作都是通過點(diǎn)語法的方式來完成，對(duì)象的創(chuàng)建推薦使用字面量方式，因?yàn)楦雍?jiǎn)單。
創(chuàng)建自定義javascript對(duì)象有兩種方式:
學(xué)習(xí)目標(biāo)
json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對(duì)象表示法，這里說的json就是類似于javascript對(duì)象的字符串，它同時(shí)是一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的xml數(shù)據(jù)格式。
json有兩種格式：
對(duì)象格式:
對(duì)象格式的json數(shù)據(jù)，使用一對(duì)大括號(hào)({})，大括號(hào)里面放入key:value形式的鍵值對(duì)，多個(gè)鍵值對(duì)使用逗號(hào)分隔。
對(duì)象格式的json數(shù)據(jù):
{
"name":"tom",
"age":18
}
格式說明:
json中的(key)屬性名稱和字符串值需要用雙引號(hào)引起來，用單引號(hào)或者不用引號(hào)會(huì)導(dǎo)致讀取數(shù)據(jù)錯(cuò)誤。
數(shù)組格式:
數(shù)組格式的json數(shù)據(jù)，使用一對(duì)中括號(hào)([])，中括號(hào)里面的數(shù)據(jù)使用逗號(hào)分隔。
數(shù)組格式的json數(shù)據(jù):
["tom",18,"programmer"]
實(shí)際開發(fā)的json格式比較復(fù)雜,例如:
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":"North Andover, MA"
}
}
json本質(zhì)上是字符串，如果在js中操作json數(shù)據(jù)，可以將json字符串轉(zhuǎn)化為JavaScript對(duì)象。
示例代碼:
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作屬性
alert(oPerson.name);
alert(oPerson.age);
學(xué)習(xí)目標(biāo)
ajax 是 Asynchronous JavaScript and XML的簡(jiǎn)寫，ajax一個(gè)前后臺(tái)配合的技術(shù)，它可以讓 javascript 發(fā)送異步的 http 請(qǐng)求，與后臺(tái)通信進(jìn)行數(shù)據(jù)的獲取，ajax 最大的優(yōu)點(diǎn)是實(shí)現(xiàn)局部刷新，ajax可以發(fā)送http請(qǐng)求，當(dāng)獲取到后臺(tái)數(shù)據(jù)的時(shí)候更新頁面顯示數(shù)據(jù)實(shí)現(xiàn)局部刷新，在這里大家只需要記住，當(dāng)前端頁面想和后臺(tái)服務(wù)器進(jìn)行數(shù)據(jù)交互就可以使用ajax了。
這里提示一下大家, 在html頁面使用ajax需要在web服務(wù)器環(huán)境下運(yùn)行, 一般向自己的web服務(wù)器發(fā)送ajax請(qǐng)求。
jquery將它封裝成了一個(gè)方法$.ajax()，我們可以直接用這個(gè)方法來執(zhí)行ajax請(qǐng)求。
示例代碼:
<script>
$.ajax({
// 1.url 請(qǐng)求地址
url:'http://t.weather.sojson.com/api/weather/city/101010100',
// 2.type 請(qǐng)求方式，默認(rèn)是'GET'，常用的還有'POST'
type:'GET',
// 3.dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式
dataType:'JSON',
// 4.data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置
// 5.success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
success:function (response) {
console.log(response);
},
// 6.error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
error:function () {
alert("請(qǐng)求失敗,請(qǐng)稍后再試!");
},
// 7.async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫
async:true
});
</script>
ajax方法的參數(shù)說明:
ajax的簡(jiǎn)寫方式:
$.ajax按照請(qǐng)求方式可以簡(jiǎn)寫成$.get或者$.post方式
ajax簡(jiǎn)寫方式的示例代碼:
<script>
$(function(){
/*
1. url 請(qǐng)求地址
2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置
3. success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
*/
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}).error(function(){
alert("網(wǎng)絡(luò)異常");
});
/*
1. url 請(qǐng)求地址
2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置
3. success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
*/
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("網(wǎng)絡(luò)異常");
});
});
</script>
$.get和$.post方法的參數(shù)說明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
插電混動(dòng)汽車，作為純電技術(shù)與傳統(tǒng)燃油技術(shù)的結(jié)合，這項(xiàng)技術(shù)旨在為用戶提供更多樣的駕駛選擇與用車場(chǎng)景、還可以提供純電駕駛的體驗(yàn)。但當(dāng)電量耗盡，車輛的行駛性能和油耗會(huì)發(fā)生怎樣的變化？這種差異是否會(huì)影響用戶的駕駛體驗(yàn)和經(jīng)濟(jì)效益呢？結(jié)合廣汽本田第五屆極限挑戰(zhàn)中，插電混動(dòng)旗艦雙子星的成績(jī)，分享你的看法？
在新能源車中，插電混動(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)心沒電了，跑長(zhǎng)途也是如此，車主就會(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ù)航焦慮，既可以跑短途，也可以跑長(zhǎng)途，還支持外放電，當(dāng)你在野外自駕游時(shí)，你的車還能成為戶外電源，供你煮飯、吃電火鍋、電燒烤，是不是很酷？
2、省油。
跟純電車比，混動(dòng)車油耗肯定高，但跟燃油車比，混動(dòng)車油耗明顯低多了。以我自己的哈弗H6 DHT-PHEV為例，在家里裝了充電樁，選擇凌晨充電，一度電5毛，電池容易是19.9度電，充滿電要10塊錢，可以跑100公里。
算起來一公里只要一毛錢，天天在城市上下班開，可以開4~5天，如果不跑長(zhǎng)途，可以一直用電，根本不用加油，上次加了200塊錢，幾個(gè)月時(shí)間還在，根本用不到。
3、環(huán)保，動(dòng)力強(qiáng)，能掛綠牌。
國(guó)家的環(huán)保標(biāo)準(zhǔn)越來越嚴(yán)格，國(guó)6B剛剛執(zhí)行，用不了兩年，國(guó)7標(biāo)準(zhǔn)也會(huì)到來，這對(duì)燃油車來說，是一道緊箍咒，雖然能繼續(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à)比同級(jí)別車高。
同級(jí)別的混動(dòng)車比燃油車貴了4萬元左右，有人說4萬元可以加多少油，混動(dòng)車省的油都不夠車價(jià)貴，需要注意，新能源車目前沒有購(gòu)置稅，按落地價(jià)算的話，相差不到3萬元左右，然后兩者之間的駕駛感受是完全不同的，開過電動(dòng)車的人對(duì)此深有體會(huì)。
----------------------------------------------------------------------------------------------------
接下來就是每文最后的前端小知識(shí)分享，因?yàn)椴┲魇乔岸顺錾恚@也算是福利吧，每文最后加個(gè)前端的小知識(shí)：
今天跟大家說的是如何在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)，可行性需要完成測(cè)試后商榷（頁面之間數(shù)據(jù)傳輸是否可行）
3.通過iframe的引入
上有很多在線生成二維碼的功能，但如果我們系統(tǒng)想批量生成一批二維碼，總不能一個(gè)一個(gè)復(fù)制黏貼到第三方網(wǎng)站上生成吧。
因此，就有系統(tǒng)實(shí)現(xiàn)生成二維碼的需求，網(wǎng)上找到qrcode這個(gè)js組件。
實(shí)現(xiàn)方法：
1、引用jquery.qrcode.min.js
2、demo樣例見下面的
3、補(bǔ)充說明，可以根據(jù)參數(shù)配置不同樣式，但demo只是一個(gè)初稿
關(guān)鍵代碼：
function createQrCode() {
$("#qrcode").html("");
let url = $("#txt_input").val();
$("#qrcode").qrcode({
// 渲染方式有table方式和canvas方式
render: !!document.createElement('canvas').getContext ? 'canvas' : 'table',
width: 150, //默認(rèn)寬度
height: 150, //默認(rèn)高度
text: url, //二維碼內(nèi)容
typeNumber: -1, //計(jì)算模式一般默認(rèn)為-1
correctLevel: 2, //二維碼糾錯(cuò)級(jí)別
background: "#ffffff", //背景顏色
foreground: "#000000" //二維碼顏色
});
}輸出效果：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
