（3）认识JQuery
写在前面，JQuery除了有非常丰富的选择器，可以非常快捷方便的控制DOM结构，还封装了非常多的有趣的函数，可以实现一些交互效果。
虽然JQuery支持链式法则，使用起来也非常的方便，但是后期维护不易，代码链应该合理。
（一）tips
（1）val(参数)可以改变input标签里面的值（value）
（2）对于input的checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。其中多选框选中的个数可以使用length计算。
（3）下拉框选项的文本，使用text()函数获取。
（4）也可以使用val()、text()等设置我们想要的属性的值。
<body> <div class="wrap"> <input type="button" value="dianjia" class="btn"> <div class="chBox_list"> <input type="checkbox" name="vehicle" value='car' checked="checked"/>小汽车 <input type="checkbox" name="vehicle" value='bar' checked="checked"/>大卡车 <input type="checkbox" name="vehicle" value='train'/>火车 <input type="checkbox" name="vehicle" value='height_speed'/>高铁 <input type="submit" name="submit"> </div> <div class="mult_sele"> <select multiple="multiple"> <option val='apple' selected="selected">苹果</option> <option val='branan' selected="selected">香蕉</option> <option val='juice'>橘子</option> <option val='manggo'>芒果</option> </select> <input type="submit" name="submit"> </div> <div class=""> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 </div> </div> <script type="text/javascript"> $(".btn").val("店家"); $(".chBox_list :submit").click(function(){ console.log( $(".chBox_list input:checked").length);//要和JS对象转换吗？？ console.log( $(".chBox_list input:checked").val());//返回的是car？？ }); $(".mult_sele :submit").click(function(){ console.log( $(".mult_sele option:checked").length); console.log( $(".mult_sele option:selected").text());//多选框 }); $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]); </script> </body>
（二）JQuery与DOM结构
与JS一样，控制DOM结构依然存在父、子、兄弟等关系。
（1）父元素 parent() parents() parentsUntil()
（2）子元素 chiledren()返回直接子元素，只会找到下一级 。find()会找到所有的子节点，包括孙子节点。
（3）兄弟节点 siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()
（4）特殊的查找 eq() filter() not() first() last()
（5）索引 index()
<div class="wrap"> <div> <h1>我只是一个标题</h1> <p>我是一个段落</p> <ul class='list'> <li><span>列表1</span></li> <li><a><span>列表2</span></a></li> <li>列表3</li> <li>列表4</li> </ul> </div> </div> <script type="text/javascript"> //父元素 parent() parents() parentsUntil() console.log($(".list").parent()) console.log($(".list").parents()) console.log($(".list").parentsUntil('body')) //children()返回直接子元素，只会找到下一级 //find() console.log($(".list").children()) console.log($(".list").find('span').eq(1).html()) //siblings() next() nextAll() nextUntil() //prev() prevAll() prevUntil() //eq() filter() not() first() last() //index()返回指定元素相对于其他指定元素的 index 位置 </script>
效果：
（三）JQuery效果
JQuery封装了非常多的动画效果，组合使用可以执行非常有趣的效果。
（1）show(speed, callback) hide(speed, callback) 里面的第一个参数参数为时间，即执行此函数使用的时间。
（2）toggle(speed, callback)使用 toggle()方法来切换hide()和show() 方法.显示被隐藏的元素，并隐藏已显示的元素。
（3）有关淡入淡出有四个函数。淡入已隐藏元素：fadeIn(speed, callback) 淡出已显示元素：fadeOut(speed, callback) 显示和隐藏之间的切换fadeToggle()
fadeTo(speed,opacity,callback)必须给定一个透明度，介于0-1之间。
（4）滑动效果。向下滑动元素：slideDown(speed,callback) 向上滑动元素：slideUp(speed,callback) 切换向上与向下的效果：slideToggle(speed,callback)
（5）动画 animation。$(selector).animate({params},speed,callback)。且可以使用stop()函数停止动画。
