jquery樣式操作
-
jquery用法思想二 (同一個(gè)函數(shù)完成取值和賦值)
- 操作行間樣式
// 獲取div的樣式 $("div").css("width"); $("div").css("color"); //設(shè)置div的樣式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"});
特別注意 : 選擇器獲取的多個(gè)元素磷斧，獲取信息獲取的是第一個(gè)，比如：$("div").css("width")捷犹，獲取的是第一個(gè)div的width弛饭。
- 操作行間樣式
$("#div1").addClass("divClass2") //為id為div1的對象追加樣式divClass2 $("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式 $("#div1").removeClass("divClass divClass2") //移除多個(gè)樣式 $("#div1").toggleClass("anotherClass") //重復(fù)切換anotherClass樣式 - 操作行間樣式
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" });
綁定click事件
- 給元素綁定click事件，可以用如下方法：
$('#btn1').click(function(){ // 內(nèi)部的this指的是原生對象 // 使用jquery對象用 $(this) })
jquery特殊效果
- fadeIn() : 淡入
- fadeOut() : 淡出
- fadeToggle() : 切換淡入淡出
- hide() : 隱藏元素
- show() : 顯示元素
- toggle() : 依次展示或隱藏某個(gè)元素
- slideDown() : 向下展開
- slideUp() : 向上卷起
- slideToggle() : 依次展開或卷起某個(gè)元素
$btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });
