新手學(xué)習(xí)JQuery基本操作和使用案例解析
jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架,本質(zhì)上就是一些js文件,封裝了js的原生代碼。
一、jQuery的DOM操作
1. 內(nèi)容操作
- 1. html(): 獲取/設(shè)置元素的標(biāo)簽體內(nèi)容 <a><font>內(nèi)容</font></a> --> <font>內(nèi)容</font>
- 2. text(): 獲取/設(shè)置元素的標(biāo)簽體純文本內(nèi)容 <a><font>內(nèi)容</font></a> --> 內(nèi)容
- 3. val(): 獲取/設(shè)置元素的value屬性值
2. 屬性操作
1. 通用屬性操作
- 1. attr(): 獲取/設(shè)置元素的屬性
- 2. removeAttr():刪除屬性
- 3. prop():獲取/設(shè)置元素的屬性
- 4. removeProp():刪除屬性
* attr和prop區(qū)別?
- 1. 如果操作的是元素的固有屬性,則建議使用prop
- 2. 如果操作的是元素自定義的屬性,則建議使用attr
2. 對(duì)class屬性操作
- 1. addClass():添加class屬性值
- 2. removeClass():刪除class屬性值
- 3. toggleClass():切換class屬性
* toggleClass("one"):
* 判斷如果元素對(duì)象上存在class="one",則將屬性值one刪除掉。 如果元素對(duì)象上不存在class="one",則添加
4. css():改變樣式
二、jQuery動(dòng)畫的三種顯示方式:
1. 默認(rèn)顯示和隱藏方式
1. show([speed,[easing],[fn]])
參數(shù):
- 1. speed:動(dòng)畫的速度。三個(gè)預(yù)定義的值("slow","normal", "fast")或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如:1000)
- 2. easing:用來指定切換效果,默認(rèn)是"swing",可用參數(shù)"linear"
- * swing:動(dòng)畫執(zhí)行時(shí)效果是 先慢,中間快,最后又慢
- * linear:動(dòng)畫執(zhí)行時(shí)速度是勻速的
- 3. fn:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑動(dòng)顯示和隱藏方式
- 1. slideDown([speed],[easing],[fn])
- 2. slideUp([speed,[easing],[fn]])
- 3. slideToggle([speed],[easing],[fn])
3. 淡入淡出顯示和隱藏方式
- 1. fadeIn([speed],[easing],[fn])
- 2. fadeOut([speed],[easing],[fn])
- 3. fadeToggle([speed,[easing],[fn]])
三、案例:廣告顯示和隱藏
需求:
1. 當(dāng)頁面加載完,3秒后。自動(dòng)顯示廣告
2. 廣告顯示5秒后,自動(dòng)消失。
分析:
1. 使用定時(shí)器來完成。setTimeout (執(zhí)行一次定時(shí)器)
2. 分析發(fā)現(xiàn)JQuery的顯示和隱藏動(dòng)畫效果其實(shí)就是控制display
3. 使用 show/hide方法來完成廣告的顯示
代碼案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>廣告的自動(dòng)顯示與隱藏</title> <style> #content{width:100%;height:500px;background:#999} </style> <!--引入jquery--> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> //入口函數(shù),在頁面加載完成之后,定義定時(shí)器,調(diào)用這兩個(gè)方法 $(function () { //定義定時(shí)器,調(diào)用adShow方法 3秒后執(zhí)行一次 setTimeout(adShow,3000); //定義定時(shí)器,調(diào)用adHide方法,8秒后執(zhí)行一次 setTimeout(adHide,8000); }); //顯示廣告 function adShow() { //獲取廣告div,調(diào)用顯示方法 $("#ad").show("slow"); } //隱藏廣告 function adHide() { //獲取廣告div,調(diào)用隱藏方法 $("#ad").hide("slow"); } </script> </head> <body> <!-- 整體的DIV --> <div> <!-- 廣告DIV --> <div id="ad" style="display: none;"> <img style="width:100%" src="../img/adv.jpg" /> </div> <!-- 下方正文部分 --> <div id="content"> 正文部分 </div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery操作動(dòng)畫完整實(shí)例分析
- jQuery操作事件完整實(shí)例分析
- jQuery操作元素追加內(nèi)容示例
- JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
- JS 遍歷 json 和 JQuery 遍歷json操作完整示例
- jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作示例
- jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
- 使用jQuery操作Cookies的實(shí)現(xiàn)代碼
- JQuery對(duì)checkbox操作 (循環(huán)獲?。?/a>
- jQuery對(duì)表單元素的取值和賦值操作代碼
- jquery.cookie.js 操作cookie實(shí)現(xiàn)記住密碼功能的實(shí)現(xiàn)代碼
相關(guān)文章
Java8新特性Lambda表達(dá)式的一些復(fù)雜用法總結(jié)
lambda表達(dá)式是JAVA8中提供的一種新的特性,它支持Java也能進(jìn)行簡(jiǎn)單的“函數(shù)式編程”。 下面這篇文章主要給大家介紹了關(guān)于Java8新特性Lambda表達(dá)式的一些復(fù)雜用法的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07maven中配置項(xiàng)目的jdk版本無效的排查方式
這篇文章主要介紹了maven中配置項(xiàng)目的jdk版本無效的排查方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Java中的自動(dòng)裝箱與自動(dòng)拆箱的實(shí)現(xiàn)
自動(dòng)裝箱和自動(dòng)拆箱使得我們?cè)谑褂没緮?shù)據(jù)類型時(shí)更加方便,同時(shí)也提高了代碼的可讀性和健壯性,本文將詳細(xì)介紹Java中的自動(dòng)裝箱和自動(dòng)拆箱機(jī)制,感興趣的可以了解一下2023-08-08SpringBoot使用Redis實(shí)現(xiàn)分布式緩存
這篇文章主要介紹了SpringBoot redis分布式緩存實(shí)現(xiàn)過程解析,文中通過示例代碼解析的非常詳細(xì),感興趣的同學(xué)可以參考閱讀2023-04-04Spring MVC之@RequestMapping注解詳解
本篇文章主要介紹了Spring MVC之@RequestMapping 詳解,RequestMapping是一個(gè)用來處理請(qǐng)求地址映射的注解,可用于類或方法上。有興趣的可以了解一下。2017-01-01一篇文章帶你理解Java Spring三級(jí)緩存和循環(huán)依賴
這篇文章主要介紹了淺談Spring 解決循環(huán)依賴必須要三級(jí)緩存嗎,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09java數(shù)據(jù)結(jié)構(gòu)之樹基本概念解析及代碼示例
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)之樹基本概念解析及代碼示例,介紹了樹的定義,基本術(shù)語,主要操作及實(shí)現(xiàn)等相關(guān)內(nèi)容,具有一定參考價(jià)值,需要的朋友可了解下。2017-11-11解決springmvc使用@PathVariable路徑匹配問題
這篇文章主要介紹了解決springmvc使用@PathVariable路徑匹配問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-02-02