toggle:如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
語法:$(selector).toggle(speed,callback,switch)
淡入淡出: fadeIn fadeOut
下拉顯示: slideUp slideDown
--不推薦使用
動畫:animate
--推薦使用
樣式:
.css('width'); //獲取一個樣式,帶單位 200px
.css('background','yellow'); //設(shè)置一個樣式
.css({'background':'yellow','width':200}); 設(shè)置多個樣式
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
alert($('div').eq(0).css('width'));
});
</script>
屬性:
.attr('屬性名') //獲取一個屬性
.attr('name','value'); //設(shè)置一個屬性
.attr({
name1:'v1',
name2:20
}) //批量設(shè)置屬性
class操作:
addClass
removeClass
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
//$('#div1').addClass('aa');
$('#div1').removeClass('aa');
});
});
</script>
內(nèi)容操作:
非表單元素的內(nèi)容:
.html() 獲取innerHTML
.html(設(shè)置的內(nèi)容) 設(shè)置
表單標簽:
.val() 獲取內(nèi)容
.val(設(shè)置的內(nèi)容) 設(shè)置
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
//alert($('#div1').html());
$('#div1').html('123456789');
});
});
</script>
<body>
<input type="button" id="btn1" value="aaaa">
<div id="div1">123</div>
原生對象 jquery對象
- 原生對象的屬性和方法,不能直接用于 jquery對象
- jquery對象的屬性和方法, 不能 直接用于 原生對象
原生 對象轉(zhuǎn)化為 jquery 對象 $(原生)
jquery對象轉(zhuǎn)化為 原生對象 $( )[0]
索引:
.index();
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
alert($('.on').index());
});
</script>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li class="on"></li>
<li></li>
<li></li>
</ul>
</body>
鏈式操作:分步驟地對jQuery對象實現(xiàn)各種操作.
<script>
$(function(){
$('input').click(function(){
//$('#div1').css('width',200).hide().css('height',300).show();
$('#div1').animate({'width':200}).hide();
});
});
</script>
<body>
<input type="button" value="aaa">
<div id="div1"></div>
</body>
兄弟節(jié)點:siblings
函數(shù)用于選取每個匹配元素的所有同輩元素(不包括自己),并以jQuery對象的形式返回。如果沒有符合條件的元素,則返回空的jQuery對象。