新手學(xué)習(xí)JQuery基本操作和使用案例解析
jQuery是一個快速、簡潔的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. 對class屬性操作
- 1. addClass():添加class屬性值
- 2. removeClass():刪除class屬性值
- 3. toggleClass():切換class屬性
* toggleClass("one"):
* 判斷如果元素對象上存在class="one",則將屬性值one刪除掉。 如果元素對象上不存在class="one",則添加
4. css():改變樣式
二、jQuery動畫的三種顯示方式:
1. 默認(rèn)顯示和隱藏方式
1. show([speed,[easing],[fn]])
參數(shù):
- 1. speed:動畫的速度。三個預(yù)定義的值("slow","normal", "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
- 2. easing:用來指定切換效果,默認(rèn)是"swing",可用參數(shù)"linear"
- * swing:動畫執(zhí)行時效果是 先慢,中間快,最后又慢
- * linear:動畫執(zhí)行時速度是勻速的
- 3. fn:在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑動顯示和隱藏方式
- 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秒后。自動顯示廣告
2. 廣告顯示5秒后,自動消失。
分析:
1. 使用定時器來完成。setTimeout (執(zhí)行一次定時器)
2. 分析發(fā)現(xiàn)JQuery的顯示和隱藏動畫效果其實就是控制display
3. 使用 show/hide方法來完成廣告的顯示
代碼案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>廣告的自動顯示與隱藏</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ù),在頁面加載完成之后,定義定時器,調(diào)用這兩個方法 $(function () { //定義定時器,調(diào)用adShow方法 3秒后執(zhí)行一次 setTimeout(adShow,3000); //定義定時器,調(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery操作動畫完整實例分析
- jQuery操作事件完整實例分析
- jQuery操作元素追加內(nèi)容示例
- JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
- JS 遍歷 json 和 JQuery 遍歷json操作完整示例
- jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作示例
- jQuery實現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
- 使用jQuery操作Cookies的實現(xiàn)代碼
- JQuery對checkbox操作 (循環(huán)獲?。?/a>
- jQuery對表單元素的取值和賦值操作代碼
- jquery.cookie.js 操作cookie實現(xiàn)記住密碼功能的實現(xiàn)代碼
相關(guān)文章
Java8新特性Lambda表達(dá)式的一些復(fù)雜用法總結(jié)
lambda表達(dá)式是JAVA8中提供的一種新的特性,它支持Java也能進(jìn)行簡單的“函數(shù)式編程”。 下面這篇文章主要給大家介紹了關(guān)于Java8新特性Lambda表達(dá)式的一些復(fù)雜用法的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07SpringBoot使用Redis實現(xiàn)分布式緩存
這篇文章主要介紹了SpringBoot redis分布式緩存實現(xiàn)過程解析,文中通過示例代碼解析的非常詳細(xì),感興趣的同學(xué)可以參考閱讀2023-04-04Spring MVC之@RequestMapping注解詳解
本篇文章主要介紹了Spring MVC之@RequestMapping 詳解,RequestMapping是一個用來處理請求地址映射的注解,可用于類或方法上。有興趣的可以了解一下。2017-01-01一篇文章帶你理解Java Spring三級緩存和循環(huán)依賴
這篇文章主要介紹了淺談Spring 解決循環(huán)依賴必須要三級緩存嗎,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09java數(shù)據(jù)結(jié)構(gòu)之樹基本概念解析及代碼示例
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)之樹基本概念解析及代碼示例,介紹了樹的定義,基本術(shù)語,主要操作及實現(xiàn)等相關(guān)內(nèi)容,具有一定參考價值,需要的朋友可了解下。2017-11-11解決springmvc使用@PathVariable路徑匹配問題
這篇文章主要介紹了解決springmvc使用@PathVariable路徑匹配問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02