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

编程问答

04-JQuery

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

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

1、JQuery 基礎

JQuery：JavaScript 的一個類庫，對常用的方法和對象進行封裝，方便我們使用。

JQuery 是單獨的 js 文件，通過 script 標簽的 src 屬性導入即可。

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

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

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

頁面加載：（認真看下）

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

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

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

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

等同于JQuery中

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

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

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

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

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

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

派發(fā)事件：

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

jquery 中效果：

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

2、選擇器

基本選擇器：★

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

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

層次選擇器：★

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

基本過濾選擇器：★

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

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

可見過濾：

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

屬性過濾器：★

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

表單過濾：:input 所有的表單子標簽 input select textarea button

表單對象屬性過濾選擇器：

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

3、屬性與CSS的操作

對屬性的操作

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

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

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

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

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

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

對 CSS 操作

操作元素的 style 屬性。

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

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

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

文檔處理

內(nèi)部插入：

a.append(c):將c插入到a的內(nèi)部(標簽體)后面
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：設置或者獲取 values 屬性
html：獲取或者設置標簽體內(nèi)容
text：獲取或設置標簽體內(nèi)容，但只是標簽文本內(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對象.each(function(){});
方式2：$.each(jquery對象,function(){});

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

總結

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

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

jquery