初识jQuery

jQuery简介

jQuery与JavaScript

jOuey 是JavaScriprp 的程序库之一.它是 JavaScripi对象和实用函数的封装。

1. jQuery由美国人John Resig于2006年创建
2. jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
3. 它的设计思想是write less,do more

jQuery与其他JavaScript库

JavaScript是一种面向 Web的脚本语言。

认识jQuery

1. jQuery简介
   jQuery 是继Poloype之后又一一个优秀的JveSript库， 是由美国人John Resig于2006年创建的开源项目。目前，jQuery 团队主要包括核心库，ul，插件和jQuery Mobile 等开发人员。推广人员，网站设计人员及维护人员。随着人们对它的日渐熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，这促使jQuery逐步发展成为如今集JavaScript. CSS. DOM 和Ajax于一体的强大框架体系。
   作为JavaScript的程序库.jQuery凭借简洁的语法和跨浏览器的兼容性，极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的代码，从而广泛应用于Web应用开发，如导航菜单，轮播广告.网页换肤和表单校验等方面。其简约，雅致的代码风格，改变了JavaScript程序员的设计思路和编写程序的方式。
2. jQuery的用途
   访问和操作DOM元素
   控制页面样式
   对页面事件的处理
   方便地使用jQuery插件
   与Ajax技术的完美结合
3. jQuery的优势
   体积小，压缩后只有100KB左右
   强大的选择器
   出色的DOM封装
   可靠的事件处理机制
   出色的浏览器兼容性
   使用隐式迭代简化编程
   丰富的插件支持

配置jQuery环境

1. 进入jQuery官网：http://jquery.com

2. jQuery库类型说明

3. 在页面中引入jQuery

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

jQuery语法

编写第一个jQuery程序

<script>
     $(document).ready(function() {
        
    });
</script>

window.onload() 与 $(document).ready(); 的区别

1. window.onload() 必须等待网页中所有内容加载完毕后才执行（包括图片），一个页面最多只能包含一个。
2. $(document).ready() 网页中所有dom结构绘制完毕后就执行，可能dom元素关联的东西并没有加载完，一个页面可以多次使用。
3. $(document).ready(function() {}) 还可以简写为 $(function() {});

jQuery语法结构

语法:

$(selector).action() ;

1. 工厂函数$()：
   将DOM对象转化为jQuery对象
2. 选择器 selector：
   获取需要操作的DOM 元素
   语法:

$ (selector)

使用show( )、hide( ) 方法设置元素的显示和隐藏
语法：

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

3. 方法action()：
   jQuery中提供的方法，其中包括绑定事件处理的方法
   使用addClass( )方法为元素添加样式
   语法：

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

使用css( )方法设置元素样式
语法：
css(“属性”,“属性值”) ;
css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) ;

jQuery 程序的代码风格

1. “$”的使用

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

“$”等同于“ jQuery ”

2. 链式操作
3. 隐式迭代
4. 添加注释

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

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"); 
var $txtName =$(txtName);  

jQuery对象命名一般约定以$开头
在事件中经常使用 $(this)，this是触发该事件的对象

jQuery对象转DOM对象

1. jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName"); 
var txtName =$txtName[0]; 

2. 通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName"); 
var txtName =$txtName.get(0);