标签:
addClass() 、 removeClass()方法:
$(‘div‘).addClass(‘box1 box2‘); // 注意,这里的样式之间是用空格来分隔的, 其中如果添加了已经存在的css,JQuery会自动判断,不用担心;
$(‘div‘).removeClass(‘box1‘); // 移除样式也是这个道理;
思考:如何用原生JS来实现addClass方法?
width() 方法: 设置或返回被选元素的宽度
$(‘div‘).width();
$(function(){
alert( $(‘div‘).width() ); //width
alert( $(‘div‘).innerWidth() ); //width + padding
alert( $(‘div‘).outerWidth() ); //width + padding + border
alert( $(‘div‘).outerWidth(true) ); //width + padding + border + margin
});
相关方法:
insertBefore(); 找到元素节点,把它移动到元素的前面去,是剪切、不是复制。(insertBefore() 方法在被选元素前插入 HTML 元素)
$(‘span‘).insertBefore( $(‘div‘) );
// 下面这种写法也可以
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p");
});
});
</script>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> //appendTo : appendChild $(function(){ //$(‘span‘).insertBefore( $(‘div‘) ); //$(‘div‘).insertAfter( $(‘span‘) ); 原生JS是没有这个方法的 //$(‘div‘).appendTo( $(‘span‘) ); //$(‘div‘).prependTo( $(‘span‘) ); 原生JS里没有这个方法 //区别 :后续操作变了 //$(‘span‘).insertBefore( $(‘div‘) ).css(‘background‘,‘red‘); 这里是span的背景色变红 $(‘div‘).before( $(‘span‘) ).css(‘background‘,‘red‘); // 这里是div的背景变红 }); </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
on()方法,支持自定义事件,也可以同时写多个事件;
off()是取消该事件;
$(function(){ /*$(‘div‘).click(function(){ alert(123); });*/ /*$(‘div‘).on(‘click‘,function(){ alert(123); });*/ /*$(‘div‘).on(‘click mouseover‘,function(){ alert(123); });*/ /*$(‘div‘).on({ ‘click‘ : function(){ alert(123); }, ‘mouseover‘ : function(){ alert(456); } });*/ $(‘div‘).on(‘click mouseover‘,function(){ alert(123); $(‘div‘).off(‘mouseover‘); }); });
scrollTop();
// $(window).scrollTop()
标签:
原文地址:http://www.cnblogs.com/zhangxg/p/4743638.html