【期末复习】js dom jq html5

一、JavaScript
- 基本语法
- - 数据的定义
  - 函数
  - - 预定义函数
    - 自定义函数
  - 运算符
  - with语句
- JavaScript对象
- - Array
  - - 定义
    - 属性
    - 数组对象的常用方法
  - String字符串对象
  - - 定义
    - string和String的区别：
  - Date日期对象
  - - 定义
  - Math数学对象
  - 自定义对象（JSON方式）
二、BOM与DOM
- window 对象
- - window的常用方法
- location对象
- - location对象的方法
- history对象
- - history对象的方法
- navigator对象
- document对象
- - write()和writeln()方法
  - getElementById()方法
  - getElementByName()方法
  - getElementByTagName()
  - getElementByClassName()
  - querySelector()
- Form对象
- Table对象
- DOM节点
三、JQuery
- - 引入JQuery库
- 一、DOM对象和jQuery对象
- 二、jQuery选择器
- - 1.基本选择器
  - 2层次选择器
  - 3过滤选择器
  - 4表单选择器
- jQuery基本操作
- - 一、属性操作
  - 二、样式的操作
  - 三、内容操作

一、JavaScript

基本语法

在<script> HTML元素中放置JavaScript代码
正确位置是在<body>和<head>部分均可

数据的定义

var x = 30;
var a,b;
alter(typeof x); //输出 x的类型 ---- “number”
x = "hello";
alter(typeof x); //输出 x的类型 ---- “string”

函数

预定义函数

parseInt(string,[index]);//解析字符串，从中返回一个整数
pareseFloat();//解析字符串，返回浮点数
isNaN(val);//返回是否是数字 , val 是参数
eval(string);//将字符串作为脚本代码执行

对话框函数

alter();//显示一个提醒对话框，包含一个OK按钮
confirm();//显示一个确认对话框，包含一个OK按钮和1个Cancel
prompt();//显示一个输入对话框，提示用户输入

自定义函数

命名函数

function f(x){ //x是参数
	//code here
}

匿名函数

function(x){ //x是参数
	//code here
}
//样例
var f = function(user){
	alter(user);
}
f("x");
var test = f;
test("x");
//以上调用完全一致

对象函数的定义

var f = new Function([,,,,,],code);

自调用函数

var u = "x";
(function(x){
	alter(x);
})(u);

运算符

可以参考c和java，包括注释的方式单行：// 多行：/*......*/

with语句

with(document){
	write("<table border = '1'>");
	write("<tr>");
	write("</tr>");
	//。。。。。。。。。
}

JavaScript对象

Array

定义

new Array();new Array(size);new Array(1,2,3,4,5[.....]);

属性

constructor :返回对创建对象的构造函数的应用
length: 返回数组的长度
prototype: 为对象添加属性和方法

数组对象的常用方法

是用方法：数组名.方法名

concat()//用于连接两个或者多个数组
join()//用于吧数组中的所有元素放入一个字符串，并用指定的分隔符隔开
push()//在数组的末尾添加一个或多个元素
pop()//删除并返回最后一个元素
shift()//删除并返回第一个元素
reverse()//在原有的基础上，颠倒数组
slice()//返回指定的元素
sort()//排序
splice()//添加或者删除一个元素，返回被删除元素
unshift()//在开头添加一个或者多个，返回新的数组长度

String字符串对象

定义

' 和 "均可生成字符串

var x = "aadsad";var y = 'dasdsdas';

new 方式

var x = new String("adsasda");//类型为String对象var y = String("asdsadsad"); //类型为string类型

string和String的区别：

String 是string的包装类
string是一种基本的数据类型，没有提供substring()等方法
string没有提供prototype原型对象，而String对象有。
使用typeof()函数查看类型时，string返回string，String对象返回Object，String返回function
使用== 比较时，string判断值是否相等，而String对象则判断是否同一对象进行引用
生命周期不同，new创建的对象一直存在，而string类型自动生成的会在代码执行后自动销毁

Date日期对象

定义

new Date();new Date(num); //num是1970年1月1日凌晨到目标时间的毫秒数new Date(y,m,d);new Date(y,m,d,h,m,s);new Date(m/d/y h:m:s);new Date(m d,y);new Date(m d,y h:m:s);

Math数学对象

同java

自定义对象（JSON方式）

方式：原始方式，构造函数方式，原型方式，混合方式，JSON方式

直接上样例：

var goods = {	name: "男士衬衣",	type:"男装",	price:200,	color:"白色",	showInfo:function(){		alert(this.name+this.type+this.price+this.color);	},	showcolor:function(){		alert(this.color);	}}//方法调用goods.showInfo();goods.showcolor();

二、BOM与DOM

window 对象

在JavaScript中，window对象是全局对象，所有表达式都在当前的环境中进行计算，在使用窗口属性和方法时，允许以全局变量或系统函数的方式来使用，例如window.document可以简写成为document的形式

window的常用方法

open(url,name,features,replace)/*打开一个新的窗口,均为可选参数，replace为true创建新的历史记录，否则替换旧的历史记录*/close()//关闭当前界面setTimeout(code,time)/*计时器，在指定时间间隔后调用函数或计算表达式，仅运行一次*/
clearTimeout(id_of_timeout)//清空指定计时器的计时setInterval(code,time)/*都是必须参数没经过time的时间，调用一次表达式，time（以毫秒计时）*/

location对象

location对象是window对象的子对象，用于提供当前窗口或者指定框架的URL地址。

示例：改变页面url 的方法：

location.href = "http://www.baidu.com";location = "http://www.baidu.com";

location对象的方法

assign(url)：加载一个新的文档
reload(force)：重新加载当前文档。参数缺省时默认为false，false时候，从缓存区中装载文档，true时，从服务器端口重新加载文档
replace(url)：使用一个新的文档取代当前文档，且不会再history对象中生成新的记录

history对象

history对象用于保存用户在浏览网页时候访问URL的地址，history对象中的length属性表示访问历史记录的数量，JavaScript不允许通过history对象获取已经访问过的URL。

history对象的方法

history.go(-1);//后退history.back();//后退history.go(1);//前进history.forward();//前进

navigator对象

navigator对象包含浏览器相关信息包括浏览器名称版本号等

document对象

整体上分为两个大类：

对文档流的操作
对文档元素的操作

write()和writeln()方法

基本相同，区别是writeln()会在每次输出后额外加一个换行符

getElementById()方法

返回指定的ID元素。在当前界面有多个ID相同的元素时候，只返回第一个符合条件的元素

getElementByName()方法

用于返回指定name属性的元素的集合。

getElementByTagName()

返回指定标签名元素的集合，当参数为*时候返回所有的标签元素

getElementByClassName()

返回指定class属性的元素集合

querySelector()

返回指定的CSS选择器的元素

Form对象

是document对象的子对象，通过form对象可以实现表单验证等效果。

语法：

document.表单名称.属性
document.表单名称.方法(参数)
document.forms[索引].属性
document.forms[索引].方法(参数)

方法名：

submit() 表单数据提交到web服务器
reset() 对表单的元素进行重置

Table对象

DOM节点

三、JQuery

引入JQuery库

<script type="text/javascript" src="js/jquery.1.x.js"></script>

在引入Jquery库之后，通过$()函数获取界面中的元素即$("mydiv") 等价于jQuery("mydiv")

一、DOM对象和jQuery对象

示例，将DOM对象装成jQuery对象然后调用jquery对象的方法

var domObject = document.getElementById("mydiv");
var jqueryObject = $(domObject);

二、jQuery选择器

四大类选择器：

基本选择器
层次选择器
过滤选择器
表单选择器

1.基本选择器

基本选择器最常用的选择器 ，通过元素的id,className或者tagName来查找页面中的元素

ID是元素的唯一标识，不能重复，所以ID选择器返回单个jQuery对象；而calss属性用于设定元素的样式，允许多个元素使用同一样式，所以calss选择器返回一个jQuery对象类型的数组。

$("#id_div").css("color","blue");//根据ID属性进行匹配 返回单个jQuery对象
$(".classDiv").css("background-color","#000000");//根据class属性进行匹配 返回对象数组
$("span").css("font_size","20px");//根据元素标签名属性进行匹配 返回对象数组
$("*").css();//当前界面所有元素
$("#id_div,.classDiv").css();//多种匹配，","隔开

2层次选择器

通过各国DOM对象的层次关系来获取特定的元素，如 同辈元素 ，后代元素 ，子元素 和相邻元素 等。用法与基本选择器类似，返回均为jQuery对象数组。、

后代选择器

格式：父元素指定元素 （空格隔开）

选择父元素的所有指定元素（包括第一代，第二代等等）。
```
$("父元素 指定元素")
```
子代选择器

格式：父元素 > 指定元素 （>隔开）

选择父元素的所有第一代的指定元素。
```
$("父元素 > 指定元素")
```
相邻选择器

格式：元素 + 指定元素 （+隔开）

选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则取不到，相互之间必须是挨着的）。
```
$("元素 + 指定元素")
```
同辈选择器 ，

格式：元素 ~ 指定元素 （~隔开）

选择元素下面的所有指定元素。
```
$("父元素 ~ 指定元素")
```

3过滤选择器

可以满足大部分页面元素的选取需求

简单过滤选择器

$(table tr:first)//first样例 选取第一个元素
:last//选取最后一个元素
:even //索引值为偶数的元素，从0开始计数
:odd //索引值为奇数的元素，从0开始计数
:foucs//选取获取焦点的元素
:root//获取文档的根元素
:animated//选取正在执行动画效果的元素
:eq(index)//选取索引等于index的元素
:gt(index)//选取索引大于index的元素
:lt(index)//选取索引小于index的元素
:not(selector)//选取selector以外的元素

内容过滤选择器

:contains(text)//选取包含text内容的元素
:has(selector)//选取含有selector所匹配的元素
:empty//选取不包含文本或者子元素的空元素
:parent//选取含有子元素或文本的元素

可见性过滤选择器

:hidden//选取所有不可见元素 或者type为hidden的元素
:visible//选取所有可见的元素

属性过滤选择器

以"[" 开始以"]" 结束

[attribute]//选取包含指定属性的元素
[attribute = value]//选取属性等于某个特定值的元素
[attribute != value]//选取属性不等于某个特定值的元素
[attribute ^= value]//属性以某个值开始的元素
[attribute $= value]//属性以某个值结尾的元素
[attribute *= value]//包含
[attribute1][ attribute2][ attribute3]//复合属性

子元素过滤选择器

见书p421

表单对象属性过滤选择器

:enabled//属性为可用的元素
:disabled//不可用的元素
:checked//被选中的元素（单选按钮，复选框）
:selectd//被选中的元素（下列列表）

4表单选择器

表单选择器可能够让用户更加方便的处理表单数据，通过表单选择器可以快速定位到某类表单的对象。

详见书上p424。

jQuery基本操作

以下操作只能在jQuery中操作

一、属性操作

attr()和prop()

区别：

如果是固有属性，attr()和prop()方法均可获取
如果是自定义属性，只有attr()可以获取
如果返回的是Boolean类型的属性：

若设置了属性，attr()返回具体的值，prop()返回true

若设置了属性，attr()返回undefinded，prop()返回false

$("img").attr("src")
$("#myImg").attr("src")
$("#myImg").attr("src","xxx/xxx.png")//设置myimg的src属性
$("#myImg").attr({src:"xxx/xxx.png",title:"dsadsas"});
$("#myImg").attr("title",function(){return this.src });

获取属性

attr(属性名)

prop(属性名)

$("#checkbox").attr("checked");//checked  undefinded
$("#checkbox").prop("checked");//true false

设置属性
移除属性

removeAttr(属性名)

removeProp(属性名)

二、样式的操作

通过class属性指定的HTML标签的样式名方法为：attr("class") addClass()删除：removeClass()

方法：

除去以上

toggleClass()

$("#checkbox").toggleClass(className)
$("#checkbox").toggleClass(className,true/false)//true时样式允许切换

css()

$("#checkbox").toggleClass(属性名)
$("#checkbox").toggleClass(属性名,属性值)
$("#checkbox").toggleClass(样式)
$("#checkbox").toggleClass(属性名,function(元素索引位置,修改之前的属性值))

三、内容操作

html()

html()//获取元素内容，包含HTML标签（非表单元素）
html("内容")//设置元素内容，包含HTML标签（非表单元素）

text()

text()//获取元素纯文本内容，包含HTML标签（非表单元素）
text("内容")//设置元素纯文本内容，包含HTML标签（非表单元素）

val()

val()//获取元素的值，（表单元素）
val("内容")//设置元素的值，（表单元素）