文章目录

  • 一、DOM操作标签
  • 1.1 创建、添加标签
  • 1.2 标签值获取
  • 1.2.1 获取普通值数据
  • 1.2.2获取文件数据
  • 1.3 属性操作
  • 1.3.1 类属性操作
  • 1.3.2 样式操作
  • 二、js事件
  • 2.1事件使用方式
  • 2.1.1 创建事件后标签绑定事件
  • 2.1.2 创建事件同时绑定事件
  • 2.1.3 常用事件类型
  • 三、jQuery
  • 3.1 jQuery介绍
  • 3.2 jQuery优势
  • 3.3 jQuery版本区别
  • 3.4 jQuery使用
  • 3.5 jQuery查找标签
  • 3.6 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()”></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介绍

  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查找标签

基本选择器

作用

$(‘#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()