主　讲：张坤EMAIL ： zk2dxy@qq.com

jQuery

jQuery

Javascript 优秀的框架—— jQuery 什么是框架？框架是一种在软件开发中可以重复使用的设计构件

（程序的骨架）

jQuery 的官网： http://jquery.com/ 口号： write less, do more—— 多做少写 特点：简洁快速

学习 jQuery 之前，所需要掌握的基础知识： (x)HTML 、 CSS 、 Javascript 、 DOM

jQuery

学习提纲：1. jQuery 的引入2. jQuery 的选择器3. jQuery 的 CSS 操作方法4. jQuery 的 class 操作方法5. jQuery 的内容操作方法6. jQuery 对象的循环操作7. jQuery 的事件驱动8. jQuery 的常见特效

jQuery

1 、 jQuery 的引入 第一步： http://jquery.com/download/

下载 jQuery.js

第二步：在 HTML 文件中引入该文件<script src="jquery.js"></script>

jQuery

1 、 jQuery 的引入 第三步： Hello jQuery 代码

$(document).ready(function() { // 当文档载入后从此处开始执行代码 alert(' 文档加载完毕 ');});

没有名字的函数——匿名函数

function start_func() { alert(' 文档加载完毕 ');}$(document).ready(start_func);

JS 中函数也是对象：· 函数名 = 对象名；· 函数体 = 对象内容；

jQuery

初识 jQuery—— 将 JS 代码从 HTML 中分离 将页面中的 A 标签增加相应事件

<script>function my_func() { alert(" 链接的点击响应事件 ");}</script><a href="#" onclick="my_func();"> 普通链接 </a>

<script src="jquery-1.4.3.min.js"></script><script>$(document).ready(function(){ $("#my_link").click(function(){ // 给 id 为 my_link 的对象增加了 click 点击事件 alert(" 链接的点击响应事件 "); });});</script><a href="#" id="my_link"> 普通链接 </a>

传统 JS 代码

jQuery 代码

课堂练习

参考上一页的 jQuery 给链接增加点击响应事件的代码，编写一个可以在 10 以内计数的点击事件；

jQuery

2 、 jQuery 的选择器 (selector) ——$( ) $() 返回的是全新的对象—— jQuery 对象 (jQuery object)

jQuery 的 $ 选择器： 元素选择器 ID 选择器 CLASS 类选择器 Xpath 路径选择器

类似： CSS 里的选择器

jQuery

2.1 、 $(" 元素名称 ")——选择所有指定元素的对象 返回的结果是符合指定元素名的 DOM 对象组成的数组；

课堂练习

通过 jQuery 的“标签选择器”输出如图所示的“ email” 、“地址”的值： 可先用 onclick 事件方法编写函数

jQuery

2.2 、 $("#idname")—— 选择 ID 为 idname 的对象 返回的是 jQuery 的对象，只能用 jquery 语法调用 DOM 属性；

/* * 获得 jQuery 对象属性的 jQuery 语法： */$("#obj_idname").val(); // 获得 DOM 的 value

课堂练习

用 jQuery 的 ID 选择器，检查注册的信息是否正确，要求如下： 账号和密码长度都在 6——20个字符之间； 两次密码的输入必须一致；

jQuery

2.3 、 $(".classname")—— 选择所有类名为 classname的对象 返回的是 DOM 对象数组

小技巧：属性选择器 $(".className:checked") 获得被选中的

课堂练习

用 jQuery 的 class 类选择器，完成下面的功能： 判断“爱好”是否已经选择至少一个； 点击“反选”按钮，将按照相应的选项进行相反的设置；

jQuery

2.4 、 Xpath—— 路径选择器，根据节点路径选择对象 $("父选择器 > 子选择器 ") $("父类选择器 后代选择器 ") 返回的是 DOM 对象数组

注意：多种选择器语法可混合搭配使用—— jquery 选择器的灵活性

课堂练习

将段落中的所有超链接都用黄色底色醒目的标识出来

jQuery

2 、 jQuery 的选择器 (selector)总结

jQuery选择器 说明 等价 HTML的 DOM方法$(“p”) p 标签选择器 document.getElementsByTagName(“p”)

$(“#idname”) ID 选择器 document.getElementById(“idname”)

$(“.classname”) class 类名选择器 无$(“p > a”) xpath 路径选择器 无

jQuery

学习提纲：1. jQuery 的引入2. jQuery 的选择器3. jQuery 的 CSS操作方法4. jQuery 的 class 操作方法5. jQuery 的内容操作方法6. jQuery 对象的循环操作7. jQuery 的事件驱动8. jQuery 的常见特效

3 、 jQuery 的 CSS 操作方法

设置或读取某个 jQuery 对象的单个 CSS 属性： 语法： $(“ 选择器” ).css(“ 属性名” [, “ 属性值” ]);

提示：$(" 选择器 ").width()$(" 选择器 ").height()

课堂练习

用 jQuery 的 CSS 操作方法，去编写如下代码： DIV初始大小为 100px*100px 的正方形； 点击“修改尺寸”按钮后，将 div 的高宽修改为 200px*400px ；

4 、 jQuery 的 class 操作方法

设置或读取某个 jQuery 对象的 class 属性 常可通过 CSS 语句，设置或读取 jQuery 对象的多个 CSS 属性：

语法：$(" 选择器 ").addClass(" 类名 ");$(" 选择器 ").removeClass(" 类名 ");$(" 选择器 ").hasClass(" 类名 ");

按照如下效果编写代码： 新闻列表默认如图所示；

点击“改变样式“后，给所有新闻标题改变显示样式为 CSS 代码定义的效果

课堂练习

.newsList{ color:blue; font-size:25px;}

css 代码

5、 jQuery 的内容操作方法

获得或设置对象的 value 值属性—— $("").val() 获得或设置对象的 innerHTML 属性—— $("").html() 获得或设置对象的 innerText 属性—— $("").text() 获得或设置对象的 attribute 属性—— $("").attr();

① ② ③

①

②

③

课堂练习

用 jQuery 的内容操作方法，完成下列要求： 在 textarea 的输入状态时 (onkeyup) ，及时的统计已输入文字的

数量，显示在“统计字数”的区域里；

6、 jQuery 对象的循环操作

循环遍历 jQuery 选中的对象—— $(" 选择器 ").each(); 常配合特殊的选择器使用——选择当前对象 $(this)

提示：$(":button")$(":text")

课堂练习

计算购物车中所有商品的总价格，显示在“总计”的区域 提示：注意获得输入框 value 值的类型

7、 jQuery 的事件驱动

jQuery 中的事件和 Javascript 中类似，例如： 点击事件： $(" 选择器 ").click();—— 类似 onclcik 鼠标移动： $(" 选择器 ").mouseover()—— 类似 onMouseOver 鼠标移除： $(" 选择器 ").mouseout()—— 类似 onMouseOut 鼠标悬停： $(" 选择器 ").hover() ——mouseOver+mouseOut 获得焦点： $(" 选择器 ").focus()—— 类似 onFocus 失去焦点： $(" 选择器 ").blur()—— 类似 onBlur 键盘弹起： $(" 选择器 ").keyup()—— 类似 onKeyUp

特点： jQuery 中的事件名称中没有 on ； jQuery 中的事件触发，常从 HTML 中剥离；

<a href="#"> 链接 </a><script>$("a").click(function() { alert(" 点击了 ");});</script>

课堂练习

用 jQuery 的鼠标移动和移除事件，给 textarea添加提示效果： 鼠标移动到 textarea 上，清除提示语句；

课堂联系

完成菜单的鼠标悬停反色显示特效：

8、 jQuery 的常见特效

隐藏 /显示： 隐藏—— $(" 选择器 ").hide(); 显示—— $(" 选择器 ").show(); 开关显示—— $(" 选择器 ").toggle();

课堂练习

用隐藏和显示特效，做一个二级导航菜单的显示特效：

二级菜单的原始结构

隐藏了第二级菜单

鼠标悬停第一级后显示下级菜单

课后练习 004-1

写一个登录的校验程序（不用 form ）： “账号”和“密码”都必须填写，且长度为 3——20个字符之间；填写不正确的需要进行提示；

“账号”和“密码”填写的长度符合后，进行校验； 校验原则：“账号”和“密码”分别都为 admin ，则表示登录成功； 登录成功，则隐藏登录区域，并显示已登录区域； 当点击“注销”链接后，隐藏已登录区域，显示登录区域

已登录区域

登录区域

8、 jQuery 的常见特效

淡入 /淡出 淡入—— $(" 选择器 ").fadeIn(); 淡出—— $(" 选择器 ").fadeOut();

课堂练习

用淡入淡出完成下面要求： 页面中有一个 DIV ，尺寸为 200px*200px ；红色背景，无边框； 当在 DIV 的范围内点击时，用淡出的效果，将 DIV隐藏；

8、 jQuery 的常见特效

上卷 / 下卷 /自动开合 上卷—— $(" 选择器 ").slideUp(); 下卷—— $(" 选择器 ").slideDown(); 自动开合—— $(" 选择器 ").slideToggle();

课堂练习

用上卷、下卷、自动开合的特效完成对 DIV 的显示操作

课后练习 004-2

请用节点访问的方法，点击注册按钮校验并显示相应的错误提示

9、 jQuery 的动画特效

animate<script>var time = 2000; // 全局变量var my_timer; //本程序所用的定时器变量

$(function(){$("#start").click(function(){

$("div").animate({width:400, height:400}, time);

// 在 time时间内修改 100 个数字的变化，每次变化的时间间隔是多少 tvar t = Math.ceil(time/100);my_timer = setInterval('chg_num()', t);

});});function chg_num(){

var num = $("div").html();if(num == 100) {

clearTimeout(my_timer);}else{

$("div").html(parseInt(num)+1);}

}</script>

<meta charset="utf-8" /><script src="jquery-1.10.1.min.js"></script>

<style>div{

height:20px;line-height:20px;background:#0000ff;color:white;width:12px;text-align:center;

}</style>

<div>1</div>

<input type="button" value="start" id="start">