js收尾，jQuery引入

内容概要

  • BOM操作
  • DOM操作
  • jQuery操作

BOM操作

BOM(Brower Object Model)是指浏览器对象模型，它使JavaScript 又能力于浏览器进行 '对话'

window.open() 
window.open('https://www.bilibili.com/','','width=200px,height=200px,left=200px')


window.open(pageURL,name,parameters)
name 为子窗口的名字 
一个name参数对创建的或已存在的窗口对象引用

window.close()
	关闭当前浏览器窗口
因为window太常用了所以可以省略不写
navigator.userAgent(爬虫会用到)
	 标识自己是一个浏览器


history.back()
	后退一页  就相当于左上角的后退


history.forward()
	前进一页


location.reload()
		刷新的当前页面


location.href 啥也不写获取当前页面的地址
location.href = 'https://www.bilibili.com/'
跳转到 B站


altert() 
	警告框
警告框经常用于确保用户可以得到某些信息
当警告框出现后，用户需要点击确定按钮才能继续进行。


confirm()
	确认框

点确认 返回true 点取消 返回 false

prompt()
	提示框

在里面输入的内容 会返回出来

计时器相关操作

function showMsg(){
    alert('嘿嘿黑')
}

let t = setTimeout(showMsg, 3000) // 3000毫秒之后执行函数


clearTimeout(t) // 取消任务
等了一段时间还是不行


s = setInterval(func, 3000) // 每隔3000秒执行一次
clearIterval(s)  //取消任务


    function func() {
        console.log(1)
        alert('嘿嘿我i')
    }

    // function ww(){
    //     let t = setInterval(func, 3000)
    //     function inner(){
    //         clearInterval(t)
    //
    //     }
    //     setTimeout(inner, 6000) // 6000毫米后关闭 t
    // }
    // ww()
    let t = setInterval(func, 3000)
    function aa(){
        clearInterval(t)
    }
    setTimeout(aa, 6000)

DOM操作

DOM(Document Object Model) 是指文档对象模型，通过它可以访问HTML文档的所有元素

既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)

查找便签

"""
1.js中变量名的命名风格推荐驼峰提
2.js代码查找到的标签如果需要反复使用变量接收 规律XXXele
"""
document.getElementById('d1')
	结果就是标签对象本身
document.getElementsByClassName('c1')
	结果是数组里面含有多个标签对象
document.getElementByTagName('span')
	结果是数组里面含有多个标签对象

document.getElementById('d1')
//<div class=​"d1" id=​"d1">​<p class=​"p1">​…//​</p>​</div>​
document.getElementsByClassName('s1')
//HTMLCollection(3) [span.s1, span.s1, span.s1]
document.getElementsByClassName('s1')[0]
//<span class=​"s1">​span1​</span>​
// get样式类名得到的是元组

document.getElementsByTagName('p')
//HTMLCollection [p.p1]0: p.p1length: 1[[Prototype]]: //HTMLCollection
let pEle = document.getElementsByTagName('p')
//undefined
typeof(pEle)
//'object'
pEle[0]
//<p class=​"p1">​<span //class=​"s1">​div>p>span2​</span>​</p>​
pEle[1]


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

HTML
 <span class="s1">span1</span>
    <div class="d1" id="d1">
        <p class="p1">
            <span class="s1">div>p>span2</span>
        </p>
    </div>
    <span class="s1"> span3</span>


let span1Ele = document.getElementsByTagName('span')[0]
undefined
span1Ele
<span class=​"s1">​span1​</span>​
span1Ele.nextElementSibling
<div class=​"d1" id=​"d1">​…​</div>​
let divEle = span1Ele.nextElementSibling
undefined
divEle
<div class=​"d1" id=​"d1">​…​</div>​
let pEle = divEle.children
undefined
pEle
HTMLCollection [p.p1]
pEle[0]
<p class=​"p1">​…​</p>​<span class=​"s1">​div>p>span2​</span>​</p>​
// children 得到的是一个数组
undefined
let pEle1 = divEle.firstChild
undefined
pEle1
#text
let pEle2 = divEle.firstElementChildren
undefined
pEle2
undefined
divEle
<div class=​"d1" id=​"d1">​<p class=​"p1">​…​</p>​</div>​
let pEle3 = divEle.firstElementChild
undefined
pEle3
<p class=​"p1">​…​</p>​
divEle.previousElementSibling
<span class=​"s1">​span1​</span>​

操作节点

"""js 代码创建了一个 a 标签"""
let aEle = document.createElement('a')

"""js代码操作标签属性"""
aEle.href = 'https://www.bilibili.com/' 用点的方式只能添加默认的属性 ， 自定义属性不行

setAttribute() 兼容默认属性和自定义属性
getAttribute('age')
removeAttribute("age")

"""js代码操作标签文本"""
aEle.innerText = '这个很攒劲'

"""js代码查找div标签并将a追加到div内部"""
let divEle = document.getElementByTagName('div')[0]
divEle.appendChild(aEle)

.innerText       获取标签内部所有的文本内容
.innerText='文本'  替换标签内部的文本(不识别标签语法)

innerHTML        获取标签内部所有的标签包含文本
innerHTML        替换标签内部的文本(识别标签语法)

获取值操作

1.针对用户输入的和用户选择的标签
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files     fileList[文件对象、文件对象]
	标签对象.files[0]   文件对象
    
HTML
    <p>username:
        <input type="text"></p>
    <p>
        password:
        <input type="text">
    </p>
JS
//先获取标签
undefined
let pEleList = document.getElementsByTagName('p')

pEleList

let p1Ele = pEleList[0]

let in1Ele = p1Ele.firstElementChild

in1Ele.value
'dasdas'
let p2Ele = pEleList[1]

let in2Ele = p2Ele.firstElementChild

in2Ele.value
'dasdasd'

class与css操作

"""
1. js操作标签样式
	标签对象.style.属性名(下划线没有 变成小驼峰) = 属性值
2.js操作标签class属性
	标签对象.classList.add()
	标签对象.classList.contains()  存在就返回true 否则返回false
	标签对象.classList.remove()  删除
	标签对象.classList.toggle() 存在就删除  否则添加
	

"""

事件

事件可以简单理解为通过js代码给html标签绑定一些自定义的功能

常见的事件

onclick 当用户点击某个对象时调用的事件句柄（句柄 可以理解为名字）

onfocus 元素获得焦点(就是鼠标放到上面)

onblur 元素失去焦点(就是鼠标离开了)

onchange 域的内容被改变

绑定事件的多种方式
1. <button onclick='showMsg()'>快按我</button>
2.<input type='button' value='快快' id='d1'>


<button onclick="showMsg()">快按我</button>
<input type="button" value="呦呵" id="n1">

<script>
    function showMsg(){
        let a = prompt('点我')
        console.log(a)
    }

    let inputEle = document.getElementsByTagName('input')[0]
    inputEle.onclick =     function(){
        alert('你确定?????')
    }

事件函数中的this关键字

​ this指代的就是当前被操作的便签对象本身

​ 如果事件函数内又多层嵌套那么最好在一开始用变量存储一下防止后续变化

onload方法

​ XXXX.onload 等待XXXX加载完毕后再执行后面的代码

事件实战案例

"""
一个文本框 默认显示一个数据
当你鼠标放上去的时候清空
你的鼠标离开再显示默认数据

"""
<input type="text" value="游戏机" id="d1">

<script>
    let inEle = document.getElementById('d1')
    inEle.onfocus = function (){
        // console.log(11)
        // inEle.value=''
        this.value=''
    }
    inEle.onblur = function (){
        // console.log(222)
        // inEle.value = '游戏机'
        this.value='嘿嘿'
    }
</script>


"""
获取输入的用户名和密码
并限制它

"""
username:
<input type="text" id="d1">
<span style="color: red"></span>
<br>
password:
<input type="text" name="" id="d2">
<span style="color: red"></span>
<br>
<button id="suB">提交</button>
</body>
</html>

<script>
    let in1Ele = document.getElementById('d1')
    let in2Ele = document.getElementById('d2')
    let suEle = document.getElementById('suB')
    // 给按钮绑定事件
    suEle.onclick = function (){
        // 判断数据的值是否是 jason
        if(in1Ele.value === 'jason'){
            // 如果是 则获取它下面的 span标签 添加文本内容
            in1Ele.nextElementSibling.innerText = '用户名不能是jason'
        }
        if(in2Ele.value === '123'){
            // 如果是 则获取它下面的 span标签 添加文本内容
            in2Ele.nextElementSibling.innerText = '密码不能是123'
        }
    }
    
</script>

// 省市联动

<body>
省:
<select name="" id="s1"></select>
市:
<select name="" id="s2"></select>

<script>
        let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    // 先获取 s1 s2 标签
       let s1Ele = document.getElementById('s1')
       let s2Ele = document.getElementById('s2')

        for(let k in data){
            // console.log(s1Ele)
            let p1Ele = document.createElement('option')
            p1Ele.innerText = k
            s1Ele.appendChild(p1Ele)
        }
        console.log(s2Ele)
        s1Ele.onchange = function (){
            s2Ele.innerText = ''
            console.log(s2Ele)
            let cityEleValue = s1Ele.value
            console.log(cityEleValue)
            for (let  k in data[cityEleValue]){
                let opEle = document.createElement('option')
                opEle.innerText = data[cityEleValue][k]
                s2Ele.appendChild(opEle)
            }
        }

jQuery类库

"""
IE浏览器: 前端针对IE有时候需要单独再编写一份代码
"""
宣言：Write less, do more 写的少 做得多
  1. 加载速度快
  2. 选择器更多更好用
  3. 一行代码天下
  4. 支持ajax请求(重点)
  5. 兼容多浏览器

准备工作

  1. 下载核心文件到本地引入(没有网络也可以使用)

    <script src="jquery-1.12.4.js"></script>

  2. CND网络资源加载(必须有网络才可以使用)

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

什么是CDN

​ 内容分发网络

jQuery导入之后需要使用关键字才可以使用

默认的关键字就是jQuery但是不好输入>>>:$

let a = jQuery()
let b = $()

jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快

js代码域jQuery代码对比

    <div>
        <p>嘿嘿大大大</p>
    </div>

let divEle = document.getElementsByTagName('div')[0]
divEle
let pEle = divEle.firstElementChild
pEle
pEle.style.color = 'red'

$('p').first().css('color','yellow')

jQuery 一行代码解决

标签对象与jQuery对象

  1. 不同的对象能都调用的方法不同

    再编写上代码的时候一定要看清楚手上的是什么对象

  2. 两者可以互相转换

    标签对象转换jQuery对象

    $(标签对象)

    jQuery对象转换标签对象

    ​ jQuery对象[0]

posted @ 2022-12-06 23:01  可否  阅读(31)  评论(0)    收藏  举报