jQuery简介
jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 它的设计思想是:write less,do more
jQuery能做什么
访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 注意:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率,减少代码量
jQuery的优势
体积小,压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持
jQuery库文件
jQuery库分为:开发版和发布版 名称 大小 说明 jquery-1.版本号.js(开发版) 约286KB 完整无压缩版本,主要用于测试、学习和开发 jquery-1.版本号.min.js(发布版) 约94.8KB 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目 在页面中引入jQuery库文件 <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
jQuery基本语法
<script> $(document).ready(function() { //为页面加载事件绑定方法 alert("Hello jQuery!"); }); </script>
$(document).ready()与window.onload()的异同
window.onload() | $(document).ready() | |
---|---|---|
执行时机 | 必须等待网页中所有的内容加载完毕后(包括图片、flash、视频等)才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完 |
编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
简化写法 | 无 | $(function(){/执行代码); |
jQuery语法结构
语法: $(selector).action() ;
组成 | 说明 | 作用 |
---|---|---|
$() | 工厂函数 | 将DOM对象转化为jQuery对象 |
selector | 选择器 | 获取需要操作的DOM 元素 |
action() | 方法 | jQuery中提供的方法,其中包括绑定事件处理的方法 |
jQuery操作页面元素
使用addClass( )方法为元素添加样式: 语法: jQuery 对象.addClass([class名]); 示例: $("h1").addClass("abc"); 使用css( )方法设置元素样式: 语法: css("属性","属性值") ; //设置一个CSS属性 css({"属性1":"属性值1","属性2":"属性值2"...}) ; //同时设置多个CSS属性 示例: $(this).css({"background":"#c81623"}); 使用show( )、hide( ) 方法设置元素的显示和隐藏: 语法: $(selector).show( ); $(selector).hide( ); 示例: $(".abc").show( ); $("p").hide( );
jQuery代码风格
“$”等同于“ jQuery ” $(document).ready()=jQuery(document).ready() $(function(){...})=jQuery (function(){...})
链式操作
对一个对象进行多重操作,并将操作结果返回给该对象 示例: $("h2").css("background-color","#ccffff").next().css("display","block");
隐式迭代
在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用,这就叫做隐式迭代 示例:$("h2").css("background-color","#ccffff").next().css("display","block");
DOM模型
浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构
DOM对象和jQuery对象
DOM对象:直接使用JavaScript获取的节点对象 var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML; jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法 $("#title").html( );===document.getElementById("title").innerHTML; 注意: DOM对象和jQuery对象分别拥有一套独立的方法,不能混用
DOM对象转jQuery对象
使用$()函数进行转化:$(DOM对象) var txtName =document.getElementById("txtName"); //getElementById是DOM对象 var $txtName =$(txtName); //$(txtName)是jQuery对象 注意: jQuery对象命名一般约定以$开头 在事件中经常使用$(this),this是指触发该事件的对象
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象 var $txtName =$ ("#txtName"); //jQuery对象 var txtName =$txtName[0]; //DOM对象 通过get(index)方法得到相应的DOM对象 var $txtName =$("#txtName"); //jQuery对象 var txtName =$txtName.get(0); //DOM对象
siblings() 方法返回被选元素的所有同级元素。
初识jQuery总结
jQuery简介: jQuery的用法 jQuery的优势 jQuery的配置环境 jQuery语法: jQuery的语法结构:工厂函数、选择器和方法 jQuery方法的应用 addClass( )方法、css( )方法 show( )、hide( )方法 next()方法 jQuery程序的代码风格 “$”的使用 链式操作 隐式迭代 DOM对象和jQuery对象: DOM对象 jQuery对象 jQuery对象与DOM对象的相互转换