优点:jQuery凭借简洁的语法和跨平台的兼容性,极大地极大地简化了JS开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发ajax的操作。jQuery拥有独特的选择器,链式操作,事件处理机制,封装完善的ajax。
优势:①轻量级,目前使用UglifyJS压缩后,大小保持在30KB左右
②强大的选择器(基本选择器,层次选择器,过滤选择器)
③DOM操作的封装(jQuery中DOM的操作)
④可靠的事件处理机制(事件处理)
⑤ajax完善处理
⑥链式操作方式
书写方式:若没有特殊说明,jQuery==$,所以$("#foo")==jQuery("#foo")
$就是jQuery的书写的简单形式
<script type="text/javascript">// <![CDATA[ $(doucment).ready(function(){//等待DOM元素加载完毕 alert("hello world"); //弹出一个框 }); 可以简写成: $(function{ //... }); // ]]></script>
代码风格:
①链式操作风格
②强大选择器
对于同一个对象,不超过三个操作的,可以直接写成一行 例如:
.next().show() //显示下一个元素
对于同一对象的多个操作,建议一行一个 例如:
.parent() //父元素的 .siblings() //同辈元素的(siblings意为兄妹) .children("a") //子元素 .removeClass("current") //移除current样式(current意为当前)
jQuery实例:(实现的功能:当鼠标点击到a元素的时候,给其添加一个名为current的class,然后将紧邻后面的元素显示出来,同时将它父辈的同辈元素内部内部的子元素都去掉一个名为current的class,并将紧邻他们后面的元素都隐藏)
$(".level1>a").ready.(function(){ //等待元素加载完毕 $(this).addClass("current") //给当前元素添加current样式 .next().show() //显示下一个元素 .parent().siblings() //父元素的同辈元素的 .children("a").removeClass("current") //子元素移除current样式属性 .next().hide(); //下一个元素隐藏 return false; })
②jQuery对象就是jQuery包装DOM对象后产生的对象 例如:
$("#foo").html() //获取id为foo的元素内部的HTML代码,html()是jQuery里的方法
document.getElementById("foo").innerHTML
jQuery与css选择器类比:
<p class = "demo">jQuery demo</p>
css: .demo{.......//class为demo的样式添加样式}
jQuery: $(".demo").click.(function(){.........//给class为demo的元素添加行为})