5.初识jQuery

初识jQuery

1. 预习检查
   1. 简单描述JavaScript与jQuery的关系
   2. jQuery的语法结构包括哪几部分？
   3. 在jQuery中用于加载文档的方法是什么？
   4. 在jQuery中显示和隐藏HTML元素的方法分别是什么？

 

1. 本章任务
   1. 编写第一个jQuery程序
   2. 制作当当顶部导航
   3. 使用jQuery变换网页效果
   4. 制作广告图片轮播切换效果

 

1. 本章目标
   1. 能够搭建jQuery开发环境
   2. 使用ready( )方法加载页面、掌握jQuery语法
      • 使用addClass( )方法和css( )方法为元素添加CSS样式
      • 使用next( )方法获取元素
      • 会使用show( )和hide( )显示和隐藏元素

 

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

示例：

实现隔行变色效果，只需一句关键代码

$("tr:even").css("background-color","#e8f0f2");

 

1. jQuery的应用

jQuery与其他JavaScript库

• • • jQuery
    • Bootstrap
    • Zepto
    • Ext
    • YUI

 

扫描二维码关注公众号，回复： 8984428 查看本文章

1. jQuery能做什么？
   1. 访问和操作DOM元素
   2. 控制页面样式
   3. 对页面事件进行处理
   4. 扩展新的jQuery插件
   5. 与Ajax技术完美结合

提示：

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

 

1. jQuery的优势
   1. 体积小，压缩后只有100KB左右
   2. 强大的选择器
   3. 出色的DOM封装
   4. 可靠的事件处理机制
   5. 出色的浏览器兼容性
   6. 使用隐式迭代简化编程
   7. 丰富的插件支持

 

1. jQuery库文件
   1. jQuery库分开发版和发布版

1. 1. 在页面中引入jQuery

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

 

1. jQuery基本语法

使用jQuery弹出提示框

示例：

<script>

     $(document).ready(function() {

        alert("我欲奔赴沙场征战jQuery，势必攻克之！");

    });

</script>

 

1. $(document).ready()

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

1. jQuery语法结构

语法：

$(selector).action() ;

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

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

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

 

1. jQuery操作页面元素  
   1. 使用addClass( )方法为元素添加样式
   2. 使用css( )方法设置元素样式
   3. 使用show( )、hide( ) 方法设置元素的显示和隐藏

 

$(function(){
$("tr:even").css("background-color","#e8f0f2");
});

 

 

1. addClass( )方法

语法：

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

示例：

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

1. css( )方法

语法：

css("属性","属性值") ;

css({"属性1":"属性值1","属性2":"属性值2"...}) ;

示例：

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

 

1. 设置元素的显示和隐藏

语法：

$(selector).show( );

$(selector).hide( );

示例：

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

$("p").hide( );

 

1. jQuery代码风格
   1. “$”等同于“ jQuery ”

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

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

1. 1. 链式操作
   2. 隐式迭代

 

1. 链式操作

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

示例：

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

1. 隐式迭代

示例：

 $(document).ready(function() {

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

    });

1. 添加注释

1. DOM模型

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

1. DOM对象和jQuery对象
   1. DOM对象：直接使用JavaScript获取的节点对象

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

var objHTML=objDOM.innerHTML;  

 

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

$("#title").html( );

等同于

document.getElementById("title").innerHTML;

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

 

1. DOM对象转jQuery对象

 使用$()函数进行转化：$(DOM对象)

var txtName =document.getElementById("txtName");

var $txtName =$(txtName);  

注意：

jQuery对象命名一般约定以$开头

在事件中经常使用$(this)，this是触发该事件的对象

 

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

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

var txtName =$txtName[0];

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

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

var txtName =$txtName.get(0);       

 

1. 总结