-
DOM操作标签
-
事件
-
JQuery简介
-
DOM操作标签
"""
我们在之后起变量名的时候， 如果这个变量指向的是一个标签，那么推荐使用
xxxEle: aEle、pEle、divEle、spanEle
"""
# 动态创建一个a标签并添加一个到页面指定位置
// 1.创建一个a标签
var aEle = document.createElement('a')
//2.设置href属性
aEle.href = 'http://www.7K7k.com/'
//3.设置文本内容，提示信息
aEle.innerText = '小朋友 快来玩呀'
// 4.查找标签
var divEle = document.getElementById('d1')
// 5.内部追加标签
divEle.append(aEle)
实操:
<div id="d1">
<p>这是一个p标签</p>
</div>
<script>
// 1.创建一个a标签
var aEle = document.createElement('a')
//2.设置href属性
aEle.href = 'http://www.7K7k.com/'
//3.设置文本内容，提示信息
aEle.innerText = '小朋友 快来玩呀'
// 4.查找标签
var divEle = document.getElementById('d1')
// 5.内部追加标签
divEle.append(aEle)
</script>
"""
标签可以有默认的属性，例如id、class等，设置的时候可以直接使用点的方式
divEle.id = 'd1'
也可以有自定义属性，例如username、password等，设置的时候需要使用setAttribute
divEle.setAttribute('username','owen')
setAttribute()既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("password") 获取指定属性
divEle.removeAttribute("password") 移除指定属性
"""
# innerText与innerHTML的区别
获取值时:
innerText只会获取文本内容
innerHTML获取文本和标签
设置值时:
innerText不识别标签语法
innerHTML识别标签语法
input option textarea
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 这个只能获取到文件路径，用处不大
标签对象.files # 结果为一个数组， 可以通过索引获取具体文件对象
""" 类属性操作 """
# 查看所有的类属性
标签对象.classList
# 添加类属性
标签对象.classList.add()
# 移除类属性
标签对象.classList.remove()
# 判断是否含有某个类属性
标签对象.classList.contains()
# 有则移除 无则添加
标签对象.classList.toggle()
# 实操
标签对象.style.属性名
divEle.style.height = '800px'
"""
达到某个条件时， 自动触发的功能
比如当用户疯狂点击某个标签弹出警告框、或双击某个标签提示信息
补充:事件函数中有一个固定的关键字this指代当前被操作对象本身
"""
方式1:
<body>
<p onclick="showMsg()">小朋友快来玩呀</p>
<script>
function showMsg() {
alert('打麻药，腰子嘎啦')
}
</script>
</body>
方式二:
<p>小帅哥快来玩呀</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert('男宾两位')
}
</script>
#
<p>username:
<input type="text" id="username">
<span style="color: #e30b0b" id="username_error"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red" id="password_error"></span>
</p>
<input type="button" value="提交" id="btn">
<script>
/*绑定点击事件*/
let btnEle = document.getElementById('btn');
/*查找按钮标签*/
btnEle.onclick = function () {
/*获取用户名和密码*/
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
/*判断*/
if (userNameVal === '窝嫰蝶'){
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名不能是窝嫰蝶'
}
if (passWordVal === '111'){
let userSpanEle = document.getElementById('password_error')
userSpanEle.innerText = '密码不能是111'
}
}
</script>
#
<input type="text" id="d1" value="想干嘛">
<script>
/*查找input标签对象*/
var inputEle = document.getElementById('d1')
/*绑定一个聚焦事件*/
inputEle.onfocus = function () {
/*清空value值*/
this.value = ''/*this指代iEle本身*/
}
/*绑定一个失焦事件*/
inputEle.onblur = function () {
/*添加一个全新的value值*/
this.value = '玛卡巴卡'
}
</script>
# 省市联动
<p>省市:
<select name="" id="province_city">
</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) {
// 创建option标签
opEle = document.createElement('option');
opEle.innerText = proVal;
opEle.value = proVal
//添加到第一个下拉框中
proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
// 先清空市区下拉框中的内容
cityEle.innerHTML = '';
let currentPro = this.value;
let currentCityList = data[currentPro];
//循环获取市区数据
for (let i=0;i<currentCityList.length;i++){
// 创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i]
// 添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>
'''基本'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新
'''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
'''下载使用'''
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘,所以可以在pycharm中定义，每打开HTML时，自动填写)
jQuery本身就是一个js文件 里面写了一些js代码而已
'''导入方式'''
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
'''基本使用'''
将页面上的两个p标签文本内容一个变成红色 一个变成蓝色
js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'blue'
jQuery代码
$('#d1').css('color','red').next().css('color','blue')
""" 基本选择器 """
$('#id'); # id选择器
$('.c');;; # class选择器
$('p');; # 标签选择器
$('div#d1'); # div标签里面所有的d1的ID
$('div,#d1,.c1'); # 查找div id为d1和class为c1的标签
$("x y"); # x的所有后代y
$("x > y"); # x的所有儿子y
$("x + y"); # 找到所有紧挨在x后面的y
$("x ~ y"); # x之后所有的兄弟y
'''基本筛选器'''
$('ul li:first'); # 查找第一个li
$('ul li:last'); # 查找最后一个li
$('ul li:eq(2)'); # 查找第二个li
$('ul li:odd'); # 查找为奇数的li
$('ul li:even'); # 查找偶数的li
$('ul li:gt(2)'); # 查找索引大于2的所有li
$('ul li:lt(2)'); # 查找索引小于2的所有li
$('ul li:not(li)'); # 取反
$('ul:has(#d1)'); # 查看内部含有id是d1的ul标签
'''属性选择器'''
$('[name]');
$('[name="owen"]');
$('div[name="owen"]');
'''表单筛选器:专门针对form表单内的标签'''
$('input[type="text"]'); # 筛选器简$(':text')
$(':checked'); # 会将option也找到
$(':selected'); # 只会找到option标签
'''筛选器方法'''
# 同级别往下查找
$("#id").next();
$("#id").nextAll();
$("#id").nextUntil("#i2");
# 同级别往上查找
$("#id").prev();
$("#id").prevAll();
$("#id").prevUntil("#i2");
# 查找父标签
$("#id").parent();
$("#id").parents();
$("#id").parentsUntil();
# 查找儿子和兄弟
$("#id").children(); # 所有儿子标签
$("#id").siblings(); # 同级别上下所有标签
# 链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
"""
核心:
对象在调用完一个方法之后返回的还是一个对象
"""
浙公网安备 33010602011771号