前端微讲解(六)

前端微讲解(六)

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小白陆禄绯,欢迎各位大佬的指点!!!

posted @ 2022-04-29 23:26  陆禄绯  阅读(45)  评论(0)    收藏  举报