前端微讲解(六)
DOM操作标签
# html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>不知不觉中变秃了也变强了!!!</p>
</div>
</body>
</html>
# 通过js代码动态创建一个p标签并添加到指定位置
var pEle = document.createElement('p'); # 创建一个p标签
pEle.innerText = '这是一个p标签' # 给p标签添加内容
var divEle = document.getElementsByClassName('c1'); # 查找指定标签
divEle[0].append(pEle); # 内部追加标签
# innerText与innerHTML
1.获取值的时候
innerText只能获取文本内容,innerHTML可以获取文本内容和标签
2.设置值的时候
innerText不识别标签语法,innerHTML识别标签语法
# 设置标签属性的两种方法
1.默认属性
标签的默认属性就比如id,class等等,设置的时候可以直接通过点的方式
演示:divEle.id = 'd1'
2.自定义属性
标签的自定义属性就是自己定义的属性,由程序员自己定义,设置的时候需要使用setAttribute(),setAttribute()既
可以设置自定义属性,也可以设置默认属性
演示:divEle.setAttribute('属性名','属性值')
补充说明:
getAttribute("属性名") # 获取指定属性
removeAttribute("属性名") # 移除指定属性
获取值操作
# 1.获取普通值数据
标签对象.value
# 2.获取文件数据
标签对象.files # 结果是一个数组,可以通过索引获取具体文件对象
属性操作
# 1.类属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个属性
标签对象.classList.toggle() # 有就移除,没有就添加
# 2.样式操作
标签对象.style.属性名 # 添加样式
事件
事件就是达到某个条件自动触发的功能
# 1.给标签绑定事件
方式一:点击事件代码写在HTML代码里面
<p onclick="f()">我是一个点击事件</p>
<script>
function f() {
alert('点你能怎样')
}
</script>
方式二:点击事件代码不在HTML代码里面
<p>我是一个点击事件</p>
<script>
var pEle = document.getElementsByTagName('p')[0]
pEle.onclick = function () {
alert('点你能怎样')
}
</script>
# 2.this关键字
this是事件函数代码中的固定的关键字,指代当前被操作对象本身
jQuery简介
# 1.基本介绍
1.兼容多浏览器:
以为IE浏览器很多时候不兼容,所以很多时候针对IE浏览器前端程序员就需要重新写一份代码
2.里面封装了js代码,核心代码也就几十KB,加载速度快,极大地提升了编写效率
3.可以进行AJAX交互,异步提交,局部刷新
# 2.版本介绍
(1).1.X版本:兼容IE678
(2).2.X版本:不兼容IE678
(3).3.X版本:不兼容IE678
# 3.下载使用、导入方式
1.下载地址:https://jquery.com/
2.导入方式:
jQuery必须先导入才可以使用,jQuery本身就是一个js文件,只是里面写了一些js代码而已。
导入方式一:本地jQuery文件,不会受到网络影响
导入方式二:CDN加速服务,需要确保有互联网,min.js文件表示压缩之后的文件,容量更小,.js文件表示没有压缩的文件,
容量稍大
查找标签
1.基本选择器
代码 |
描述 |
$('#d1') |
id选择器 |
$('.c1') |
class选择器 |
$('p') |
标签选择器 |
$('div#d1') |
div下的id |
$('div,#d1,.c1') |
div下的class |
$('x y') |
x的所有的后代y |
$('x > y') |
x的所有儿子y |
$('x + y') |
找到紧挨在x后面的y |
$('x ~ y') |
x之后所有的兄弟y |
2.基本选择器
代码 |
描述 |
$(':first') |
第一个 |
$(':last') |
最后一个 |
$(':eq(index)') |
索引等于index的那个元素 |
$(':odd') |
所有索引值为奇数的元素,从0开始 |
$(':even') |
所有索引值为偶数的元素,从0开始 |
$(':gt(index)') |
大于给定索引值的元素 |
$(':lt(index)') |
小于给定索引值的元素 |
$(':not(元素选择器)') |
移除满足条件的标签 |
$(':has(元素选择器)') |
包含一个或多个标签在里面的标签 |
3.属性选择器
代码 |
描述 |
$('[属性名]') |
获取属性名 |
$('[属性名 = "属性值"]') |
属性等于 |
$('[属性名 != "属性值"]') |
属性不等于 |
4.表单筛选器
代码 |
描述 |
$(':text') |
text文本 |
$(':password') |
密文文本 |
$(':file') |
文件 |
$(':radio') |
单选框 |
$(':checkbox') |
多选框 |
$(':submit') |
提交按钮 |
$(':reser') |
重置按钮 |
$(':button') |
普通按钮 |
5.筛选择器方法
代码 |
描述 |
.next() |
同级别下一个 |
.nextAll() |
同级别下面所有的 |
.nextUntil() |
同级别下面到某个结束 |
.prev() |
同级别上一个 |
.prevAll() |
同级别上面所有的 |
.prevUntil("") |
同级别上面到某个结束 |
.parent() |
查找一个父标签 |
.parents() |
查找所有的父标签 |
.parentsUntil() |
查找父标签到某个结束 |
.children() |
查找儿子标签 |
.siblings() |
查找兄弟标签 |
这里是IT小白陆禄绯,欢迎各位大佬的指点!!!