DOM操作标签

'''
在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
xxxEle
eg:aEle\pEle\divEle\spanEle
'''
# 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a') # 创建a标签
aEle.href = 'https://www.sogo.com/' # 设置href属性
aEle.innerText = '点我去搜狗' # 设置文本内容
var divEle = document.getElementById('d1') # 查找标签
divEle.append(aEle) # 内部追加标签
"""
标签可以有默认属性
比如 id class 等 设置的时候可以直接通过点的方式
divEle.id = 'd1'
也可以有自定义属性
比如 username password 等 设置的时候需要使用setAttribute
divEle.setAttribute('username','jason') setAttribute()既可以设置自定义属性也可以设置默认属性 divEle.getAttribute("age") 获取指定属性
divEle.removeAttribute("age") 移除指定属性
"""
# 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'

事件

"""
达到某个条件 自动触发的功能
eg:用户点击某个标签弹出警告框 双击某个标签提示信息
"""
# 如何给标签绑定事件
方式1:
<p onclick="showMsg()">快来点我 点我 点我!!!</p>
<script>
function showMsg() {
alert('猴急猴急的干啥 一会儿让你好看!!!')
}
</script>
方式2:
<p>快来点我 点我 点我!!!</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert('我来了 准备好了吧')
}
</script>
'''
补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身
'''

事件案例

# 1.数据校验
获取用户名和密码 校验是否符合 并暂时相应提示
'''给普通按钮绑定一个点击事件 触发校验动作'''
<p>username:
<input type="text" id="username">
<span style="color: red" 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>
// 1.查找按钮标签
let btnEle = document.getElementById('btn');
// 2.绑定点击事件
btnEle.onclick = function () {
// 3.获取用户名和密码
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
// 4.判断
if (userNameVal === 'jason'){
// 给用户名下面的span标签设置文本内容
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名不能是jason!!!'
}
if (passWordVal === '123'){
// 给密码下面的span标签设置文本内容
let userSpanEle = document.getElementById('password_error')
userSpanEle.innerText = '密码不能是123!!!'
}
}
</script> # 2.搜索框案例
<input type="text" id="d1" value="默认搜索的内容">
<script>
// 1.查找input标签对象
var inputEle = document.getElementById('d1')
// 2.绑定一个聚焦事件
inputEle.onfocus = function () {
// 3.清空value值
this.value = ''
}
// 4.绑定一个失焦事件
inputEle.onblur = function () {
// 5.添加一个全新的value值
this.value = '小霸王游戏机'
}
</script>
# 3.省市联动
<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]
// 2.2.添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>

jQuery简介

'''基本介绍'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新(django部分再学) '''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可 '''下载使用'''
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(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 = 'green' jQuery代码
$('#d1').css('color','red').next().css('color','green')

查找标签

'''基本选择器'''
$('#d1') # id选择器
$('.c1') # class选择器
$('p') # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y") // x的所有后代y(子子孙孙)
$("x > y") // x的所有儿子y(儿子)
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y '''基本筛选器'''
$('ul li:first')
$('ul li:last')
$('ul li:eq(2)')
$('ul li:odd')
$('ul li:even')
$('ul li:gt(2)')
$('ul li:lt(2)')
$('ul li:not(li)')
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签 '''属性选择器'''
$('[name]')
$('[name="jason"]')
$('div[name="jason"]') '''表单筛选器:专门针对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()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签 核心:
对象在调用完一个方法之后返回的还是一个对象
"""

DOM操作标签、事件绑定、jQuery框架/类库的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. DOM操作标签,事件绑定,jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  3. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  4. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  5. jQuery之元素操作及事件绑定

    1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...

  6. jquery的链式操作以及事件绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

  8. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  9. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

随机推荐

  1. servlet中的HttpServletRequest对象

    HttpServletRequest对象表示客户端浏览器发起的请求,当客户端浏览器通过HTTP协议访问服务器时,Tomcat会将HTTP请求中的所有信息解析并封装在HttpServletRequest ...

  2. python学习笔记(十)——进程间通信

    python 在进程间通信时有很多方式,比如使用Queue的消息队列,使用 pip的管道通信,share memory 共享内存或 semaphore 信号量等通信方式. 这里我们演示一下通过消息队列 ...

  3. Numpy的数学统计函数

    Numpy的数学统计函数 本节内容: 1.Numpy有哪些数学统计函数: 函数名 说明 np.sum 所有元素的和 np.prod 所有元素的乘积 np.cumsum 元素的累积加和 np.cumpr ...

  4. 高速PCB设计名词解析

    1.吸芯效应 "芯吸效应"是超细纤维特有的性能,是指超细纤维中孔细,接近真空时,近水端纤维管口与水分子接触形成纤维中真空孔隙,此时大气压值超过纤维内部的真空,水就自然压积进入纤维孔 ...

  5. 什么是jsp?jsp的内置对象有哪些?

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [什么是jsp? ...

  6. SQL之总结(三)

    1.怎么在where指定多个值得问题? select * from tb_article where article_id in(10008,10009) 结果如下: 如果是字符串的话: select ...

  7. 前端系列——快速理解babel6配置过程

    繁琐的配置? 你能快速读懂babel的官方文档吗? 你能根据官方文档快速配置好babelrc吗? 你能明白自己需要哪些插件吗? 没有搞明白这3个问题,请往下看. 快速理解babel 6 来看一张让人颤 ...

  8. 关于CSS的个人理解

    CSS的个人理解 一.概念 层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理 由浏览器将C ...

  9. java中什么是局部内部类Local inner class?

    5.局部内部类Local inner class 马克-to-win:什么叫局部内部类?内部类声明位置:1.它的外部类的范围之内.2.在几个程序块的范围之内.例如,由方法定义的块中或甚至在for循环体 ...

  10. for 循环详解

    学习目标: 掌握 for 循环的使用 学习内容: 1.for语法 for(初始化语句; boolean表达式; 循环后操作语句) { 循环体; } 流程图如下: 特点: 初始化语句:只在循环开始时执行 ...