2019-06-14

jquery屬性操作

1、html() 取出或設(shè)置html內(nèi)容

// 取出html內(nèi)容

var $htm = $('#div1').html();

// 設(shè)置html內(nèi)容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或設(shè)置text內(nèi)容

// 取出文本內(nèi)容

var $htm = $('#div1').text();

// 設(shè)置文本內(nèi)容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或設(shè)置某個(gè)屬性的值

// 取出圖片的地址

var $src = $('#img1').attr('src');

// 設(shè)置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

jquery特殊效果

fadeIn() 淡入

? ? $btn.click(function(){

? ? ? ? $('#div1').fadeIn(1000,'swing',function(){

? ? ? ? ? ? alert('done!');

? ? ? ? });

? ? });

fadeOut() 淡出

fadeToggle() 切換淡入淡出

hide() 隱藏元素

show() 顯示元素

toggle() 依次展示或隱藏某個(gè)元素

slideDown() 向下展開

slideUp() 向上卷起

slideToggle() 依次展開或卷起某個(gè)元素

jquery對象的方法會在執(zhí)行完后返回這個(gè)jquery對象,所有jquery對象的方法可以連起來寫:

$('#div1') // id為div1的元素

.children('ul') //該元素下面的ul子元素

.slideDown('fast') //高度從零變到實(shí)際高度來顯示ul元素

.parent()? //跳到ul的父元素,也就是id為div1的元素

.siblings()? //跳到div1元素平級的所有兄弟元素

.children('ul') //這些兄弟元素中的ul子元素

.slideUp('fast');? //高度實(shí)際高度變換到零來隱藏ul元素

jquery動畫

通過animate方法可以設(shè)置元素某屬性值上的動畫,可以設(shè)置一個(gè)或多個(gè)屬性值,動畫執(zhí)行完成后會執(zhí)行一個(gè)函數(shù)。

$('#div1').animate({

? ? width:300,

? ? height:300

},1000,swing,function(){

? ? alert('done!');

});

參數(shù)可以寫成數(shù)字表達(dá)式:

$('#div1').animate({

? ? width:'+=100',

? ? height:300

},1000,swing,function(){

? ? alert('done!');

});

參數(shù):

1、什么屬性做動畫,屬性設(shè)置{param1: value1, param2: value2}

2、動畫執(zhí)行的時(shí)間,單位毫秒

3、動畫曲線:

swing(默認(rèn)值)開始和結(jié)束慢,中間快

linear勻速

可省略不寫

4、回調(diào)函數(shù),動畫完成之后要做的事情,可無限嵌套

jQuery循環(huán)

<script type="text/javascript">

$(function(){

// //給全部的li設(shè)置內(nèi)容和樣式

// $('.list li').html('111');

// $('.list li').css({background:'gold'});

//第一個(gè)參數(shù)index是索引值

$('.list li').each(function(index) {

// alert(index);//彈出索引值

//$(this)是每一個(gè)li

$(this).html(index);

});

})

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.屬性操作 $(function(){ /* alert($('.box').html());//這是一個(gè)div...
    嚜羽閱讀 367評論 0 0
  • 單體創(chuàng)建對象 單體創(chuàng)建對象 var Tom{ name :‘Tom’, age :‘18’, showname。f...
    陳_066c閱讀 205評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,826評論 1 45
  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 724評論 0 3
  • jquery屬性操作 attr()屬性操作 prop 操作的是只是true或false的屬性 text 獲取純文本...
    陳_066c閱讀 167評論 0 0

友情鏈接更多精彩內(nèi)容