jquer的動畫 節點操作 元素大小操作

2022-06-21 18:18:07 字數 3095 閱讀 9099

元素.show(); // 讓元素從隱藏狀態變為顯示狀態(從display:none;變為 display:block;)

可選引數1:時間,毫秒數 == 讓元素在規定的時間內顯示(操作的屬性有很多)

可選引數2:速度方式,勻速或加速或減速 

速度方式:linear swing

可選引數3:動畫結束後執行的**函式

元素.hide(); // 讓元素從顯示狀態切換到隱藏狀態

可選引數和show一樣

元素.slideup() // 讓元素向上拉動隱藏 //可選引數和show一樣

元素.toggle(); // 讓元素在隱藏和顯示狀態切換

可選引數和show一樣

元素.slidetoggle() // 讓元素切換上下拉動顯示隱藏 //可選引數和show一樣

slidedown()

$('div').slidedown(2000,'swing',function

())

元素.fadein() // 讓元素從透明度0變為1的顯示

元素.fadeout() // 讓元素從透明度1變為0的隱藏

元素.slidetoggle() // 讓元素切換透明度顯示隱藏

引數和show一樣

元素.fadeto(毫秒數,透明度,速度方式,結束的**函式) // 讓元素在指定的時間內切換到指定的透明度

$('div').fadeto(2000,0.6,'linear',function

())

開啟動畫:

元素.animate([,毫秒數][,速度方式][,執行結束的**函式]);

$('div').animate(,2000,'linear',function

(),3000)

})

$('div').animate(,3000).animate(,1000).animate(,3000)

停止動畫:

元素.stop(); // 將動畫停止在當前狀態

元素.finish(); // 將動畫停止在結束狀態 - 

將動畫停止在最後乙個動畫的結束位置

stop有兩個引數,值都是布林值:

引數1表示是否執行後續的動畫,true表示不執行,false表示執行,預設是false

引數2表示是否停止在當前位置,true表示停止的當前動畫的結束位置,false表示停止在當前位置,預設為false

$("標籤和內容") // 建立乙個標籤並給裡面放內容

var box = $("div盒子");

console.log(box);

給父元素追加子元素:

父元素.prepend(子元素); //將子節點放到父節點的最前面:prepend

$i = $('傾斜文字')

$b.after($i)

$p = $('段落

')$b.before($p)

$s = $('刪除線')

replacewith

$('p').replacewith($s)

replaceall

$s.replaceall($('p'))

元素.empty();//

刪除元素內部所有標籤和內容,讓自己變成乙個空標籤

元素.remove() //

刪除自己和自己內部所有內容

元素.clone([是否複製自身的事件][,是否複製子元素的事件])

轉殖節點:clone - 肯定會將裡面的內容也轉殖出來

引數1:表示是否複製父標籤的事件,預設是false

引數2:表示是否複製子節點的事件,預設跟隨第乙個引數

$newdiv = $('div').clone(false,true) //

如果不複製父節點的事件,子節點的事件也不能被複製 :注意

建立$(完整的標籤字串)

插入prepend - 將子新增到父的最前面

after - 給元素後面新增乙個兄弟節點

before - 給元素前面新增乙個兄弟節點

替換replacewith - 使用新節點替換舊節點

replaceall - 新節點替換掉所有指定的舊節點

刪除empty - 清空自己內部

remove - 將自己刪除

複製clone

元素.height(); // 獲取元素內容區域高度

元素.height(高度); // 設定元素內容區域高度

元素.width(); // 獲取元素內容區域寬度

元素.width(寬度); // 設定元素內容區域寬度

元素.innerheight(); // 獲取元素內部的高度,包含padding,但不包含border

元素.innerwidth(); // 獲取元素內部的寬度,包含padding,但不包含border

元素.outheight(); // 獲取元素佔據的高度,包含padding和border,不包含margin

元素.outheight(true); // 獲取元素佔據的高度,包含padding和border,包含margin

元素.outwidth(); // 獲取元素佔據的寬度,包含padding和border,不包含margin

元素.outwidth(true); // 獲取元素佔據的寬度,包含padding和border,包含margin

元素.offset(); // 獲取到元素在頁面中的位置,包含left值和top值,返回乙個物件

元素.offset(); // 將元素設定到指定的位置,使用relative 

元素.position(); // 獲取元素相對於定位的父元素的偏移值,不管設定的是什麼,獲取到的永遠是left和top

$(window).scrolltop(); // 獲取元素滾動過的高度

$(window).scrollleft(); // 獲取元素滾動過的寬度

$(window).scrolltop(值); // 設定元素滾動過的高度

$(window).scrollleft(值); // 設定元素滾動過的寬度

jQuery對元素 節點的操作

一 文字內容的操作 方法 text text val 例子 div div 獲取 div元素 console.log div.text 獲取文字內容 div.text aaaaa 設定了文字的內容 二 html內容的操作 html 用於獲取第乙個匹配元素的 html 內容 html val 用於設定...

關於元素節點的各種操作(attributes)

在日常使用的過程中,getattribute setattribute removeattribute都是會用到的來操作元素的特性的一些方法,例如getattribute可以用來獲取元素的特性,那麼這跟直接獲取元素特性有什麼區別呢?這裡先有這麼一串 div 這時候,如果想要獲取該div元素上面的各種...

DOM常用操作 元素 節點相關

dom物件的深入理解這篇文章中有提到一些dom操作,我們會在這篇文章中簡單回顧一下。幾個需求 dom元素的增刪改 注意 如果獲取到一組物件,要獲得元素物件需要加相應索引 只有事先寫好了行內樣式才可以獲取和修改,其他設定樣式的方法不可。而且設定之後也只是設定行內樣式 需要提前寫好某個樣式類的css c...