js属性，DOM操作操作标签样式，事件，js事件案例，jQuery库_document.getelementbyid("")操控标签样式-CSDN博客

本文链接：https://blog.csdn.net/Yydsaoligei/article/details/126550755

一：获取用户输入

1.书写格式

1.普通数据（input输入，选择）

标签.value

# 获取input框输入的内容
let texEle = document.getElementById('d1')
console.log(texEle.value)

# 获取select框中选择的数据
let seEle = document.getElementById('d2')
seEle.value
'beijing'

# 获取radio框中选择的数据
let rEle = document.getElementById('d3')
rEle.value
'male'

2.文件数据(上传的文件)

标签对象.files[0]

let fEle = document.getElementById('d1')

fEle.files
FileList {0: File, length: 1}
fEle.files[0]
File {name: 'readme.txt', lastModified: 1659163520000, lastModifiedDate: Sat Jul 30 2022 14:45:20 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 45, …}

二：JS属性操作

1.操作语法

操作语法	语法说明
标签对象.classList	获取标签所有的类属性
标签对象.classList.contains()	判断标签是否具有某一个类属性
标签对象.classList.add()	添加类属性
标签对象.classList.remove()	删除类属性
标签对象.claddList.toggle()	类属性存在则删除，没有则添加

2.代码实现

    <style>
    .c1 {
        background-color: pink;
        height: 300px;
        width: 300px;
        border-radius: 50%;
        border: 3px red solid;
    }
    .c2 {
        background-color: green;
    }
    .c3 {
        background-color: gold;
    }
    </style>

</head>
<div id="d1" class="c1 c2 c3"></div>
</body>

let divEle = document.getElementById('d1')
undefined
divEle.classList
DOMTokenList(3) ['c1', 'c2', 'c3', value: 'c1 c2 c3']
divEle.classList.remove('ce')
undefined
divEle.classList.remove('c3')
undefined
divEle.classList.add('c3')
undefined
divEle.classList.contains('c1')
true
divEle.classList.contains('c4')
false
divEle.classList.toggle('c3')
false
divEle.classList.toggle('c3')
true

三：DOM操作操作标签样式

统一先用style起手

<p>我想上天</p>


let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'green'
'green'
pEle.style.fontSize = '23px'
'23px'
pEle.style.backgroundColor = 'pink'
'pink'
pEle.style.border = '1px black solid'
'1px black solid'

四：事件

1.定义：

可以理解为html标签绑定了一些额外的能够触发js代码运行的功能
达到某个事先设定好的条件自动触发的动作

2.分类

类型	功能
onclick	单击
ondblclick	双击
onfocus	标签获得焦点
onblur	标签失去焦点
onchange	改变内容，通常用于表单元素，select省市联动
onkeydown	键盘按键被按下
onkeypress	键盘按键被按下并松开
onkeyup	键盘按键被松开
onload	完成一张页面或者一幅画的加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某个元素移开
onmouseover	鼠标移动到某个元素上

3.绑定事件的两种方式

1.方式一：提前写好函数标签内部指定

<input type='button' value='点我试试' οndblclick='func1()'>

<script>
	function func1() {
        alert(111)
    }
</script>

2.方式2：查找标签然后批量绑定（推荐使用的方式）

<button id='d1'>点我</button>

<script>
let btnEle = document.getElementById('d1')
	btnEle.onclick = function() {
        alert(333)
    }
</script>

4.事件中的关键字this

this：指代的是当前被操作的绑定事件的标签

let btnEle = document.getElementById('d1')
	btnEle.onclick = function () {
        alter(123)
        console.log(this)
    }

5.补充知识点（了解）

等待文档加载完毕后再执行一些代码

window.onload = function () {
    页面js代码
}

五：JS事件案例

省市联动

<body>
<select name="" id="pro">
<!--    <option value="">&#45;&#45;请选择&#45;&#45;</option>-->
</select>

<select name="" id="city">
<!--    <option value=""></option>-->
</select>

<script>
    const data = {
        '北京':['朝阳','大兴','海淀'],
        '上海':['青浦','浦东','徐汇'],
        '河南':['洛阳','信阳','洛阳'],
        '安徽':['合肥','芜湖','蚌埠'],
    }
    const pro = document.getElementById('pro')
    const city = document.getElementById('city')
    //把省放到第一个select框中
    for (let k in data) {
        //1 创建option标签
        const option = document.createElement('option')
        //2 添加文本到option中去
        option.innerText = k;
        //3 给option设置value
        option.value = k;
        //4 把option标签添加到第一个select中去
        pro.append(option)
    }

    //onchange事件用在select框中,文本值改变会触发select事件
    pro.onchange = function () {
        //1 拿到select框当次改变的值
        const proEle = pro.value;
        //2 拿到该省下所有的城市
        const cityList = data[proEle];
        city.innerText = ''
        //3 循环把所有的城市放到第二个select框中
        for (let i=0; i<cityList.length; i++) {
            const cityEle = document.createElement('option')

            cityEle.innerText = cityList[i];

            cityEle.value = cityList[i];

            city.append(cityEle)
        }

    }

</script>
</body>

六:jQuery库

1.jQuery的特点

内部封装了原生的js代码，还额外添加了很多功能，类似于python中的模块
兼容多浏览器的JavaScript类库
极大简化JavaScript编程，即：通过书写更少的js代码，完成js操作
jQuery的文件大小只有几十KB
链式操作：可以把多个操作写在一行代码里，更加简洁
支持事件，样式，动画，还简化了js操作css的代码，并且代码的可读性比js强
Ajax支持：简化了Ajax操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信
有丰富的第三方插件

2.jQuery的下载

1.浏览器搜索jQuery官网，进入官网，点击Download

在这里插入图片描述

2.最好选择压缩的版本下载即可

在这里插入图片描述

3.jQuery的两种导入方式

1.官网提前下载好文件，放到项目的本地文件中，在从本地导入
2.通过网络CDN服务导入，只要计算机能够联网就能够使用

赋值下面图片中的标签，粘贴到html文件中的head标签中（配置：file code template）

在这里插入图片描述

3.建议：同时使用两种方式导入，双保险

//网络端导入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//本地导入
<script src="JQuery3.6.js"></script>

3.jQuery的固定语法及基本使用

语法：

jQuery(选择器).操作()
简写：$(选择器).action()

jQuery与js代码对比

eg:将p标签内部文本的颜色改成绿色

let pEle = documemt.getElementById('d1')
pEle.style.color = 'green'

$('p').css('color', 'green')

4.基本选择器

1：id选择器

$('#id')
$('#d1')

2：class选择器

$('.className')
$('.c1')

3：标签选择器

$('TagName')
$('span')

5.标签对象和jQuery对象

DOM对象：

1.通过getElementBy（）查询出来的为DOM对象

2 通过getElementsByName（）查询出来的标签对象为DOM对象

3.通过getElementTagName（）查询出来的标签对象为DOM对象

4.通过createElement（）方法创建的对象是DOM对象。

JQuery对象：

1.通过JQuery提供的API创建的对象为JQuery对象

2.通过JQuery包装的DOM对象也是JQuery对象

3.通过JQuery提供的API查询的对象是JQuery对象。

jQuery对象转标签对象

$(DOM对象)

$('#d1')[0]

标签对象如何转jQuery对象

jQuery对象下标取出相应的DOM对象

$(document.getElementById('d1'))

6.组合选择器

//1 拿到所有的标签
console.log($('*'))

//2 并列+混用
console.log($('#d1,.c1,p'))

//3 后代
$("x y");// x的所有后代y
console.log($('div span'))

//4 儿子
$("x > y");// x的所有儿子y
console.log($('div>span'))

//5 毗邻
 $("x + y")// 找到所有紧挨在x后面的y
console.log($('div+span'))

//6 弟弟
 $("x ~ y")// x之后所有的兄弟y
console.log($('div~span'))

7.基本筛选器

选择器	作用
：first	第一个
：last	最后一个
:eq(index)	索引等于index的那个元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:not(元素选择器)	移除所有满足not条件的标签
:has(元素选择器)	选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

<body>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li id="d4">li4</li>
    <li>li5</li>
</ul>
<script>

    //1 所有的标签变色
    // $('ul li').css('color', 'red')

    //2 第3个标签变色
    // $('ul li:eq(2)').css('color', 'red')

    //3 第一个和最后一个
    // $('ul li:first').css('color', 'yellow')
    // $('ul li:last').css('color', 'yellow')

    //4 奇数和偶数
    // $('ul li:even').css('color', 'green')
    // $('ul li:odd').css('color', 'yellow')

    //5 大于索引和小于索引
    //  $('ul li:lt(3)').css('color', 'green')
    // $('ul li:gt(3)').css('color', 'yellow')

    //6 剔除
    // $("ul li:not('#d4')").css('color', 'yellow')

    //7 选取除包含一个或多个标签在内的标签
    // console.log($("ul:has('li')"))

</script>
</body>

8.属性选择器

$('[username]')
$('[username="jason"]')
$('p[username="xie"]')

$('[type]')
$('[type="text"]')

9.表单筛选器

可以看成是属性选择器优化而来

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
    
:enabled
:disabled
:checked
:selected
    
特例：
$(':checked')  可以查询到selected
$('input:checked')  
$(':selected')  只能查询到selected

<body>
<input type="text" username="dsb">

<script>
    //下面两种效果是一样的
 // $("[username='dsb']").css('background-color','red')
 // $("[username]").css('background-color','red')


    // $('[type]').css('background-color', 'green')
    // $("[type='text']").css('background-color', 'green')
    // $("[type='radio']").css('background-color', 'green')

</script>
</body>

<body>
<input type="text" username="dsb">

<script>
    $('input[type="text"]').css('background-color', 'red')
    // 等价于
   $(':text')
</script>
</body>

特殊

<input type="radio" name="gender" checked>
<input type="radio" name="gender">

<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
</select>

<script>
// console.log($(':checked'))  //既可以选择单选，亦可以选中select
// console.log($(':selected'))  //只能选择自己
console.log($('input:checked'))
</script>
</body>

作业：

1.尝试编写JS时间案例
 页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
     1.点击开始按钮 input内展示当前时间并按秒数刷新
     2.点击结束按钮 input内展示停止
       ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
        思考如何解决
2.搜索框案例
  input内有默认的文本值  用户一旦选择该input想做内容修改
  就提前把内容清空

<body>
<input type="text" style="height: 30px; width: 200px; background-color: pink" id="input">
<button id="button1">开始</button>
<button id="button2">结束</button>
<script>
let t = null
let inpEle = document.getElementById('input')
let btn1Ele = document.getElementById('button1')
let btn2Ele = document.getElementById('button2')
	function showtime() {
    let time = new Date()
    inpEle.value = time.toLocaleString()
    }

    btn1Ele.onclick = function() {
        if(!t){
            t = setInterval(showtime, 1000)
        }
    }
    btn2Ele.onclick = function () {
        clearInterval(t)
        t = null
    }
</script>
</body>

<body>
<input type="text" value="宝子们 睡觉了" id="d1">
<script>
    let inpEle = document.getElementById('d1')
    // 获取焦点事件
    inpEle.onfocus = function () {
        //去除input框内部值
        inpEle.value = ''
    }
    //失去焦点事件
    inpEle.onblur = function () {
        //给input框重新赋值
        inpEle.value = '就不睡'
    }
</script>
</body>