JavaScript与jQuery基础入门到放弃

JavaScript与jQuery基础入门到放弃

引言：

- BOM 操作

- DOM 操作

- jQuery 类库

BOM 操作

BOM (Browser Object Model) 指浏览器对象模型，使 JavaScript有能力与浏览器交互

window.open() // 打开浏览器空页面
window.open('http://www.baidu.com', '','width=800px, left=200px')	// 打开指定网站的页面，并指定打开大小

window.close()	// 关闭当前浏览器窗口

navigator.userAgent	// 标识自己是一个浏览器

history.forward()	// 前进一页

history.back()  // 后退一页

window.location.href	// 获取当前网页所在网页地址，可以加赋值符号和网址跳转

window.locaton.reload()	// 刷新当前页面

alert('警告️')	//	警告框

confirm('提示是否确认') // 确认框

Prompt('你想输入什么')	// 提示框

// 计时器相关操作（重要）
	let t = setTimeout(showMsg, 3000)  // 3000毫秒后执行函数
		clearTimeout(t)	// 取消任务

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

DOM 操作

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

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

document.getElementById('d1')  // 通过标签id查找返回便签对象本身
document.getElementsByClassName('text')  // 通过标签的class名字查找，结果是数组，里面含有多个标签对象可以使用数组取值
document.getElementsByTagName('p')  // 通过标签查找，返回数组，可以使用索引取值

// 基于当前查找的标签查找 document.getElementById('div1')

document.getElementById('div1').parentElement	// 父节点的标签元素

document.getElementByid('div1').children  // 所有的子标签

document.getElementByid('div1').firstElementChild // 第一个子标签元素

document.getElementByid('div1').lastElementChild  // 最后一个子标签元素

document.getElementByid('div1').nextElementSibling // 下一个兄弟标签元素

document.getElementByid('div1').previousElementSibling // 上一个兄弟标签元素

操作节点

// 创建一个a标签
let aEle = document.createElement('a')
// js代码对标签属性做增删改查
// .href 的方式只能添加默认属性
aEle.href = 'http://www.baidu.com'
// setAttribute()兼容默认属性和自定义属性
aEle.setAttribute('age',18)
// getAttribute()查看属性
aEle.getAttribute('age')
// removeAttribute() 移除属性
aEle.removeAttribute('age')

// js代码操作标签文本
aEle.innerText = '这是a标签的文本'

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

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

.innerHTML			获取标签内部所有的标签包含文本
divEle.innerHTML = '<h1>很不错</h1>'  替换/设置标签内部的文本(识别标签语法)

获取值操作

使用.value的方式可以获取用户输入或者选择的值

1. 针对用户输入的和用户选择的标签
	标签对象.value

2. 针对用户上传的文件数据
	标签对象.files  fileList [文件对象，文件对象，文件对象]
	标签对象.files[0] 文件对象

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);

class与css操作

1. js操作标签css样式
	标签对象.style.属性名(下划线没有 变成驼峰体)
2. js操作标签css属性
	标签对象.classList.add()
	标签对象.classList.contains()
	标签对象.classList.remove()
	标签对象.classList.toggle()

事件

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

常见事件
	onclick 当用户点击某个对象时调用的事件句柄
	onfocus 元素获得焦点
	onblur	元素失去焦点
	onchange	域的内容被改变

绑定事件的多种方式
<!--绑定事件的方式1-->
	<button onclick="showMsg()">点击</button>
	<!--绑定事件的方式2-->
	<input type="button" value="go" id="d1">
		<script>
			function showMsg() {
				let msg = prompt('确定这样吗？')
				console.log(msg)
			}
			let inputEle = document.getElementById('d1')
			inputEle.onclick = function () {
				alert('谁点我！')
			}
		</script>
<!--
事件函数中的this关键字
	this指代的就是当前被操作的标签对象本身
	如果事件函数内有多成嵌套那么最好开始就使用变量存储防止后续变化
-->

// 输入框焦点和失去焦点案例
    <input type="text" value="游戏机" id="d1">
    <script>
        let inputEle = document.getElementById('d1')
        // onfocus 焦点
        inputEle.onfocus = function () {
            this.value = ''
        }
        // onblur 失去焦点
        inputEle.onblur = function () {
            this.value = '再见'
        }
    </script>

// 登录框提示信息焦点和失去焦点
    <p>username:
        <input type="text" id="d1">
        <span style="color: red"></span>
    </p>
<!--    <button id="suBtn">提交</button>-->
    <p>password:
        <input type="text" id="d2">
        <span style="color: red;"></span>
    </p>
    <button id="suBtn">提交</button>

<script>
    // 1. 查找提交按钮的标签
    subEle = document.getElementById('suBtn')
    // 2. 给按钮标签绑定点击事件 onclick 当被点击时
    subEle.onclick = function () {
        // 3. 查找获取用户输入的标签并获取数据
        let userNameEle = document.getElementById('d1')
        let passWordEle = document.getElementById('d2')
        // 清空输入框
        userNameEle.onfocus = function () {
            this.value = ''
            userNameEle.nextElementSibling.innerText = ''
        }
        passWordEle.onfocus = function () {
            this.value = ''
            userNameEle.nextElementSibling.innerText = ''
        }
        if (userNameEle.value === 'xiaochen') {
            userNameEle.nextElementSibling.innerText = `${userNameEle.value}你已经被拉黑`
        }
        if (passWordEle.value === '123') {
            passWordEle.nextElementSibling.innerText = `${userNameEle.value}密码不能是${passWordEle.value}'`
        }
    }

</script>

// 省市联动
省
<select name="" id="d1">

</select>

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

</select>

<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }

    // 提前查找好省市的select标签
        let proSeEle = document.getElementById('d1');
        let citySeEle = document.getElementById('d2');
        // 获取所有省的信息
        for (let pro in data) {
            // 创建option标签
            let proOpEle = document.createElement('option');
            // 添加文及属性
            proOpEle.innerText = pro;
            proOpEle.setAttribute('value', pro);
            // 将创建好的option标签添加到省下拉框中
            proSeEle.appendChild(proOpEle)
        }
        // 给省标签绑定文本域变化事件 onchange
        proSeEle.onchange = function () {
            citySeEle.innerHTML = ''; // 每次操作市之前清空
            // 获取用户选择的省信息，根据省获取市信息
            let targetProData = this.value;
            let cityDataList = data[targetProData];
            //循环获取每一个市信息，创建option标签，添加到市下拉框中
            for (let i = 0; i < cityDataList.length; i++) {
                let cityOpEle = document.createElement('option');
                cityOpEle.innerText = cityDataList[i];
                cityOpEle.setAttribute('value', cityDataList[i]);
                citySeEle.appendChild(cityOpEle);
            }
        }

</script>

jQuery类库

概念

官方愿景：Write less，do more

1.加载速度快

2.选择器更多更好用

3.一行代码走天下

4.支持ajax请求(重点)

5.兼容多浏览器

准备工作

	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	https://www.bootcdn.cn/
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js

jQuery导入之后需要使用关键字才可以使用
	默认的关键字就是jQuery但是不好输入 官方简写为：$

js代码与jQuery代码对比
	let pEle = document.getElementsByTagName('p')[0]
	undefined
	pEle.style.color = 'red'
	pEle.nextElementSibling.style.color = 'green'

	jQuery
	$('p').first().css('color','yellow').next().css('color','blue')

标签对象与jQuery对象

1. 不同的对象能调用的方法是不同的
   
   在编写代码的时候一定要清楚手上的是什么对象
2. 两者可以相互转换
   
   标签对象转jQuery对象
   
   $(标签对象)
   
   jQuery对象转标签对象
   
   jQuery对象[0]