當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

04-JQuery

發(fā)布時(shí)間：2023/12/20 编程问答 35 豆豆

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

1、JQuery 基礎(chǔ)

JQuery：JavaScript 的一個(gè)類庫(kù)，對(duì)常用的方法和對(duì)象進(jìn)行封裝，方便我們使用。

JQuery 是單獨(dú)的 js 文件，通過 script 標(biāo)簽的 src 屬性導(dǎo)入即可。

獲取一個(gè) jquery 對(duì)象，格式：$("選擇器") 或者 jQuery("選擇器")

dom 對(duì)象和 jquery 對(duì)象之間的轉(zhuǎn)換：

dom 對(duì)象 ===> jquery 對(duì)象：$(dom對(duì)象)
jquery 對(duì)象 ===> dom對(duì)象：① jquery對(duì)象[index]、② jquery對(duì)象.get(index)

頁(yè)面加載：（認(rèn)真看下）

JS 中：window.onload=function(){} 在一個(gè)頁(yè)面中只能使用一次
JQuery 在一個(gè)頁(yè)面中可以使用多次：方式① $(function(){...})、方式② $(document).ready(function(){});

PS：$(document).ready() 和 window.onload 等幾個(gè)的區(qū)別？

1、JS 中，常見：window.onload 如：

window.onload = function(){ alert(“text1”); };

等同于JQuery中

$(window).load(function(){alert("text1"); });

他們都是用于當(dāng)頁(yè)面的所有元素，包括外部引用文件，圖片等都加載完畢時(shí)運(yùn)行函數(shù)內(nèi)的 alert 函數(shù)。load 方法只能執(zhí)行一次，如果在 js 文件里寫了多個(gè)，只能執(zhí)行最后一個(gè)。

2、另外：由于在 $(document).ready() 方法內(nèi)注冊(cè)的事件，只要 DOM 就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完，例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為 DOM 樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。

要解決這個(gè)問題，可以使用 JQuery 中另一個(gè)關(guān)于頁(yè)面加載的方法 load() 方法。load() 方法會(huì)在元素的 onload 事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。如：$(window).load(function(){ }) 等價(jià)于 window.onload = function(){ }…

3、在 JQuery 中，可以寫 $(document).ready(function(){ }) 等同于（簡(jiǎn)化寫法為）：$(function(){ }) 他們都是用于當(dāng)頁(yè)面的標(biāo)準(zhǔn) DOM 元素被解析成 DOM 樹后就執(zhí)行內(nèi)代碼。這個(gè)函數(shù)是可以在 js 文件里多次編寫的，對(duì)于多人共同編寫的js 就有很大的優(yōu)勢(shì)，因?yàn)樗行袨楹瘮?shù)都會(huì)執(zhí)行到。而 $(document).ready() 函數(shù)在 HMTL 結(jié)構(gòu)加載完后就可以執(zhí)行，不需要等大型文件加載或者不存在的連接等耗時(shí)工作完成才執(zhí)行，效率高。

詳細(xì)參考：$(document).ready() 和 window.onload 的區(qū)別

派發(fā)事件：

$("選擇器").click(function(){...}); 相當(dāng)于原生 JS 中 dom對(duì)象.onclick=function(){....}
掌握：focus、blur、submit、change、click

jquery 中效果：

隱藏或展示：show(毫秒數(shù))、hide(毫秒數(shù))
滑入或滑出：slideDown(毫秒數(shù)):向下滑入、slideUp(毫秒數(shù)):向上滑出
淡入或淡出：fadeIn(int):淡入、fadeOut(int):淡出

2、選擇器

基本選擇器：★

$("#id值")
$(".class值")
$("標(biāo)簽名")

了解：$("*")
理解：獲取多個(gè)選擇器用逗號(hào)隔開 $("#id值,.class值")

層次選擇器：★

a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一個(gè)兄弟(大弟弟)
a~b:a的所有弟弟

基本過濾選擇器：★

:frist 第一個(gè)
:last 最后一個(gè)
:odd 索引奇數(shù)
:even 索引偶數(shù)
:eq(index) 指定索引
:gt(index) >
:lt(index) <

內(nèi)容過濾：:has("選擇器") 包含指定選擇器的元素

可見過濾：

:hidden 在頁(yè)面不展示元素一般指 input type="hidden" 和樣式中 display:none
:visible

屬性過濾器：★

[屬性名]
[屬性名=”值”]

表單過濾：:input 所有的表單子標(biāo)簽 input select textarea button

表單對(duì)象屬性過濾選擇器：

:enabled 可用的
:disabled 不可用
:checked 選中的(針對(duì)于單選框和復(fù)選框的)
★:selected 選中的(針對(duì)于下拉選)

3、屬性與CSS的操作

對(duì)屬性的操作

attr()：設(shè)置或獲取元素的屬性（jquery1.6版本之前）

方式1：獲取 attr("屬性名稱")
方式2：設(shè)置一個(gè)屬性 attr("屬性名稱","值");
方式3：設(shè)置多個(gè)屬性
attr({"屬性1":"值1","屬性2":"值2" })

prop()和 attr 用法一致（jquery1.6版本之后）

移除屬性：removeAttr("屬性名稱")

addClass("指定的樣式值"); 相當(dāng)于 attr("class","指定的樣式值");

removeClass("指定的樣式值"); 移除指定的樣式

對(duì) CSS 操作

操作元素的 style 屬性。

css()：獲取或設(shè)置 css 樣式

方式1：獲取 css("屬性名")
方式2：設(shè)置一個(gè)屬性 css("屬性名","值")
方式3：設(shè)置多個(gè)
css({"屬性1":"值1","屬性2":"值2" });

獲取元素的尺寸：width()、height()

文檔處理

內(nèi)部插入：

a.append(c):將c插入到a的內(nèi)部(標(biāo)簽體)后面
a.prepend(c):將c插入到a的內(nèi)部的前面
appendTo
prependTo

外部插入：

a.after(c):將c放到a的后面
a.before(c):將c放到a的前面
a.insertAfter(c)
a.insertBefore(c)

刪除：

empty() 清空元素
remove() 刪除元素

其他：val html text

val：設(shè)置或者獲取 values 屬性
html：獲取或者設(shè)置標(biāo)簽體內(nèi)容
text：獲取或設(shè)置標(biāo)簽體內(nèi)容，但只是標(biāo)簽文本內(nèi)容( 不帶樣式，有區(qū)別于 html )

例如：
<div id="d1"><a href="http://www.baidu.com/">百度</a></div>

alert($("#d1").text()); 彈出的內(nèi)容為百度
alert*($("#d1").text()); 彈出的內(nèi)容為 <a href="http://www.baidu.com/">百度</a>

遍歷數(shù)組：

方式1：jquery對(duì)象.each(function(){});
方式2：$.each(jquery對(duì)象,function(){});

在 jquery 中創(chuàng)建元素：$("<標(biāo)簽名>").prop(屬性).html(內(nèi)容)

總結(jié)

以上是生活随笔為你收集整理的04-JQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

jquery