前端——DOM操作标签、js事件、jQuery

一、DOM操作标签

在起变量名的时候 如果该变量指向的是一个标签 那么建议使用

xxxEle

1.1 创建、添加标签

标签的创建、添加：

xEle = document.createElement(标签名字) #创建标签对象
xEle.属性 = 属性值 #设置标签的属性
faEle.append(标签对象) # 向某个标签添加创建的标签对象

例如：

var aEle = document.createElement(‘a’) # 创建a标签
aEle.href = ‘https://www.sogo.com/’ # 设置href属性
aEle.innerText = ‘点我去搜狗’ # 设置文本内容
var divEle = document.getElementById(‘d1’) # 查找标签
divEle.append(aEle)

标签可以有默认属性

标签对象.属性 = 属性值 进行设置

标签页可以有自定义属性

xEle.setAttribute(自定义属性名,自定义属性值)

1.2 标签值获取

innerText与innerHTML

获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法

1.2.1 获取普通值数据

标签对象.value #获取用户输入的值

1.2.2获取文件数据

标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象

1.3 属性操作

1.3.1 类属性操作

标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加

1.3.2 样式操作

标签对象.style.属性名 #获取属性 使用=可以修改属性值

eg:
divEle.style.height = ‘800px’

二、js事件

事件达到某个条件，自动触发的操作

2.1事件使用方式

2.1.1 创建事件后标签绑定事件

<div οnclick=“f1()”&gt;</div&gt;
<script&gt;
function f1() {
console.log(“创建事件后标签绑定事件”)
}
</script>

2.1.2 创建事件同时绑定事件

<div id = “div1”></div>
<script>
var divEle = document.getElementById(‘div1’)
divEle.onclick = function () {
console.log(“创建事件同时绑定事件”)
}
</script>

2.1.3 常用事件类型

三、jQuery

3.1 jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

3.2 jQuery优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件。

3.3 jQuery版本区别

• 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

3.4 jQuery使用

jQuery必须先导入才可以使用
jQuery官网

1. 本地jQuery文件
   不会收到网络影响
2. CDN加速服务
   需要确保有互联网
   min.js 压缩之后的文件 容量更小
   .js 没有压缩的文件 容量稍大

3.5 jQuery查找标签

3.6 jQuery链式操作

由于jQuery会在使用完方法后返回对象自身，所以可以再次调用方法
eg：

$(‘#d1’).parent().parent().parent()
$(‘#d1’).parent().parent().next().parents()

代码007普通

打赏 收藏 海报 链接