(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()函数停止动画。