html---js中的DOM

DOM操作标签

我们在DOM操作标签的时候在起变量名的时候如果该变量指向的是一个标签，那么建议使用xxxEle，eg:aEle\pEle\divEle\spanEle。

动态创建一个a标签并添加到页面指定位置

var aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.sogo.com/'  // 设置href属性
aEle.innerText = '点我去搜狗'  // 设置文本内容
var divEle = document.getElementById('d1') 
divEle.append(aEle)  // 内部追加标签

标签属性

1.默认属性
比如id,class等,设置的时候可以直接通过点的方式

```js
divEle.id = 'd1'
divEle.class = 'c1'
```

2.自定义属性
比如username,password等,设置的时候需要使用setAttribute

```js
divEle.setAttribute('username','jason')
```

3.其他

```js
divEle.getAttribute("age")		获取指定属性
divEle.removeAttribute("age")    移除指定属性
```

innerText与innerHTML

取值的时候

innerText只会获取文本内容
innerHTML获取文本和标签

设置值的时候

innerText不识别标签语法 
innerHTML识别标签语法

获取值操作

直接通过标签对象.value获取。

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

获取文件数据的时候：

标签对象.value只能获取到文件路径，而标签对象.files结果是一个数组，可以通过索引获取具体文件对象。

属性操作

class类属性操作

标签对象.classList  查看所有的类属性

标签对象.classList.remove(cls)  删除指定类
标签对象.classList.add(cls)  添加类
标签对象.classList.contains(cls)  存在返回true，否则返回false
标签对象.classList.toggle(cls)  存在就删除，否则添加

样式操作

语法：标签对象.style.属性名

divEle.style.backgroundColor="red"
divEle.style.height = '800px'

事件

就是用户在html页面的操作达到某个条件会自动触发的功能。eg:用户点击某个标签弹出警告框，双击某个标签提示信息。

如何给标签绑定事件

方法1：写一个功能函数，在标签属性里添加onclick属性绑定

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

方式2:在特定的标签属性上创建功能函数

<p>快来点我 点我 点我!!!</p>
<script>
  var pEle = document.getElementsByTagName('p')[0];
        pEle.onclick = function () {
            alert('我来了 准备好了吧')
        }
</script>

补充:事件函数中有一个固定的关键字this指代当前被操作对象本身。

事件案例

数据校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <p>输入用户名：
      <input type="text" id="d1" >
      <span style="color: red" id="username_error"></span>
  </p>
  <p>输入密码：
      <input type="text" id="d2">
      <span style="color: #ff0000" id="password_error"></span>
  </p>
  <button id="btn">提交</button>
  <script>
      var pd1Ele=document.getElementById('d1')
      var pd2Ele=document.getElementById('d2')
      var btnEle=document.getElementById('btn')
      btnEle.onclick=function (){
          let spanEle1=document.getElementById('username_error')
          let spanEle2=document.getElementById('password_error')
          if (pd1Ele.value === 'jason'){
              spanEle1.innerText='用户名不可以是jason'
          }
          if (pd2Ele.value ===  '123') {
              spanEle2.innerText='密码不可以是123'
          }
      }
  </script>
</body>
</html>

搜索框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    搜索框：<input type="text" value="默认的搜索内容" id="ssk">
</p>
<script>
    let inputEle = document.getElementById('ssk')
    // 绑定一个聚焦事件
    inputEle.onfocus = function () {
        inputEle.value = ''
    }
    // 绑定一个失焦事件
    inputEle.onblur = function () {
        inputEle.value = 'python编程'
    }
</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</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.“

下载使用:

下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件，里面写了一些js代码而已。

导入方式

1.本地jQuery文件
不会收到网络影响：直接在本地导入，在html页面上得写导入语句。

2.CDN加速服务

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

需要确保有互联网:min.js压缩之后的文件，容量更小；.js没有压缩的文件，容量稍大。

基本使用：将页面上的两个p标签文本内容一个变成红色一个变成绿色

// 原生的js代码
   let p1Ele = document.getElementsByTagName('p')[0]
   let p2Ele = document.getElementsByTagName('p')[1]
   p1Ele.style.color = 'red'
   p2Ele.style.color = 'green'
// jQuery代码
   $('#d1').css('color','red').next().css('color','green')

jQuery查找标签

基本选择器

基本选择器	说明
$('#d1')	id选择器
$('.c1')	class选择器
$('p')	标签选择器

组合案例：

$('div#d1')  // 查找所有div标签下id为d的div

层级选择器

层级选择器	说明
$("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(元素选择器)	选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

案例：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器

属性选	说明
$('[name]')	查找有name属性的标签
$('[name="jason"]')	查找name属性为jason的标签
$('div[name="jason"]')	查找name属性为jason的div标签

表单筛选器：专门针对form表单内的标签

原写法	简化
$('input[type="text"]')	$(':text')
$('[checked="checked"]')	$(':checked') 会将option也找到

筛选器方法

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

posted @ 2022-04-29 23:32 早安_1207 阅读(69) 评论(0) 收藏举报

刷新页面返回顶部

早安

不要让自己阻止自己过自己想过的生活