jquery基础之笔记（全）

var x = 42; 
console.log( x ); 
var message = (function( x ){
  return function() {
    console.log( "x is " + x );
  }
})( x ); 
message();
x = 12; 
console.log( x ); 
message();
----------------------p47 自执行匿名函数 （）
//对象  p42
$.extend(obj1,obj2,obj3)//合并
$.extend({},obj)//复制
$.extend(true,{},obj)//深度复制
//数组
$.makeArray(obj);//对象转换数组
$.inArray();//指定数组是否存在某个值;不存在返回-1
$.unique();//从DOM元素的素组中移除重复元素
obj1.concat(obj2)//obj2数组连接到obj1数组
var numArray = [1,2,3,4];
          
$.each( numArray, function( index, value ){
            
  value = value * 2;
           
   console.log( "index is:"+index+" new value is:" + value );
 
         }); 
//遍历each与map类似
$.each(数组，回调函数);//回调函数第一个参数为索引，第二位元素值
$.map(数组，回调函数);//回调函数第一个参数为元素值，第二位索引

//$.queue() 队列先进先出,$.queue(function(){$(this).push(obj);

$(this).pop(obj);
$(this).clearQueue();//清除所有函数
$(this).dequeue();//移除一个函数并执行
}) 
//$.contains(容器节点，目标节点)//容器节点是否是目标节点的子节点
//$.now()；当前时间==(new Date).getTime()
//if($.support.ajax){}//检查浏览器是否支持ajax请求,.support()
//eval()执行任意js代码,eval()执行的局部上下文
//$.globalEval()执行全局上下文
//链式操作  p72

//属性选择器  p85
$("[attributeName='string2match']");
$("[attributeName^='str']");//匹配str开头所有元素
$("[attributeName$='str']");//匹配str结尾所有元素
$("[attributeName*='str']");//包含str所有元素
$("[attributeName~='str']");//包含str所有元素(包含空格隔开的，如：xxx 

str)
//复式属性选择器
 var n = $("form[name$='Office1']form[name^='admin']").length;

//位置选择器
$("li:even") //返回偶数成员值,0也是偶数
li:odd   //奇数
li:first //第一个元素 
li:last  //最后一个
li:eq(3) //返回第四个
li:gt(2)//返回匹配集合索引大于2的所有元素
li:lt(3)//小于3

//过滤选择器
:animated //选择当前正在执行动画所有元素
:header //选择所有标题元素 如：h1,h2,h3
:not //选择与选择器不匹配元素


//过滤表单元素
      $(function(){
        var n1 = $("input").length;//xuaninput的所有元素
        var n2 = $(":input").length;//包含dom

(input,textarea,select,button)所有元素 
        var n3 = $("form > *").length;//表单内所有元素
        var n4 = $(":text").length;//属性为text所有
        var n5 = $("input[type='text']").length;//属性为text所有
        console.log(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);
      });
 
    </script>
    <form name="" method="post">
      <input type="text" />
      <input type="text" />
      <input type="text" />   
	  <button>
    </form>
	 <button>
 
//可见性过滤器
jquery根据元素offsetWidth\offsetHeight属性判断一个元素是否可见
如果这个2个属性都为0，jquery认为该元素是隐藏，
元素样式为display:block,display:none jquery检测这些
  $(function(){
        var numInv = $(":text:hidden").length; //所有隐藏
        var numVis = $(":text:visible").length;//所有可见
        console.log(numInv);//1
        console.log(numVis);//1
      });
 <form name="" method="post">
      <input type="text" name="text1" style="display:none;"/>
      <input type="text" name="text2" style="offsetWidth:0; 

offsetHeight:0;"/>
      <input type="text" name="text3" style="display:block;/>
    </form>


//内容过滤器
:contains()
  $(function(){
        var jennies = $("p:contains('jenny')").length;
        console.log(jennies); // returns 2
      });
 <p>jenny smith</p>
    <p>jennyjones</p>
    <p>jim bob</p> 

//：has()
 $(function(){
        var jennies = $("p:contains('jenny')").length;
        console.log(jennies); // returns 2
        var hasdoemo = $("div:has('p')").attr("id");//在该元素的后代元素

中至少包含一个与指定的选择器匹配的元素
		console.log(hasdoemo); //lt
      });
<div id="gt">
    <p>jenny smith</p>
    <p>jennyjones</p>
    <p>jim bob</p>
	</div>
	<div id="lt">
	afdfd</div>


//不包含任何内容 :empty()
 $(function(){
        var nothing = $("p:empty").length;
        console.log(nothing); //returns 1
      });
div>
      <p></p>
      <p>something here</p>
    </div>

//:parent() 选择具有子元素的元素
    
    $(function(){
      console.log($("div:parent").attr("id"));//gt
    });
    
    <div id="lt">afdfd</div>
    <div id="gt">
     <p>jenny smith</p>
     <p>jennyjones</p>
     <p>jim bob</p>
    </div>
 
////根据关系进行过滤
<script>
 $(function(){
       console.log( $("div span:first-child") )   // 选择每个父元素第一个
//[span#turkey, span#bear, span#martian]
       console.log( $("div span:last-child")   )   // 选择每个父元素最后

一个
//[span#hawk, span#horse, span#martian]
       console.log( $("div span:only-child")   )   // 选择每个父元素只有

唯一
//[span#martian]
       console.log( $("div span:nth-child(2)") )   //每个父元素第n个  
//[span#chicken, span#rabbit]
       console.log( $("div span:nth-child(2n+1)") ) //n=0.....n
//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse, 

span#martian]
       console.log( $("div span:nth-child(even)") )
//[span#chicken, span#pigeon, span#rabbit, span#monkey]
      });
    </script>
  </head>
  <body>
    <div>
      <span id="turkey">Turkey</span>
      <span id="chicken">Chicken</span>
      <span id="parrot">Parrot</span> 
      <span id="pigeon">Pigeon</span>
      <span id="hawk">Hawk</span>
    </div>
    <div>
      <span id="bear">bear</span>
      <span id="rabbit">rabbit</span>
      <span id="fox">fox</span> 
      <span id="monkey">monkey</span>
      <span id="horse">horse</span>
    </div>
    <div>
      <span id="martian">martian</span>
    </div>


//用户自定义选择器
 <script>
 
    $(function(){
       // Define custom filter by extending $.expr[":"]
       $.expr[":"].greenbg = function(element) {
         return $(element).css("background-color") === "green";
       };
       var n = $(":greenbg").length;
       console.log("There are " + n + " green divs");
    });
    </script>
  </head>
  <body>
    <div style="width:10; height:10; background-color:green;"></div>
    <div style="width:10; height:10; background-color:black;"></div>
    <div style="width:10; height:10; background-color:blue;"></div>
  </body>


//事件
//bind(),unbind(),
live(),die();delegate()，undelegate()//还不存在的一个元素绑定一个事件处理

程序  p121
bind与live区别，运行时生成使用live
//live与delegate区别是，delegate可以链接调用
//.one() 时间处理一次

//.trigger(”click“)  匹配所有click事件并行执行
//.triggerHandler("click") 匹配click事件执行第一个匹配事件处理并不冒泡

//.on("func"),.off("func") 完全可以替代之前的live,bind,delegate方法

//p154 再研究 modernizr  datalink


//$.offset() //元素相对文档定位， 返回css对象 再研究 p159
//$.position() //元素相对父容器元素定位

//visibility  与 display 区别 visibility:hidden 存在文档流中,display:none

不存在


//e.stopPropagation();//停止事件

//slideUp,slideDown("fast","xx",回调)；//p162

$(function(){
        $( "div#message" ).click( function(e){
          e.stopPropagation();
         console.log( $("div#message").width()+"   "+

$("div#message").height());
         // $( "div#message").slideUp( 'fast' );
          $( "div#message").fadeIn();
        });
        $( document ).click(function(){
         // $( "div#message" ).slideDown( 'fast' );
          $( "div#message" ).fadeOut();
        });
      });



////////
$(function(){
        $( document ).click( function(event){
          $( "div#box" ).animate({
              left: '+=100px'  //注意
          }, 200);
        });
      });