4五、JQuery

時間 2019-11-22

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

JQueryjavascript

概念：一個JavaScript框架，簡化JS開發，本質上就是一些js文件，封裝了js的原生代碼css

使用步驟：html

一、下載JQueryjava

二、導入JQueryjquery

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

三、使用app

JQuery對象和js對象區別和轉換框架

一、JQ對象在操做時，更加方便ide

二、JQ對象和JS對象方法不通用函數

三、二者互相轉換動畫

JQ->JS：JQ對象[索引]或者JQ對象.get(索引)

JS->JQ：$(JS對象)

基本語法：

一、事件綁定

二、入口函數

三、樣式控制

選擇器：篩選具備類似特徵的元素

一、基本選擇器

標籤選擇器，$("html標籤名")，得到索引匹配標籤名稱的元素

${"p"}

id選擇器，$("#id的屬性值")，得到與指定id屬性值匹配的元素

${"#test"}

類選擇器，$(".class的屬性值")，得到與指定的class屬性值匹配的元素

${".test"}

並集選擇器：$("選擇器1，選擇器2....")，得到多個選擇器選中的全部元素

${"p,.test"}

二、層級選擇器

後代選擇器：$("A B")，選擇A元素內部的全部B元素

子選擇器：$("A > B")，選擇A元素內部的全部B子元素

三、屬性選擇器

屬性名選擇器，$("A[屬性名]")，包含指定屬性的全部元素

屬性選擇器，$("A[屬性名='值']")，包含指定屬性等於指定值的元素

複合屬性選擇器，$("A[屬性名= '值'][]...")，包含多個屬性條件的元素

四、過濾選擇器

首元素選擇器，：first，得到選擇的元素中的第一個元素

尾元素選擇器，：last，得到選擇的元素中的最後一個元素

非元素選擇器，：not（selector），不包括指定內容的元素

偶數選擇器，：even 偶數，從0開始計數

奇數選擇器，：odd 奇數，從0開始計數

等於索引選擇器，：eq（index），指定索引元素

大於索引選擇器，：gt（index），大於指定索引元素

小於索引選擇器，：lt（index），小於指定索引元素

標題選擇器，：header，得到標題元素（h1-h6），固定寫法

五、表單過濾選擇器

可用元素選擇器，：enabled，得到可用元素

不可用元素選擇器，：disabled，得到不可用元素

選中選擇器，：checked，得到單選/複選框選中的元素

選中選擇器，：selected，得到下拉框選中的元素

DOM操做

一、內容操做

html（）：獲取/設置元素的標籤體內的所有內容

text（）：獲取/設置元素的標籤體純文本內容

val（）：獲取/設置元素value屬性值

二、屬性操做

通用屬性操做

attr（）：獲取/設置元素的屬性

removeAttr（）：刪除屬性

prop（）：獲取/設置元素的屬性

removeProp（）：刪除屬性

注意：若是操做的是元素的固有屬性，則建議使用prop

若是操做的是元素的自定義屬性，則建議使用attr

對class屬性的操做

addClass（）：添加class屬性值

removeClass（）：刪除class屬性值

toggleClass（）：切換class屬性、

對CSS屬性操做

css（）

CRUD操做

append（）：父元素將子元素追加到末尾

對象1.apeend（對象2），將對象2添加到對象1內部，而且在末尾

prepend（）：父元素將子元素追加到開頭

對象1.prepend（對象2），將對象2添加到對象1內部，而且在開頭

appendTo（）：

對象1.appendTo（對象2），將對象1添加到對象2內部，而且在末尾

prependTo（）：

對象1.prependTo（對象2），將對象1添加到對象2內部，而且在開頭

after（）：添加元素到元素後邊

對象1.after（對象2）：將對象2添加到對象1後邊，對象1和對象2是兄弟關係

before（）：

對象1.before（對象2）：將對象2添加到對象1前邊，對象1和對象2是兄弟關係

insertAfter（）：

對象1.insertAfter（對象2）：將對象1添加到對象2後邊，對象1和對象2是兄弟關係

insertBefore（）：

對象1.insertBefore（對象2）：將對象1添加到對象2前邊，對象1和對象2是兄弟關係

remove（）：移除元素

對象.remove（）：將對象刪除掉

empty（）：清空元素的全部後代元素

對象.empty（）：將對象的後代元素所有清空，可是保留當前對象以及器屬性節點

動畫效果：

一、默認顯示和隱藏方式：

show（[speed,[easing],[fn]]）

參數：speed：動畫的速度，三個預約義值（「slow」，「normal」，「fast」）或表示動畫時長的毫秒數值

easing：用來指定切換效果，默認是「swing」，可用參數「linear」

swing：動畫執行時效果是先慢中間快，最後又慢

linear：動畫執行時速度是均勻的

fn：在動畫完成時執行函數，每一個元素執行一次

hide（[speed,[easing],[fn]]）

toggle（[speed,[easing],[fn]]）

二、滑動顯示和隱藏方式

slideDown（[speed,[easing],[fn]]）

slideUp（[speed,[easing],[fn]]）

slideToggle（[speed,[easing],[fn]]）

三、淡入淡出顯示和隱藏方式

fadeIn（[speed,[easing],[fn]]）

fadeOut（[speed,[easing],[fn]]）

fadeToggle（[speed,[easing],[fn]]）

遍歷：

一、JS的遍歷方式

for（初始化值；循環結束條件；步長）

二、jq的遍歷方式

一、jq對象.each（callback）

二、$.each（object，[callback]）

三、for...of

事件綁定：

一、jq標準的綁定方式，jq對象.事件方法（回調函數）

二、on綁定事件/off接觸綁定，jq對象.on（「事件名稱」，回調函數），jq對象.off（「事件名稱」）

三、事件切換：jq對象.toggle(fn1,fn2)

插件：加強JQ的功能

實現方式：一、$.fn.extend(object),加強經過jq獲取的對象的功能

二、$.extend(object)，加強jq對象自身的功能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。