jQuery 学习笔记(二)

addClass() 函数   参数放入函数的方式:

示例:

<div class="wrap">
    <div class="btn-wrap">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>
    <script src="jquery.js"></script>
    <script>
    $('button').addClass(function(index){
        if(index%3==0){
            return 'aaa';
        }
    })
    //上面示例代表给 符合项加上 class="aaa"  相当于对符合项:  $('button').addClass('aaa')
    </script>

结果: 索引 为 0 和3 项 加了 aaa

 

removeClass() 函数 

也可以把函数当参数进行筛选 ,用法和 addClass() 相同 ,这里就不在示范了.下面学习一个比较有趣的介于

removeClass() 和 addClass() 之间的函数  toggleClass();

 toggleClass() 函数

<div class="wrap">
    <div class="btn-wrap">
        <button class="aaa">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>
    <script src="jquery.js"></script>
    <script>
   $('button').toggleClass('aaa') 
    </script>

结果: 有aaa的标签去掉aaa ,没有aaa的标签加上aaa

toggleClass( ) 函数应用场景: 开关 :

insertBefore()  函数  在谁的前面插入内容

  $("<span>你好！</span>").insertBefore("p"); //在所有的p标签前插入内容

需要注意的是  如果  选择器中是 dom中  固有元素 会是 剪切效果

如下:

<div class="wrap">
    <div class="btn-wrap">
        <button class="aaa">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>
    <script src="jquery.js"></script>
    <script>
        $('button:eq(3)').insertBefore('button:eq(0)');
    </script>

结果:索引为三的 被剪切到了 第一个

before() 函数  在目标前面插入内容

< div class= "wrap" >

< div class= "btn-wrap" >

< button class= "aaa" >1 </ button >

< button >2 </ button >

< button >3 </ button >

< button >4 </ button >

</ div >

</ div >

< script src= "jquery.js" > < / script >

< script >

$( 'button:eq(0)'). before( $( 'button:eq(3)'));

< / script >

结果同 insertBefore()

但是需要注意  两个函数返回值是不同的

    <div class="btn-wrap">
        <button class="aaa">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>
    <script src="jquery.js"></script>
    <script>
     var res =   $('button:eq(3)').insertBefore($('button:eq(0)'));
      $(res).css('color','red');

      var res = $('button:eq(0)').before($('button:eq(3)'));
      $(res).css('color','red')
    </script>

insertBefore() 的结果:返回插入的内容,或者被剪切的对象     $( 0).insertBefore(1)  返回 0位置的对象

before ( ) 的结果: $( 0).before(1)  返回 0位置的对象

学完了 insertBefore 和before 再对比学习 appendTo 与 append 

appendTo() 函数   与 append( ) 函数

示例:

< div class= "wrap" >

< div class= "btn-wrap" >

< span >213 </ span >

< div >789 </ div >

</ div >

</ div >

< script src= "jquery.js" > < / script >

< script >

var res = $( '.btn-wrap div'). appendTo( 'span');

$( res). css( 'color', 'red')

var res = $( 'span'). append( $( '.btn-wrap div'));

$( res). css( 'color', 'red')

< / script >

appendTo() 的结果 :  $(0).appendTo(1)  返回的是 1位置的对象   解释就是把自己插到某个地方去

append() 的结果 :  $(0).append(1)   返回的是 1位置的对象  解释 : 给自己增加内容

对比append 与 appendTo 学习 prependTo( ) 与 prepend () 

 prependTo( ) 与 prepend () 

append  :  系列是插入元素到子元素的最后面

prepend : 系列是插入元素到子元素的最前面

remove() 函数 与  detach() 函数 和 empty() 

 remove() 和 detach()都可以移除dom 元素   empty()是移除绑定事件和数据

区别如下:

    也就是说 res = $(''). remove()  ;   res 中没有包含绑定事件和数据  ,删掉再添加res  事件已经无效

    res = $('').detach() ;   rea 包含了 dom 本生和 绑定事件与数据 ,删掉再  append () 点击事件依旧可执行

示例:

  

 <div class="wrap">
        <div class="item1">123</div>
        <div class="item2">456</div>
    </div>
    <button>恢复</button>
  <script>
    $('.item1').click(function(){
      item1 =  $(this).remove();
    })

    $('.item2').click(function(){
        item2 = $(this).detach();
    })

    $('button').click(function(){
        $('.wrap').append(item1).append(item2);
    })
  
  </script>

展示效果:

点击 删除  后再恢复  -->效果如上  ==> 再删除 ===>发现使用remove() 方法的 item 不再触发点击事件

事件绑定:

jquery :普通方式   $('').click(function(){  .....省略 }) 

类似原生js中 target.click= function(e){   .....省略  }

jquery 中 on 函数  $('').on('click', function({}))   

类似  原生的

addEventListener()用于给元素添加事件  target .addEventListener('click',function({}))

removeEventListener()用于撤销元素事件。

on函数  与  off() 函数

// 两个参数的方式

示例 :  $('').on('click'   ,  function(e){     });    

//三个参数的实例: 点击触发时,可以通过 e.data 获取到传入的值

示例 :  $('')on('click'  ,  {name : '呵呵哒'}  , function(e){  console.log(e.data)    }) ;   

//四个参数:第二个参数代表源对象类型  只有item1 中的 a标签被点击才触发

  示例 :  $('.item1').on('click'  , 'a', {name : '呵呵哒'}  , function(e){  console.log(e.data);   }) ;  

四个参数的应用示例:  将事件监听放在较高的父级, 之后再创建的子类也可以触发监听

示例代码:可以看见 绑定事件是在 .wrap 上的  ,所以不管什么时候添加的的 .item 都是它的子级,都能触发

< div class= "wrap" >

< div class= "item1 item" >123 </ div >

< div class= "item2 item" >456 </ div >

</ div >

< button >恢复 </ button >

< script >

$( '.wrap'). on( 'click' , '.item', { name : '呵呵哒'} , function( e){ console. log( $( this). html()) }) ;

$( '<div class="item3 item">789</div>'). appendTo( $( '.wrap'));

< / script >

结果:注意  四个参数的时候,触发事件得到的this 不再是.wrap 而是事件源对象的 .item

如果直接将绑定事件放到.item上  $('.item').on('click',function(){   } );

后面动态添加的  .item 肯定没有被绑定到

off () 函数:

示例 :

$('.item').off('click');

需要注意的是如果需要解绑 上面四个参数的情景:

解绑 .item  : $('.item').off('click');  发现绑定事件依旧还在,因为 .item 上本来就没有绑定事件

示例:

< div class= "wrap" >

< div class= "item1 item" >123 </ div >

< div class= "item2 item" >456 </ div >

</ div >

< button >恢复 </ button >

< script >

$( '.wrap'). on( 'click' , '.item1', { name : '呵呵哒'} , function( e){ console. log( $( this). html()) }) ;

$( '.wrap'). on( 'click' , '.item2', { name : '呵呵哒'} , function( e){ console. log( $( this). html()) }) ;

$( '.wrap'). off( 'click', '.item1')

< / script >

现在只想解绑 item1 的绑定 :  如图  off() 函数也可以指定事件源对象

结果: 这样就只是解除了  .wrap下 对 item1的监听

off () 函数 给的参数越多解除绑定就越精确

拓展情况:

如下代码:

< div class= "wrap" >

< div class= "item1 item" >123 </ div >

</ div >

< button >恢复 </ button >

< script >

function test1(){

console. log( $( this). html()) ;

}

function test2(){

console. log( '呵呵哒') ;

}

$( '.wrap'). on( 'click' , '.item1', { name : '呵呵哒'} , test1 ) ;

$( '.wrap'). on( 'click' , '.item1', { name : '呵呵哒'} , test2 ) ;

$( '.wrap'). on( 'click' , '.item2', { name : '呵呵哒'} , test1 ) ;

//$('.wrap').off('click','.item1',test1)

< / script >

显示:点击一下 item1 会同时打印 123 与  呵呵哒,这种情景下只想解绑其中一个

只需要将代码中注释掉的那段取消注释:  off()函数 三个参数  第三个参数是 绑定的函数

$('.wrap').off('click','.item1',test1)

这样就只是解绑了 test1  

one() 函数  绑定事件后只触发一次后失效

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

scrollTop( ) 函数 与 scrollLeft( )  函数

    返回 进度条与原点的距离:

代码:

 $(window).scroll(function(){
        console.log('坐标:('+$(window).scrollTop()+','+$(window).scrollLeft()+')');
    })

效果:

应用场景:

广告定位: position :  fiexed  :  left : 100px  ;  也就是无论滚动条怎么移动 广告位置不变

但是在IE 老版本不适用 ,那该怎么办:

top= 100+  $(window).scrollTop()+'px' ; 就OK了  ,

示例: 这里了  .wrap 的 position: absolute   

$( window). scroll( function(){

console. log( '坐标:('+ $( window). scrollTop()+ ','+ $( window). scrollLeft()+ ')');

$( '.wrap'). css( 'top', $( window). scrollTop()+ 100+ 'px');

})

width() 函数    content区域的宽度

innerWidth( )函数   content 加 paddind 的宽度

outerWidth( )函数  content 加 paddind 加 border 的宽度

outerWidth(ture)     content 加 paddind 加 border 加 margin 的宽度

注意   以上 width 方法与 height 方法 同理 :

代码:

    <style> 
    *{
        margin : 0;
    }
    .wrap{
        height : 100px;
        width : 100px;
        padding : 50px;
        margin : 100px;
        border : 50px solid black;
        background: red;
    }
    </style>
    <title>Demo</title>
</head>
<body>
    <div class="wrap"> </div>
</body>

展示:

事件源对象属性:

pageY 与 X  : 文档高度  相当于 clientY  加上 进度条滚动的距离

clientY 与 X : 页面高度 

screenY 与 X : 相对于电脑屏幕的距离

pageX pageY

clientX clientY

creenX creenY

事件源对象  which    会返回 按下的是哪一个键

< input type= "text" >

< script >

$( 'input'). keydown(

function( e){

console. log( e. which);

}

)

< / script >

结果:

onmousedown () 函数 返回 鼠标 按钮 

代码:  contextmenu 和  e. preventDefault( ) 去掉了点击右键出现菜单的默认事件

$( 'input'). on( 'mousedown contextmenu',

function( e){

e. preventDefault();

console. log( e. which);

}

)

效果:

事件源对象取消冒泡 :

e. stoppropagation(); //阻止事件冒泡

例如  <span>123 <p>456</p></span>

如果两个标签上都有点击事件,点击p 因为冒泡会导致 span也被触发

示例:

< p >wqewqewqewqwqe

< span >sapn </ span >

</ p >

< script >

$( 'sapn'). click( function(){

e. stoppropagation(); //阻止事件冒泡

console. log( 'span');

})

$( 'p'). click( function(){

console. log( 'p');

});

< / script >

通常有即需要阻止事件冒泡 也需要阻止默认事件 就需要   return false 

例如对  a标签

$('a').click(function(e){

return false;

})

offset() 函数   offset() 方法设置或返回被选元素相对于文档的偏移坐标。

获取:

$(selector).offset()

设置:

$(selector).offset({top:value,left:value})

函数设置位置:

$('div').offset(function(index,currentoffset))   //解析 这里获取到的div数量不定

上图第一个参数也就是,不管函数逻辑反正得返回 这个格式的对象作为设置的值

形参:index 因为被选中的对象数量不定,index 是索引

currentoffset 是当前索引项现在的 文档坐标