码迷,mamicode.com
首页 > Web开发 > 详细

JQuery基础 2015-8-19(第97天)

时间:2015-08-19 23:23:14      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

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

});

 

相关方法:

  • height() - 设置或返回元素的高度
  • innerWidth() - 返回元素的宽度(包含 padding)
  • innerHeight() - 返回元素的高度(包含 padding)
  • outerWidth() - 返回元素的宽度(包含 padding 和 border)
  • outerHeight() - 返回元素的高度(包含 padding 和 border)

 

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()

JQuery基础 2015-8-19(第97天)

标签:

原文地址:http://www.cnblogs.com/zhangxg/p/4743638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!