概述
jQuery是一個快速、簡潔的JavaScript框架，是一個優秀的JavaScript代碼庫（框架）于2006年1月由John Resig發布。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
引入jquery文件
<!-- 引入在線路徑 -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
<script src="../jquery/jquery.min.js"></script>jquery.js 是未壓縮版
jquery.min.js是壓縮版引入的jqery標簽的順序要在你的js之前引入?優點
- 訪問和操作dom元素更簡單;?
- 控制頁面樣式更優秀;?
- 對頁面事件處理簡單;?
- 可擴展的jquery插件。?
jquery和js的不同?
jquery是對js的封裝，js能做到的jquery不一定能做到，但是jquery能做到的js一定能做到?
?
入口函數
//jquery入口函數$(function(){console.log(jQuery)console.log($)})入口函數的不同點
- JavaScript 的入口函數是會等到所有內容，包括外部圖片之類的文件加載完后，才執行。
- jQuery的入口函數會等到全部DOM元素加載完畢，但不會等到圖片也加載完畢，就會提前執行。
- ?JS的入口函數如果有多個，后面創建的入口函數會覆蓋前面創建的入口函數，說白了就只能有一個入口函數
- jQuery的入口函數可以有多個，后面創建的入口函數不會覆蓋前面的入口函數。
js對象和jquery對象的相互轉換
//獲取js對象let jsBox = document.getElementsByClassName('box')[0];console.log(jsBox)// jsBox.addEventListener()//獲取jquery對象console.log( $('.box'))//js對象和jquery對象的方法是不能公用的// $('.box').addEventListener('click',function(){// console.log(123)// })//js對象和jquery對象之間的相互轉換// js對象轉 jquery對象$(jsBox).css('color','red')//jquery轉js對象// 通過[索引] 或者 get(索引)的方式$('.box').get(0).addEventListener('click',function(){console.log('被點擊了')})jquery選擇器?
?
?
過濾選擇器
?
?表單過濾選擇器
?
操作內容
修改樣式?
?
操作類名?
?
jquery控制元素顯示和隱藏
jquery事件
$().on(事件, 子對象,data
)
// 其中 子對象可寫可不寫;// 事件: 使用最常用的map鍵值對的方式進行編寫:
$().on(
{ '事件類型':function(){}, '事件類型':function(){} }
)$().off('被移除的事件'); // $('div').on({// 'click': function (e) {// console.log('單機事件')// console.log($(e.currentTarget).attr('index'))// },// 'dblclick':function(){// console.log('雙機事件')// },// 'mouseover':function(){// console.log('劃入事件')// }// }// )$('body').on('click','div',function(){console.log(123)})jquery遍歷方式
$('ul>li').each(function(i,e){//i 索引//e 當前的元素console.log(i,e)})操作節點
?
$('button:eq(1)').on('click',function(){//清空后代元素$('ul').empty();})$('button:eq(2)').on('click',function(){//刪除元素$('ul').remove();})?代碼實現
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jquery/jquery.js"></script>
</head><body><button>添加</button><button>empty</button><button>remove</button><button>查詢父元素</button><button>查詢子元素</button><button>查詢后代元素</button><button>返回除自已以外的所有兄弟元素</button><button>返回下一個兄弟元素</button><button>返回后面所有的兄弟元素</button><ul><li class="one"><span>456</span></li></ul></body>
<script>$(function () {$('button:eq(0)').on('click', function () {//創建節點let li = document.createElement('li');$(li).text('我是li')//將 li節點 添加到ul中//父元將將子元素添加到末尾; $('ul').append(li)//父元將將子元素添加到開頭; // $('ul').prepend(li)//把a追加到b的內部，位置位于b的結尾; // $(li).appendTo($('ul').get(0))// $(li).prependTo($('ul').get(0))//將元素添加到此元素的后面// $('.one').after(li)//將元素添加到此元素的前面// $('.one').before(li)})$('button:eq(1)').on('click', function () {//清空后代元素$('ul').empty();})$('button:eq(2)').on('click', function () {//刪除元素$('ul').remove();})$('button:eq(3)').on('click', function () {//查詢父元素console.log($('ul').parent());})$('button:eq(4)').on('click', function () {//查詢子元素console.log($('ul').children());})$('button:eq(5)').on('click', function () {//查詢后代元素console.log($('ul').find('*'));})$('button:eq(6)').on('click', function () {//查詢除自己所有的兄弟元素console.log($('.one').siblings());})$('button:eq(7)').on('click', function () {//查詢下一個兄弟元素console.log($('.one').next());})$('button:eq(8)').on('click', function () {//獲取之后所有的兄弟元素console.log($('.one').nextAll());})})</script></html>
