主　讲：张坤 EMAIL ：zk2dxy@qq

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

jQuery • Javascript优秀的框架——jQuery • 什么是框架？框架是一种在软件开发中可以重复使用的设计构件（程序的骨架） • jQuery的官网：http://jquery.com/ • 口号：write less, do more——多做少写 • 特点：简洁快速 • 学习jQuery之前，所需要掌握的基础知识： • (x)HTML、CSS、Javascript 、DOM

jQuery • 学习提纲： • jQuery的引入 • jQuery的选择器 • jQuery的CSS操作方法 • jQuery的class操作方法 • jQuery的内容操作方法 • jQuery对象的循环操作 • jQuery的事件驱动 • 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标签增加相应事件传统JS代码 <script> function my_func() { alert("链接的点击响应事件"); } </script> <a href="#" onclick="my_func();">普通链接</a> jQuery代码 <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>

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

类似：CSS里的选择器 jQuery 2、jQuery的选择器(selector) ——$( ) • $()返回的是全新的对象—— jQuery 对象(jQuery object) • jQuery的$选择器： • 元素选择器 • ID选择器 • CLASS类选择器 • Xpath路径选择器

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 • 学习提纲： • jQuery的引入 • jQuery的选择器 • jQuery的CSS操作方法 • jQuery的class操作方法 • jQuery的内容操作方法 • jQuery对象的循环操作 • jQuery的事件驱动 • 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代码定义的效果 css代码 .newsList{ color:blue; font-size:25px; }

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的动画特效 <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> • animate <script> var time = 2000; //全局变量 var my_timer; //本程序所用的定时器变量 $(function(){ $("#start").click(function(){ $("div").animate({width:400, height:400}, time); //在time时间内修改100个数字的变化，每次变化的时间间隔是多少t var 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> <div>1</div> <input type="button" value="start" id="start">

主　讲：张坤 EMAIL ：zk2dxy@qq