騰訊云 wordpress教程視頻seo外鏈推廣
一、Ajax
Ajax即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）， ?通過(guò) JS 異步的向服務(wù)器發(fā)送請(qǐng) 求并接收響應(yīng)數(shù)據(jù)。
同步訪問(wèn)：當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求時(shí)，服務(wù)器在處理的過(guò)程中，瀏覽器只能等待，效率較低。
異步訪問(wèn)：當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求時(shí)，服務(wù)器在處理的過(guò)程中，客戶端可以做其他的操作，不需要一直等待。
創(chuàng)建ajax實(shí)例 ?
?let xhr = new XMLHttpRequest();
創(chuàng)建請(qǐng)求
method:請(qǐng)求方式，取值'GET' 或 'POST'
url:請(qǐng)求地址，字符串。
xhr.open(method,url)；
?發(fā)送請(qǐng)求 ?
? ? ? ? xhr.send()
響應(yīng)請(qǐng)求 ?
? ? ? ? xhr.onload = function(){
? ? ? ? ? //判斷 你請(qǐng)求服務(wù)器的狀態(tài)是否為200 ?200的狀態(tài)碼表示成功
? ? ? ? ? if(xhr.status === 200){
? ? ? ? ? ? console.log(xhr.response);
? ? ? ? ? } ?
? ? ? ? }
二、jQuery
1.jQuery介紹
jQuery是JavaScript的工具庫(kù)，對(duì)原生JavaScript中的DOM操作、事件處理、包括數(shù)據(jù)處理和Ajax技術(shù)等進(jìn)行封裝,提供更完善，更便捷的方法。
2.工廠函數(shù) - $()
"$()"函數(shù)用于獲取元素節(jié)點(diǎn)，創(chuàng)建元素節(jié)點(diǎn)或?qū)⒃鶭avaScript對(duì)象轉(zhuǎn)換為jquery對(duì)象,返回 jQuery 對(duì)象。jQuery 對(duì)象實(shí)際是一個(gè)類數(shù)組對(duì)象，包含了一系列jQuery 操作的方法。
原生JavaScript對(duì)象與jQuery對(duì)象的屬性和方法不能混用?？梢愿鶕?jù)需要，互相轉(zhuǎn)換 :
1. 原生JavaScript轉(zhuǎn)換jQuery對(duì)象
? ? $(原生對(duì)象)，返回 jQuery 對(duì)象
2. jQuery對(duì)象轉(zhuǎn)換原生JavaScript對(duì)象
? ? - 方法一 : 根據(jù)下標(biāo)取元素,取出即為原生對(duì)象
? ? ? ? var div = $("div")[0];
? ? - 方法二 : 使用jQuery的get(index)取原生對(duì)象
? ? ? ? var div2 = $("div").get(0);
3.jQuery獲取元素
jQuery通過(guò)選擇器獲取元素，$("選擇器")
標(biāo)簽選擇器：$("div")
ID 選擇器：$("#d1")
類選擇器：$(".c1")
群組選擇器：$("body,p,h1")
后代選擇器： $("div .c1")
子代選擇器： $("div>span")
相鄰兄弟選擇器： $("h1+p") ?匹配選擇器1后的第一個(gè)兄弟元素,同時(shí)要求兄弟元素滿足選擇器2
通用兄弟選擇器： $("h1~h2") 匹配選擇器1后所有滿足選擇器2的兄弟元素
過(guò)濾選擇器，需要結(jié)合其他選擇器使用。
:first
? 匹配第一個(gè)元素 例:$("p:first")
:last
? 匹配最后一個(gè)元素 例:$("p:last")
:odd
? 匹配奇數(shù)下標(biāo)對(duì)應(yīng)的元素
:even
? 匹配偶數(shù)下標(biāo)對(duì)應(yīng)的元素
:eq(index)
? 匹配指定下標(biāo)的元素
:lt(index)
? 匹配下標(biāo)小于index的元素
:gt(index)
? 匹配下標(biāo)大于index的元素
:not(選擇器)
? 否定篩選,除()中選擇器外,其他元素
示例代碼：
<script>// jQuery 是 JavaScript的工具庫(kù) 對(duì)原生js代碼中方法 進(jìn)行封裝 dom操作 事件處理 包含數(shù)據(jù)處理和ajax技術(shù)等進(jìn)行了封裝 提供了完善的更加簡(jiǎn)單的方法 // 直接 使用 $() 來(lái)獲取元素 console.log($('box')); // 返回結(jié)果是JQuery對(duì)象 // JQuery對(duì)象 轉(zhuǎn)為原生js對(duì)象 // let box =$('.box')[0];// console.log(box);// 或者let box =$('.box').get(0);console.log(box);// 通過(guò).css修改文字顏色 $('.box').css('color','red')</script>4.操作元素內(nèi)容
// 設(shè)置或讀取標(biāo)簽內(nèi)容,等價(jià)于原生innerHTML,可識(shí)別標(biāo)簽語(yǔ)法
html()
// 設(shè)置或讀取標(biāo)簽內(nèi)容,等價(jià)于innerText,不能識(shí)別標(biāo)簽
text()
// 設(shè)置或讀取表單元素的值,等價(jià)于原生value屬性
val()
示例代碼：
<script src='./jquery.js'></script><script>// html()等價(jià)于 原生 innerHTML 可識(shí)別標(biāo)簽 $('.wrap').html('<h2>明天星期五了</h2>')// 插入文本 $('p').text('搞學(xué)習(xí)了')// 原生js 讀取input控件里面的值 直接.value // console.log(inp.value);//jquery版獲取表單控件里面的內(nèi)容 console.log($('input').val());// 點(diǎn)擊button按鈕 把我在input輸入框的內(nèi)容 彈出來(lái) $('button').click(function(){console.log($('input').val());})</script>5.操作標(biāo)簽屬性
1. attr("attrName","value")
? ? 設(shè)置或讀取標(biāo)簽屬性
2. prop("attrName","value")
? ? 設(shè)置或讀取標(biāo)簽屬性
? ? 注意 :在設(shè)置或讀取元素屬性時(shí),attr()和prop()基本沒(méi)有區(qū)別;但是在讀取或設(shè)置表單元素(按鈕)的選中狀態(tài)時(shí),必須用prop()方法,attr()不會(huì)監(jiān)聽按鈕選中狀態(tài)的改變,只看標(biāo)簽屬性checked是否書寫
3. removeAttr("attrName")
? ? 移除指定屬性
示例代碼：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- <input type="text" name='你好' id='check'> --><input type="checkbox" name='你好' id='check'><input type="submit" id='sub'><img alt="你圖片沒(méi)了" src="https://img2.baidu.com/it/u=2425084553,971201481&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""><script src='./jquery.js'></script><script>// 設(shè)置讀取標(biāo)簽的屬性 console.log($('#check').attr('name'));//讀取這個(gè)標(biāo)簽的name屬性// 給 value屬性 設(shè)置了內(nèi)容: 我輸入了什么// console.log($('#check').attr('value','我輸入了什么'));//prop 讀取或設(shè)置屬性 // alert($('#check').prop('value'))//attr 讀取或設(shè)置屬性 // alert($('#check').attr('value'))$('#sub').click(function () {// 會(huì)監(jiān)聽你的點(diǎn)擊狀態(tài)// alert($('#check').prop('value'))//on表示選中// alert($('#check').attr('value'))//彈出 undefined 不會(huì)監(jiān)聽你按鈕選中狀態(tài)})// 刪除屬性$('img').removeAttr('src')</script></body></html>6.操作標(biāo)簽樣式
1. 針對(duì)類選擇器,提供操作class屬性值的方法
// 添加指定的類名
addClass("className")
// 移除指定的類型,如果參數(shù)省略,表示清空class屬性值
removeClass("className")
// 如果當(dāng)前元素存在指定類名,則移除;不存在則添加
toggleClass("className")
2. 操作行內(nèi)樣式
// 設(shè)置行內(nèi)樣式
css("屬性名","屬性值") ?
// 設(shè)置一組CSS樣式
css(對(duì)象)
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;list-style: none;}.box{width: 300px;height: 300px;background-color: orange;}.wrap{background-color: pink;}.list{width: 400px;height: 80px;background-color: pink;margin: auto;}.list>li{float: left;width: 100px;height: 80px;background-color: gray;color: orange;text-align: center;line-height: 80px;/* 變成小手 */cursor: pointer;}.list>.only{background-color: #096;}</style>
</head>
<body><div class='text wrap'></div><ul class='list'><li>英雄聯(lián)盟</li><li>王者榮耀</li><li>永劫無(wú)間</li><li class='only'>原神</li></ul><p>我是文本標(biāo)簽</p><script src='./jquery.js'></script><script>// 添加指定類名 $('div').addClass('box')//刪除指定類名 如果參數(shù)忽略不寫 那就清空class屬性值 // $('div').removeClass()// 如果當(dāng)前標(biāo)簽有這個(gè)類名那就刪掉 無(wú)則加 $('div').toggleClass('wrap')$('.list>li').click(function(){// 移除li標(biāo)簽里面用only類名 $('.list>li').removeClass('only');// this指向你當(dāng)前點(diǎn)擊的這個(gè)元素 // $(this).addClass('only');$(this).toggleClass('only')})// 操作元素 添加樣式 $('元素').css('屬性','屬性值') 寫多個(gè)就直接繼續(xù)后面用.css方法 麻煩 // $('p').css('color','pink').css('font-size','20px')// 快捷寫多個(gè)屬性 就寫對(duì)象屬性 $('p').css({'width':'200px','height':'300px','background-color':'green'})</script>
</body>
</html>
7.元素的創(chuàng)建,添加,刪除
1. 創(chuàng)建：使用$("標(biāo)簽語(yǔ)法")，返回創(chuàng)建好的元素
// 創(chuàng)建元素
let div = $("<div></div>");
// 設(shè)置內(nèi)容和屬性
div.html("動(dòng)態(tài)創(chuàng)建").attr("id","d1").css("color","red");
let h1 = $("<h1 id='d1'>一級(jí)標(biāo)題</h1>")
2. 作為子元素添加
// 在$obj的末尾添加子元素newObj
$obj.append(newObj);
// 作為第一個(gè)子元素添加至$obj中
$obj.prepend(newObj);
3. 作為兄弟元素添加
// 在$obj的后面添加兄弟元素
$obj.after(newObj);
// 在$obj的前面添加兄弟元素
$obj.before(newObj);
4. 移除元素
// 移除$obj
$obj.remove(); ?
示例代碼：
<script>// 創(chuàng)建新的span標(biāo)簽 let span = $('<span></span>');// 添加到我的div標(biāo)簽里面 作為最后一個(gè)子元素添加 // $('div').append(span)// 作為第一個(gè)子元素進(jìn)行添加 // $('div').prepend(span)// before() 作為同級(jí)元素進(jìn)行插入 在前面插入 $('div').before(span)// after() 作為同級(jí)元素進(jìn)行插入 在后面插入 $('div').after(span)// 設(shè)置內(nèi)容 添加類名 顏色 span.html('我是剛剛新建的span標(biāo)簽').attr('class','text').css('color','green')// 刪除元素$('div').remove()</script>8.動(dòng)畫效果
1. 顯示和隱藏
? ? ?show(speed,callback)/hide(speed,callback)
? ? - speed ? 可選。規(guī)定元素從隱藏到完全可見(jiàn)的速度。默認(rèn)為 "0"。
? ? - callback ? 可選。show 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)
2. 通過(guò)使用滑動(dòng)下拉和上推效果，顯示隱藏的被選元素（ **只針對(duì)塊元素** ）
? ? ?slideDown(speed,callback)/slideUp(speed,callback)
3. 通過(guò)使用淡隱淡現(xiàn)方式顯示效果，顯示隱藏的被選元素
? ? ?fadeOut(speed,callback)/fadeIn(speed,callback)
? ?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 300px;background-color: skyblue;}</style></head><body><div class="box"></div><button class='btn1'>隱藏</button><button class='btn2'>上推</button><button class='btn3'>若隱</button><script src='./jquery.js'></script><script>$('.btn1').click(function () {// // 點(diǎn)擊隱藏按鈕 box盒子就隱藏 // $('.box').hide(1000,function(){// // 隱藏之后 按鈕的文字 替換成 顯示 // $('.btn1').text('顯示')// })// 如果字是隱藏就執(zhí)行隱藏功能 否則就執(zhí)行顯示 if ($('.btn1').text() === '隱藏') {$('.box').hide(1000, function () {// 隱藏之后 按鈕的文字 替換成 顯示 $('.btn1').text('顯示')})} else {// 不是就執(zhí)行顯示功能 $('.box').show(1000, function () {//顯示狀態(tài)下把文字 替換成 隱藏$('.btn1').text('隱藏')})}})// 上推和下拉效果 $('.btn2').click(function () {//slideUp上推方法 相當(dāng)于把盒子高度 變?yōu)? 了 // $('.box').slideUp(1000, function () {// $('.btn2').text('下拉')// })// 如果字按鈕文字是上推就執(zhí)行上推效果 if ($('.btn2').text() === '上推') {$('.box').slideUp(1000, function () {$('.btn2').text('下拉')})} else {// slideDown下拉方法$('.box').slideDown(1000, function () {$('.btn2').text('上推')})}})//若隱若現(xiàn)效果$('.btn3').click(function () {// 如果字按鈕文字是若隱就執(zhí)行若隱效果 if ($('.btn3').text() === '若隱') {// fadeOut若隱方法$('.box').fadeOut(1000, function () {$('.btn3').text('若現(xiàn)')})} else {// fadeIn若現(xiàn)方法$('.box').fadeIn(1000, function () {$('.btn3').text('若隱')})}})</script></body></html>9.數(shù)據(jù)與對(duì)象遍歷
1. $(selector).each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)
? ? $(selector).each(function(index,element){})
? ? - *index* - 選擇器的 index 位置
? ? - element - 當(dāng)前的元素
2. $.each()函數(shù)是框架提供的一個(gè)工具類函數(shù)，通過(guò)它，你可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理。
? ? $.each(Object, function(index, data){});
? ? - *index* - 選擇器的 index 位置
? ? - data- 當(dāng)前的數(shù)據(jù)
10.jQuery事件處理
文檔加載完畢原生JavaScript 方法：window.onload
$(function(){
? // 文檔加載完畢后執(zhí)行
})
區(qū)別：原生onload事件不能重復(fù)書寫，會(huì)產(chǎn)生覆蓋問(wèn)題；jquery中對(duì)事件做了優(yōu)化,可以重復(fù)書寫ready方法,依次執(zhí)行
$("div").on("click",function(){});
$("div").click(function(){}); ?
?