jquery

1 jquery对象封装一个/一组DOM元素，并且提供对DOM元素执行操作的简化版API的 类数组对象.

2 dom对象转jquery对象

	var btn1=document.getElementById("bin1");//然后
	var $btn1=jQuery(btn1);
	var $btn1=$(btn1);//或者简化版
	var $btn1=$("#bin1");//或者直接写

3 jQuery对象转为dom对象

	var domBtn=$btn1.get(0);
	var domBtn=$btn1.get[0];//或者
	
	面试题：如何将dom对象转换为jQuery对象以及如何将jQuery对象转换为dom对象

4 基本选择器

	//#为id=btn1按钮绑定点击事件,
    //#所有id=one元素加红色边框
    $("#btn1").click(function(){
       $("#one").css("border","1px solid red");
    });
    //2:btn2查找class为min的所有元素,设置边框
    $("#btn2").click(function(){
       $(".mini").css("border","1px solid red");
    });
    //3:btn3查找所有div，设置边框
    $("#btn3").click(function(){
       $("div").css("border","1px solid red");
    });
    //4:btn4查找所有元素,设置边框
    $("#btn4").click(function(){
       $("*").css("border","1px solid red");
    });
    //5:btn5查找所有span,和id为two元素设置边框
    $("#btn5").click(function(){
       $("span,#two").css("border","1px solid red");
    });

5 层次选择器

	//选择器1  选择器2: > + ~
	//#btn1:绑定点击事件 选择body所有div元素
    $("#btn1").click(function(){
       $("body div").css("border","1px solid red");
    });
    //#btn2:绑定点击事件 选择body中所有直接div
    $("#btn2").click(function(){
       $("body>div").css("border","1px solid red");
    });

    //#btn3:...class为one下一个兄弟div
    $("#btn3").click(function(){
       $(".one+div").css("border","1px solid red");
    });    
    //#btn4:...选择id=two的元素之后 所有 兄弟div
    $("#btn4").click(function(){
       $(".one~div").css("border","1px solid red");
    });

6 基本过滤选择器

	`$("div:first")第一个`
	` $("div:last")最后一个`
	`$("div:not(.one)")class不为one的元素`
	`$("div:even")索引值为偶数`
	`$("div:odd")索引值为奇数`
	`$("div:eq(3)")索引值为3`
	`$("div:gt(3)")索引值大于3`
	`$("div:lt(3)")索引值小于3`

7 内容过滤选择器

//1：包含文本di的div元素

   $("div:contains(di)")

//2：不包含子元素或文本的div元素
	$("div:empty")
	
//3:含有class为mini元素的 父div元素
	$("div:has(.mini)")
	
//4:选取含有子元素(或者文本元素)的div元素
	$("div:parent")