jq

1.选择器获取元素
$("")//里面放字符串--选择器

//1.基本
$(".item");//类名
$("div");//标签选择
$("#item")//id名
$("*")//所有标签

//2.层级
$(".item p")//后代选择器
$("label+input");//紧跟label的input
$("label~input");//兄弟//与label同辈的input
$(".item>p");//子代//(类名为item的所有是p标签的子级）

//3.基本筛选
$("p:first");//所有匹配标签的第一个
$("p:last");//所有匹配元素的最后一个
console.log($("p:not(':nth-child(1)')"));//不是所选的p
$(":root").css("color","red");//选择该文档的根元素

$("p:even");//索引值为偶数的元素
$("p:odd");//索引值为奇数的元素
$("p:gt(0)");//索引值大于所给的下标的
$("p:lt(10)");//索引值小于所给的下标值的

$(":header");//匹配所有h标签
// $(":header:nth-child(1)").css("color","green");

// $(":animation");//匹配所有正在执行动画的
//结合回调
// $(".btn").click(function(){
//  $(".item:not(:animation)").animation({ left: "+=20"},100)
// })


//4.内容
$("div:contains('文本')").css("color","green");//选择文本内容是“文本”的标签
$("div:empty");//匹配空元素(不包含文本和标签)
$("div:has(p)");//所有包含p的div
$("div:parent");//查找所有含有子元素或文本的div

// 5.可见性
$("div:hidden");//匹配所有隐藏的div
$("div:visible");//匹配所有可见的div


// 6.属性 
$("div[class]");//找所有含有class属性的div
$("div[type='text']")//找所有typem的元素（用于找特定元素）
$("div[class!='item']")//找所有类名不是item的div
$("div[class^='tit']")//找所有属性是以tit开头的
$("div[class$='tle']")//找所有类名以tle结尾的元素
$("div[class*='it']")//所有包含 类名it的
$("div[class][id='item']")//有多个属性的（还可以规定特定属性名）

// 7.子元素
$("span:first-child").css("color","lightblue");//找子级span是第一个的(查询包含其他标签)
$("p:last-child").css("color","lightgreen");//找是最后一个子元素的p(查询包含其他标签)
$(".item:first-of-type")//??


// 8.表单
$(":input");//所有input--text,button image/submit/reset/radio/checkbox/file
$(":text");

// 表单对象属性
$("input:enabled");//所有禁用的表单
$("input:disabled");//没有被禁用
$("input:checked");//所有选中的
$("select option:selected");//所有选择的复选框

2.原生对象与jq对象之间的转化

注意：
（1）通过jq获取的是jq对象，通过元素的document.getElement获取的是原生对象
（2）原生对象不能调用jq对象的方法，同理Jq也对象不能调用原生的方法和属性

// 1.jq对象与原生对象的转化

// 原生转jq
var content =document.getElementsByClassName("content");
$(content).css("color","pink");

// jq转原生
$(".content")[0].innerHTML="jq转原生1";
$(".content").get(1).innerHTML="jq转原生2";


// 2.创建元素
$("<div style='color:gray'>我是创建的div</div>").append("</br><span>我是创建div中的span</span>").appendTo("body")

3.css样式

（1）获取css样式:  .css（）    
 var color = $(".content").css("backgroundColor");
 console.log(color);

（2）设置css样式
  $("p").css("color","blue");   // (单个样式)
  $("p").css({
    color:"gold",
    border:"1px solid red"
})（多个样式）

 (3):结合回掉函数，获取的元素有几个，函数就会执行几次,传入下标和老的值

    var Arr =["red","green","blue","yellow"];
    $("p").css("color",function(index,oldValue){
          return Arr[index];
    })
    $("p").css({
          width:function(index,oldValue){
                return 100*(index+1);
          },
          height:function(index,oldValue){
               return 50;
          },
         fontSize:function(index,oldValue){
              return 35;
         }
    });

  (4)位置:offet/position/scrollTop
    // offset:在当前视口的相对偏移
       console.log($(".offset").position());//{top: 100, left: 250}
     
    // position():相对于父元素的top,left值
       console.log($(".offset").position());//{top: 100, left: 250}

    // scrollTop() 获取匹配元素相对滚动条顶部的偏移。
       $(".offset").scrollTop(300)
       $(".offset").scrollTop()

  (5)尺寸（全纯数字） 

    // 尺寸hieght/width/innerHeight/innerWidth/outHeight/outWidth
    // 获取样式 $(".offset").height();
    // 设置样式：$(".offset").height(加参数)
    $(".div").height();
    $(".div").width();
    $(".div").innerWidth();//获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
    $(".div").innerHeight();//获取第一个匹配元素内部区域高度（包括补白、不包括边框）
    $(".div").outerHeight();//获取第一个匹配元素内部区域高度（包括补白边框）
    $(".div").outerWidth();//获取第一个匹配元素内部区域宽度（包括补白边框）

4.文档处理

// 创建元素、添加元素
// 1.内部插入
// a.append(b) :把b插入a的最后面
// a.appendTo(b):把a插入b的最后
// a.prepend(b)：把b插入a的前面
// a.prependTo(b)：把a插入到b的最前

$("<p class='item2' style='color:lightgreen'></p>").append("<span>spqn</span>").appendTo("body");


// 2.外部插入 after/insertAfter
// a.after(b)//把b插入到a的后面
// a.insertAfter(b);//把a插入到b后
// a.before(b);//把b插入到a的前面
// a.insertBefore(b);//把a插入到b的前面

$(".content").after($("p"));//content后面插入所有的p
$(".fool").insertAfter(".content");//把fool插入到.content之后


3.包裹 

 （1）wrap();在集合中匹配的每个元素周围包裹一个HTML结构。
$("form").wrap("<div class='BG'></div>");//用div包裹form

// wrap回调函数返回值, 当参数是函数的时候，jq会把函数的返回值作为包裹form的父级来使用
// 需求：用内容为显示的div包裹form
    $("form").wrap(function(){
    var divs = document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        if(divs[i].innerHTML=="显示"){
            return divs[i];
         }
      }
    });

 （2）unwrap:去掉父级 ，
   $(".content").unwrap();

 （3）wrapAll: 把所有的匹配元素用一个父级包裹，第一个匹配元素在哪，加的父级就在哪
    $("p").wrapAll(".item2");

 （4）wrapInner： 给匹配元素的内容（整个内容，包括文本）加
$("p").wrapInner("<b></b>");


4.删除remove() / deatch（）
//empty()：就是把子节点全部删除为空（包括文本和标签）
// a.remove()  删除所有，删除后再添加回去，不能使用前面所绑定的事件或属性
// a.deatch()  删除所有，删除后再添加回去，能使用前面所绑定的事件或属性（会保留）
// $(".content").remove();//删除
// $(".content").remove("#con")//参数代表选择器筛选的元素


  5.替换
// a.replaceWith(b)：把a元素替换成b
//a.replaceAll(b):用所有的a替换掉b
$("p").replaceWith("<b>我是b标签</b>");//把所有的p替换成b
$("p").replaceAll(".content");//用所有的p替换掉.content

6.事件

（1）ready：当DOM准备就绪时，指定一个函数来执行。
// 文档加载完毕和window.onload类似，都是文档加载完毕之后执行，
   不同点在于document.ready可以绑定多个事件

 $(document).ready(function(){
    console.log("文档加载完毕1");
 });
 $(document).ready(function(){
    console.log("文档加载完毕2");
 });
 //简化版，最常用
 $(function(){
    console.log("文档加载完毕3");
 });
  
（2）事件绑定
 1. on绑定事件，四个参数
    // div.on(type,"selector",obj,fn)
    // type:字符串类型 ，放的是事件类型入:clcik
    // selector:字符串类型。是选择器，代表过滤，只有这个选择器内的元素才能触发事件
    // obj：对象类型
    // fn函数，事件触发之后执行的函数

    //绑定写法：
    $(".p")on("click",function(){})
    $("div p:first-child:first").on("click","span",{name:"明月",age:17},function(ev){
                // console.log("点击了p标签");//第二个参数给类选择器
                console.log(ev.data);//{name: "明月", age: 17}
    });

2.解绑off
    // div.off()所有时间都移出
    // div.off("click")移除所有点击事件
    // div.off("click",fn)//移除指定的点击事件
    // $("div p:first-child:first").off("click",fn)

3..one()：绑定一次事件执行后就不会执行了,只能点一次

4. bind():方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
    $("input[type=text]").click(function(){
          $("p").slideToggle();
    })

5.unbind():移除事件
    $("#btn").click(function(){
        $("input[type=text]").unbind();//input的点击事件被取消
    })

6. blur():输入框失焦时触发
    $("input").blur(function(){
        $(this).css("backgroundColor","red");
    })

7.focus:获得焦点
    $("input[type=text]").focus(function(){
        console.log("输入框获得焦点")
    })

8.change():当输入域发生变化时：
    $("input[type=text]").change(function(){
     // input值改变，触发change事件
        $(this).css("backgroundColor","lightgreen")
})

9. dblclick双击
     $(".item").click(function(){
        $(this).css("color","lightgreen")
      })

10.delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
     $(".item").delegate("p","click",function(){
        $("img").slideToggle();
});

11.undelegate():从匹配元素移除一个被添加的事件处理器，现在或将来 
    // 取消.item的事件
    $(".p4").click(function(){
         console.log(1)
         $(".item").undelegate();
    })


12. resize():窗口改变大小时触发
     $(window).resize(function(){
          console.log("窗口发生变化")
      })

13. scroll():窗口滑动时触发事件
    $(window).scroll(function(){
          console.log("滚动");
     })
  
14. trigger():方法触发被选元素的指定事件类型。事件触发后文本会被选中
    $(".p3").select(function(){
          $(".p3").after("文本被选中！");
    });
    $("#btn").click(function(){
          $(".p3").trigger("select");
    });


15. triggerHandler()第一个被匹配元素的指定事件:与tigger的区别，事件触发后文本不会被选中

7.事件对象

1. 鼠标位置：pageX(相对于文档的左边缘),pageY 包含滑动距离
$(document).mousemove(function(e){
    $("span").text("X:"+e.pageX+","+"Y:"+e.pageY)
})

2. 阻止默认事件
event.preventDefault();

3. event.result() 包含由被指定事件触发的事件处理器返回的最后一个值。
$("#btn").click(function(e) {
    return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
});
$("#btn").click(function(e) {
     $(".p3").html(e.result);
});  

4. event.target:指哪个元素触发了事件
$("p, #btn").click(function(event){
    $(".p3").html("Triggered by a " + event.target.nodeName + " element.");
});

5. event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。

6. event.type：表示事件的类型

7. 键盘事件对象 keydown/keypress/keyup
.event.which：显示按下了哪个键

7.移交$的使用权
正常情况下$代表jQuery。如果和其他变量名有冲突，JQ可以把$的使用权交出去。

// console.log(jQuery(".content")) // jqery=$
// 移交$的使用权，
// 调用此方法后，不能继续使用$来代表JQ。
// 用变量接接收返回值之后。这个变量就代表JQ
// var $$=$.noConflict();
// $$(".content").css("color","red");

8.常用工具
数组和对象操作

.each()：遍历对象,回调函数返回index,obj

  $.each(["hello","world"]，function(index,el){
        console.log(index,el);
        //打印 0 hello /1 world
  })

  $("p").each(function(index,obj){
         $(this).click(function(){
                console.log(index,obj);//点击打印各p标签的下标和点击的p标签
         })
   })

$(each)的回调函数每次返回数组的下标index,和数组的值obj