課程回顧：
? 正則：匹配字符組合模式;
? 創建：var reg1 = new RegExp(/abc/); var reg2 = /abc/;
? 測試：reg1.test(‘abc’);
? 特殊字符：元字符
? 邊界符：^，$
? 字符類：[多選一]
? 量詞符：*，+，?，{n}，{n,}，{n,m}
? 修飾符：str.replace(/b/gi, ‘字符串’);
jQuery初步
今日基礎目標
能夠說出什么是 jQuery
能夠說出 jQuery 的優點
能夠簡單使用 jQuery
能夠說出 DOM 對象和 jQuery 對象的區別
jQuery 選擇器
jQuery 樣式操作
jQuery概念：
jQuery 是一個快速、簡潔的 JavaScript 庫
? JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函數）。
? 學習jQuery本質： 就是學習調用這些函數（方法）。【對象.方法()】
簡單理解： 就是一個JS 文件，里面對我們原生js代碼進行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。別人寫好的JS庫，我們拿過來用JavaScript 庫
jQuery
Prototype
YUI
Dojo
Ext JS
l移動端的zepto
這些庫都是
對原生 JavaScript 的封裝，內部都是用JavaScript 實現的，我們主要學習的是 jQuery。
jQuery 的優點
輕量級。核心文件才幾十kb，不會影響頁面加載速度
鏈式編程、隱式迭代=
對事跨瀏覽器兼容。基本兼容了現在主流的瀏覽器
樣式、動畫支持，大大簡化了DOM操作
支持插件擴展開發。有著豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等
免費、開源
jQuery 的下載
官網地址： https://jquery.com/
版本：
1x ：兼容 IE 678 等低版本瀏覽器， 官網不再更新
2x ：不兼容 IE 678 等低版本瀏覽器， 官網不再更新
3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護的
其他版本：https://code.jquery.com/
jQuery 的使用步驟
- 下載jQuery
- 引入 jQuery 文件
- 使用即可
jQuery入門
jQuery 的入口函數
第一種：
$(function () { ... // 此處是頁面 DOM 加載完成的入口}) ;
第二種：
$(document).ready(function(){... // 此處是頁面DOM加載完成的入口
});
注意點：
等著 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
不同于原生 js 中的 load 事件是等頁面文檔、外部的js 文件、css文件、圖片加載完畢才執行內部代碼。
更推薦使用第一種方式。
jQuery 的基本使用
jQuery 的頂級對象 $
1.$ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替 $，但一般為了方便，通常都直接使用 $ 。
2.$ 是jQuery 的頂級對象， 相當于原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。
jQuery 對象和 DOM 對象
$('div').css('屬性', '值') 小知識點 js的對象只能用JS的屬性和方法Jq的對象只能用JQ的屬性和方法
目的：學會區分
用原生 JS 獲取來的對象就是 DOM 對象【document.getElement等方法】
jQuery 方法獲取的元素就是 jQuery 對象【$(‘div’)等】
jQuery 對象本質是： 利用$對DOM 對象包裝后產生的對象（偽數組形式存儲）
特別注意
只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。
相互轉換
DOM 對象與 jQuery 對象之間是可以相互轉換的。
因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對象轉換為DOM對象才能使用。
DOM 對象轉換為 jQuery 對象： $(DOM對象)
jQuery 對象轉換為 DOM 對象（兩種方式）
? $(‘div’) [index] index 是索引號
? $(‘div’) .get(index) index 是索引號
<div>123</div><script type="text/javascript">var div = document.querySelector('div');// div.style.background = 'red';// div.css('background', 'blue');// DOM元素不可以用jQuery的方法// 如果吧divDOM對象轉成jQuery對象，就可以用jQuery的方法// $(div).css('background', 'blue');// $(DOM對象)==>jQuery對象// $(元素).css('屬性名', '屬性值');// $('div').css('background', 'yellow');// $('div').style.background = 'pink';// jQuery對象不可以用原生JS的方法// 如果吧jQuery對象轉換稱為DOM對象，就可以用style// console.log( $('div') );// [divDOM]\// $('div')[0].style.background = 'pink';$('div').get(0).style.background = 'orange';</script>
jQuery:JS庫
? 入口函數：$(function () {})
? jQuery對象和DOM對象轉換
jQuery 常用API
目標
- jQuery 選擇器
- jQuery 樣式操作
- jQuery 效果
- jQuery 屬性操作
- jQuery 文本屬性值
- jQuery 元素操作
- jQuery 尺寸、位置操作
jQuery 選擇器
原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此jQuery給我們做了封裝，使獲取元素統一標準選擇器：用來獲取元素
$(“選擇器”) // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號
$('#id')==》指定id元素$('*')==》所有元素$('.class')==》指定class元素$('div')==》根據標簽獲取元素$('div,p,li')==》獲取多個$('li.class')==>交集獲取$('ul>li')==>子代$('ul li')==>后代
隱式迭代
遍歷內部 DOM 元素（偽數組形式存儲）的過程就叫做隱式迭代
簡單理解：給匹配到的所有元素進行循環遍歷，執行相應的方法，而不用我們再進行循環，簡化我們的操作，方便我們調用。
小練習：
? 給一組li修改樣式
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><script type="text/javascript">// 因為：隱式迭代$('ul li').css('background','blue');// 原來// var lis = document.querySelectorAll('li');// for (var i = 0; i < lis.length; i++) {// lis[i].style.background = 'red';// }</script>
</body>
jQuery 篩選選擇器
$(‘li:first’)：第一個元素
$(‘li:last’)：最后一個元素
$(‘li:eq(2)’)==》索引為2【查找指定索引的元素】
$(‘li:odd’)==》索引為奇數
$(‘li:even’)==》索引為偶數
注意：索引是從0開始的
jQuery 篩選方法（重點）
$(‘選擇器’).方法()
$(‘li’).parent()父級
$(‘ul’).children(‘li’);子集【如果不加參數，獲取所有的，如果添加指定的元素，按照指定的找】
$(‘ul’).find(‘li’)后代
$(‘li’).siblings(‘li’)兄弟
$(‘li’),nextAll();后面的
$(‘li’).prevAll();前面的
判斷是否具有某個類名：$(‘div’).hasClass(‘aaa’)
$(‘div’).eq(index);指定索引方法【eq推薦用方法】
重點記住： parent() children() find() siblings() eq()小知識點：添加事件，show方法，hide方法，toggle方法
案例下拉菜單
上午回顧：
? jQuery：javaScript庫
? 入口函數：
? 第一種：$(function () {代碼});
? 第二種：$(document).ready(function () {代碼});
? jQuery：jQuery對象==>$
? jQuery對象：$(’元素‘)[索引值];
? DOM對象：原生獲取元素$(DOM對象)
? jQuery選擇器：$(‘選擇器’);
? 篩選方法：parent，childrend，find，siblings，eq
? 添加知識： next() 下一個 prev()上一個
jQuery中的next()方法
next()方法，獲取指定元素同輩的下一個元素
語法 $().next()
jQuery中的prev()方法
prev方法：獲取指定元素同輩的上一個元素
語法 $().prev();
jQuery 里面的排他思想
案例：多個按鈕點擊改變當前按鈕顏色，其他的不變
【index()獲取索引值】
想要多選一的效果，排他思想：當前元素設置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);$(this).siblings(). css(“color”,””);
案例：淘寶服飾精品案例【index()獲取索引值】
②需要得到當前小li 的索引號，就可以顯示對應索引號的圖片③jQuery 得到當前元素索引號 $(this).index() ⑤顯示元素 show() 隱藏元素 hide()
鏈式編程
$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);
按鈕案例
<script type="text/javascript">$('input').click(function () {// $(this).css('background', 'red');// $(this).siblings().css('background', '');$(this).css('background', 'yellow').siblings().css('background', '');});</script>
jQuery 樣式操作
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
操作 css 方法
參數只寫屬性名，則是返回屬性值【$(this).css(''color'');】參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號【$(this).css(''color'', ''red'');】參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號，
【$(this).css({ "color":"white","font-size":"20px"});】$('input').click(function () {// console.log( $('div').css('width') );// $('div').css('width', '300px');// $('div').css('height', 300);// $('div').css('background','blue');// 如果，設置的屬性多，那么直接傳遞對象既可$('div').css({// 屬性名 ：屬性值，width : 200,height : 200,background : 'yellow','font-size' : '60px',});});
設置類樣式方法
作用等同于以前的 classList，可以操作類樣式，注意操作類里面的參數不要加點
添加類【$(“div”).addClass(''current'');】移除類【$(“div”).removeClass(''current'');】切換類【$(“div”).toggleClass(''current'');】原生 JS 中 className 會覆蓋元素原先里面的類名。 jQuery 里面類操作只是對指定類進行操作，不影響原先的類名***案例：*tab欄切換
點擊上部的li，當前li 添加current類，其余兄弟移除類。點擊的同時，得到當前li 的索引號讓下部里面相應索引號的item顯示，其余的item隱藏<script>// 點擊修改內容以及樣式// 點擊li添加類名current，其他li不準加這個類名// 并且對應的div要顯示，其他的div要隱藏$('.tab_list li').click(function () {// 1、點擊哪個li給哪個li添加類名，其他的移除類名$(this).addClass('current').siblings().removeClass('current');// 2、顯示對應的div，其他div隱藏// 獲取索引值var index = $(this).index();// 根據index查找對應div$('.tab_con div').eq(index).show().siblings().hide();});</script>
課程回顧：
? jQuery：JavaScript庫
? 1、入口函數：$(function () {});
? 2、jQuery對象和DOM對象轉換
? 3、jQuery選擇器：#id，.類名
? 篩選方法：parent (父級)，childrend（子集），find（后代），siblings（兄弟元素），eq（索引）
? 隱式迭代，鏈式編程
? 4、jQuery樣式操作：$(元素).css(參數);
? 5、jQuery類名操作：addClass（添加類），removeClass（刪除類），toggleClass（類名的切換）
其他知識點：給元素添加事件$(元素).click(function () {});
? 顯示隱藏元素：show（顯示），hide（隱藏），toggle（切換）
。...)
