DOM标签操作与事件与jQuery查找标签

2022-04-29 18:01:27 阅读：154 来源： 互联网

DOM之操作标签
事件
jQuery简介
查找标签

DOM之操作标签

创建标签对象

创建空标签对象。

var pEle = document.createElement('p')  // 创建p标签

标签对象的属性

获取或创建了标签对象后，可以直接给点+属性名的方式设置标签属性值。如：

标签对象.id = 'p1'  // 把标签的id属性设为'p1'
标签对象.style = 'color:red'  // 把标签的内容颜色变为红色
标签对象.value  // 表单标签中可以获取用户输入的数据
标签对象.files  // 获取用户上传的文件，结果是一个数组，可以通过索引获取具体文件对象

上述方法只能设置标签默认已有的属性，无法设置标签自定义的一些属性，但是使用Attribute方法就可以：

// 添加自定义属性
标签对象.setAttibute("任意属性名", "值")
// 获取标签属性的值
标签对象.getAttibute("属性名")
// 删除标签属性
标签对象.removeAttibute("属性名")

innerText与innerHTML

标签对象有两个关于标签内部内容的属性：innerText与innerHTML。

标签对象.innerText
标签对象.innerHTML

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

标签内部追加内容

标签对象.append("内容")  // 直接追加内容
标签对象.append(其他标签对象)  // 标签内部结尾追加标签

属性操作

class属性操作

方法	描述
标签对象.classList	查看所有的类属性
标签对象.classList.add("值")	添加class属性的值
标签对象.classList.remove("值")	移除class属性的值
标签对象.classList.contains("值")	判断是否含有某个class属性的值
标签对象.classList.toggle("值")	有则移除这个class值，无则添加这个class值

样式操作

改变标签的样式需要更改style属性的值，style属性.css属性也可以更改css样式。

标签对象.style.color = 'red'  // 设置标签内容的颜色为red
标签对象.style.fontSize = '18px'  // 设置标签内容大小为18px

注意：style里的属性值设置时没有-，如：font-size需要写成fontSize。

事件

在JS中，事件指的是达到某个条件，自动触发的功能，比如：单击输入框实现某些功能。

常用事件

事件	描述
鼠标事件
onclick	用户单击对象
ondblclick	用户双击对象
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	用户从对象上移开鼠标
onmouseover	鼠标移到对象上
焦点事件
onfocus	对象获得焦点，如：输入框在输入时
onblur	对象失去焦点，如：离开正在进行输入的输入框
onselect	在文本框中的文本被选中时发生
键盘事件
onkeydown	用户按下键盘按键
onkeyup	用户松开键盘按键
onkeypress	用户按下键盘按键并松开
其他事件
onchange	对象内容被改变
onsubmit	确认按钮被点击，使用的对象是form
onload	浏览器已完成页面的加载

事件绑定

方式一：html属性直接绑定

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
    function changeColor(ths) {
        ths.style.backgroundColor = "green";
    }
</script>

如果需要对对象本身进行一些操作就需要传入this，this表示触发事件的当前对象。

函数定义里的形参不能用this，需要用其他名称。

方式二：JS中获取标签对象绑定

<div id="d1">点我</div>
<script>
    var d1Ele = document.getElementById("d1")
    d1Ele.onclick = function changeColor() {
        this.style.backgroundColor = "green";
    }
</script>

事件案例

搜索框的聚焦与失焦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="text" id="d1" value="默认搜索的内容">
<script>
    // 1.查找input标签对象
    var inputEle = document.getElementById('d1');
    // 2.绑定一个聚焦事件
    inputEle.onfocus = function () {
        // 3.清空value值
        this.value = ''
    }
    // 4.绑定一个失焦事件
    inputEle.onblur = function () {
        // 5.添加一个全新的value值
        this.value = '小霸王游戏机'
    }
</script>
</body>
</html>

根据省份选城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<p>省市:
    <select name="" id="pro">

    </select>
</p>

<p>市区:
    <select name="" id="city">

    </select>
</p>
<script>
    let proEle = document.getElementById('pro');
    let cityEle = document.getElementById('city');
    // 1.自定义数据(以后有现成的组件实现)
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["合肥市", "芜湖市"],
        "上海": ["静安", "黄埔"],
        "深圳": ["龙湖", "罗湖"]
    };
    // 2.获取自定义对象中所有的key并添加到省市下拉框中
    for (let proVal in data) {
        // 2.1.创建option标签
        opEle = document.createElement('option');
        opEle.innerText = proVal;
        opEle.value = proVal
        // 2.2.添加到第一个下拉框中
        proEle.append(opEle)
    }
    // 3.文本域变化事件
    proEle.onchange = function () {
        // 3.0.先清空市区下拉框中的内容
        cityEle.innerHTML = '';
        let currentPro = this.value;
        let currentCityList = data[currentPro];
        // 3.1.循环获取市区数据
        for (let i = 0; i < currentCityList.length; i++) {
            // 3.2.创建option标签
            opEle = document.createElement('option');
            opEle.innerText = currentCityList[i];
            opEle.value = currentCityList[i]
            // 2.2.添加到第一个下拉框中
            cityEle.append(opEle)
        }
    }
</script>
</body>
</html>

jQuery简介

基本介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.”

下载与导入

jQuery需要下载导入或者通过网址引用才可以使用。

下载地址：jQuery-3.5.1下载

其他版本下载：jQuery下载所有版本（实时更新） (jq22.com)

官网jQuery压缩版引用地址:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

查找标签

jQuery中的选择器都是基于CSS选择器的。

基本选择器

基本选择器	描述
$('#id')	id选择器
$('.class')	class选择器
$('tagName')	标签选择器

例子	描述
$('div#d1')	选择div标签中id值为d1的
$('div,#d1')	同时选择div标签、id值为d1的
$("div p")	div标签后代中的p标签
$("div > p")	div标签为儿子的p标签

属性选择器

属性选择器	描述
$("[属性]")	选中有这项属性的标签
$("[属性=值]")	选中有这项属性的标签，并且值也要等于
$("[属性!=值]")	选中有这项属性的标签，并且值不等于

例子	描述
$('input[type="text"]')	选中input中type值为text的标签

属性筛选器

属性选择器中有着专门针对form表单内的标签的简化选择方法。

原写法	简化
input标签中的type属性
$('input[type="text"]')	$(':text')
$('input[type="password"]')	$(':password')
...
其他属性
$('[checked="checked"]')	$(':checked')
$('[selected="selected"]')	$(':selected')
...

注意：$(':checked')会同时找到option标签中的属性，而$(':selected')只会找到option标签中的属性。

基本筛选器

基本筛选器	描述
:first	第一个
:last	最后一个
:eq(index)	索引index位置的那个元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)	匹配所有大于给定索引值的元素
lt(index)	匹配所有小于给定索引值的元素
:not(元素选择器)	移除所有满足not条件的标签
:has(元素选择器)	选取(含有元素选择器选中的标签)的标签

例子	描述
$('p:first')	选取第一个p标签
$('p:eq(2)')	选取第三个p标签(索引从0开始的)
$('div:not(.d1)')	选中div中class值不等于d1的标签
$('ul:has(#d1)')	选取内部含有id是d1的ul标签

筛选器方法

方法	描述
$().next()	同级别往下查找一个
$().nextAll()	同级别往下查找所有
$().nextUntil("选择器")	同级别往下查找所有，直到满足选择器条件
$().prev()	同级别往上查找一个
$().prevAll()	同级别往上查找所有
$().prevUntil("选择器")	同级别往上查找所有，直到满足选择器条件
$().parent()	查找一个父标签
$().parents()	查找所有父标签(一直向上一个级别查找)
$().parentsUntil("选择器")	查找所有父标签，直到满足选择器条件
$().children()	查找儿子标签
$().siblings()	同级别上下所有标签(兄弟标签)

标签：jQuery,DOM,对象,标签,查找,div,选择器,属性
来源： https://www.cnblogs.com/yume-zbh/p/16207592.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9