query api学习系列之2

1.   parseFloat()  //返回数字开头字符串中的数字  '1dasas' '12312';
 

   $("div").click(function() {
     $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 2;
      }
    });
  });

2. is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果至少有一个元素匹配给定的参数，则返回 true
 

  eg:$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
 });
 eg: console.log( $('span').parent().is('span')); //true
   <div>div
    <span>span</span>
  </div>
eg: var isFormParent = $("input[type='checkbox']").parent().is("form");

3.target  语法：event.target

event.target 属性返回哪个 DOM 元素触发了事件

 eg:$("p, button, h1, h2").click(function(event){
     $("div").html("Triggered by a " + event.target.nodeName + " element.");
     });

// 如果点击div里面的span,由于事件冒泡的机制，也会触发加在div上的事件，如果采用event事件下的target.
在点击span的时候，是由span触发，点击div的时候是div触发。
$(function(){

          $('div').on('click',{name:'anikin',age:'23'},function(event){
                alert( event.data.name +'||'+ event.data.age);  
                
                alert( event.target.nodeName);    //div
                alert( event.type);                      // click
          })
       })    

//	trigger()  主动触发； //需要对自定义事件，主键开发等有了解。
//  	特别适合自定义事件,页面加载完成就会主动触发的事件；
 $(function(){

          $('div').click(function(){ alert( $(this).html() )})
          $('div').trigger('click');
       }) 

  $('input').on('click',{name:'anikin'},function(e,a,b){ alert(e.data.name+'=='+a+'=='+b) });
  $('input').trigger('click',[1,2]);

4. $(":checked") 选取所有选中的input

5：事件委托
   事件委托：省略了循环操作，后续添加的内容就有了事件操作，性能较高
   原理描述：公司前台带收全公司员工快递，而不是全部的员工站在公司的门口等着那快递。
        利用的是冒泡的原理把事件加到父级的身上，触发执行效果,最新版的可以使用on代替delegate来执行

eg:delegate(selector,[type],[data],fn)
   eg:$("div").delegate("button","click",function(){
    $("p").slideToggle();
    });
 
   eg：
  $( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 300)
});

5，toggleClass(class,switch) 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果
可选。布尔值。规定是否添加或移除 class。
 

 eg:$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

  eg: $('div').click(function(){toggleClass('a b');})

      var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

6.多个class获得第二个class

$(".class1").click(function(){
		var var1=$(this).attr("class");
		var var2=var1.split(' ');
		alert(var2[1]);
		})