DOM操作标签
'''
在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
xxxEle
eg:aEle\pEle\divEle\spanEle
'''
基本使用
动态创建一个标签
var 变量名 = document.createElement('标签（a,p,div....）')
例如：
var aEle = doucument.createElement('a') 创建一个a标签
<a></a>
还可以给我们创建的a标签设置属性：
aEle.href = 'www.baidu.com' 设置href属性
相当于:<a href='www.baidu.com'></a>
aEle.innerText = '点我' 设置文本内容
相当于:<a href='www.baidu.com'>点我</a>
将它添加到页面的指定位置：
假设我们网页中有个id为div1的div。我们将刚刚的a标签添加到这个div中:
var divEle = document.getElementById('div1') 查找标签
divEle.append(aEle) 在尾部追加
<div id='div1'>
<a href='www.baidu.com'>点我</a>
</div>
"""
标签可以有默认属性
比如 id class 等 设置的时候可以直接通过点的方式
divEle.id = 'd1'
也可以有自定义属性
比如 username password 等 设置的时候需要使用setAttribute
divEle.setAttribute('username','jason')
setAttribute()既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("age") 获取指定属性
divEle.removeAttribute("age") 移除指定属性
"""
innerText与innerHTML的区别
<div id="main" class="clearfix">
<div id="child1"></div>
<div id="child2"></div>
<p>p标签</p>
</div>
innerText与innerHTML的区别
var divEle = document.getElementById('main')
获取值的时候
innerText只会获取文本内容
divEle.innerText
'p标签'
innerHTML获取文本和标签
divEle.innerHTML
'\n <div id="child1"></div>\n <div id="child2"></div>\n\t\t<p>p标签</p>\n '
设置值的时候
innerText不识别标签语法
divEle.innerText = '<a>a标签</a>'
'<a>a标签</a>'
会把div中内容全部清空然后放入文本内容
页面中html代码：
<div id="main" class="clearfix">
"<a>a标签</a>"
</div>
innerHTML识别标签语法
divEle.innerHTML = '<a>a标签</a>'
'<a>a标签</a>'
页面中html代码：
<div id="main" class="clearfix">
<a>a标签</a>
</div>
获取值操作
input、option、textarea...
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
属性操作
'''类属性操作'''
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
'''样式操作'''
标签对象.style.属性名
divEle.style.height = '800px'
事件绑定
js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式
在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护
在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效
在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数
<html>
<button onclick="triggerClick1()">使用 元素 onclick 属性绑定事件 (不推荐: html 和 js 耦合)</button>
<br>
<button id="btn2">在 js 中为元素的 onclick 属性赋值函数 (不推荐: 只能绑定一个函数, 多次绑定, 之前的会失效)</button>
<br>
<button id="btn3">使用 addEventListener 为元素绑定事件 (推荐)</button>
<br>
<script>
function triggerClick1() {
console.log('使用 元素 onclick 属性绑定事件')
}
let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
console.log('在 js 中为元素的 onclick 属性赋值函数 11111111')
};
// 第二次赋值, 会让之前绑定的函数失效
// 其实本质是给元素的 onclick 属性赋值
btn2.onclick = function () {
console.log('在 js 中为元素的 onclick 属性赋值函数 22222222')
};
let btn3 = document.getElementById('btn3');
/*
addEventListener()，事件监听，用于向指定的元素添加事件监听
第一个参数: 事件名 (注意: 是单纯的 click, 而不是 onclick 没有 'on')
第一个参数event：指事件的类型（如’click’,‘mousedown’）
第二个参数function：事件触发后调用的函数
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。
*/
btn3.addEventListener('click', function () {
console.log('在 js 中调用元素的 addEventListener 函数, 以绑定事件 (推荐做法)')
})
</script>
</html>
小案例
<p>省市:
<select name="" id="pro">
</select>
</p>
<p>市区:
<select name="" id="city">
</select>
</p>
<script>
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
// 1.自定义数据(以后有现成的组件实现)
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["合肥市", "芜湖市"],
"上海": ["静安", "黄埔"],
"深圳": ["龙湖", "罗湖"]
};
// 2.获取自定义对象中所有的key并添加到省市下拉框中
for (let proVal in data) {
// 2.1.创建option标签
opEle = document.createElement('option');
opEle.innerText = proVal;
opEle.value = proVal
// 2.2.添加到第一个下拉框中
proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
// 3.0.先清空市区下拉框中的内容
cityEle.innerHTML = '';
let currentPro = this.value;
let currentCityList = data[currentPro];
// 3.1.循环获取市区数据
for (let i=0;i<currentCityList.length;i++){
// 3.2.创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i]
// 3.3.添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>
jQuery
jQuery简介
jQuery是轻量级的JavaScript库。它封装了很多预定义的对象和实用函数，能够帮助使用者优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的优势
1.轻量级的JavaScript库：jQuery非常轻巧，以1.9.1为例，开发版仅有263KB，而精简版经过UglifyJS压缩后，大小只有91KB。
2.强大的选择器：jQuery支持css1到css3几乎所有的选择器，以及jQuery独创的高级复杂的选择器。另外还通过插件支持XPath选择器。
3.出色的DOM操作：jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关的程序时更方便。jQuery可以轻松的完成原本十分复杂的操作。
4.可靠的事件处理：jQuery的事件处理机制吸收了JavaScript的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进、以及非入侵式编程方面，jQuery也做的非常不错。
5.完善的Ajax：jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用问题。
6.不污染的顶级变量：jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出操作权，绝对不会污染其他的对象。使得jQuery可以与其他的js库共存，在项目中放心的引用而不需要担心后期的冲突。
7.浏览器兼容性：jQuery能够在IE6.0+、FF3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异，使得开发都不必在项目中建立浏览器兼容库。注意：从jQuery 2.0开始，不再支持IE8.0一下版本。
8.链式操作：jQuery中最具有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
9.隐式迭代：当用jQuery找到带有".myClass"类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅的减少了代码量。
10.丰富的插件支持： jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。
11.完善的文档：jQuery的文档非常丰富。
12.开源：jQuery是一个开源产品，任何人都可以自由使用并提出改进意见。
导入jQuery
1.CDN加速服务(在head中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
2.jQuery官网下载本地导入
jQuery基本选择器
id选择器：$("#id的属性值")
获取与指定id属性值匹配的元素
$("#div1")
类选择器：$(".class的属性值")
获取与指定的class属性值匹配的元素
$(".p1")
标签选择器：$("标签名")
获取所有匹配标签名称的元素
$("a")
组合选择器：$("选择器1，选择器2")
$("#d1,.p1")
选择id为d1的，或class为p1的元素
jQuery层级选择器
后代选择器：$("选择器1 选择器2")
选择选择器1内部的所有选择器2
$("#d1 a")
选择id为d1的元素里面所有的a标签
子选择器：$("选择器1 > 选择器2")
选择选择器1内部的所有子选择器2
$("#d1>a")
选择id为d1的元素里所有子元素a
相邻选择器：$("选择器1 + 选择器2")
选择选择器1后面紧跟着的选择器2
$("#d1+a")
选择id为d1的元素后面紧跟的元素a
兄弟选择器: $("选择器1 ~ 选择器2")
选择选择器1后面的所有选择器2
$("#d1~a")
选择id为d1的元素后面的所有a标签
jQuery属性选择器
$("[属性名]")
包含指定属性的
$("[type]")
选择所有有type属性的元素
$("[属性名='值']")
包含指定属性且等于指定值的
$("[class='p1']")
选择使用有class属性且属性值为p1的元素
$("[属性名!='值']")
包含指定属性不等于指定值的
$("[class!='p1']")
选择使用有class属性但是属性值不为p1的元素
$("选择器[属性名]")
$(".div1[id]")
选择class为div1的并且有id属性的元素
jQuery过滤选择器
| 过滤器名 |
jQuery语法 |
说明 |
返回 |
| :first |
$('li:first') |
选取第一个元素 |
单个元素 |
| :last |
$('li:last') |
选取最后一个元素 |
单个元素 |
| :not(selector) |
$('li:not(.red)') |
选取class不是red 的li元素 |
集合元素 |
| :even |
$('li:even') |
选择索引(0开始)是偶数的所有元素 |
集合元素 |
| :odd |
$('li:odd') |
选择索引(0开始)是奇数的所有元素 |
集合元素 |
| :eq(index) |
$('li:eq(2)) |
选择索引(0开始)等于index 的元素 |
单个元素 |
| :gt(index) |
$('li:gt(2)') |
选择索引(0开始)大于index的元素 |
集合元素 |
| :lt(index) |
$('li:lt(2)') |
选择索引(0开始)小于index的元素 |
集合元素 |
| :header |
$(':header') |
选择标题元素，hl ~h6 |
集合元素 |
| :animated |
$(':animated') |
选择正在执行动画的元素 |
集合元素 |
| :focus |
$(':focus') |
选择当前被焦点的元素 |
集合元素 |
内容过滤选择器
| 过滤器名 |
jQuery语法 |
说明 |
返回 |
| :contains("text") |
$(':contains("ycku.com")') |
选取含有"ycku.com"文本的元素 |
元素集合 |
| :empty |
$(':empty') |
选取不包含子元素或空文本的元素 |
元素集合 |
| :has(selector) |
$(':has(.red)') |
选取含有class是red的元素 |
元素集合 |
| :parent |
$(':parent') |
选取含有子元素或文本的元素 |
元素集合 |
筛选器方法
# 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") 直到id为i2的才停止
# 同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找父标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
# 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)
计时器
<style type="text/css">
body {
font-family:"微软雅黑";
margin:20px;
padding:0;
text-align:center;
}
input {
position:relative;
left:50%;
transform:translateX(-50%);
padding:10px 20px;
display:block;
outline:none;
background-color:#FFFFFF;
border:1px solid #000000;
cursor:pointer;
margin-top:15px;
font-size:18px;
font-family:"微软雅黑";
transition:all 0.15s;
}
input:hover,input:hover {
background-color:#333333;
color:#FFFFFF;
}
</style>
</head>
<body>
<span id="txt">00时00分00秒00</span>
<input type="button" value="开始计时">
<input type="button" value="结束计时">
</body>
<script type="text/javascript">
var timer;
var count = 0;
var clickStart = 0;
var txt = document.getElementById('txt');
var aInput = document.getElementsByTagName('input'); /*查找所有的input标签*/
aInput[0].onclick = function() {
clickStart++;
// clickStart == 0 || clickStart == 2
if (clickStart %2 == 0 ) {
clearInterval(timer);
aInput[0].value = '继续计时';
clickStart = 0;
} else {
timer = setInterval(function() {
var h = parseInt(count / 1000 / 60 / 60);
var m = parseInt(count / 1000 / 60) % 60;
var s = parseInt(count / 1000) % 60;
var ms = parseInt(count / 10) % 100;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
ms = ms < 10 ? '0' + ms : ms;
txt.innerHTML = h + '时' + m + '分' + s + '秒' + ms;
count += 10;
}
, 10)
aInput[0].value = '暂停计时';
}
}
aInput[1].onclick = function() {
count = 0;
clickStart = 0;
clearInterval(timer);
txt.innerHTML = '00时00分00秒00';
aInput[0].value = '开始计时'
}
</script>
