第十四章 初识jQuery

本章目标

能够搭建jQuery开发环境

使用ready( )方法加载页面、掌握jQuery语法

（1）使用addClass( )方法和css( )方法为元素添加CSS样式

（2）使用next( )方法获取元素

（3）会使用show( )和hide( )显示和隐藏元素

一、jQuery简介

jQuery由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

二、jQuery能做什么

（1）访问和操作DOM元素

（2）控制页面样式

（3）对页面事件进行处理

（4）扩展新的jQuery插件

（5）与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

三、jQuery的优势

（1）体积小，压缩后只有100KB左右

（2）强大的选择器

（3）出色的DOM封装

（4）可靠的事件处理机制

（5）出色的浏览器兼容性

（6）使用隐式迭代简化编程

（7）丰富的插件支持

四、jQuery库文件开发版和发布版

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>（在页面中引入jQuery）

五、jQuery基本语法

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

六、jQuery语法结构

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

事件action()：jQuery中提供的事件

七、jQuery操作页面元素

（1）使用addClass( )方法为元素添加样式

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

示例：$("#current").addClass("current");  

（2）使用css( )方法设置元素样式

css("属性","属性值") ;（设置一个css属性）

css({"属性1":"属性值1","属性2":"属性值2"...}) ;（同时设置多个css属性）

示例：$(this).css("background","#c81623");

（3）使用show( )、hide( ) 方法设置元素的显示和隐藏

$(selector).show( );

$(selector).hide( );

$(".nav-top").show( );

$("p").hide( );

八、jQuery代码风格

$(document).ready()=jQuery(document).ready()

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

链式操作

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

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

隐式迭代

 $(document).ready(function() {    

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

  });

添加注释

九、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对象

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

var $txtName =$ ("#txtName");

var txtName =$txtName[0];

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

var $txtName =$("#txtName");

var txtName =$txtName.get(0); 

十、总结