目录
BOM
Browser Object Model, 浏览器对象模型, 它能使JavaScript有能力与浏览器进行"对话"
window.innerHeight; // 浏览器内部窗口高度
window.innerWidth; // 浏览器内部窗口宽度
window.open(
'https://www.baidu.com',
'',
'width = 400px; height = 800px; top = 200px; left = 500px'
); // width和height为打开窗口的宽和高, top为距离屏幕上边的距离, left为距离屏幕左边的距离
window.close(); // 自动关闭当前页面
navigator.userAgent; // 浏览器用户代理
history.back(); // 标签页回退
history.forward(); // 标签页前进
window.location;
location.href; // 获取当前页面的url
location.href = "https://www.baidu.com"; // 跳转到指定页面
location.reload(); // 重新加载页面
alert(123); // 警告框
confirm('are you sure?'); // 确认框
prompt('提示标题', '提示内容'); // 提示框
// 计时器
function func(){
alert('hello baby!');
};
setTimeout(func, 3000); // 延迟三秒执行一次func函数
function func(){
alert(123);
};
function show(){
var t = setInterval(func, 3000); // 每隔3秒循环执行一次
function inner(){
clearInterval(t); // 清除计时器
}
setTimeout(inner, 9000);
}
show();
DOM
- Document Object Model, 文档对象模型, 通过它, 可以访问HTML文档中的所有元素
- JavaScript可以通过DOM创建动态的HTML
- 标签 == 元素 == 节点
- 属性
DOM查找标签
直接查找
document.getElementsByTagName('span'); // HTMLCollection(2) [span#d1, span]
document.getElementsByClassName('c1'); // [div.c1]
document.getElementById('d1'); // <span id="d1">div上面的span</span>
间接查找
var pEle = document.getElementById('p1'); // 变量名的命名
pEle.parentElement; // 查找父标签, <div class="c1">...</div>
var divEle = document.getElementsByClassName('c1')[0]; // 注意数组套标签问题
divEle.children; // 查找子标签, 列表套标签
divEle.firstElementChild; // 查找第一个子标签, 单个标签
divEle.lastElementChild; // 查找最后一个子标签, 单个标签
divEle.nextElementSibling; // 查找下一个同级的兄弟标签, 单个标签
divEle.previousElementSibling; // 查找上一个同级的兄弟标签, 单个标签
DOM节点操作
var imgEle = document.createElement('img'); // 创建节点, img标签
imgEle; // <img>
imgEle.src = '节点操作图片.jpg'; // 设置默认属性, <img src="节点操作图片.jpg">
imgEle.setAttribute('user_name', 'jason'); // 设置自定义属性, <img src="节点操作图片.jpg" user_name="jason">
imgEle.setAttribute('title', '女神刘亦菲!'); // 设置默认属性, <img src="节点操作图片.jpg" user_name="jason" title="女神刘亦菲!">
var divEle = document.getElementsByClassName('c1')[0];
divEle.append(imgEle); // 追加一个子节点作为最后的子节点, 在div标签内添加img子标签, 刷新不留存
var aEle = document.createElement('a'); // 创建节点, a标签
aEle; // <a></a>
aEle.setAttribute('href', 'https://www.baidu.com'); // 设置默认属性, <a href="https://www.baidu.com"></a>
aEle.innerText = '点我有你好看哟~'; // 设置标签内文本, <a href="https://www.baidu.com">点我有你好看哟~</a>
var divEle = document.getElementsByClassName('c1')[0]; // 找到div标签
var pEle = document.getElementById('p1'); // 找到div中的p标签
divEle.insertBefore(aEle, pEle); // 插入节点, 在div标签内的p标签前面动态插入a标签, 刷新不留存
var divEle = document.getElementsByClassName('c1')[0]; // 获取div标签
var pEle = document.getElementById('p1'); // 获取div中的p标签
divEle.innerText; // 获取div标签内的文本内容
/*
"div标签!
div中的p标签!"
*/
divEle.innerHTML; // 获取div标签内的文本内容 + html代码
/*
" div标签!
<p id="p1">div中的p标签!</p>
"
*/
divEle.innerText = '<h1>上海第一帅</h1>'; // 不识别html代码
divEle.innerHTML = '<h1>上海第一帅</h1>'; // 识别html代码, 刷新不留存
// 补充
// 删除节点
parent_node.removeChild(child_node);
// 替换节点
some_node.replaceChild(new_child_node, some_child_node);
// 获取属性
divEle.getAttribute('age');
// 删除属性
divEle.removeAttribute('age');
// 自带的属性可以通过".属性名"来获取和设置
imgEle.src;
imgEle.src = '...';
DOM获取标签value值
var iEle = document.getElementById('d1'); // 获取input标签
iEle.value; // 通过".value"获取用户输入的内容: "上海第一帅"
<select name="" id="">
<option value="111">1</option>
<option value="222">2</option>
</select>
var selEle = document.getElementById('d2'); // 获取select标签
selEle.value; // "222", 多选不适用
<input type="file" id="d3">
var iEle = document.getElementById('d3');
iEle.value; // 只能获取文件名
iEle.files[0]; // 获取用户上传的文件对象
DOM操作类属性
<style>
.c1 {
height: 200px;
200px;
border-radius: 50%;
}
.c2 {
background-color: green;
}
.c3 {
background-color: red;
}
</style>
<div class="c1 c2 c3"></div>
var divEle = document.getElementsByTagName('div')[0]; // 获取div标签
divEle.classList; // 查看标签包含的类属性, DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
divEle.classList.remove('c3'); // 移除类属性
divEle.classList.add('c3'); // 添加类属性
divEle.classList.contains('c3'); // true, 判断是否包含类属性
divEle.classList.toggle('c3'); // 有则移除, 没有则添加
DOM操作样式
<p>上海第一帅: 蔡启龙!</p>
var pEle = document.getElementsByTagName('p')[0]; // 获取p标签
pEle.style.color = 'red'; // 设置字体颜色
pEle.style.backgroundColor = 'blue'; // 设置背景颜色, css中的"-"用驼峰体替代
// js操作标签样式统一先".syle", 然后再".属性"即可
js绑定事件
事件
- 当符合某个条件时, 会自动触发的动作/响应, 称为事件
js绑定事件的两种方式
方式一: 不推荐使用
<script>
function func() {
alert('我被点击了!')
}
</script>
<button onclick="func()">button按钮</button>
方式二: 一般将script标签放在body最下方, 或者: xxx.onload = function (){}
<script>
function func() {
alert('我被点击了!')
}
window.onload = function () { // onload等待window对象加载完所有html代码之后再执行
var iEle = document.getElementById('d1');
iEle.onclick = function () {
// iEle标签被点击之后, 需要响应的操作
func()
}
}
</script>
<input type="button" value="input标签的按钮" id="d1">
js绑定事件示例
开关灯示例
<style>
.c1 {
200px;
height: 200px;
border-radius: 50%;
}
.c2 {
background-color: green;
}
.c3 {
background-color: red;
}
</style>
<div class="c1 c2 c3"></div>
<button>变色</button>
<script>
let btnEle = document.getElementsByTagName('button')[0]; // 找到button标签
btnEle.onclick = function () {
var divEle = document.getElementsByTagName('div')[0]; // 找到div标签
divEle.classList.toggle('c3');
}
</script>
input框获取焦点示例
<input type="text" placeholder="是兄弟就来砍我!"> <!--placeHolder, 留白, 默认小文本-->
<input type="text" value="linux运维" id="d1">
<script>
var iEle = document.getElementById('d1');
iEle.onfocus = function () { // input框获取焦点绑定事件
iEle.value = ''; // 将input框中的文本值清除
};
iEle.onblur = function () { // input框失去焦点绑定事件
iEle.value = '欢迎老板下次光临!'
};
</script>
展示当前时间时间
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
function showTime() {
var currentTime = new Date();
var cTime = currentTime.toLocaleString();
var iEle = document.getElementById('d1');
iEle.value = cTime;
}
var b1Ele = document.getElementById('b1');
var b2Ele = document.getElementById('b2');
var t = null; // 创建全局变量记录计数器状态
b1Ele.onclick = function () {
if (!t) { // 控制只创建一个循环计数器
t = setInterval(showTime, 1000);
}
b2Ele.onclick = function () {
clearInterval(t); // 清除循环计数器
t = null; // 将计数器变量置为0
}
}
</script>
省市联动
<select name="" id="d1">
<option value="">--请选择--</option> <!--设置省的select标签的默认option-->
</select>
<select name="" id="d2"></select>
<script>
var sel1Ele = document.getElementById('d1'); // 获取省的select标签
var sel2Ele = document.getElementById('d2'); // 获取市的select标签
var data = { // 定义省市字典
"河北省": ["廊坊", "邯郸", "石家庄"],
"北京": ["朝阳区", "海淀区", "昌平区"],
"上海": ["静安区", "黄浦区", "徐汇区"]
}
for (let province in data) { // 循环遍历省市字典获取每个省, 遍历字典时可以使用成员运算
var optEle = document.createElement('option'); // 创建省的option标签
optEle.innerText = province; // 设置省的option标签的文本内容
optEle.value = province; // 设置省的option标签的value值
sel1Ele.appendChild(optEle); // 将省的option标签添加到省的select标签中
sel1Ele.onchange = function () { // 选择省时绑定市的选择事件
if (!this.value) { // 过滤省的select标签中的默认option
sel2Ele.innerHTML = ''; // 清空上次选择留存在市的select标签中的option
}
else {
var currentPro = this.value; // 获取选择的省名, this指代的是当前操作对象本身, 类似于python后端的self
var cityArr = data[currentPro]; // 获取选择的省名对应的市的数组
sel2Ele.innerHTML = ''; // 清空上次选择留存在市的select标签中的option
for (let i = 0; i < cityArr.length; i++) { // 循环遍历市的数组获取每个市, 循环数组时, 需要三个条件: 开始, 结束, 自增
var optEle = document.createElement('option'); // 创建市的option标签
optEle.innerText = cityArr[i]; // 设置市的option标签的文本内容
optEle.value = cityArr[i]; // 设置市的option标签的value值
sel2Ele.appendChild(optEle); // 将市的option标签添加到市的select标签中
}
}
};
}
</script>
常见事件: onclick, onfocus, onblur, onchange
jQuery
简介
- jQuery类似于python后端的模块, 封装了一些JavaScript的操作
- 类似于ORM封装对数据库的操作
- 支持链式操作, 使代码更加简洁
- 对不同浏览器的兼容性良好
jQuery的语法结构
- $('选择器').action(属性)
- 先导入再使用,
<script src="jQuery.3.4.1.js"></script> - bootcdn, --> 赋值script标签
- HTML模板: settings-->File and Code Templates-->HTML FILe
// 设置p标签内容文本字体颜色, 原生js代码与jQuery代码对比
var pEle = document.getElementsByTagName('p')[0];
pEle.style.color = 'blue';
$('p').css('color', 'red');
pEle = document.getElementById('d1'); // <p id='d1'>jQuery</p>
$('#d1'); // jQuery查询到的结果都是jQuery对象, 即列表套标签, [p#d1]
$('#d1')[0]; // <p id='d1'>jQuery</p>
$(pEle); // js对象转jQuery对象, [p#d1]
jQuery选择器
// 基本选择器
$('span'); // 元素选择器
$('c1'); // 类选择器
$('#d1'); // id选择器
$('div.c1'); // 选择含有c1样式的div
$('div#d1'); // 选择id值为d1的div
$('#d1, span'); // 组合选择器, 逗号表示同级并列关系
// 层级选择器
$('div span') // 后代选择器
$('div > span') // 儿子选择器