jQuery（一）

一、jQuery简述

1.优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
官方网址：http://jquery.com

2.jQuery库分开发版和发布版

名称	大小	说 明
jquery-1.版本号.js（开发版）	约286KB	完整无压缩版本，主要用于测试、学习和开发
jquery-1.版本号.min.js（发布版）	约94.8KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

3.环境搭建

第一步：将jQuery开发版本的库文件拷贝到网页中。
第二步：在页面中引入jQuery库文件（可以放入head标签中）

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

二、ready()与onload

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){   //执行代码 }) ;

三、jQuery语法结构

语法：
$(selector).action() ; 
工厂函数$()：将DOM对象转化为jQuery对象。
选择器 selector：获取需要操作的DOM 元素。
action()：jQuery中提供的方法，其中包括绑定事件处理的方法。

四、jQuery操作页面元素

jQuery操作页面元素的方法

• 使用addClass( )方法为元素添加样式
• 使用css( )方法设置元素样式
• 使用show( )、hide( ) 方法设置元素的显示和隐藏

jQuery 对象.addClass([样式名]);

$("#current").addClass("current");      

css(“属性”,“属性值”) ;
css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) ;

$(this).css({"background":"#c81623"});

$(selector).show( );
$(selector).hide( );

$(this).children("div").show();
$(this).children("div").hide();

五、jQuery代码风格和规范

1. “$”等同于“ jQuery ”
2. 链式操作
3. 隐式迭代
4. 注释
5. DOM对象和jQuery对象

$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})      

链式操作：对一个对象进行多重操作，并将操作结果返回给该对象

 $("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代：对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点。
jQuery 的方法内部存在隐式迭代，它会对匹配到的所有元素进行循环遍历，执行相应的方法；无需我们再手动地进行循，方便我们使用。

 $(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

添加注释

阶段	说明
开发阶段	为代码添加注释，可以增加代码的可读性，能够让别人很容易的读懂你的代码，便于后期维护
维护阶段	建议把关键的模块形成开发文档，便于后期维护，即便后期删除代码注释，也不影响后期维护
产品正式发布	建议删除注释，减少文件大小，加快下载速度，提高用户体验

DOM对象：直接使用JavaScript获取的节点对象

var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML;  

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
	// 等同于
document.getElementById("title").innerHTML; 

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用