toggle:如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
语法:$(selector).toggle(speed,callback,switch)
淡入淡出: fadeIn fadeOut
下拉显示: slideUp slideDown
--不推荐使用
动画:animate
--推荐使用
样式:
.css('width'); //获取一个样式,带单位 200px
.css('background','yellow'); //设置一个样式
.css({'background':'yellow','width':200}); 设置多个样式
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
alert($('div').eq(0).css('width'));
});
</script>
属性:
.attr('属性名') //获取一个属性
.attr('name','value'); //设置一个属性
.attr({
name1:'v1',
name2:20
}) //批量设置属性
class操作:
addClass
removeClass
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
//$('#div1').addClass('aa');
$('#div1').removeClass('aa');
});
});
</script>
内容操作:
非表单元素的内容:
.html() 获取innerHTML
.html(设置的内容) 设置
表单标签:
.val() 获取内容
.val(设置的内容) 设置
<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对象的属性和方法, 不能 直接用于 原生对象
原生 对象转化为 jquery 对象 $(原生)
jquery对象转化为 原生对象 $( )[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对象实现各种操作.
<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>
兄弟节点:siblings
函数用于选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回。如果没有符合条件的元素,则返回空的jQuery对象。
网友评论