wtf
11.18 BOM和DOM

Python内置方法：

print(bin(10))
print(oct(10))
print(hex(10))
"""
0b1010
0o12
0xa
"""
print(int('0b1010',2))
print(int('0o12',8))
print(int('0xa',16))

res = """
print('hello world')
for i in range(10):
    print(i)
"""
# eval(res)
exec(res)


# callable()

BOM:指浏览器对象模型，它使JavaScript有能力与浏览器进行‘对话’。

DOM:指文档对象模型，通过它，可以访问HTML文档的所有元素。

1.Windows对象，表示浏览器窗口。

一些常用的Window方法：

window.innerHeight-浏览器窗口的内部高度
window.innerWidth-浏览器窗口的内部宽度
window.open()-打开新窗口
window.close()-关闭当前窗口

screen对象：

screen.availWidth  //可用的屏幕宽度
1366
screen.availHeight  //可用的屏幕高度
728

history对象：

history.forward  //前进一页
ƒ forward() { [native code] }
history.back  //后退一页
ƒ back() { [native code] }

location对象：

location.href  获取URL
location.href="URL" //跳转到指定页面
location.reload() 重新加载页面

弹出框：

  • 警告框：当警告框出现后，用户需点击确定按钮才能继续进行操作。
alert('hello');
  • 确认框：确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
confirm('are you sure?')
  • 提示框：提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。
prompt('请在下方输入你的答案')

2.计时相关

  • setTimeout()

语法：setTimeout()方法会返回某个值，值被存储在名为t的变量中，如果取消setTimeout()，可以使用这个变量名来指定它。

setTimeout()的第一个参数是含有JavaScript语句的字符串，第二个参数指示从当前起多少毫秒后执行第一个参数（1000毫秒等于一秒）

var t=setTimeout("js语句"，毫秒)
  • clearTimeout(setTimeout()变量名)
//在指定时间之后执行一次相应函数
var t=setTimeout(function(){alert(123);},3000)
//取消setTimeout设置
clearTimeout(t);
  • setInterval()

setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval('JS语句'，时间间隔)
  • clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval(setinterval返回的ID值)

//每隔一段时间就执行一次相应函数
var t=setInterval(function(){console.log(123);},3000)
//取消setInterval设置
clearInterval(t);

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    
    function func() {
        alert('hhh')
    }

    function show() {
        var t=setInterval(func,3000);
        function inner() {
            clearInterval(t)
        }
        setTimeout(inner,9000)
    }
    show()
</script>
</body>

DOM（Document object Model）：是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型（Document object Model）

DOM标准规定HTML文档中的每一个成分都是一个节点(node):

  • 文档节点（document对象）：代表整个文档
  • 元素节点（element对象）：代表一个元素（标签）
  • 文本节点（text对象）：代表元素（标签）中的文本
  • 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
  • 注释是注释节点（comment对象）

JavaScript可以通过DOM创建动态的HTML，可以改变所有html元素，html属性，CSS样式，对所有事件做出反应。

查找标签

1.直接查找：

document.getElementById    根据ID获取一个标签
document.getElementsByClassName  根据class属性获取
document.getElementsByTagName   根据标签名获取标签合集

<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<span id="d1">div上面的span</span>
<div class="c1">div
   <span>div>span</span>
   <p>div>p</p>
   <span>div>span</span>
</div>
<span>span</span>
</body>

document.getElementsByTagName('span')
HTMLCollection(4) [span#d1, span, span, span, d1: span#d1]
document.getElementsByClassName('c1')
HTMLCollection [div.c1]  #结果是数组不是对象本身
document.getElementById('d1')  #获取的直接是对象本身
<span id="d1">div上面的span</span>

2.间接查找

parentElement    父节点标签元素
children         所有子标签
firstElementChild   第一个子标签
lastElementChild    最后一个子标签元素
nextElementSibling  下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="d1">div上面的span</span>
<div class="c1">div
    <span>div>span</span>
    <p id="p1">div>p</p>
    <span>div>span</span>
</div>
<span>span</span>
</body>

document.getElementById('p1')
<p id=​"p1">​div>p​</p>​
var pEle=document.getElementById('p1') #变量名的命名
undefined
pEle.parentElement   #查找父标签
<div class=​"c1">​…​</div>​
pEle.parentElement.parentElement
<body>​…​</body>​

节点操作

1.创建节点：

createElement(标签名)

var divEle=document.createElement("div");

2.添加节点：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode);

把增加的节点放到某个节点的前面。

somenode.insertBefore(newnode,某个节点);

3.删除节点：

somenode.removeChild(要删除的节点)

4.替换节点：

somenode.replaceChild(newnode,某个节点)

5.属性节点

获取文本节点的值

var divEle=document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值：

var divEle=document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">div
    <span>div>span</span>
    <p id="d1">div>p</p>
</div>
</body>

var imgEle=document.createElement('img')  #创建标签
undefined
imgEle
<img>​
imgEle.src='222.jpg'     #设置默认属性
"cby.jpg"
imgEle
<img src=​"cby.jpg">​
imgEle.setAttribute('username','jason')  #也可以设置自定义的
undefined
imgEle
<img src=​"cby.jpg" username=​"jason">​
imgEle.setAttribute('title','图片')
undefined
imgEle
<img src=​"cby.jpg" username=​"jason" title=​"图片">​

var divEle=document.getElementsByClassName('c1')[0]
undefined
divEle.append(imgEle)  #将创建的标签添加到内部最下方
undefined

6.获取值操作: elementNode.value

适用于以下标签：

input select textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

var divEle=document.getElementsByClassName('c1')[0]
undefined
divEle.innerText    #没有赋值符号是获取文本 html(html代码+文本)
"div div>span

div>p"
divEle.innerHTML
"div
    <span>div&gt;span</span>
    <p id="d1">div&gt;p</p>
"

7.class的操作

className 获取所有样式类名（字符串）

classList.remove(cls) 删除指定类

classList.add(cls) 添加类

classList.contains(cls) 包含某个类，存在返回true，否则返回false

classList.toggle(cls) 存在就删除，否则添加

8.操作CSS属性

  • 对于没有中横线的css属性一般直接使用style.属性名即可
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
  • 含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

var aEle=document.createElement('a');
undefined
aEle
<a>​</a>​
aEle.innerText='点我看看'    #内部文本
"点我看看"
aEle
<a>​点我看看​</a>​   
aEle.href='www.baidu.com'
"www.baidu.com"
aEle
<a href=​"www.baidu.com">​点我看看​</a>​
var divEle=document.getElementsByClassName('c1')[0]
undefined
var pEle=document.getElementById('d1')
undefined

9.事件

onclick onfocus

onblur

onchange 域的内容被改变

onkeydown

onkeypress

onkeyup

onload 加载完成

onselect 文本框中的文本被选中时发生

onsubmit 确认对象被点击，使用对象是form

  • 绑定事件的方式一：（不推荐使用）
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
    function changeColor(ths){
    ths.style.backfroundColor="green";
}
</script>

this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参

  • 方式二：（推荐使用）
<div id="d2">点我</div>
<script>
    var divEle2=document.getElementById("d2");
    divEle2.onclick=function() {
        this.innerText="kllk";
    }
</script>

#开关灯
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 300px;
            width: 300px;
            border-radius: 50%;
        }
        .bg_lv{
            background-color: aquamarine;
        }
        .bg_h{
            background-color: orangered;
        }
     </style>
</head>
<body>
<div class="c1 bg_lv bg_h"></div>
<button id="d1">变色</button>

<script>
    let btnEle=document.getElementById('d1');
    btnEle.onclick= function () {
        // 找到div标签
        var divEle = document.getElementsByClassName('c1')[0];
        // 修改类属性 有则删除 无则添加
        divEle.classList.toggle('bg_h')
    }
</script>
</body>

#input框获取焦点
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="linux运维" id="d1">
<script>
    var iEle=document.getElementById('d1');
    //聚焦
    iEle.onfocus=function () {
        iEle.value=''
    };
    //失焦
    iEle.onblur=function () {
        iEle.value='欢迎下次再来'
    }
</script>
</body>

#展示当前时间
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    //定义一个全局变量 用来存储定时器
    var t=null;
    var b1Ele=document.getElementById('b1');
    var b2Ele=document.getElementById('b2');
    var iEle=document.getElementById('d1');
    function showTime() {
        var currentTime=new Date();
        var ctime=currentTime.toLocaleString();
        iEle.value=ctime
    }
    
    //开始按钮
     b1Ele.onclick = function () {
        if(!t){
             t = setInterval(showTime,1000)
        }
    };
    // 结束
    b2Ele.onclick = function () {
        clearInterval(t);
        // 手动将t清空
        t = null
    }
</script>
</body>

#省事联动
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">省:

</select>


<select name="" id="d2">市:</select>

<script>
    var s1Ele = document.getElementById('d1');
    var s2Ele = document.getElementById('d2');


    var data = {
        "河北省": ["廊坊", "邯郸",'石家庄'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'青岛'],
        "上海":["静安区",'黄浦区','徐汇区']
    };
    // 循环自定义对象中的key 动态创建option标签 添加到第一个选择框中
    for (let province in data){
        // 创建一个个的option标签
        var optEle = document.createElement('option');
        // 给创建的option标签设置文本和属性
        optEle.innerText = province;
        optEle.value = province;
        // 将创建好的option标签添加到select框中
        s1Ele.appendChild(optEle)
    }
    s1Ele.onchange = function () {
        // console.log(this.value)  // this指代的就是当前操作对象本身  有点类似于你python后端的self
        // 获取用户选择的省 根据省 取到对应的市
        var currentPro = this.value;
        var cityList = data[currentPro];

        // 先将第二个select框中的所有内容清空
        s2Ele.innerHTML = '';
        // 循环市的数组 创建option标签  操作属性  添加到第二个select框中
        for (let i=0;i<cityList.length;i++){
            var optEle = document.createElement('option');
            optEle.innerText = cityList[i];
            optEle.value = cityList[i];
            s2Ele.appendChild(optEle)
        }
    }


</script>
</body>
posted on 2019-11-18 22:19  wtfss  阅读(120)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园