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