一、DOM操作标签
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)
1.2 标签值获取
获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法
1.2.1 获取普通值数据
1.2.2获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
1.3 属性操作
1.3.1 类属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
1.3.2 样式操作
标签对象.style.属性名 #获取属性 使用=可以修改属性值
二、js事件
2.1事件使用方式
2.1.1 创建事件后标签绑定事件
<div οnclick=“f1()”></div>
<script>
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 常用事件类型
| 语法 | 作用 |
|---|---|
| onclick | 点击事件 |
| onfocus | 聚焦事件 |
| onblur | 失焦事件 |
| load | 页面加载完后触发事件 |
三、jQuery
3.1 jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
3.2 jQuery优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。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使用
3.5 jQuery查找标签
| 基本选择器 | 作用 |
|---|---|
| $(‘#d1’) | id选择器 |
| $(‘.c1’) | class选择器 |
| $(‘p’) | 标签选择器 |
| $(‘div#d1’) | 找到div下id选择器d1 |
| $(‘div,#d1,.c1’) | 找到div标签、id选择器d1、类选择器c1 |
| $(“x y”) | x的所有后代y（子子孙孙） |
| $(“x > y”) | x的所有儿子y（儿子） |
| $(“x + y”) | 找到所有紧挨在x后面的y |
| $(“x ~ y”) | x之后所有的兄弟y |
| 基础筛选器 | 作用 |
|---|---|
| :first | 第一个 |
| :last | 最后一个 |
| :eq(index) | 索引等于index的那个元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 |
| :not(元素选择器) | 移除所有满足not条件的标签 |
| :has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
| 属性选择器 | 作用 |
|---|---|
| $(‘[name]’) | 属性有name的标签 |
| $(‘[name=“j”]’) | 属性有name且name值为j的标签 |
| $(‘div[name=“j”]’) | div中属性有name且name值为j的标签 |
| 表单筛选器 | 作用 |
|---|---|
| $(‘:text’) | |
| $(‘:checked’) | |
| $(‘:selected’) |
| 筛选器方法 | 作用 |
|---|---|
| $(“#id”).next() | 同级别下一个标签 |
| $(“#id”).nextAll() | 同级别下面的其他所有标签 |
| $(“#id”).nextUntil(“#i2”) | 同级别该标签往下到对应标记标签 |
| $(“#id”).prev() | 同级别上一个标签 |
| $(“#id”).prevAll() | 同级别上面的其他所有标签 |
| $(“#id”).prevUntil(“#i2”) | 同级别该标签往上到对应标记标签 |
| $(“#id”).parent() | 该标签的父标签 |
| $(“#id”).parents() | 该标签的所有父标签 |
| $(“#id”).parentsUntil() | 该标签的所有父元素，直到对应标记的父元素为止 |
| $(“#id”).children() | 该标签的所有子标签 |
| $(“#id”).siblings() | 该标签的所有同级别标签 |
| $(“div”).find(“p”) | 从结果集查找对应的某标签 |
| $(“div”).filter(“.c1”) | 从结果集中过滤出对应的标签 |
3.6 jQuery链式操作
由于jQuery会在使用完方法后返回对象自身，所以可以再次调用方法
eg：
$(‘#d1’).parent().parent().parent()
$(‘#d1’).parent().parent().next().parents()
原文地址:https://blog.csdn.net/kdq18486588014/article/details/124500383
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_28578.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
