内容回顾
-
JS开发步骤
- 确定事件（onclick鼠标点击事件，onsubmit表单的提交事件，onload页面加载完成事件）
- 定义函数实现功能
- 获取标签的控制权, 修改标签样式和属性
-
BOM(Broswer Object Model,浏览器对象模型)
- window: 浏览器中的窗口
特点：API调用不需要书写window
三个框：警告框alert(), 确认框confirm(), 对话框prompt()
五个函数：
setInterval(“函数调用”,ms)周期性的计时器
setTimeout(“函数调用”,ms)一次性的计时器
对应上面两个函数的清除函数
clearInterval(ID)
clearTimeout(ID)
open()打开新的窗口访问地址 - location: 浏览器的地址栏
属性：href 改变浏览器地址栏的值
location.href = "URL" - history: 浏览器历史记录
- screen: 浏览器显示的屏幕
- navigator: 浏览器的信息
- window: 浏览器中的窗口
JS常用事件
== onclick 点击事件 ==
==ondblclick双击事件==
==onload 页面加载==
==onsubmit 表单提交事件==
==onchange 下拉列表改变==
==onfocus 获得焦点==
==onblur 失去焦点==-
JS的DOM模型
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
==document对象：表示文档在内存中的树状图==
==Element 对象：表示所有的标签==
==Attribute对象：标签中的所有的属性==
常用的API:- 获得元素
document.getElementById()通过ID获得标签
document.getElementsByName()通过name属性获得一组标签
document.getElementsByTagName()通过标签名称获得一组标签 - 创建元素
document.createElement(名字)
document.createTextNode(文字) - 添加元素
父标签.appendChild(子标签)
element.insertBefore(新标签,之前的标签)某个标签前添加新标签 - 删除元素
父标签.removeChild(子标签)
- 获得元素
-
内置对象
数组定义
var arr = new Array(length)
var arr = [];
arr = [1,2,3,”aaaa”];
==特点：js数组长度可变并且类型不固定==
String 类似Java全局函数
parseInt("")将字符串转换成整数
parseFloat("")将字符串转换成数字
eval("JS代码");执行JS代码
今日重点
- jQuery的作用:对于JS的封装，实现动态效果
- ==jQuery对象与JS对象相互转换==
- ==jQuery的选择器==
- ==jQuery对文档的操作==
- ==jQuery对元素的循环遍历==
要求：
01- 案例一：使用JQ定时弹出广告：需求和JQ的概述
- 什么是jQuery？
是JS的框架，集成封装了JS的功能模块，快速的实现网页的交互 - 怎么查询Jquery的文档？
jQuery1.11.0_20140330.chm
02- 案例一：使用JQ定时弹出广告：JQ的入门及JS对象和JQ对象的转换
-
怎么使用jQuery?
- 引入jQuery的包（后缀名.js）
<script src="../../js/jquery-1.11.3.min.js"></script> - 使用JQ对象
表示当页面加载完成之后执行代码：
$(function(){ JQ语句 })
功能类似
window.onload=function(){ }
- 引入jQuery的包（后缀名.js）
-
JS对象与JQ对象相互转换
- JS对象转换成JQ对象
// JS对象 var ele = document.getElementById(id); // JQuery对象 $(ele); - JQ对象转换成js对象
$() 获得的对象都是JQ对象
使用$()[0]或者$().get(0)转换成js对象
- JS对象转换成JQ对象
03- 案例一：使用JQ定时弹出广告：JQ的效果函数的概述
- JQ中三种显示隐藏的方法：
-
show()显示/hide()隐藏 -
slideDown()向下滑动/slideUp()向上滑动 -
fadeIn()淡入/fadeOut()淡出
-
- 使用有四种方式（都类似）：
Jq对象.fadeOut();Jq对象.fadeOut(“slow”); // slow,normal,fastJq对象.fadeOut(毫秒值); // 1000Jq对象.fadeOut(毫秒值,function(){});
04- 案例一：使用JQ定时弹出广告：代码实现
- 创建一个HTML的页面.
- 在页面中创建一个广告部分的DIV,并且设置DIV是隐藏的.
- 设置定时操作,5秒钟执行一个显示的方法.
setInterval()或者setTimeout()设置定时
执行完成后清除clearInterval()或者clearTimeout()
显示：show()/slideDown()/fadeIn() - 再设置一个定时,5秒钟执行一个隐藏的方法.
setInterval()或者setTimeout()设置定时
执行完成后清除clearInterval()或者clearTimeout()
显示：hide()/slideUp()/fadeOut()
05- 案例一：使用JQ定时弹出广告：总结：JQ的选择器-基本选择器
JQ强大的选择器提供操作便利（类比CSS当中的选择器去记忆）
- 基本选择器
- id选择器: 用法:$("#id")
- 类选择器: 用法:$(".class")
- 元素选择器: 用法:$("div")
- 通配符选择器: 用法:$("*")
- 并列选择器: 用法:$("选择器名称, 选择器名称")
06-案例一：使用JQ定时弹出广告：总结：JQ的选择器-层级选择器
- 层级选择器
- 后代选择器：使用空格" " 所有后代包含孙子及以下的元素
$("body div")选中body中所有的div标签 - 子元素选择器：使用">" 第一层的元素（儿子）
$("body > div")选中body中直接包含的div - 下一个元素: 使用"+" 下一个同辈元素
$("#three + div")选中ID为three的标签的后一个div - 兄弟元素:使用"~" 后面所有的同辈元素
$("#two ~ div")选中ID为two的后面所有同一级的DIV
- 后代选择器：使用空格" " 所有后代包含孙子及以下的元素
07-案例一：使用JQ定时弹出广告：总结：JQ的选择器基本过滤及内容选择器
- 基本过滤选择器
- ：first 选中第一个
- ：last选中最后一个
- ：not（选择器） 取反
- ：eq(index) 选中下标等于某个
- ：gt(index)选中下标大于某个
- ：lt(index)选中下标小于某个
- ：even选中所有偶数个（下标从0开始）
- ：odd选中所有奇数个（下标从0开始）
- 内容过滤选择器
-
$("div:contains('1')")选中div中内容含有1的div标签
-
08-案例一：使用JQ定时弹出广告：总结：JQ的选择器-属性选择器
- 属性选择器
-
[attribute]包含某个属性 -
[attribute=value]包含某个属性且值等于value -
[attribute!=value]包含某个属性且值不等于value -
[attribute^=value]包含某个属性且值以value开始 -
[attribute$=value]包含某个属性且值以value结束的 -
[attribute*=value]包含某个属性且值中包含value这个字符 -
[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用
-
09-案例一：使用JQ定时弹出广告：总结：JQ的选择器-表单及表单属性选择器
- 表单选择器
-
:input包含所有表单元素 :text:password:radio:checkbox:submit:image:reset:button:file:hidden
-
$(":text")表示选中表单type=“text”的所有input表单标签
- 表单属性选择器
:enabled:disabled:checked:selected
10-案例二：使用JQ完成表格的隔行换色：需求、分析及代码实现
- 挑选选择器：
$(“tr :odd”)/ $(“tr :even”) - 改变标签的样式
改变某一个样式：
JQ对象.css(样式属性，样式值)
改变多个样式组成的class
JQ对象.addClass(Class名称)
移除某个class样式
JQ对象.removeClass(Class名称)
11-案例三：使用JQ完成复选框的全选和全不选：需求和分析
- 添加属性
attr()/prop()- 使用方法一：$(“”).prop(“src”);
- 使用方法二：$(“”).prop(“src”,”test.jpg”);
- 使用方法三：$(“”).prop({src:”test.jpg”,width:”100”});
- 删除属性
removeAttr(属性名)/removeProp(属性名) - 设置标签体
html() - 设置文本:
text() - 获得value属性值:
val()
12-案例三：使用JQ完成复选框的全选和全不选：代码实现
// 简化：
$("#selectAll").click(function(){
// this表示当前被选中的对象（也就是全选按钮）
$(":checkbox[name='ids']").prop("checked",this.checked);
});
13-案例三：使用JQ完成省市联动的效果：需求和JQuery的文档操作
- 添加元素
-
append();---在某个元素后添加内容. -
appendTo();---将某个元素添加到另一个元素后. -
remove();---将某个元素移除.
-
14-案例三：使用JQ完成省市联动的效果：JQ的元素遍历
遍历元素
// 遍历的方式一：
$.each(objects,function(i,n){
});
// 遍历的方式二:
$(“”).each(function(i,n){
});
注意：i表示下标，n表示对应下标的对象
15-案例三：使用JQ完成省市联动的效果：代码实现
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function(){
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍历并且判断:
$.each(cities,function(i,n){
// 判断:
if(i == val){
$(n).each(function(j,m){
// alert(j+" "+m);
$city.append("<option>"+m+"</option>");
});
}
});
});
今日总结
-
什么是jQuery, 它有什么作用？怎么使用?
jQuery是一个JS的框架，封装了JS的操作（加强版的JS）
优势：它提供了快速查询DOM文档中元素的能力，大大强化了JS中获取页面元素的方式。
作用：实现漂亮的页面动态效果, jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，比如淡入淡出、元素移除等动态特效。- 引入JQ的包（xxx.js）
- 书写JQ代码
$(function(){ JQ代码 })
-
==JS与JQ的相互转换==
- 将JS转换成JQ对象
$(js对象) - 将JQ对象转换成JS对象
JQ对象.get(0)/JQ对象[0]
JQ对象调用API返回的永远是JQ对象
- 将JS转换成JQ对象
-
==JQ选择器==
- ==基本选择器==
- ID选择器
$(“#ID”) - CLASS选择器
$(“.class”) - 元素选择器
$(“元素名称”) - 通配符选择器
$(“*”) - 并列选择器
$(“selector1,selector2……”)
- ID选择器
- ==层级选择器==
- 兄弟选择器
$(“selector + selector”)选择同辈的下一个元素 - 选择同辈中往后所有的元素：
$(“selector ~ selector”) - 子元素选择器：
$(父选择器 > 子选择器) - 后代选择器：
$(父选择器 子选择器)
- 兄弟选择器
- 基本过滤选择器
-
：first选择第一个 -
：last选择最后一个 -
：eq(index)选择下标为index的元素 -
：odd/:even注意：下标从0开始
-
- 属性选择器
$(“input[属性名=’属性值’]”) - 表单选择器(了解)
：input
:text/:password/:radio/:checkbox……
- ==基本选择器==
JQ对文档的操作(DOM的crud)
JQ.append()追加元素
JQ.appendTo(父元素)将元素追加到父元素
JQ.remove()删除元素-
元素循环遍历
// 方式一 $.each(数组,function(i,n){ i表示下标 n表示数组元素 }); // 方式二 $(数组).each(function(i,n){ i表示下标 n表示数组元素 });
image.png
