Day13-前端_JavaScript

[TOC]

今日概要：

Javascript，是一门编程语言。浏览器就是JavaScript语言的解释器。
DOM和BOM :::tips 相当于编程语言的内置模块
例如：python中的re,random,time，json模块等 :::

jQuery :::tips 相当于是编程语言的第三方模块
例如：request、openpyxl :::

1JavaScript

效果图
点击事件：点击大标题标签，触发confirm弹窗”你好吗”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .menus{
          width: 200px;
          border: 1px solid red;
      }
      .menus .header{
          background-color: gold;
          padding: 20px 10px;
      }
  </style>
</head>
<body>
  <div>
      <div class="menus">
          <div class="header" onclick="myFunc()">大标题</div>
          <div class="item">内容</div>
      </div>
      <script type="text/javascript">
          function myFunc() {
              // alert("你好呀");
              confirm("是否要继续");
          }
      </script>
  </div>
</body>
</html>

前端三大组件

HTMl裸体
CSS衣服
JavaScript动起来

1.1JavaScript存放位置&存在形式
在head中
在body中

为什么推荐放在body中

当前HTML中 :::tips :::
文件导入
- 导入本地较快
- 导入别人网站js

1.2注释

HTML注释 :::tips <!— 注释内容 —!> :::
CSS注释，style代码块 :::tips / 注释内容 / :::
Javascript的注释，script代码块 :::tips //注释内容
/ 注释内容 / :::

1.3变量
python，编程语言 :::tips name = “高倩”; :::
JavaScript，编程语言 :::tips <!DOCTYPE html>

:::

1.4打印

python,编程语言 :::tips name = “高倩”;
print(name); :::
JavaScript，编程语言
效果图

:::tips <!DOCTYPE html>

:::

1.5字符串类型

:::tips // 声明
var name = “高倩”
var name = String(“高倩”) ::: :::tips //常见功能
var name = “中国联通”
var v1 = name.length;
var v2 = name[0]; //切片通过索引取获取里面的字符
var v3 = name.trim(); //去除两边的空白
var v4 = name.substring(0,2); //前取后不取得到的就是中国左闭又开

:::

案例：跑马灯

效果图：会一直跑起来哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="txt" >欢迎中国电信领导邓凯莅临指导</span>
    <script type="text/javascript">
        function show(){

            // 1.去HMTL中找到某个标签并获取他的内容
            var tag = document.getElementById("txt")
            var dataString =tag.innerText
            console.log(dataString);

            // 2.动态起来，把文本中的第一个字符放在字符串的最后面。
            var firstChar = dataString[0];
            var otherString = dataString.substring(1,dataString.length);
            var newText = otherString+firstChar;

            //3.在HTML中标签中更新内容
            tag.innerText = newText;
        }

        //JavaScript中的定时器 如:每一秒执行一次show()函数
        setInterval(show,1000);

    </script>
</body>
</html>

1.6数组 :::tips //定义
var v1 = [11,22,33,44];
var v2 = Array[11,22,33,44]; ::: :::tips // 操作
var v1 = [11,22,33,44]
v1[1]
v1.push(“联通”); //在尾部追加[11,22,33,44,”联通”]
v1.unshift(“联通”); //在前面追加[“联通”,11,22,33,44]
v1.splice（索引，0，元素）
v1.splice（1，0，中国）//任意位置添加[11,”中国”22,33,44]
v1.pop() //尾部删除
v1.shift() //头部删除
v1.splice(索引位置,1)
v1.splice(2,1) //索引为2的元素删除[11,22,440]

::: :::tips var v1 = [11,22,33,44];
for(var idx in v1){
// idx=0/1/2/3 data=v1[idx]
} ::: :::tips var v1 = [11,22,33,44];
for(var i=0; i//i=0/1/2/3 data=v1[idx]
} ::: 注意：break和continue

1.6数组

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">

    </ul>
    <script type="text/javascript">
        var cityList = ["北京","上海","深圳"]
        for(var idx in cityList){
            var text = cityList[idx];
            //创建<li></li>
            var tag = document.createElement("li");
            //在li标签中写入内容
            tag.innerText = text;
            //添加到id=city那个标签的里面。DOM
            var parentTag = document.getElementById("city")
            parentTag.appendChild(tag);

        }
    </script>
</body>
</html>

1.7对象（字典）

:::tips info = {
“name”:”高倩”,
“age”:18
}
第二种定义字符的方式
info = {
name:”高倩”,
age:18
}
字典也可以进行循环
for ( var key in info){
//key = name/age data=info[key]
} :::

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>
<script type="text/javascript">
    // 定义数组类型
    var info = {id: 1, name: "高远", age: 19};
    // 创建一个元素element，创建一个tr的元素
    var tr = document.createElement("tr");
    // 在字典中,key代表的是字典的序号,对字典的序号进行循环
    for(var key in info){
        // text为字典中的值,key为序号,那么info[key]为info中key对应的值
        var text = info[key];
        // 定义td为创建一个新的td元素
        var td = document.createElement('td');
        // 在创建的td元素中写入text,也就是字典中的值
        td.innerText = text;
        // tr的孩子是td,tr新增加了一个td孩子
        tr.appendChild(td);
    }
    // 定义bodyTag的位置为body
    var bodyTag = document.getElementById("body");
    // body中加入tr元素,我们一共就创建了一个tr元素,所以就加进去一个tr元素,也只生成了一个tr元素,其中有3个td元素标签 
    bodyTag.appendChild(tr);
</script>
</body>
</html>

案例：动态表格（多行）

重要2*2以上数据，至少两个循环才可以实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
  //此处id="body"是为了定位，数据可以在这个位置生成
    <tbody id="body">

    </tbody>
</table>
<script type="text/javascript">
    // 定义数组类型
    var dataList =  [
        {id: 1, name: "高远", age: 19},
        {id: 2, name: "高远", age: 19},
        {id: 3, name: "高远", age: 19},
        {id: 4, name: "高远", age: 19},
    ];

    for(var idx in dataList){
        var info = dataList[idx];
        // 创建一个元素element，创建一个tr的元素
        var tr = document.createElement("tr");
         // 在字典中,key代表的是字典的序号,对字典的序号进行循环
        // text为字典中的值,key为序号,那么info[key]为info中key对应的值
        for (var key in info){
            var text = info[key];
            // 定义td为创建一个新的td元素
            var td = document.createElement('td');
            // 在创建的td元素中写入text,也就是字典中的值
            td.innerText = text;
            // tr的孩子是td,tr新增加了一个td孩子
            tr.appendChild(td);

            // 定义bodyTag的位置为body
            var bodyTag = document.getElementById("body");
            // body中加入tr元素,我们一共就创建了一个tr元素,所以就加进去一个tr元素,也只生成了一个tr元素,其中有3个td元素标签
            bodyTag.appendChild(tr);
            }
    }
    // 2*2行数据的生成,必须是两个循环才可以搞定
</script>
</body>
</html>

1.8条件语句

:::tips if(条件){
}else{
}

if(1==1){
}else{
} ::: :::tips if(条件){
}else if (条件){
}else if (条件){
}else{

} :::

1.9函数

python中定义函数 :::tips def func():
函数的内容 ::: - JavaScript中定义函数 :::tips function func(){
}
执行函数：func() :::
2.DOM
DOM，就是一个模块，模块可以对HTML页面中的标签进行操作， :::tips //根据ID获取标签
var　tag = document.getElementById(“xx”);

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = “哈哈哈哈” ::: :::tips //创建标签

var tag = document.createElementById(“div”);
//标签写内容
tag.innerText = “哈哈哈哈”; :::

<ul id = "city">
    <li>北京</li>
</ul>

<script type="text/javascript">
  var tag = document.getElementById("city");
  // <li>北京</li>
  var newTag = document.createElement("li");
  newTag.innnerText = "北京";
 //此处是为了让tag和newTag绑定，确定tag为newTag的父亲
  tag.appendChild(newTag)
  </script>

2.1事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    //按钮绑定addCityInfo事件，点击按钮执行增加城市的事件-->
    <input type="button" value="点击添加" onclick="addCityInfo()">
<!--    //id为city-->
    <ul id="city">

    </ul>
    <script type="text/javascript">
      //定义函数addCityInfo()
      function addCityInfo(){
            //定义newTag为DOM创建的li标签
            var newTag = document.createElement("li");
            //newTag即<li>里标签内容为联通
            newTag.innerText = "联通";

            //定义parentTag为id中带有city的值的标签
            var parentTag = document.getElementById("city");
            //newTag为parentTag的子标签
            parentTag.appendChild(newTag);
        }
    </script>
</body>
</html>

2.2事件绑定升级版

效果图：可随意添加你输入的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    //按钮绑定addCityInfo事件，点击按钮执行增加城市的事件-->
    <input type="button" value="点击添加" onclick="addCityInfo()">
<!--    //id为city-->
    <ul id="city">

    </ul>
    <script type="text/javascript">
      //定义函数addCityInfo()
      function addCityInfo(){
            //定义newTag为DOM创建的li标签
            var newTag = document.createElement("li");
            //newTag即<li>里标签内容为联通
            newTag.innerText = "联通";

            //定义parentTag为id中带有city的值的标签
            var parentTag = document.getElementById("city");
            //newTag为parentTag的子标签
            parentTag.appendChild(newTag);
        }
    </script>
</body>
</html>

2.3完整版事件绑定

备注：不可输入空内容，有提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="请输入内容" id="txtUser">
    <input type="button" value="点击添加" onclick="addCityInfo()">
    <ul id="city">

    </ul>
    <script type="text/javascript">
        function addCityInfo(){
            //1.找到输入标签
            var txtTag = document.getElementById("txtUser");

            //2.获取input框中用户输入的内容,此处不用 innerText,用的是values
            var newString = txtTag.value;

            //判断用户输入是否为空,如果是空,不允许添加
            //
            if(newString.length > 0){
                //3.创建标签<li></li>中间的文本信息就是用户输入的内容
                var newTag = document.createElement("li");
                newTag.innerText = newString;

                //4.标签添加到ul中
                var parentTag = document.getElementById("city");
                parentTag.appendChild(newTag);

                //5.将输入框清空
                txtTag.value = "";
            }else {
                alert("输入不能为空");
            }



        }
    </script>
</body>
</html>

注意

DOM中还有很多功能 :::tips DOM可以实现很多功能，但是比较繁琐
页面上的效果：jQuery来实现 /vue.js /react.js :::

3.知识点回顾

编码相关 :::tips 文件存储时，使用某种编码，打开时就需要使用相同的编码，否则就会乱码。
字符底层存储时本质都是010101010101.
字符和二进制的对应关系（编码）：
utf-8
base64
gbk
ascill编码，256种对应关系
bg2312,gbk,中文和亚洲的一些国家。【两个字节】
Unicode ，ucs2/ucs4表示所有的对应关系，包括我们现在发现的所有文明
utf-8（Unicode压缩版），在utf-8编码种，一般中文使用几个字节？【占用3个字节】

python解释器的默认编码：【utf-8】
python.exe 代码文件
如果将代码文件保存为gbk编码，将python模式解释器编码修改为gbk ::: :::tips data = “中”
res = data.encode(‘utf-8’)
print(res) # b’\xe4\xb8\xad’

data = ‘国’
res = data.encode(‘gbk’)
print(res) # b’\xb9\xfa’

Python 3.6.5 |Anaconda, Inc.| (default, Mar 29 2018, 13:32:41) [MSC v.1900 64 bit (AMD64)] on win32
Type “help”, “copyright”, “credits” or “license” for more information.
>>> int(“e4”,base=16)
228
>>> bin(228)
‘0b11100100’ :::

计算机中的单位 :::tips 位/字节kb/M/G/T.. 【8位=1字节】
办流量 :::
字符串格式化【三种】 :::tips v1 = “我是{}，今年{}”.format{“邓凯”，18}
v2 = “我是%s,今年%d岁”%（”邓凯”，18）

name = “邓凯”
age = 19
v3 = f”我是{name},今年{age}岁” :::

数据类型 :::tips 常见的数据类型：int、bool、str、list、tuple、dict、set、float、None
哪些转换成bool为false:空、none、0
可变和不可变
- 可变：List、set、dict、
可哈希和不可哈希，不可哈希的类型有哪些：List、set、dict、
字典的键/集合的元素，必须时可哈希的类型。（List、set、dict不能做字典的键和集合元素）

主要的数据类型：

str
- 独有功能：upper/lower/startswith/spilt/strip
- 注意：str不可变，不会对原字符进行修改，生成新的内容
公共功能：len/索引/切皮/for循环/判断是否包含
list
- 独有功能：append/inset/remove/pop :::
运算符 :::tips 基本运算符：加减乘除、….
一般：
1>2 and 3<10
特殊的逻辑运算【整体的结果取决于谁？】：
v1 = 99 and 88 #88 前面为真就取决于后面的值
v2 = [] or 10 #10
v3 = “联通” or [] #”联通” :::
推导式（简化生成数据） :::tips data = []
for i in range[10]:
data.append(i)
v1 = [ i for i in range[10] ]
v2 = [ i for i in range(10) if i<5 ] :::
函数编程 :::tips 参数的基础知识
-定义
-参数概念：位置传参/关键字传参/参数默认值/动态参数args,*kwargs
-返回值
-函数中一旦遇到return就立即返回，后续代码不在执行。
-函数没有返回值默认返回none
函数的进阶
- python中是以函数为作用域的
- 全局变量和局部变量.规范：局部变量（大写）、局部变量（小写+下划线）
- 在全局变量中可以使用global关键字，global的作用？全局引用的那个变量
内置函数（python内部提供的函数）：
- bin/hex/odc/max/min/divmod/sorted/open文件操作
文件操作：
- 基本操作：打开，操作，关闭。为了防止你忘记关闭文件，可以怎么做？with !!!!
- 打开文件时有模式：
  - r/rb，读【文件不存在，报错】【目录/文件夹，不存在，报错】
  - w/wb，写【文件不存在，自动新建】【目录/文件夹，不存在，报错】
  - a/ab，追加【文件不存在，自动新建】【目录/文件夹，不存在，报错】
  - 注意：os.makedirs/os.path.exsits、是否存在，不存在新建目录 :::
模块 :::tips 模块的分类：
自定义模块：
- os.path，导入模块时python内部都会去那个目录找
- 自己写py文件时，不要与python内置模块同名。
- import/from xx 、import
内置模块：time/datatime/json/re/random/os..
第三方模块:requests/openpyxl/python-docx/flask :::

前端开发

:::tips

前端知识点分为三个部分：
- HTML，标签具有模式特点
- CSS，修改标签的特点
- Javascript，动态
HTML标签
- div/sapn/a/img/input/form/table/ul..
- 块级和行内标签。例如：div和span默认谁是块级标签？ div
  - 注意：css样式，发现标签设置高度，宽度，内边距，外边距都是无效、
  - 变为块级标签、inline-block行内块级标签
- form+input/select/textarea 数据框
  - action
  - method
  - form表单中有一个submit
  - 内部标签都需要设置name属性
CSS样式
- 局部一定会用到的样式：div+float(脱离文档流，clear:both;clearfix)
- 边距
  - 内边距、外边距
- 字体大小、边框
- 边框
- 背景颜色
- 边框
- hover，鼠标放上去会触发CSS样式 :::
  4.jQuery
  jQuery是一个JavaScript第三方模块（第三方类库）。
基于JQuery，自己开发一个功能
现成的工具依赖jQuery，例如Bootstrap动态效果

4.1快速上手

下载jQuery :::tips https://jquery.com/download/ :::

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1 id="txt">中国联通</h1>

  <script src="/static/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
      //利用jQuery中的功能实现某些效果

      //1.用jQuery的方式修改
      $('#txt').text("电信集团");

      //2.通过DOM方式修改文本内容
      // document.getElementById('txt').innerText = "新疆电信"
  </script>
</body>
</html>

4.2寻找标签

ID进行寻找 :::tips
中国联通

中国联通

中国联通

中国联通
::: :::tips ${“#txt”} :::
样式选择器 :::tips
中国联通1

中国联通2

中国联通3
::: :::tips $(“.c1”) :::
标签选择器 :::tips
中国联通1

中国联通2

中国联通3
::: :::tips $(“h1”) :::
层级选择器 :::tips
中国联通1

中国联通2

中国联通3
::: :::tips $(“.c1 .c2 a”) :::
多选择器 :::tips
中国联通1

中国联通2

中国联通3
- xx
- xx
::: :::tips $(“#c3,#c2,li”) :::
属性选择器 :::tips

::: :::tips $(“input[name=”n1”]”) :::

4.3间接寻找
找到上一个兄弟
```
<div>
  <div>南京</div>
  <div id='c1'>上海</div>
  <div>深圳</div>
  <div>香港</div>
</div>
```
:::tips $(“#c1”).prev() //上一个
$(“#c1”)
$(“#c1”).next() //下一个
$(“#c1”).next().next()//下一个，下一个
$(“#c1”).siblings() //所有的兄弟 :::

找父子

<div>
  <div>
      <div>南京</div>
      <div id='c1'>
          <div>青浦区</div>
          <div class="p10">宝山区</div>
          <div>浦东区</div>
      </div>
      <div>深圳</div>
      <div>香港</div>
  </div>
  <div>
      <div>陕西</div>
      <div>河北</div>
      <div>河南</div>
      <div>山东</div>
  </div>
</div>

:::tips $.(“#c1”).parent() //父亲
$.(“#c1”).parent().parent() //父亲、父亲

$.(“#c1”).children() //所有的儿子
$.(“#c1”).children(“.p10”) //所有的儿子中寻找class=p10

$.(“#c1”).find(“.p10”) //去所有的子孙中寻找class=p10
$.(“#c1”).find(“div”) //去所有的子孙中寻找

标签 :::

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;

        }
        .menus .content a{
           display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
<!--             onclick="clickMe(this);表示锁定当前的标签-->
            <div class="content hide ">
                <a>宝山区</a>
                <a>青浦区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
            </div>

            <div class="header" onclick="clickMe(this);">上海</div>
                <div class="content hide">
                    <a>海淀区</a>
                    <a>朝阳区</a>
                    <a>大兴区</a>
                    <a>昌平区 </a>
                </div>
        </div>
    </div>


    <script src="static/jquery-3.6.0.min.js"></script>
    <script>
         function clickMe(self){
            // //$(self)  -->表示当前点击的那个标签
            // $.(self).next() 下一个标签
            // $.(self).next().removeClass("hide");
            $(self).next().removeClass("hide");
         }
    </script>
</body>
</html>

案例：菜单的切换升级版

效果图：点击展开，点击隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            /*鼠标放上去就变成小手了*/
            cursor: pointer;

        }
        .menus .content a{
           display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
<!--             onclick="clickMe(this);表示锁定当前的标签-->
            <div class="content hide ">
                <a>宝山区</a>
                <a>青浦区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
            </div>

            <div class="header" onclick="clickMe(this);">上海</div>
                <div class="content hide">
                    <a>海淀区</a>
                    <a>朝阳区</a>
                    <a>大兴区</a>
                    <a>昌平区 </a>
                </div>
        </div>
    </div>


    <script src="static/jquery-3.6.0.min.js"></script>
    <script>
         function clickMe(self){
            // //$(self)  -->表示当前点击的那个标签
            // $.(self).next() 下一个标签
            // $.(self).next().removeClass("hide");
            // $(self).next().removeClass("hide");
             var hasHide = $(self).next().hasClass("hide")
             if(hasHide){
                 $(self).next().removeClass("hide");
             }else{
                 $(self).next().addClass("hide");
             }
         }
    </script>
</body>
</html>

案例：菜单最终版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            /*鼠标放上去就变成小手了*/
            cursor: pointer;

        }
        .menus .content a{
           display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
<!--             onclick="clickMe(this);表示锁定当前的标签-->
            <div class="content hide ">
                <a>宝山区</a>
                <a>青浦区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
            </div>

            <div class="header" onclick="clickMe(this);">北京</div>
                <div class="content hide">
                    <a>海淀区</a>
                    <a>朝阳区</a>
                    <a>大兴区</a>
                    <a>昌平区 </a>
                </div>
            <div class="header" onclick="clickMe(this);">上海2</div>
<!--             onclick="clickMe(this);表示锁定当前的标签-->
            <div class="content hide ">
                <a>宝山区</a>
                <a>青浦区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
            </div>

            <div class="header" onclick="clickMe(this);">北京2</div>
                <div class="content hide">
                    <a>海淀区</a>
                    <a>朝阳区</a>
                    <a>大兴区</a>
                    <a>昌平区 </a>
                </div>
        </div>
    </div>


    <script src="static/jquery-3.6.0.min.js"></script>
    <script>
         function clickMe(self){
            // 让他自己下面的功能展现出来
             var hasHide = $(self).next().removeClass("hide");


             // 找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class=content,添加hide样式
            $(self).parent().siblings().find(".content").addClass("hide");
         }
    </script>
</body>
</html>

4.4操作样式

add Class
removeClass
hasClass
4.5值的操作
:::tips
内容
::: :::tips $(“#c1”).text() //获取文本内容
$(“#c1”).text(“休息”) //设置文本内容 ::: :::tips

::: :::tips $(“#c2”).val() //获取用户输入的值
$(“#c2”).val(“哈哈哈”)//设置值 :::

案例：动态创建数据
```html <!DOCTYPE html>

<ul id="view">

</ul>

<script src="static/jquery-3.6.0.min.js"></script>
<script>
    function getInfo(){
        //1.获取用户输入的用户名和密码
        var username = $("#txtUSer").val();
        var email = $("#txtEmail").val();

        var datastring = username + "---" + email;

        //2.创建li标签,在标签内部写入内容
        var newli = $("<li>").text(datastring);

        //3.把新创建的li标签加到ul里边.
        $("#view").append(newli);

    }
</script>

<a name="RX7uN"></a>
### 4.6事件

- DOM绑定事件
:::tips
<input type="button" value="提交" onclick="getInfo()"/><br />function getInfo(){<br />}
:::

- jQuery绑定事件

效果图<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/25507954/1652086867283-8ff8b1fa-78ce-446d-a1a5-58105bc5fefd.png#clientId=u64506c1f-697a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=386&id=u9881398a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=483&originWidth=1094&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47856&status=done&style=none&taskId=u2858ab3f-d482-4e97-a9e5-d3e6f285203&title=&width=875.2)
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function (){
        //点击li标签时,自动执行这个函数
        //$(this) 当前你点击的是哪个标签
      var text = $(this).text();
      console.log(text);
        });
</script>
</body>
</html>

案例：删除

:::tips

内容

$(“#c1”).remove(); :::

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function (){
        //点击li标签时,自动执行这个函数
        //$(this) 当前你点击的是哪个标签
        // 点击谁，让谁删除，在当前页面中删除
      $(this).remove();

        });
</script>
</body>
</html>

当页面框架加载完成后执行的代码

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <img src="/x//x///">
    <li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function (){
        //当页面框架加载完成时，自动就执行。
        $("li").click(function (){
        //点击li标签时,自动执行这个函数
        //$(this) 当前你点击的是哪个标签
        // 点击谁，让谁删除，在当前页面中删除
      $(this).remove();
         });
    });
</script>
</body>
</html>

### 案例：表格操作

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>邓凯</td>
                <td>
                    <input type="button" value="删除" class="delete">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>邓凯</td>
                <td>
                    <input type="button" value="删除"class="delete">
                </td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>邓凯</td>
                    <td>
                        <input type="button" value="删除"class="delete">
                    </td>
                </tr>
            <tr>
                    <td>1</td>
                    <td>邓凯</td>
                    <td>
                        <input type="button" value="删除"class="delete">
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="static/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            //找到所有的class=delete的标签，绑定事件
            $(".delete").click(function (){
                //删除当前行的数据
                $(this).parent().parent().remove();
            });
        });
    </script>
</body>
</html>

## 5.前端整合 - HTML - CSS - Javascript、jQery - BootStrap(动态效果依赖jQuery) ### 案例：添加数据页面 > 人员信息录入功能，需要提供用户信息： > 用户名、年龄、薪资、部门、入职时间 > 对于时间的选择：不能输入；选择；（插件）datetimepicker > - 下载插件 > - 应用插件 #### 日期插件：bootstrap-datetimepicker-master ```html <!DOCTYPE html>

姓名

年龄

薪资

部门

入职日期

``` 日期插件所用到的js和css知识点

js
- 点击事件
- 页面显示值：元组、字典取值函数。赋值函数。
  
  :::tips 获取选定的值，定义变量，.val()是value值的缩写。
  var email = $(“#txtEmail”).val();
  //2.创建li标签,在标签内部写入内容
  var newli = $(“
  “).text(datastring);
  //3.把新创建的li标签加到ul里边.
  $(“#view”).append(newli); :::

总结
1.了解HTML标签、标签结构、基于他你可以实现简单的页面
2.CSS，了解基本的样式：在别人模板上该就可以
3.Javascript、jQuery，了解基本使用
事件绑定、寻找标签、操作标签
导入现成插件

后续开发过程中，对于前端就是在bootstrap的基础修改

1JavaScript

1.1JavaScript存放位置&存在形式

1.2注释

1.3变量

1.4打印

1.5字符串类型

案例：跑马灯

1.6数组

案例：动态数据

1.7对象（字典）

案例：动态表格

案例：动态表格（多行）

1.8条件语句

1.9函数

2.DOM

2.1事件的绑定

2.2事件绑定升级版

2.3完整版事件绑定

注意

3.知识点回顾

前端开发

4.jQuery

4.1快速上手

4.2寻找标签

中国联通

中国联通

中国联通

中国联通

中国联通1

中国联通2

中国联通3

中国联通1

中国联通3

中国联通1

中国联通2

中国联通3

中国联通1

中国联通2

中国联通3

4.3间接寻找

案例：菜单的切换

案例：菜单的切换升级版

案例：菜单最终版

4.4操作样式

4.5值的操作

案例：动态创建数据

案例：删除

总结