您好,登錄后才能下訂單哦!
jQuery的常用操作
一、隱藏顯示對(duì)象
id為test的元素的display修改成了“none”,即隱藏了id為test的元素:
$('#test').css('display','none')
或
$('#test').style.display="none"
我們經(jīng)常用到的是切換一個(gè)元素的隱藏與現(xiàn)實(shí),下面給出代碼:
var show = $('#test').css('display');//獲取id為test的元素的display的值
$('#test').css('display',show =='block'?'none':show);//通過(guò)三目運(yùn)算
二、點(diǎn)擊事件 - click() 方法
$("button").click(function(){
});
三、操作元素的樣式
$("#msg").width("300"); //將id為msg的元素的寬度設(shè)為300 $("#msg").height("300"); //將id為msg的元素的高度設(shè)為300 $("#msg").css("background"); //返回元素的背景顏色 $("#msg").css("background","#ccc") //設(shè)定元素背景為灰色 $("#msg").height(300); $("#msg").width("200"); //設(shè)定寬高 $("#msg").css({ color: "red", background: "blue" });//以名值對(duì)的形式設(shè)定樣式 $("#msg").addClass("select"); //為元素增加名稱為select的class $("#msg").removeClass("select"); //刪除元素名稱為select的class $("#msg").toggleClass("select"); //如果存在(不存在)就刪除(添加)名稱為select的class
四、操作元素的VALUE
$("input").val(); //返回表單輸入框的value值 $("input").val("test"); //將表單輸入框的value值設(shè)為test $("input").val(""); //將表單輸入框的value清空
五、集合處理功能
對(duì)于jquery返回的集合內(nèi)容無(wú)需我們自己循環(huán)遍歷并對(duì)每個(gè)對(duì)象分別做處理,jquery已經(jīng)為我們提供的很方便的方法進(jìn)行集合的處理。
包括兩種形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //為索引分別為0,1,2的p元素分別設(shè)定不同的字體顏色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //實(shí)現(xiàn)表格的隔行換色效果 $("p").click(function(){alert($(this).html())})
//為每個(gè)p元素增加了click事件,單擊某個(gè)p元素則彈出其內(nèi)容
六、擴(kuò)展我們需要的功能
擴(kuò)展自己想要的功能,如擴(kuò)展輸入兩個(gè)參數(shù),獲取它們的最大值和最小值
$.extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //為jquery擴(kuò)展了min,max兩個(gè)方法 ,通過(guò)“$.方法名”調(diào)用: alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
七、支持方法的連寫
所謂連寫,即可以對(duì)一個(gè)jquery對(duì)象連續(xù)調(diào)用各種不同的方法。
例如:
$("#test").click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
為元素id為test的添加三個(gè)方法,分別是click()、mouseover()、each()
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。