JavaScript对象（javascript对象的创建方法）

JavaScript对象分类

内置对象:包括string,number,boolean等
BOM: Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容
DOM: Document Object Model, 文档对象模型,包括和页面标签相关的内容

BOM浏览器对象模型

window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.
window中常见的方法:

alert("xxx")弹出提示框
confirm("xxx") 弹出确认框
prompt("xxx") 弹出文本框
isNaN(x) 判断变量是否是
NaNparseInt()和parseFloat() 把字符串转成整数或小数
console.log() 控制台输出
let timer = setInterval(方法,时间间隔) 开启定时器
clearInterval(timer) 停止定时器
setTimeout(方法,时间间隔) 开启只执行一次的定时器

window对象中常见的属性

location位置

location.href 获取和修改浏览器的请求地址
location.reload() 刷新页面

history历史

history.length 获取历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新

<h1>0</h1>
<h2>0</h2>
<script>
    setInterval(f,1000);
    let  i = document.querySelector("h1");
    let count=0;
    function f() {
        count++;
        i.innerText = count;
    }
    let num =0;
    let  j = document.querySelector("h2");
    let  timer = setInterval(function () {
        num++;
        j.innerText = num;
        if(num==50){
            clearInterval(timer)
        }
    },200)
    //只执行一次
    setTimeout(function () {
        alert("时间到")
    },5000)
</script>

DOM文档对象模型

包含和页面元素相关的内容

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器")

获取和修改元素的文本内容

元素对象.innerText = "xxx"; 修改文本内容
元素对象.innerText 获取文本内容

获取和修改input控件的值

控件对象.value="xxx"; 修改
控件对象.value 获取

创建元素对象

let 元素对象 = document.createElement("标签名");

添加元素对象到某个元素里面

document.body.appendChild(元素对象);
父元素.appendChild(元素对象);
父元素.append(元素对象,元素对象,元素对象);

<input type="text" id="i1">
<input type="button" value="飞机" onclick="f(1)">
<input type="button" value="炸弹" onclick="f(2)">
<script>
    let num = document.querySelector("#i1");
    function f(x) {
        if(isNaN(num.value)){
            let error =document.createElement("div");
            error.innerText = "请输入数字"
            document.body.appendChild(error)
            return;
        }
        let imgNum = x==1?"../airplane.png":"../bom3.png";
        for(i=0;i<num.value;i++){
            let computer = document.createElement("img");
            computer.src = imgNum;
            document.body.append(computer);
        }
    }
</script>
//======--------------=========
<input type="text" id="i1" placeholder="姓名">
<input type="text" id="i2" placeholder="工资">
<input type="text" id="i3" placeholder="工作">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
    </tr>
</table>
<script>
     //通过标签名获取table
     let table = document.querySelector("table");
     function f() {
        //创建 tr 和td
        let trs = document.createElement("tr")
        let td_name = document.createElement("td")
        let td_salary = document.createElement("td")
        let td_work = document.createElement("td")
        td_name.innerText = i1.value;
        td_salary.innerText = i2.value;
        td_work.innerText = i3.value;
        //td 装入 tr
        trs.append(td_name,td_salary,td_work);
        //tr 装进table
        table.append(trs);
    }
</script>

什么是 JSON?

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。

【注】JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

//json实例
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON 对象

JSON 对象保存在大括号内。

//就像在 JavaScript 中, 对象可以保存多个 键/值 对：
{"name":"Wong", "url":"www.celinf.cn"}

JSON函数

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

var text = '{ "sites" : [' +
    '{ "name":"celinf" , "url":"www.celinf.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

HTML 事件属性

onclick 点击事件：
onload 用户进入页面时被触发
onunload 用户离开页面时被触发
onchange 事件常结合对输入字段的验证来使用。

//使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">

onmouseover 鼠标移至 HTML 元素上方触发函数
onmouseout 鼠标移出元素时触发函数。

练习Demo

<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片</td>
        <td><img src="head.jpg" width="50px" alt="" id="head_img"></td>
    </tr>
    <tr>
        <td>名字:</td>
        <td id="name_td">XXX</td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td">XXX</td>
    </tr>
    <tr>
        <td>好友</td>
        <td>
            <ul id="firend_ul">
            </ul></td>
    </tr>
</table>
<input type="button" value="请求数据" onclick="f()">

<script>
let person = {name:"张三",url:"../bee.png",age:20,friend:["李四","王五","赵六"]}
    function f() {
        head_img.src = person.url;
        name_td.innerText = person.name;
        age_td.innerText = person.age;
        for (let p of person.friend) {
            let li = document.createElement("li")
            li.innerText =p;
            firend_ul.append(li)
        }
    }
</script>

学习记录，如有侵权请联系删除

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

JavaScript对象（javascript对象的创建方法）

猜你喜欢

网站首页 > 技术文章正文