8. js中的对象
8.1. js中的全局对象介绍
String对象 Date对象
Math对象和Java中的基本一致 RegExp对象,正则对象,正则表达式的书写规则和Java也一致: . 当前可以是任意字符 ? 表示零次或一次 * 表示零次或多次 + 表示一次或多次 () 对某个存在的正则进行分组 组的使用 \组号 $组号 {} 当前的规则可以出现的次数 {2} 正好 2次 {m,} 最少m次 {m,n} 最少m次 最多n [] 当前位置上可以是中括号中某个字符 [abc] [^abc] \\d 当前位置上可以数字 \\w 当前位置上可以是字母 数字 下划线 \b 单词边界 ^ 行开始 $ 行结尾 练习:验证手机号
^[\u4e00-\u9fa5]{0,}$ 可以书写汉字
8.2. 自定义对象
8.2.1. 定义对象的第一种方式
通过关键字 function 定义一个对象。
8.2.2. 自定义对象的第二种写法;
在js中,{}表示一个对象 -- 要认识 属性的写法: 属性:值多个属性需要使用逗号分开, 对象中的函数的定义方式:函数名:function(){函数体}多个函数需要使用逗号分割, 并且函数和属性也需要使用逗号分开。 最后一个函数或者属性,不需要书写逗号注意:对象在使用的时候,不需要new,直接赋值给其他变量,或者直接使用
9. bom介绍
BOM : browser object model 浏览器对象模型 js希望和浏览器有一定的交互的能力,
作用:通过bom模型创建出的对象,可以实现js和浏览器进行交互。
9.1. window对象介绍
9.1.1. 框架标签
框架标签的作用:1、可以把页面分割几个部分。2、引入其他页面,到本页面。
9.1.2. iframe
iframe也是一个框架标签,目的也是在一个页面中去引入其他的页面到本页面。 可以和其他的html的代码一起去书写。可能和body体一块使用
9.1.3. window
所有浏览器都支持 window 对象。它表示浏览器窗口。 window是js中的顶层对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 框架标签内也有一个window对象。 甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window对象中的方法或者属性在调用的时候,可以省略window对象。直接书写方法。 案例:让时间动起来,还可以进行开始和停止
业务中的Window.onoad可以不写,但是会出
倒计时案例
Close();open();关闭浏览器、打开浏览器 注意:打开的是谁,就在谁里面关闭不支持当前关闭,支持open之后的关闭
Window.open();可以打开一个网页
Window.close();可以关闭一个网页
9.2. history对象:
存放一些访问过的url信息;
当前窗口访问过的url 注意:一定是访问过的历史url
这是2.html
这是3.html (一定是访问过的才能前进,后退)
location:包含当前的url信息;
9.3. Location对象
Location表示的是当前浏览器的地址栏对象。浏览器的地址中主要保存的是访问某个网站的URL地址 URL地址:统一资源定位符。 http://www.baidu.com:80?username=zhangsan&age=23&addredd=beijing 当前浏览器访问某个网站时使用的协议HTTP协议。 www.baidu.com 这是一个域名,其实背后对应的一个ip地址,ip地址对应的激素互联网中的某个设备 80 访问的是指定ip这台服务器上运行在哪个端口上的软件程序。 Location.href 拿到当前的url
10. dom介绍
DOM对象:Document Object Model 文档对象模型 W3C组织规定: 当浏览器把一个html文件加载到内存中之后,这个html文件,就是一个Document对象。并且在浏览器加载html文件中的所有标签时,把html文件中的所有标签页加载成不同的标签对象,以及标签中的属性,也加载成属性对象,标签中的文本也加载成文本对象。 浏览器在加载某个标签时,标签的文本数据,被加载成当前标签的一个子标签。 当我们把一个html文件加载完成之后,他们就得到这个html文件中的所有标签,属性,文本对象。 可以使用js技术结合Document对象,对html文件中的所有标签,进行各种操作。 在浏览器把html文件加载完成之后,标签被称作标签对象(元素节点),标签中的文件称为文本节点(文本对象),标签的属性称为属性节点(属性对象)。
10.1. document对象介绍
快速获取html中的页面的标签对象的。 getElementById 根据某个标签的id属性值,或者页面上这个标签对象,要求页面上的id必须唯一。
document.getElementsByName(String name ); 根据标签中name属性去查找指定的标签。返回的是标签对象数组。 点击选中的复选框然后输出alert();
getElementsByTagName(); 根据标签名去选择html中标签对象,返回值,标签对象的数组
当通过dom技术获取到页面上的某个标签之后,要对这个标签对象进行操作,这时需要查阅另外一个帮助文档DHTML。
10.2. 对象中的一些事件
onload:表示加载完成:window.onload 表示页面加载完毕 onblur: 表示输入框失去输入光标。通常是输入框中会使用。 onchange: 内容发生了变化。input , select onclick: (单)点击事件, 按钮,img , a 标签 onmouseover:图片,tr ,div onmouseout: onsubmit : 表单提交的时候,会触发这个事件。
两张图片回来切换
10.3. 对象中的一些方法(函数)
appendChild : 为某一个标签,去添加子标签 removeChild :为某一个标签,删除孩子标签 setAttribute : 为某一个标签设置属性。
11. 备注 修改myeclipse的默认打开方式
12. 全选全不选 12.1. 页面准备:
12.2. 全选
12.3. 全不选
12.4. 反选
12.5. 复选框的-----全选/全不选
13. 表单验证 13.1. 页面准备
13.2. 清空请输入用户名
13.3. 校验用户名的信息
如果校验错误表单提交不了
对onsubmit 进行判断
14. json
json是独立与语言的。 和语言无关。
json 大体上属于 key:value 的形式
并且在json 中 [] 表示是一个数组。{} 表示是一个对象。
要求key 必须字符串以双引号 引起来 。value 不一定。 如果是number 不需要使用引号引起。
数组中包含的是对象。 对象里面是 key:value这种键值对。
数组可以当成value
15. 二级联动 15.1. 数据准备:
var china = [ // {} 代表一个对象。 对象里面的 key:value,key:value 其中的key 就是对象的属性的名字,属性的值。 { "p_name": "吉林省", "p_id": "jl", "cities": [ { "c_name": "长春", "c_id": "cc" }, { "c_name": "四平", "c_id": "sp" }, { "c_name": "通化", "c_id": "th" }, { "c_name": "松原", "c_id": "sy" } ] }, { "p_name": "辽宁省", "p_id": "ln", "cities": [ { "c_name": "沈阳", "c_id": "sy" }, { "c_name": "大连", "c_id": "dl" }, { "c_name": "抚顺", "c_id": "fs" }, { "c_name": "铁岭", "c_id": "tl" } ] }, { "p_name": "山东省", "p_id": "sd", "cities": [ { "c_name": "济南", "c_id": "jn" }, { "c_name": "青岛", "c_id": "qd" }, { "c_name": "威海", "c_id": "wh" }, { "c_name": "烟台", "c_id": "yt" } ] }, { "p_name": "上海市", "p_id": "sh", "cities": [ { "c_name": "闵行区", "c_id": "mh" }, { "c_name": "徐汇区", "c_id": "xh" }, { "c_name": "黄浦区", "c_id": "hp" }, { "c_name": "浦东新区", "c_id": "pd" } ] } ];
15.2. 页面准备
15.3. 页面初始化的时候,在省的select 标签添加内容
15.4. 选择省的时候,市的信息对应变化
15.5. 删除城市下面的select中