js属性，DOM操作操作标签样式，事件，js事件案例，jQuery库

一：获取用户输入

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'
1
2
3
4
5
6
7
8
9
10
11
12
13

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, …}
1
2
3
4
5
6

二：JS属性操作

1.操作语法

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三：DOM操作操作标签样式

• 统一先用style起手

我想上天


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
2
3
4
5
6
7
8
9
10
11
12
13

四：事件

1.定义：

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

2.分类

3.绑定事件的两种方式

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

1
2
3
4
5
6
7

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

点我


1
2
3
4
5
6
7
8

4.事件中的关键字this

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

let btnEle = document.getElementById('d1')
	btnEle.onclick = function () {
        alter(123)
        console.log(this)
    }
1
2
3
4
5

5.补充知识点（了解）

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

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

五：JS事件案例

省市联动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

六: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>
1
2
3
4

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

语法：

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

jQuery与js代码对比

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

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

$('p').css('color', 'green')
1
2
3
4
5
6

4.基本选择器

1：id选择器

$('#id')
$('#d1')
1
2

2：class选择器

$('.className')
$('.c1')
1
2

3：标签选择器

$('TagName')
$('span')
1
2

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]
1

标签对象如何转jQuery对象

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

$(document.getElementById('d1'))
1

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'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

7.基本筛选器

<body>
<ul>
    <li>li1li>
    <li>li2li>
    <li>li3li>
    <li id="d4">li4li>
    <li>li5li>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

8.属性选择器

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

$('[type]')
$('[type="text"]')
1
2
3
4
5
6

9.表单筛选器

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

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
    
:enabled
:disabled
:checked
:selected
    
特例：
$(':checked')  可以查询到selected
$('input:checked')  
$(':selected')  只能查询到selected
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

<script>
    $('input[type="text"]').css('background-color', 'red')
    // 等价于
   $(':text')
script>
body>
1
2
3
4
5
6
7
8
9

特殊

<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
2
3
4
5
6
7
8
9
10
11
12
13
14

作业：

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16