python _ javascript

最新推荐文章于 2024-03-30 14:09:04 发布

大舅乌鸡蛋

最新推荐文章于 2024-03-30 14:09:04 发布

阅读量358

点赞数

分类专栏： python_web开发文章标签： javascript python 前端

本文链接：https://blog.csdn.net/weixin_45818577/article/details/127818759

版权

python_web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

python _ JavaScript

概要：

javascript，是一门编程语言。浏览器就是javascript语言的解释器。
DOM和BOM

相当于编程语言内置的模块
例如：python中的random、time、pandas

jQuery

相当于编程语言的第三方模块。
例如：python中的requests、openpyxl

1. JavaScript

1.1 javascript初识

JavaScript是一门编程语言。

JavaScript的意义是什么？

让程序实现一些动态效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            border:1px solid red;
            width:300px;
            height:200px;
        }
        .header{
            background-color:blue;
            height:50px;
        }
        .xiao{
            height:150px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header" onclick="myfun()">
            dabiaoti
        </div>
        <div class="xiao">xioabiaoti </div>
    </div>
    <script type="text/javascript">
        function myfun(){
            confirm("是否要继续？")
        }
    </script>
</body>
</html>

前端三大组件：

HTML 躯壳框架
css 静态样式
javascript 实现动态。

1.2 代码位置

javascript的代码位置只有两个位置：

一般放在下面因为编译是从上到下编译在上面会先执行。

1.3 js代码的存在形式：

存放在html中

 <script type="text/javascript">
        function myfun(){
            confirm("是否要继续？")
        }
        //位置二、编写JavaScript代码
        //在body标签的内尾部
    </script>

放在文件中，进行导入

    <script src="static/my.js"></script>
    <script type="text/javascript">
        //应用导入的文件
    </script>

1.4 注释

前端三大件的注释都不一样：

html的注释
```

```
CSS的注释
```
/* 注释内容 */
```
JavaScript的注释
```
//注释内容
/* 注释内容 */
```

1.5 变量

var 变量名;

<script text="text/javascript">
    //var 变量名;
	var name = "123";
</script>

字符串类型：

//声明
var name = "搞钱";
var name = string("搞钱");

//常见功能
var name = "中国联通"
var v1 = name[0];//取第一个元素 name.charAt(0)
var v1 = name[0];//取第一个元素
var v1 = name.trim();//去除空白
var v1 = name.substring(0,2);//类似于python中的切片 前取后不取

1.5.1 小案例

js获取标签，得到标签内容
函数的定义
JavaScript的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            border:1px solid red;
            width:300px;
            height:200px;
        }
        .header{
            background-color:blue;
            height:50px;
        }
        .xiao{
            height:150px;
        }
    </style>


    <script type="text/javascript">
        //位置一、编写javascript代码
        //在css的下面
    </script>
</head>
<body>
    <div class="container">
        <div class="header" onclick="myfun()">
            dabiaoti
        </div>
        <div id="rxt" class="xiao">我是大帅哥而且真的帅！</div>

    </div>

    <script type="text/javascript">
        //应用导入的文件
        function myfun(){
        //1.在html中找到某个标签并获取他的内容(DOM)
            var tag = document.getElementById("rxt");
            var datastring = tag.innerText;
            // 2.动态起来，把文本中的第一个字符放在字符串的最后面。
            var first = datastring[0];
            var other = datastring.substring(1,datastring.length);
            var newdata = other + first;
            //3.在HTML标签中更新内容
            tag.innerText = newdata;
        }
        //JavaScript中的定时器
            //下面就是每1000毫秒执行一次show函数
        setInterval(myfun,1000);
    </script>
</body>
</html>

1.6 数组

var v1 =[11,22,3,4,];
var v2=Array([11,22,33,44]);

//操作
var v1 =[11,22,3,4];
v1[1];
v1[0];
//增加
v1.push("联通");//在尾部追加[11,22,3,4,"联通"]
v1.unshift("联通");//在首部增加
v1.splice(1,0,"中国");
//[11,"中国"，22，3，4]
v1.splice(索引,0,元素);

//删除
v1.pop() //删除尾部
v1.shift() //删除首部
vi.splice(索引位置，1) //删除位置
v1.splice(2,1)

//循环
for(var idx in v1){
    //idx是索引值，而不是元素
    data = v1[idx]
}
for(var i=0;i<v1.length;i++){
    data = v1[i];
}

1.6.1 案例动态显示数据

 //获取到数据，数据库中
    var citylist = ['北京','上海','深圳'];
    for (var idx in citylist){
        var text = citylist[idx];
        //创建li标签
        var tag = document.createElement("li");
        tag.innerText = text;
        //将标签放到html中
        //首先找到父节点
        var parenttag = document.getElementById('city');
        parenttag.appendChild(tag);

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

1.7 对象(python中的字典)

info ={
	"name":"dsf",
    "age":18
}
info ={
    name:"gsg",
    age:18
}

//两种方式
info.age
info.name = "dfsdfe"

info["age"] 
delete info.name //删除

//循环
for(var key in info){
    //key就是键,key为name/age
    data =info[key]
}

1.7.1 动态表格

 //动态生成表格
    function myfun3(){
        //得到数据
        var info ={ID:"123",name:"代亚勋",age:21}
        //生成标签
        var tag = document.createElement("tr");
        for (var i in info){
            var childtag = document.createElement("td");
            childtag.innerText = info[i];
            tag.appendChild(childtag);
        }
        //在HTML中 找到插入位置
        var parenttag = document.getElementById("body");
        parenttag.appendChild(tag);
    }
    myfun3();

<div onclick="myfun3()" style="border:1px solid red;width: 100px;">
    确定
</div>
<div>
    <table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
    <tr>
        <td>1</td>
        <td>果汁</td>
        <td>19</td>
    </tr>
    </tbody>
</table>
</div>

效果：

可以一次插入多个数据：例如将数据列表变成数组和对象的嵌套：

function myfun4() {
        //得到数据
        var datalist = [
            {ID: "123", name: "代亚勋", age: 21},
            {ID: "123", name: "xxx", age: 21},
            {ID: "123", name: "dsfa", age: 21},
            {ID: "123", name: "ettrr", age: 21},
            {ID: "123", name: "yuhfgt", age: 21}
        ];
        for (var j in datalist) {
            info = datalist[j];
            //生成标签
            var tag = document.createElement("tr");
            for (var i in info) {
                var childtag = document.createElement("td");
                childtag.innerText = info[i];
                tag.appendChild(childtag);
            }
            //在HTML中 找到插入位置
            var parenttag = document.getElementById("body");
            parenttag.appendChild(tag);
        }


    }

1.8 javascript输出

console.log(name)在浏览器的控制台输出内容。

2. DOM

DOM，就是一个模块，模块可以对HTML页面中的标签进行操作。

根据ID获取标签

 var bodytag = document.getElementById("id");

获取标签中的文本

var text = bodytag.innerText;

修改标签中的文本

bodytag.innerText= "sdfsd";

创建标签(后面括号是标签类型)

//创建td标签
var childtag = document.createElement("td");
//创建div标签
var childtag = document.createElement("div");

在html中添加标签

 //在HTML中 找到插入位置
            var parenttag = document.getElementById("body");
            parenttag.appendChild(tag);

在标签中绑定事件
- 用onclick绑定函数
- onclick单击
- ondbclick双击

<input type="botton" value="点击增加" onclick="myfun3()">

<script type="text/javascript">
    //动态生成表格
    function myfun3() {
        //得到数据
        var datalist = {ID: "123", name: "代亚勋", age: 21};
            info = datalist;
            //生成标签
            var tag = document.createElement("tr");
            for (var i in info) {
                var childtag = document.createElement("td");
                childtag.innerText = info[i];
                tag.appendChild(childtag);
            }
            //在HTML中 找到插入位置
            var parenttag = document.getElementById("body");
            parenttag.appendChild(tag);
    }
</script>

2.1 DOM案例获取用户自己输入的内容并显示

function myfun5() {
        //找到用户输入标签
        var tag = document.getElementById("user_input");
        //得到用户输入的数据 获取input框中用户输入的内容
        var text = tag.value;
        //创建标签
        var newTag = document.createElement("li");
        newTag.innerText = text;

        var parenttag = document.getElementById("city");
        parenttag.appendChild(newTag);
    }

<div>
    <input type="text" id="user_input" placeholder="请输入内容">
    <input type="botton" style="text-align: center" value="点击增加" onclick="myfun5()">
</div>
 <ul id="city">
        <!--     <li>北京</li>    -->
    </ul>

案例完善

当用户没有输入的时候也可以添加标签，

如果用户没有输入则设置提示

//判断tag.value有没有内容
if (text !== "") {
            //创建标签
            var newTag = document.createElement("li");
            newTag.innerText = text;
            //将标签增加到html中
            var parenttag = document.getElementById("city");
            parenttag.appendChild(newTag);
            //添加后清空
            tag.value = "";
        }
        else {
            alert("请输入内容");
        }

3. jquery

jquery是一个JavaScript第三方模块(第三方库)。

基于jQuery，自己开发一个功能。
现成的工具依赖于jquery，例如bootstrap的动态效果。

<h1 id="txt">中国联通</h1>

<script src="static/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    //利用jquery开发功能
    //找到标签
    //内容修改
     $("#txt").text('广西联通');
</script>

$(“#id”)找到标签
$(“#id”).text()修改内容或者获取数据。

如果用dom做：

var tag = document.getElementById("txt");
     tag.innerText = "广西联通";

3.1 jquery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(*selector*).*action*()

分为两个维度：找标签和对标签操作

3.2 寻找标签

3.2.1直接寻找

ID选择器

<h1 id="txt">中国联通</h1>
$("#txt")

样式选择器

<h1 class = "c1">中国联通1</h1>
<h1 class = "c1">中国联通2</h1>
<h1 class = "c2">中国联通3</h1>

$(".c1")

标签选择器

<h1 class = "c1">中国联通1</h1>
<div class = "c1">中国联通2</h1>
<span class = "c2">中国联通3</h1>

$("h1")

层级选择器

<div class="c1">
    <div class="c2">
        <a href="">中国联通</a>
    </div>
</div>

$(".c1 .c2 a")

多选择器

<div class="c1">
    <div class="c2">
        <a href="">中国联通</a>
    </div>
</div>

$(".c1,.c2,a")
//多个标签用逗号连

属性选择器

<input type="text" name="111" />
<input type="text" name="121" />
<input type="text" name="131" />
<input type="text" name="141" />

$("input[name='141']")

3.2.2 间接寻找

找到上一个兄弟

<div>
    <div>别境</div>
    <div class="c1">二等</div>
    <div>耳朵</div>
    <div>微软</div>
    <div>死亡</div>
</div>

$(".c1").prev()//上一个
$(".c1")
$(".c1").next()//下一个
$(".c1").next().next()//下一个的下一个
$(".c1").next().next().next()//。。。
$(".c1").siblings()//所有的兄弟

找父子

<div>
    <div>
    	<div>别境</div>
    	<div class="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>
    	<div>死亡</div>
	</div>
</div>

$(".c1").parent() //父亲
$(".c1").parent().parent()//父亲的父亲
$(".c1").children() //所有的孩子
$(".c1").children(".p10") //所有的儿子中寻找p10样式的
$(".c1").find(".p10") //所有的子孙中寻找p10样式的

3.2 操作

3.2.1 操作标签

创建标签：$(“<标签>”)
增加标签：$(“父亲标签”).append(new_标签)

jQuery：

//创建li标签
var newli = $("<li>").text(user_val);
//将创建好的li标签增加到ul里面
$("#will").append(newli);

DOM:

//创建li标签
var tag = document.createElement("li");
tag.value = user_val;
//将创建好的li标签增加到ul里面
var parenttag = document.getElementById("will");
parenttag.appendChild(tag);

3.2.2 操作样式

hasClass()、removeClass()和addClass()

hasClass()是看他是否存在的样式的。
removeClass和addClass都是修改的。

上面两个都是对样式的操作，可以移除或者增加，但是都是设定好的样式选择器，对于样式里面的不能删除或修改。

$(self).next().removeClass("hide");
$(self).next().addClass("hide");

<div class="item">
        <div class="header" onclick="extend(this)">
            beijing
        </div>
        <div class="content hide">
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
        </div>
    </div>

3.2.3 案例：菜单切换

知识点

οnclick="extend(this)"这个表示的意思为，函数调用，传入了一个this的参数，this表示当前点击的这个标签
在jquery中对this调用，$(self)即可
利用上面的三个对样式的函数，以及通过兄弟父亲孩子找节点来实现菜单下拉时，其他菜单是隐藏的。
并且再次点击菜单会发生隐藏。

<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="extend(this)">
            河南
        </div>
        <div class="content hide">
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="extend(this)">
            河北
        </div>
        <div class="content hide">
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="extend(this)">
            上海
        </div>
        <div class="content hide">
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="extend(this)">
            北京
        </div>
        <div class="content hide">
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
            <a href="">df </a>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    function extend(self) {
        //$(self) ->表示当前点击的那个标签
        //$(self).next() 下一个标签
        var i = $(self).next().hasClass("hide");
        if (i) {
            //将自身的隐藏消除，即将自己显示出来
            $(self).next().removeClass("hide");
            //找到父亲节点item的所有兄弟节点，下的content标签，在他的上面加上隐藏
            $(self).parent().siblings().find(".content").addClass("hide");
        } else {
            //将自己隐藏
            $(self).next().addClass("hide");
        }
    }
</script>
</body>

3.2.4 值的操作

<div id ="c1">
    内容
</div>

$("#c1").text() //获取文本内容
$("#c1").text("休息")  //设置值

<input type="text" id ="c2" />
$("#c2").val()   //获取用户输入的值
$("#c2").val("hhh") //设置值

3.3 事件

DOM绑定事件：

<input type="botton" value="提交" onclick="getinfo()">
<script type="text/javascript">
    function getinfo(){
    ...
        }
</script>

jQuery绑定事件：

p标签

$("p").click(function(){
    // 动作触发后执行的代码!!
    //点击p标签时，自动执行这个函数；
    //$(this) 当前你点击的时那个标签
});

将函数写在前面

//第一层函数为，当页面加载完成后就立刻执行，会减少加载时间
    $(function () {
        //下面是事件绑定
        //这里面写上面的jQuery绑定事件
        $("th input[value='删除']").click(function () {
            $(this).parent().parent().remove();
        })
    })

3.3.1 案例表格中的删除一行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>姓名</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>代亚勋</th>
        <th>
            <input type="button" value="删除">
        </th>
    </tr>
    <tr>
        <th>代亚勋</th>
        <th>
            <input type="button" value="删除">
        </th>
    </tr>
    <tr>
        <th>代亚勋</th>
        <th>
            <input type="button" value="删除">
        </th>
    </tr>
    <tr>
        <th>代亚勋</th>
        <th>
            <input type="button" value="删除">
        </th>
    </tr>
    </tbody>
</table>
<script src="static/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    //第一层函数为，当页面加载完成后就立刻执行，会减少加载时间
    $(function () {
        //下面是事件绑定
        $("th input[value='删除']").click(function () {
            $(this).parent().parent().remove();
        })
    })
</script>
</body>
</html>

<tr>
    <td>姓名</td>
    <td>操作</td>
</tr>
</thead>
<tbody>
<tr>
    <th>代亚勋</th>
    <th>
        <input type="button" value="删除">
    </th>
</tr>
<tr>
    <th>代亚勋</th>
    <th>
        <input type="button" value="删除">
    </th>
</tr>
<tr>
    <th>代亚勋</th>
    <th>
        <input type="button" value="删除">
    </th>
</tr>
<tr>
    <th>代亚勋</th>
    <th>
        <input type="button" value="删除">
    </th>
</tr>
</tbody>

```