- 1 - jq 常用方法
1.选择器：使用选择器来定位元素，可以使用类、ID、属性等选择器。
2.事件处理：使用事件处理函数来处理用户的行为，例如单击、鼠标悬停等。
3.样式操作：使用CSS样式操作来改变元素的外观，例如改变颜色、背景等。
4.属性操作：使用属性操作来读取或设置元素的属性，例如设置表单的值、获取图片的地址等。
5.DOM操作：使用DOM操作来动态地更新或添加元素，例如创建新的元素、删除元素等。
6.Ajax异步请求：使用Ajax来与服务器进行数据交互，例如获取数据、提交表单等。
7.动画效果：使用动画效果来为元素添加过渡效果，例如淡入淡出、滑动等。
8.插件扩展：使用第三方插件来扩展jq的功能，例如轮播图、图片放大等。
9.表单验证：使用表单验证插件来验证用户输入的数据，例如验证手机号码、邮箱等。
10.工具方法：使用工具方法来简化代码，例如遍历对象、数组等。
《jq》(完美精品课件
一、教学内容
本节课我们将深入学习《jq》教材的第3章“事件处理”和第4章“动画效果”。具体内容包括：事件处理的基本概念、常用事件类型及其使用方法；动画效果的分类、实现原理以及常用动画函数的运用。
二、教学目标
1. 理解并掌握事件处理的基本概念和常用事件类型。
2. 学会使用动画效果，能够实现页面元素的动态展示。
3. 培养学生的动手实践能力和问题解决能力。
三、教学难点与重点
教学难点：事件处理机制的理解，动画效果的实现原理。
教学重点：常用事件类型的运用，动画函数的使用。
四、教具与学具准备
1. 教具：计算机、投影仪、黑板。
2. 学具：教材、笔记本电脑、网络。
五、教学过程
1. 导入：通过展示一个实践情景（如：一个动态变化的菜单），引发学生对事件处理和动画效果的兴趣。
2. 知识讲解：
1) 事件处理：介绍事件处理的基本概念，讲解常用事件类型（如：click、mouseover、mouseout等）及其使用方法。 2) 动画效果：介绍动画效果的分类（如：淡入淡出、滑动、缩放等），讲解动画效果的实现原理以及常用动画函数（如：slideDown、slideUp、fadeIn、fadeOut等）的运用。
3. 例题讲解：结合实践情景，演示如何使用事件处理和动画效果制作一个动态菜单。
4. 随堂练习：让学生分组练习，每组制作一个具有不同动画效果的页面元素。
六、板书设计
1. 事件处理：
基本概念
常用事件类型
2. 动画效果：
分类
实现原理
常用动画函数
七、作业设计
1. 作业题目：制作一个具有动画效果的轮播图。
2. 答案：
1) HTML结构：
第十四讲JqMobi+PhoneGap项目实战 jqMobi Ui jqMobi
插件 快速入门(2)
学习要点：
1. jqMobi快速入门
2. jqMobi Ui
3. jqMobi 插件
主讲教师：（树根）
合作网站：(PhoneGap中文网)
一、 jqMobi快速入门
1. 使用前的准备
2. jqMobi选择器
$(“#foo”); //获取 id=“foo”的元素
$(“div”); //获取所有div的元素
$(“.foo”); //获取 classname =“foo”的元素
$(“#foo span”); //获取 id=“foo”元素下面的所有span元素
3. jqMobi常用方法
$(“li”).addClass(“foo”);
$(“#foo”).hide();
$(“.removeme”).remove();
更多的方法看demo
二、 jqMobi Ui
1．页面布局
1.UI container
这里面是写的内容
2. Content Area
这里写的是panel
3. panels 是jqMobi的核心 可以有多个
在这个里面写我们的对应内容
4. Jqmobi中 header footer的使用 1.panel中单独的header和footer
对应页面的内容
About
2. 公用的header和footer 可以在多个panel中调用
data-header="custom_header">
对应页面的内容
About
3.另一种定义头部底部的方法
//头部
Toggle Side Menu
内容
//底部
Home
data-header="custom_header" data-nav="main_nav">
黑马程序员JavaEE就业班同步笔记Web前端技术：Jquery
JavaScript:
* JavaScript:基本使用:
* ECMAScript:
* 变量：弱变量类型: var i;
* 数据类型:原始类型和引用类型.
* 语句
* 运算符
* 对象:
* String,Boolean,Date,Math,Number,正则...
* 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()
* BOM:浏览器对象.
* window:
* Navigator:
* Screen:
* History:
* Location:
* DOM：文档对象.
* 获得元素:
*
document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
* 添加元素:
* element.appendChild(),element,insertBefore();
* 删除元素:
* element.removeChild();
* 创建元素:
* document.createElement(),document.createTextNode();
* 修改元素值:
* innerHTML属性:
JQuery语法
一：jQuery选择器
jQuery选择器可分为基本选择器和过滤选择器
基本选择器又分为CSS选择器，层级选择器以及表单域选择器。
CSS选择器
1 id选择器
用于选择具有给定id属性值的单个元素。
//选择id为myid的元素并对其边框样式进行设置。
$("#myid").css("border","3px solid red");
2 类选择器
用于选择具有给定类的所有元素。
//选择具有给定类的所有元素。
$(".myClass").css("border","3px solid red");
3 元素选择器
用于选择具有给定HTML标记名的所有元素。
//选择文档中的所有div元素。
$("div");
4 群组选择器
用于所有指定的选择器组合的结果。
//选择文档中的所有div，span以及应用myclass类的p元素。
$("div,span,p.myclass);
5 通用选择器
用于从文档中获得所有元素。
//下列代码用于选择所有元素，然后显示出当前页面中的元素总和。
var elementCount=$("*").length;
$("body").prepend("
当前页面中共有"+elementCount+"个元素。
"); 层级选择器
1 子元素选择器
在给定的父元素下查找所有的直接子元素。
//选择父元素
下的直接子元素(li)并对其边框进行样式设置。
$("ul.topnav>li").css("border","3px double red");
2 后代元素选择器
在给定的祖先元素下查找所有的后代元素。
//用于选择表单下的所有后代元素并对其边框样式进行设置。
$("form input").css("border","2px dotted blue");
3 紧邻同辈元素选择器
用于选择紧跟给定元素之后的那个同辈元素。
用户名：
Email:
