JavaScript学习日志02

8. js中的对象


8.1. js中的全局对象介绍

JavaScript学习日志02_第1张图片

String对象
Date对象


JavaScript学习日志02_第2张图片


Math对象和Java中的基本一致

RegExp对象,正则对象,正则表达式的书写规则和Java也一致:

. 当前可以是任意字符
? 表示零次或一次
* 表示零次或多次
+ 表示一次或多次

() 对某个存在的正则进行分组 组的使用 \组号 $组号
{} 当前的规则可以出现的次数
{2} 正好 2次 {m,} 最少m次 {m,n} 最少m次 最多n
[] 当前位置上可以是中括号中某个字符
[abc] [^abc]

\\d 当前位置上可以数字
\\w 当前位置上可以是字母 数字 下划线
\b 单词边界
^ 行开始
$ 行结尾

练习:验证手机号

JavaScript学习日志02_第3张图片


JavaScript学习日志02_第4张图片


^[\u4e00-\u9fa5]{0,}$ 可以书写汉字

8.2. 自定义对象

8.2.1. 定义对象的第一种方式

通过关键字 function 定义一个对象。

JavaScript学习日志02_第5张图片

JavaScript学习日志02_第6张图片

JavaScript学习日志02_第7张图片



8.2.2. 自定义对象的第二种写法;


在js中,{}表示一个对象 -- 要认识
属性的写法:
属性:值
多个属性需要使用逗号分开,

对象中的函数的定义方式:函数名:function(){函数体}
多个函数需要使用逗号分割,
并且函数和属性也需要使用逗号分开。
最后一个函数或者属性,不需要书写逗号

注意:对象在使用的时候,不需要new,直接赋值给其他变量,或者直接使用

JavaScript学习日志02_第8张图片



9. bom介绍


BOM : browser object model 浏览器对象模型
js希望和浏览器有一定的交互的能力,

JavaScript学习日志02_第9张图片



作用:通过bom模型创建出的对象,可以实现js和浏览器进行交互。



9.1. window对象介绍

9.1.1. 框架标签


框架标签的作用:1、可以把页面分割几个部分。2、引入其他页面,到本页面。
可以把页面进行分割(不能和body一块使用,把body删除)row分割上下 , cols分割左右
引入其他的页面,进入到本页面。--- 最大的缺点就是不能和body一块使用

JavaScript学习日志02_第10张图片


9.1.2. iframe


iframe也是一个框架标签,目的也是在一个页面中去引入其他的页面到本页面。
可以和其他的html的代码一起去书写。可能和body体一块使用

JavaScript学习日志02_第11张图片


9.1.3. window


所有浏览器都支持 window 对象。它表示浏览器窗口。
window是js中的顶层对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
框架标签内也有一个window对象。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:

JavaScript学习日志02_第12张图片


JavaScript学习日志02_第13张图片



JavaScript学习日志02_第14张图片


JavaScript学习日志02_第15张图片





window对象中的方法或者属性在调用的时候,可以省略window对象。直接书写方法。

案例:让时间动起来,还可以进行开始和停止


业务中的Window.onoad可以不写,但是会出

JavaScript学习日志02_第16张图片






JavaScript学习日志02_第17张图片



倒计时案例

JavaScript学习日志02_第18张图片


Close();open();关闭浏览器、打开浏览器
注意:打开的是谁,就在谁里面关闭
不支持当前关闭,支持open之后的关闭


Window.open();可以打开一个网页

JavaScript学习日志02_第19张图片

Window.close();可以关闭一个网页




9.2. history对象:


存放一些访问过的url信息;

JavaScript学习日志02_第20张图片

当前窗口访问过的url 注意:一定是访问过的历史url


JavaScript学习日志02_第21张图片



这是2.html

JavaScript学习日志02_第22张图片

这是3.html (一定是访问过的才能前进,后退)

JavaScript学习日志02_第23张图片


JavaScript学习日志02_第24张图片


location:包含当前的url信息;


9.3. Location对象

JavaScript学习日志02_第25张图片

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
JavaScript学习日志02_第26张图片



10. dom介绍


DOM对象:Document Object Model 文档对象模型

W3C组织规定:
当浏览器把一个html文件加载到内存中之后,这个html文件,就是一个Document对象。并且在浏览器加载html文件中的所有标签时,把html文件中的所有标签页加载成不同的标签对象,以及标签中的属性,也加载成属性对象,标签中的文本也加载成文本对象。

浏览器在加载某个标签时,标签的文本数据,被加载成当前标签的一个子标签。
当我们把一个html文件加载完成之后,他们就得到这个html文件中的所有标签,属性,文本对象。
可以使用js技术结合Document对象,对html文件中的所有标签,进行各种操作。

在浏览器把html文件加载完成之后,标签被称作标签对象(元素节点),标签中的文件称为文本节点(文本对象),标签的属性称为属性节点(属性对象)。

JavaScript学习日志02_第27张图片


JavaScript学习日志02_第28张图片


JavaScript学习日志02_第29张图片


10.1. document对象介绍


JavaScript学习日志02_第30张图片




快速获取html中的页面的标签对象的。

getElementById 根据某个标签的id属性值,或者页面上这个标签对象,要求页面上的id必须唯一。

JavaScript学习日志02_第31张图片


document.getElementsByName(String name ); 根据标签中name属性去查找指定的标签。返回的是标签对象数组。
点击选中的复选框然后输出alert();

JavaScript学习日志02_第32张图片


getElementsByTagName(); 根据标签名去选择html中标签对象,返回值,标签对象的数组


JavaScript学习日志02_第33张图片


JavaScript学习日志02_第34张图片

当通过dom技术获取到页面上的某个标签之后,要对这个标签对象进行操作,这时需要查阅另外一个帮助文档DHTML。


10.2. 对象中的一些事件


onload:表示加载完成:window.onload 表示页面加载完毕
onblur: 表示输入框失去输入光标。通常是输入框中会使用。
onchange: 内容发生了变化。input , select
onclick: (单)点击事件, 按钮,img , a 标签
onmouseover:图片,tr ,div
onmouseout:
onsubmit : 表单提交的时候,会触发这个事件。
JavaScript学习日志02_第35张图片

两张图片回来切换

JavaScript学习日志02_第36张图片


10.3. 对象中的一些方法(函数)


appendChild : 为某一个标签,去添加子标签
removeChild :为某一个标签,删除孩子标签
setAttribute : 为某一个标签设置属性。


11. 备注
修改myeclipse的默认打开方式

JavaScript学习日志02_第37张图片



12. 全选全不选
12.1. 页面准备:

JavaScript学习日志02_第38张图片



12.2. 全选


JavaScript学习日志02_第39张图片


12.3. 全不选


JavaScript学习日志02_第40张图片


12.4. 反选


JavaScript学习日志02_第41张图片


12.5. 复选框的-----全选/全不选


JavaScript学习日志02_第42张图片


13. 表单验证
13.1. 页面准备

JavaScript学习日志02_第43张图片


13.2. 清空请输入用户名


JavaScript学习日志02_第44张图片


13.3. 校验用户名的信息


JavaScript学习日志02_第45张图片


如果校验错误表单提交不了


JavaScript学习日志02_第46张图片


JavaScript学习日志02_第47张图片


对onsubmit 进行判断


JavaScript学习日志02_第48张图片


14. json


JavaScript学习日志02_第49张图片


JavaScript学习日志02_第50张图片


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"
            }
        ]
        
    }
];

怎么获取json里面的数据:

JavaScript学习日志02_第51张图片

15.2. 页面准备

JavaScript学习日志02_第52张图片

15.3. 页面初始化的时候,在省的select 标签添加内容

JavaScript学习日志02_第53张图片

15.4. 选择省的时候,市的信息对应变化

JavaScript学习日志02_第54张图片

15.5. 删除城市下面的select中

JavaScript学习日志02_第55张图片



































你可能感兴趣的:(JavaScript学习日志02)