當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery第一天

發(fā)布時間：2023/12/13 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery第一天小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

課程回顧：

? 正則：匹配字符組合模式;

? 創(chuàng)建：var reg1 = new RegExp(/abc/); var reg2 = /abc/;

? 測試：reg1.test(‘a(chǎn)bc’);

? 特殊字符：元字符

? 邊界符：^，$

? 字符類：[多選一]

? 量詞符：*，+，?，{n}，{n,}，{n,m}

? 修飾符：str.replace(/b/gi, ‘字符串’);

jQuery初步

今日基礎(chǔ)目標

能夠說出什么是 jQuery

能夠說出 jQuery 的優(yōu)點

能夠簡單使用 jQuery

能夠說出 DOM 對象和 jQuery 對象的區(qū)別

jQuery 選擇器

jQuery 樣式操作

jQuery概念：

jQuery 是一個快速、簡潔的 JavaScript 庫

? JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函數(shù)）。

? 學(xué)習(xí)jQuery本質(zhì)：就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。【對象.方法()】

簡單理解：就是一個JS 文件，里面對我們原生js代碼進行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。其設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。j 就是 JavaScript； Query 查詢；意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。別人寫好的JS庫，我們拿過來用

JavaScript 庫

jQuery

Prototype

YUI

Dojo

Ext JS

l移動端的zepto

這些庫都是

對原生 JavaScript 的封裝，內(nèi)部都是用JavaScript 實現(xiàn)的，我們主要學(xué)習(xí)的是 jQuery。

jQuery 的優(yōu)點

輕量級。核心文件才幾十kb，不會影響頁面加載速度

鏈式編程、隱式迭代=

對事跨瀏覽器兼容?；炯嫒萘爽F(xiàn)在主流的瀏覽器

樣式、動畫支持，大大簡化了DOM操作

支持插件擴展開發(fā)。有著豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等

免費、開源

jQuery 的下載

官網(wǎng)地址： https://jquery.com/

版本：

1x ：兼容 IE 678 等低版本瀏覽器，官網(wǎng)不再更新

2x ：不兼容 IE 678 等低版本瀏覽器，官網(wǎng)不再更新

3x ：不兼容 IE 678 等低版本瀏覽器，是官方主要更新維護的

其他版本：https://code.jquery.com/

jQuery 的使用步驟

下載jQuery

引入 jQuery 文件

使用即可

jQuery入門

jQuery 的入口函數(shù)

第一種：

$(function () { ... // 此處是頁面 DOM 加載完成的入口}) ;

第二種：

$(document).ready(function(){... // 此處是頁面DOM加載完成的入口 });

注意點：

等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。

不同于原生 js 中的 load 事件是等頁面文檔、外部的js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。

更推薦使用第一種方式。

jQuery 的基本使用

jQuery 的頂級對象 $

1.$ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替 $，但一般為了方便，通常都直接使用 $ 。

2.$ 是jQuery 的頂級對象，相當于原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調(diào)用jQuery 的方法。

jQuery 對象和 DOM 對象

$('div').css('屬性', '值') 小知識點 js的對象只能用JS的屬性和方法Jq的對象只能用JQ的屬性和方法

目的：學(xué)會區(qū)分

用原生 JS 獲取來的對象就是 DOM 對象【document.getElement等方法】

jQuery 方法獲取的元素就是 jQuery 對象【$(‘div’)等】

jQuery 對象本質(zhì)是：利用$對DOM 對象包裝后產(chǎn)生的對象（偽數(shù)組形式存儲）

特別注意

只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。

相互轉(zhuǎn)換

DOM 對象與 jQuery 對象之間是可以相互轉(zhuǎn)換的。

因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對象轉(zhuǎn)換為DOM對象才能使用。

DOM 對象轉(zhuǎn)換為 jQuery 對象： $(DOM對象)

jQuery 對象轉(zhuǎn)換為 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對象轉(zhuǎn)成jQuery對象，就可以用jQuery的方法// $(div).css('background', 'blue');// $(DOM對象)==>jQuery對象// $(元素).css('屬性名', '屬性值');// $('div').css('background', 'yellow');// $('div').style.background = 'pink';// jQuery對象不可以用原生JS的方法// 如果吧jQuery對象轉(zhuǎn)換稱為DOM對象，就可以用style// console.log( $('div') );// [divDOM]\// $('div')[0].style.background = 'pink';$('div').get(0).style.background = 'orange';</script>

jQuery:JS庫

? 入口函數(shù)：$(function () {})

? jQuery對象和DOM對象轉(zhuǎn)換

jQuery 常用API

目標

jQuery 選擇器

jQuery 樣式操作

jQuery 效果

jQuery 屬性操作

jQuery 文本屬性值

jQuery 元素操作

jQuery 尺寸、位置操作

jQuery 選擇器

原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此jQuery給我們做了封裝，使獲取元素統(tǒng)一標準選擇器：用來獲取元素

$(“選擇器”) // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號

$('#id')==》指定id元素$('*')==》所有元素$('.class')==》指定class元素$('div')==》根據(jù)標簽獲取元素$('div,p,li')==》獲取多個$('li.class')==>交集獲取$('ul>li')==>子代$('ul li')==>后代

隱式迭代

遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲）的過程就叫做隱式迭代

簡單理解：給匹配到的所有元素進行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們再進行循環(huán)，簡化我們的操作，方便我們調(diào)用。

小練習(xí)：

? 給一組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’)==》索引為奇數(shù)

$(‘li:even’)==》索引為偶數(shù)

注意：索引是從0開始的

jQuery 篩選方法（重點）

$(‘選擇器’).方法()

$(‘li’).parent()父級

$(‘ul’).children(‘li’);子集【如果不加參數(shù)，獲取所有的，如果添加指定的元素，按照指定的找】

$(‘ul’).find(‘li’)后代

$(‘li’).siblings(‘li’)兄弟

$(‘li’),nextAll();后面的

$(‘li’).prevAll();前面的

判斷是否具有某個類名：$(‘div’).hasClass(‘a(chǎn)aa’)

$(‘div’).eq(index);指定索引方法【eq推薦用方法】

重點記住： parent() children() find() siblings() eq()

小知識點：添加事件，show方法，hide方法，toggle方法

案例下拉菜單

上午回顧：

? jQuery：javaScript庫

? 入口函數(shù)：

? 第一種：$(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()獲取索引值】

想要多選一的效果，排他思想：當前元素設(shè)置樣式，其余的兄弟元素清除樣式。

$(this).css(“color”,”red”);$(this).siblings(). css(“color”,””);

案例：淘寶服飾精品案例【index()獲取索引值】

②需要得到當前小li 的索引號，就可以顯示對應(yīng)索引號的圖片③jQuery 得到當前元素索引號 $(this).index() ⑤顯示元素 show() 隱藏元素 hide()

鏈式編程

$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);

按鈕案例

jQuery 樣式操作

jQuery 可以使用 css 方法來修改簡單元素樣式；也可以操作類，修改多個樣式。

操作 css 方法

參數(shù)只寫屬性名，則是返回屬性值【$(this).css(''color'');】參數(shù)是屬性名，屬性值，逗號分隔，是設(shè)置一組樣式，屬性必須加引號，值如果是數(shù)字可以不用跟單位和引號【$(this).css(''color'', ''red'');】參數(shù)可以是對象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號，【$(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');// 如果，設(shè)置的屬性多，那么直接傳遞對象既可$('div').css({// 屬性名：屬性值，width : 200,height : 200,background : 'yellow','font-size' : '60px',});});

設(shè)置類樣式方法

作用等同于以前的 classList，可以操作類樣式，注意操作類里面的參數(shù)不要加點

添加類【$(“div”).addClass(''current'');】移除類【$(“div”).removeClass(''current'');】切換類【$(“div”).toggleClass(''current'');】原生 JS 中 className 會覆蓋元素原先里面的類名。 jQuery 里面類操作只是對指定類進行操作，不影響原先的類名

***案例：*tab欄切換

點擊上部的li，當前l(fā)i 添加current類，其余兄弟移除類。點擊的同時，得到當前l(fā)i 的索引號讓下部里面相應(yīng)索引號的item顯示，其余的item隱藏<script>// 點擊修改內(nèi)容以及樣式// 點擊li添加類名current，其他li不準加這個類名// 并且對應(yīng)的div要顯示，其他的div要隱藏$('.tab_list li').click(function () {// 1、點擊哪個li給哪個li添加類名，其他的移除類名$(this).addClass('current').siblings().removeClass('current');// 2、顯示對應(yīng)的div，其他div隱藏// 獲取索引值var index = $(this).index();// 根據(jù)index查找對應(yīng)div$('.tab_con div').eq(index).show().siblings().hide();});</script>

課程回顧：

? jQuery：JavaScript庫

? 1、入口函數(shù)：$(function () {});

? 2、jQuery對象和DOM對象轉(zhuǎn)換

? 3、jQuery選擇器：#id，.類名

? 篩選方法：parent (父級)，childrend（子集），find（后代），siblings（兄弟元素），eq（索引）

? 隱式迭代，鏈式編程

? 4、jQuery樣式操作：$(元素).css(參數(shù));

? 5、jQuery類名操作：addClass（添加類），removeClass（刪除類），toggleClass（類名的切換）

其他知識點：給元素添加事件$(元素).click(function () {});

? 顯示隱藏元素：show（顯示），hide（隱藏），toggle（切換）

總結(jié)

以上是生活随笔為你收集整理的jQuery第一天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

jquery