jQuery选择器dom操作动画事件处理

jQuery 能做什么？

jQuery是一个轻量级的javascript库，可以少写代码，做更多的事。
1.jQuery库拥有强大的选择器。jquery允许开发者使用CSS1到CSS3几乎所有选择器，以及jquery独创的高级复杂的选择器。
2.出色的DOM操作。jquery封装了大量常用的DOM操作，使开发者在编写DOM操作程序的时候得心应手。
3.可靠的事件处理机制。使开发者处理事件更方便。
4.良好的兼容性。jquery可以在IE 6.0+,FF 2+,Safari 2.0+和Opera 9.0+下正常运行，同时还修复了一些浏览器之间的差异。
5.链式操作方式。对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
6.隐士迭代。当用jQuery找到“.myclass”类的全部元素，然后隐藏它们时，无需循环遍历每个返回元素。
7.ajax操作。jquery将所有的ajax操作封装在到一个函数$.ajax()里,使得开发者在处理ajax的时候，能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

jquery对象
jquery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery对象就可以使用jQuery中的方法，如：

$("#id").html();

在jQuery对象中无法使用DOM对象的任何方法，DOM对象也不可以使用jQuery里的方法，

DOM对象
DOM对象是文档对象模型(Document Object Medol),每份DOM都可以表示成一颗DOM树，如：

Paste_Image.png

可以通过javascript中的一些方法拿到元素节点，如getElementById()等，
像这样得到的DOM元素就是DOM对象，DOM对象可以使用Javascript中的方法，

var text=getElementById("text")；//获取dom对象
text.innerText="hello world";

互相转化
jquery对象转化成DOM对象
jQuery提供了两种方法将一个jQuery对象转化成DOM对象，即[index]和get[index],
1.jQuery对象是一个数组对象，可以通过数组下标获取到相应的DOM对象，如

var $obj=$("#obj") ;//jQuery对象
var obj=$obj[0];//DOM对象，

2.jquery中提供get(index)方法获取相应的DOM对象，如

var $obj=$("#obj") ;//jQuery对象
var obj=$obj.get(0);//DOM对象，

DOM对象转化成jQuery对象
DOM对象只要用$()将DOM对象包装起来，就可以获得一个jQuery对象，方式为$(DOM对象)，
如：

var obj=getElementById("obj");
var $obj=$(obj);

jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

jQuery通过bind()、delegate()、live()、on()等方法绑定事件。
bind()
bind(type,[,data],fn),bind()方法有三个参数，第一个参数是一个或者多个事件类型，第二个是可选参数，作为event.data的属性值传给事件对象，第三个是绑定的处理函数。
bind方法必须使用在一个已经存在的元素中，bind也只能把事件处理程序绑定到指定的DOM元素上面，如果经常删除或者创建DOM,不适合使用bind。当选择器选择的DOM元素很多的时候，要在每个元素上都绑定事件处理程序，会有很大的额外开销。

delegate()
delegate(selector,[type],[data],fn),delegate方法有四个参数，第一个参数是选择器，指当触发事件的DOM元素匹配这个选择器时触发事件处理程序，后面的三个参数与bind相同。如：

//当点击鼠标时，隐藏或显示 p 元素：
<div style="background-color:red">
       <p>这是一个段落。</p>
     <button>点击</button>
</div>
<script>
   $("div").delegate("button","click",function(){
  $("p").slideToggle();
});
</script>

delegate可以把事件处理程序委托到一个指定的根元素上面，但是event.stopPropagation在代理的事件处理程序中是无效的，如果在根元素的DOM树下，有一个元素的事件处理程序阻止事件冒泡，那么代理的事件处理程序将被阻止执行。

live()
live(type, [data], fn),三个参数都与bind相同，可以说live方法是bind方法的变体，使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。live给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。如：

<body>
<div class="click">点击这里</div>
</body>
<body>
<script>
   $('.click').live('click', function() {
       console.log("点击这里");
   });
</script>

再添加一个元素

$('body').append('<div class="click">另一个</div>');

然后再点击新增的元素，依然能够触发事件处理函数。
live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。所以无论在绑定事件的时候选择器对应的元素是否存在，都能在事件触发之后正确执行相关的事件处理程序。
live的缺点：
1.live不支持链式的写法,
2.因为所有的事件处理程序都是绑定在document元素，如果目标元素所在的DOM树节点比较深，会有一个比较长的冒泡路径。
3.当一个事件处理函数用 .live() 绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 stopPropagation() 是无效的,因为事件已经冒泡到document上了。

on()
on方法是在选择元素上绑定一个或多个事件的事件处理函数。
on(events,[selector],[data],fn);
events:是要绑定的事件类型；
selector：可选参数，过滤选择器，用于过滤器的触发事件的选择器元素的后代，只有匹配这个选择器的元素才执行事件处理程序。如果没有提供则认为是绑定在选中的元素上。
后面两个与bind相同。
如果on有selector这个参数，就跟delegate类似，是一个事件代理，把selector匹配的元素的事件处理程序代理到选中的元素上。如果没有，就跟bind类似，绑定在某个指定的元素上。

** unbind()**
unbind(type,[data|fn]])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

1.把所有段落的所有事件取消绑定
$("p").unbind()
2.将段落的click事件取消绑定
$("p").unbind( "click" )
3.删除特定函数的绑定，将函数作为第二个参数传入
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 
$("p").unbind("click", foo); // ... 再也不会被触发 foo

off
off(events,[selector],[fn]),off() 方法移除用on()方法中绑定的事件处理程序。

1.把所有段落的所有事件取消绑定
$("p").offf()
2.把所有段落的点击事件都取消
$("p").off( "click", "**" )
3.点击p时移除foo事件
$("body").off("click", "p", foo);
4.移除命名空间下的所有事件
var validate = function () {}
$("form").on("click.validator", "button", validate);
$("form").off(".validator");

终上所述，推荐使用on绑定事件，较好的弥补了其他几种绑定事件的缺点。
on事件代理写法,加个过滤参数即可

<div class="test">
    <p class="btn">点击</p>
</div>
<script>
    $('.test').on('click','.btn',function() {
        console.log("点击这里");
    });
</script>

jQuery 如何展示/隐藏元素？

使用show()和hide()

<div class="demo"></div>
<button class="btn1">点击隐藏</button>
<button class="btn2">点击显示</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").hide(2000);
       })
       $(".btn2").click(function(){
           $(".demo").show(2000);
       })
   })
</script>

jQuery 动画如何使用？

1.show()和hide()

show()方法和hide()方法没有参数的时候，相当于css("display"，"none/block"),立即隐藏或显示元素，不会有任何动画，动画效果的显示功能：
show(speed,[callback])
隐藏功能：
show(speed,[callback])
speed:表示执行动画时的速度
callback:可选参数，表示动画结束后执行的回调函数。

<div class="demo"></div>
<button class="btn1">点击隐藏</button>
<button class="btn2">点击显示</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").hide(2000);
       })
        $(".btn2").click(function(){
           $(".demo").show(2000,function(){
              $(this).css('border','1px solid')
           });
       })
   })

</script>

2.toggle()

在使用show()和hide()方法显示隐藏元素时，为了正确执行切换显示的动作，需要检测当前元素的显示状态，然后根据该状态再执行显示或者隐藏，toggle()方法就是切换元素的可见状态。
1.无参数调用
toggle()
2.参数是一个布尔值，如果是true显示，false隐藏。
toggle(boolean)
3.与show()参数所表示的意义一样。
toggle(speed,[callbakc])

<div class="demo"></div>
<button class="btn1">点击1</button>
<button class="btn2">点击2</button>
<button class="btn3">点击3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").toggle();//无参数方法
       });
       $(".btn2").click(function(){
           $(".demo").toggle(false);//根据参数显示或隐藏
       });
       $(".btn3").click(function(){
           $(".demo").toggle(2000,function(){
               $(".demo").css("background","yellow"); //有两个参数
           })
       });
   })
</script>

3.slideUp()和slideDown(),slideToggle()

slideUp()方法格式如：
slideUp(speed,[callback]),动画效果是将所选元素的高度向上减小，呈现一种向上滑动的效果。
slideDown()方法格式如：
slideDown(speed,[callback]),动画效果是将所选元素的高度向下增大，仅仅改变元素的高度属性，所含参数与slideUp一样。
slideToggle()方法格式如下：
slideDown(speed,[callback])，动画效果是自动切换所选元素的高度状态。

<body>
<div class="demo"></div>
<button class="btn1">点击1</button>
<button class="btn2">点击2</button>
<button class="btn3">点击3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").slideUp(2000);
       });
       $(".btn2").click(function(){
           $(".demo").slideDown(2000);
       });
       $(".btn3").click(function(){
           $(".demo").slideToggle(2000,function(){
               $(".demo").css("background","yellow");
           })
       });
   })
</script>
</body>

4.fadeIn()、fadeOut()、fadeTo()

show(),hide()与fadeOut()、fadeIn()比较，相同之处就是切换元素的显示状态，不同在于show()和hide()的动画使元素的高度和宽度属性都发生了变化，而fadeOut()和fadeIn()只是元素的透明度发生变化。
fadeOut()方法格式如：
fadeOut()(speed,[callback]),通过改变元素的透明度，实现淡出的动画效果。
fadeIn()方法格式如：
fadeIn()(speed,[callback]),通过改变元素的透明度，实现淡入的动画效果。
fadeTo()方法格式如：
fadeTo()(speed,opacity,[callback]),该方法是将所选元素的不透明度以动画的效果调整到指定的透明度。参数speed是动画速度，opacity是指定的不透明值，范围是0.0~1.0,可选参数回调函数，与别的动画相同。

<div class="demo"></div>
<button class="btn1">点击1</button>
<button class="btn2">点击2</button>
<button class="btn3">点击3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").fadeIn(2000);
       });
       $(".btn2").click(function(){
           $(".demo").fadeOut(2000);
       });
       $(".btn3").click(function(){
           $(".demo").fadeTo(2000,0.2,function(){
               $(".demo").css("background","yellow");
           })
       });
   })

5.自定义动画

animate()可以自定义各种复杂的高级的动画，调用语法格式为：
animate(params,[duration],[easing],[callback])
params：表示用于制作动画效果的属性样式和值的集合，
duration：可选，表示自定义动画的速度，可以是normal，slow，fast或自定义的数字，
easing：可选，为动画插件使用，用于控制动画的表现效果，有swing和linear等值，
callback：可选，自定义动画完成后的回调函数。
简单的动画,点击之后变大

    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
        .demo{width: 100px;height: 100px;background: #ff0000;}
    </style>
</head>
<body>
<div class="demo">点击变大</div>
<button class="btn">点击变大</button>
<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo").animate({
                      width:"200",
                      height:"200px"
          },2000)
      })
  })
</script>

位置移动的动画,要给元素设置position，位置移动才生效。

<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo").animate({
                      width:"200",
                      height:"200px",
                       top:"40px",
                     left:"50px"
          },2000)
      })
  })
</script>

队列中的动画，就是元素在执行一个以上的多个动画效果,即有多个animate()方法在元素中执行，如先将元素放大，然后再缩小，

<div class="demo">点击变大</div>
<button class="btn">点击变大</button>
<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo")
                  .animate({height:"200px"},2000)
                  .animate({width:"200px"},1000)
                  .animate({height:"50px"},1000)
                  .animate({width:"50px"},1000)
      })
  })
</script>

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

用html()和text()获取元素中的内容，将内容作为html(val)和text(val)的参数分别设置元素内容。
设置元素内部的HTML,使用$().html()或者innerHTML

<div class="demo"></div>
<button class="btn1">点击1</button>
1.
<script>
    var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         demo.innerHTML="<p>这是一个段落</p>";
     }
    })
</script>
2.<script>
    $(function(){
        $(".btn1").click(function(){
            $(".demo").html("<p>这是一个段落</p>");
        });
</script>

获取元素内部的HTML

<div class="demo">
    <p>这是一个段落</p>
</div>
<button class="btn1">点击1</button>
1.原生的方法
<script>
   var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         var innerhtml=demo.innerHTML;
         console.log(innerhtml);// <p>这是一个段落</p>
     }
</script>
2.jquery方法
<script>
       $(function(){
        $(".btn1").click(function(){
            console.log($(".demo").html());// <p>这是一个段落</p>
        });

    })
</script>

设置元素内部的文本,使用$().text()或者innerText

<div class="demo"></div>
<button class="btn1">点击1</button>
1.原生的方法
<script>
    var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         demo.innerText="这是一个文本";
     }
  
</script>
2.jQuery方法
<script>
    $(function(){
        $(".btn1").click(function(){
            $(".demo").text("这是一个文本");
        });

    })
</script>

获取文本，与获取html方法一样

<div class="demo">这是一个文本</div>
<button class="btn1">点击1</button>
1. 原生的方法   
var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         console.log(demo.innerText);
     }
2.jQuery的方法
    $(function(){
        $(".btn1").click(function(){
           console.log($(".demo").text()) ;//不写参数即可
        });

    })

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

如果想要获取元素的值，可以通过val()方法实现，语法：
$(‘selector’).val(val)，
如果不带参数就是获取输入的值，如果带有参数就是设置元素的值，

<form class="demo">
    <input type="text" id="txt">
</form>

<script>
    $(function() {
         //获取值
        $("#txt").focus(function () {
            var txtvalue = $(this).val();
            console.log(txtvalue)
        });
           //设置值
        $("#txt").blur(function () {
            var txtvalue = $(this).val();
            if (txtvalue==""){
                $(this).val("文本框不能为空")
            }
        });

    })
</script>

获取选择的内容,val()方法还有一个用处是，可以使下拉列表，复选框和单选框相应的选项被选中，

<form class="demo">
    <select  id="single">
        <option >选项1</option>
        <option >选项2</option>
        <option >选项3</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option  selected="selected">选择1号</option>
        <option >多选2</option>
        <option >多选3</option>
    </select>
    <input type="checkbox" value="check1">多选1
    <input type="checkbox" value="check2">多选2
    <input type="checkbox" value="check3">多选3
    <input type="radio" value="check1">单选1
    <input type="radio" value="check2">单选2
    <input type="radio" value="check3">单选3
</form>

<script>
    $(function() {
        //使下拉框的第二个被选中
        $("#single").val("选项2");
        //使下拉列表的第二第三个被选中
        $("#multiple").val(["多选2","多选3"])
        $(":checkbox").val(["check1","check2"]);
        $(":radio").val(["check1"])

    })
</script>

$(‘selector’).attr(attr):获取元素属性;
$(‘selector’).attr(‘attr’,’type’):设置元素属性的值;

8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{list-style: none}
        a{text-decoration: none}
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        .nav-aside{
            margin-top: 30px;
            width: 180px;
        }
        .category{
            position: relative;
            width: 190px;
            background: #c7171e;
        }
        .category>a{
            display: block;
            padding: 10px;
            margin: 0 10px;
            width: 150px;
            color: #fff;
            font-size: 14px;

            border-bottom:1px dotted #de272e;

        }
        .icon-jiantou{
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: SimSun-ExtB;
            font-style: normal;
            font-weight: 700;
            color: #fff;
        }
        .category-child{
            display: none;
            position: absolute;
            top: 0;
            left: 190px;
            width: 190px;;
            background: #fff;
            border: 1px solid #ddd;

        }
        .category-child>li{
            float: left;
            width: 75px;
            padding: 10px;
            text-align: center;
        }
        .category-child>li>a{
            color: #333;
            font-size: 14px;
        }
        .show{display: block}
    </style>
</head>
<body>
<div class="wrap">
    <ul class="nav-aside">
        <li class="category">
            <a href="">珠宝玉器</a>
            <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠宝玉器</a>
             <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠宝玉器</a>
           <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠宝玉器</a>
           <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠宝玉器</a>
            <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>

    $(function(){
        /*
         $(".category").on("mouseenter",function(){
         $(this).find(".category-child").show();
         });
         $(".category").on("mouseleave",function(){
         $(this).find(".category-child").hide();
         });*/
        $(".category").on("mouseenter",function(){
            $(this).find(".category-child").addClass("show");
        });
        $(".category").on("mouseleave",function(){
            $(this).find(".category-child").removeClass("show");
        });
    })

</script>
</body>
</html>

效果预览

9

代码预览
 效果

10

代码
 效果预览

11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{ list-style: none}
        a{text-decoration: none;color: #ddd;}
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .tab{
            width: 200px;
            padding: 5px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .tab>span{
            padding: 0 5px;
            line-height: 1;
            border-right: 1px solid #ddd;
        }
        .tab-wrap{
           position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        .tab-panel{
            position: absolute;
            height: 400px;

        }
        .tab-item{
            float: left;
            width: 600px;
            height: 400px;
        }
        .tab-item:nth-of-type(1){
            background: #ff0000;
            left:0;
        }
        .tab-item:nth-of-type(2){background: #6A6AFF}
        .tab-item:nth-of-type(3){background: #00ff00}
        .select{background: #ddd;}
    </style>
</head>
<body>
 <div class="wrap">
     <div class="tab">
         <span class="select">tab1</span>
         <span>tab2</span>
         <span>tab3</span>
     </div>
     <div class="tab-wrap clearfix">
         <ul class="tab-panel">
             <li class="tab-item"></li>
             <li class="tab-item"></li>
             <li class="tab-item"></li>
         </ul>
     </div>
 </div>
 <script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
 <script>
     $(function(){
         $(".tab>span").on('click',function(){
             var $this=$(this);
             var index=$(this).index();
             var wid=$(".tab-wrap").width();
             $this.siblings().removeClass("select");
             $this.addClass("select");
             $(this).parents(".wrap").find(".tab-panel").animate({left:-wid*index},1000);
         })
     })
 </script>
</body>
</html>