Python全栈最全学习之路-WEB前端（四）

最新推荐文章于 2020-09-22 16:30:09 发布
最新推荐文章于 2020-09-22 16:30:09 发布
阅读量183 收藏 2
点赞数
分类专栏： python全栈学习 文章标签： html javascript js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108580262
版权

JavaScript入门

一、JavaScript介绍

1、JavaScript历史

在这里插入图片描述

2、JavaScript介绍

作用：
如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为
书写：
JS代码可以直接写在script标签里面，或者写在其他的js后缀文件中，并通过script标签引入。注意：在引入js文件的script里面，一定不能写js代码，当然也可以在标签内些js代码，但是这种方式并不推荐。
要求：
1、一般把script标签写在head或者body里
2、要注意的是是否需要加上window.onload
3、如果没有特殊要求，一般script标签放在body结束之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS获取元素的方法</title>
</head>
<body>
<div id="div1">
    <p id="p1">我是一个段落1</p>
    <p class="p2">我是一个段落2</p>
    <p class="p3" name="p4">我是一个段落3</p>
</div>
<script>
    // JS获取独有的标签
    // console.log(document.title);
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title='这里可以更改');
    // console.log(document.head);
    // console.log(document.body);
    // 在修改别的标签，得用innerHTML（会解析标签），innerText（不会解析标签）
    // console.log(document.body.innerHTML = '<h1>hello the world</h1>');
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
</script>
</body>
</html>

在这里插入图片描述

二、JS获取元素

1、JavaScript获取标签

意义：
在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素
JS获取独有标签：
document.title 获取标题
document.head 获取头部信息
document.body 获取body内容
其他标签的获取：
1、通过id获取元素：document.getElementById("idname");
2、通过class获取元素：document.getElementsByClassName("classname");
3、通过标签名获取元素：document.getElementsByTagName("tagdem");
4、表单中的name：document.getElementsByName("name");
5、selector选择器（不兼容IE7及以下）
document.querySelector("");通过CSS选择器获取一个
document.querySelectorAll("");通过CSS选择器获取所有

1、JS获取独有标签

独有标签
document.title
document.head
document.body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<script>
    // = 赋值的意思，通常要用赋值的形式
    console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';
</script>
</body>
</html>

2、通过id获取元素-id

通过id获取
可以通过标签中的id来操作元素
document.getElementById("idname");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<div id="dv1">不笑运气差，一笑就脸大</div>
<script type="text/javascript">
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';

    // var 定义变量，变量名不能是关键字，也不是保留字
    var oDv = document.getElementById('dv1')
    // alert(oDv)
    oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
</script>
</body>
</html>

在这里插入图片描述

3、通过class获取元素

class
通过class也可以获取元素。但是这里要记住，获取得是多个标签，因此具体要操作哪一个标签，需要使用下标
document.getElementByClassName(“classname”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<div id="dv1">不笑运气差，一笑就脸大
    <p class="box" id="p1">我是段落标签1</p>
    <p class="box" id="p2">我是段落标签2</p>
</div>
<script type="text/javascript">
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';

    // var 定义变量，变量名不能是关键字，也不是保留字
    // var oDv = document.getElementById('dv1')
    // alert(oDv)
    // oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
    var aBox = document.getElementsByClassName('box')
    // alert(aBox.length) // 打印长度
    // 当不唯一时，需要使用下标，下标从0开始
    aBox[0].innerHTML = '<b>谁还没个擅长的乐器呢！</b>'
</script>
</body>
</html>

在这里插入图片描述

4、通过标签名获取元素

tagName
通过class也可以获取元素
但是这里要记住，获取得是多个标签，因此具体要操作哪一个标签，需要使用下标
document.getElementByTagName("tagname");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<div id="dv1">不笑运气差，一笑就脸大
    <p class="box" id="p1">我是段落标签1</p>
    <p class="box" id="p2">我是段落标签2</p>
</div>
<script type="text/javascript">
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';

    // var 定义变量，变量名不能是关键字，也不是保留字
    // var oDv = document.getElementById('dv1')
    // alert(oDv)
    // oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
    // var aBox = document.getElementsByClassName('box')
    // alert(aBox.length) // 打印长度
    // 当不唯一时，需要使用下标，下标从0开始
    // aBox[0].innerHTML = '<b>谁还没个擅长的乐器呢！</b>'

    var aP = document.getElementsByTagName('p')
    // alert(aP.length)
    // 标签同样也是多个，也需要用下标去取
    aP[1].innerHTML = '<b>闹钟的作用大概就是，让我换个姿势继续睡。</b>'
</script>
</body>
</html>

在这里插入图片描述

5、selector选择器

selector
document.querySelector("");
通过CSS选择器获取一个
document.querySelectorAll("");
通过CSS选择器获取所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<div id="dv1">不笑运气差，一笑就脸大
    <p class="box" id="p1">
        <i>我是段落标签1</i>
    </p>
    <p class="box" id="p2">
        <i>我是段落标签2</i>
    </p>
</div>
<script type="text/javascript">
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';

    // var 定义变量，变量名不能是关键字，也不是保留字
    // var oDv = document.getElementById('dv1')
    // alert(oDv)
    // oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
    // var aBox = document.getElementsByClassName('box')
    // alert(aBox.length) // 打印长度
    // 当不唯一时，需要使用下标，下标从0开始
    // aBox[0].innerHTML = '<b>谁还没个擅长的乐器呢！</b>'

    // var aP = document.getElementsByTagName('p')
    // alert(aP.length)
    // 标签同样也是多个，也需要用下标去取
    // aP[1].innerHTML = '<b>闹钟的作用大概就是，让我换个姿势继续睡。</b>'
    // 类似于CSS的选择器来选择，这里只会选择一个
    // var oPP = document.querySelector('#dv1 p')
    // oPP.innerHTML = '生活不仅有甜头，还有肉吃'
    // 选择所有，具体制定的时候，就需要用下标
    var aPP = document.querySelectorAll('#dv1 p')
    aPP[1].innerHTML = '<b>别对我大呼小叫，我小时候被狗吓过。</b>'
</script>
</body>
</html>

在这里插入图片描述

6、其他补充

补充
id前面必须是document，其他的前面可以是某个元素（id，document），但不能是集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独有标签</title>
</head>
<body>
<!--<div id="dv1">不笑运气差，一笑就脸大-->
<!--    <p class="box" id="p1">-->
<!--        <i>我是段落标签1</i>-->
<!--    </p>-->
<!--    <p class="box" id="p2">-->
<!--        <i>我是段落标签2</i>-->
<!--    </p>-->
<!--</div>-->
<div id="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script type="text/javascript">
    // = 赋值的意思，通常要用赋值的形式
    // console.log(document.title = '这个是修改标题');
    // document.head;
    // 在修改别的标签，得用innerHTML(会解析标签)，innerText(不会解析标签)
    // console.log(document.body.innerText = '<h1>hello the world</h1>');
    // document.body.innerHTML = '<h1>hello the world</h1>';

    // var 定义变量，变量名不能是关键字，也不是保留字
    // var oDv = document.getElementById('dv1')
    // alert(oDv)
    // oDv.innerHTML = "不想听大道理，只想吃小雪糕。"
    // var aBox = document.getElementsByClassName('box')
    // alert(aBox.length) // 打印长度
    // 当不唯一时，需要使用下标，下标从0开始
    // aBox[0].innerHTML = '<b>谁还没个擅长的乐器呢！</b>'

    // var aP = document.getElementsByTagName('p')
    // alert(aP.length)
    // 标签同样也是多个，也需要用下标去取
    // aP[1].innerHTML = '<b>闹钟的作用大概就是，让我换个姿势继续睡。</b>'
    // 类似于CSS的选择器来选择，这里只会选择一个
    // var oPP = document.querySelector('#dv1 p')
    // oPP.innerHTML = '生活不仅有甜头，还有肉吃'
    // 选择所有，具体制定的时候，就需要用下标
    // var aPP = document.querySelectorAll('#dv1 p')
    // aPP[1].innerHTML = '<b>别对我大呼小叫，我小时候被狗吓过。</b>'

    var oBox = document.getElementById('box')
    // alert(oBox) //对于ID的获取，必须是document开头
    var aLi = oBox.getElementsByTagName('li')
    // alert(aLi.length)

    //获取元素，只要是一个确定的标签即可
    var aUl = document.getElementsByTagName('ul')
    var aLi = aUl[1].getElementsByTagName('li')
    alert(aLi.length)
</script>
</body>
</html>

三、JS基础事件

1、JS简单事件

含义：
所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应
使用：
在事件函数里面，有个一关键字this，代表当前发事件的这个元素
鼠标事件：
左键单击：onclick
左键双击：ondbclick
鼠标移入：onmouseover/onmouseenter
鼠标移出：onmouseout/onmouseleave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的基础事件</title>
    <style>
        .dv1{
            width: 200px;
            height: 200px;
            background: #D2691E;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<script>
    var aDv = document.getElementsByClassName('dv1')
    aDv[0].onclick = function(){
        aDv[0].innerHTML = '点击完成了'
        // this.innerHTML = '点击完成了' //this代表发生时间的元素
    }
    aDv[0].onmouseenter = function () {
        this.innerHTML = '鼠标移入'
    }
    aDv[0].onmouseleave = function () {
        this.innerHTML = '鼠标移出'
    }
</script>
</body>
</html>

在这里插入图片描述
事件通过函数完成，在函数内部书写自己想要实现的效果

四、JS修改样式

1、JS修改样式

解释：
js可以修改规范和不规范的标签的样式，也可以配合点击事件等一起使用
规范标签：
规范标签属性：.符号直接操作（可读可写）
不规范（自定义）的标签属性：
获取：.getAttribute()
设置：.setAttribute()
移除：.removeAttribute()
注意项：
1、所有的路径、颜色获取的结果不一定是你写的内容
2、通过id获取得元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
3、自定义标签属性的操作方式，同样可以操作符合规范的标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS修改样式</title>
</head>
<body>
<a href="https://baidu.com" id="box" class="wrap" target="_blank"></a>
<script type="text/javascript">
    var oA = document.getElementById('box')
    // alert(oA.id) // 可读性：可以看到属性值
    // alert(oA.target)
    // alert(oA.className) // 查看class需要使用className才行
    oA.target = '_self' // 可写性：只要是规范的标签，都可写
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS修改样式</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #87CEEB;
        }
    </style>
</head>
<body>
<!--<a href="https://baidu.com" id="box" class="wrap" target="_blank"></a>-->
<div class="box"></div>
<script type="text/javascript">
    // var oA = document.getElementById('box')
    // alert(oA.id) // 可读性：可以看到属性值
    // alert(oA.target)
    // alert(oA.className) // 查看class需要使用className才行
    // oA.target = '_self' // 可写性：只要是规范的标签，都可写
    var aBox = document.getElementsByClassName('box')
    // 获取标签之后，可以直接更改样式中的属性
    // aBox[0].style.background = 'red';
    // 也可以和响应事件组合起来用
    aBox[0].onclick = function () {
            // 使用cssText 可以同时修改多个
        aBox[0].style.cssText = "width: 300px; height: 300px; background: red;"
    }
    // 对于有-号连接的属性，改成驼峰命名的规则
    // aBox[0].style.marginLeft = '100px';
    aBox[0].style["margin-top"] = '100px';
    var mleft = "margin-left";
    aBox[0].style[mleft] = '100px';
    // style[]可以是变量也可以是字符串
</script>
</body>
</html>

在这里插入图片描述

五、JS基本数据类型

1、JS数据类型

number：
数字，在js里面的小数和整数统一都是数字。-2^53 ~ 2^53超出范围之后精度就会不准确
boolean：
布尔值（ture、false）
undefined：
未定义，一个变量声明之后没有复制就是undefined
string：
字符串
null：
空值，在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将他归为单一类的数据类型null
object：
对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS数据类型</title>
</head>
<body>
<script type="text/javascript">
    // var nu = 5;
    // var nu = -12.5;
    // var nu = 'this is string';
    // var nu = false;
    // var nu; // undefined
    // var nu = [1,23]; // 数组，字典都属于对象
    // alert(typeof nu); // typeof 查看类型
    var a = 1, b = 2;
    alert(a + b)
</script>
</body>
</html>
Fresh_anyu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python全栈要学什么 python全栈学习路线
12-25
IT行业，技术要比学历、年龄、从业经验更为重要，技术水平直接决定就业薪资，想要学好python，首先要先了解精通Python语言基础、Python web开发、Python爬虫、Python数据分析这四大方面。 全栈即指的是全栈工程师，...
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
(5)\\python全栈day41-50\\python全栈s3 day41；目录中文件数:10个 ├─(1) 01 python s3 day41 JS的历史以及引入方式.avi ├─(2) 02 python s3 day41 JS的基础规范.avi ├─(3) 03 python s3 day41 JS的基本数据...
Python全栈最全学习之路-WEB前端练习（一）
Sdhrs_nn的博客
09-22 206
练习（一） 一、HTML练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML作业</title> </head> <body> <div> <h2>请注册</h2> <p> <span>已有账号？<
python搭建web全栈
shuifu1988的博客
09-12 3703
一个Python服务器和一个React前端
Python Web前端开发JavaScript视频教程（四）
04-24
提供了为有基础或者无基础的小伙伴一个学习前端的视频平台；可以对js的使用有一个完整的了解 对于想从事web全栈开发的小伙伴是一个必不可少的学习资料；内容从基础到实战的一个完整全套学习。
innerText 使用
csdt_csdt的专栏
01-22 5749
function showTime(){ //在元素间的文本就是通过 对象 .innerText document.getElementById("mytime").innerText = new Date().toLocaleString(); } setInterval("showTime()",1000);
innerText和textContent的区别
weixin_34234829的博客
08-16 423
innerText和textContent的作用都是获取元素之间的文本内容，但是他们的表现确是不同的，如下： 区别 1、innerText的值依赖于浏览器的显示，textContent依赖于代码的显示,如下代码： &lt;div id="container"&gt; &lt;span&gt;666&lt;/span&gt; &lt;span&gt;999&lt;/span&gt...
python全栈开发基础+前端+web框架+项目实战视频.zip
07-14
3 python全栈开发web框架篇视频 : 框架简介 框架的本质socket连接 基于wsgi的web框架开发（一） 基于wsgi的web框架开发（二） MTV和MVC模式 django流程之url和视图函数 django流程之模版 django流程之model以及实例 ...
老男孩python全栈开发学习笔记.zip_Python全栈_harborkyi_python 全栈开发_全栈_老男孩 pyth
最新发布
09-23
通过学习《老男孩Python全栈开发学习笔记》，读者不仅可以掌握Python全栈开发的核心技能，还能了解软件开发的全过程，从而提升个人在团队中的价值和竞争力。文档的详细内容和实际案例将帮助读者逐步成长为一名全能的...
Bug-Tracking-Web-App：基于Web的全栈:bug:使用Django-PostgreSQL后端和React-Redux前端构建的bug跟踪平台:mobile_phone:
02-18
这个项目是一个全栈Web应用，主要用于bug跟踪和管理。它利用了现代Web开发技术，包括Django作为后端框架，PostgreSQL作为数据库系统，以及React和Redux作为前端组件库和状态管理工具。此应用特别关注于移动设备的...
如何获取textarea中的内容？innerhtml、innerText还是value？
microcosmv的博客
02-19 1万+
答案：value。 注意：form 里的Dom元素(input select checkbox textarea radio)都是value
InnerText和InnerXml的区别
howard的技术之路
06-08 6505
InnerText无格式显示里面的所有内容，InnerXml含有格式的显示；应该和InnerText和InnerHtml是一样的。XmlDocument doc = new XmlDocument();doc.LoadXml("" +            "some textmore text" +            ""); XmlNode elem = doc.D
JS中的innerHTML，innerText，value的区别
gabby____的博客
09-08 3万+
一、区别 innerHTML 在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。 innerTEXT 打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。 value 显示双引号中的全部内容，显示标签，标签无效。 二、举例 例一 1、innerHTML &lt;!doctype html&gt; &lt;html lan...
textContent和innerText以及innerHTML的区别，结合demo进行理解
祥哥的说
01-09 6996
先看看下面这个demo，不言自明： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&am
innerHTML,innerText,value的区别(实例)
fourinches的博客
08-06 5248
1. 获取标签的内容    innerHTML识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 [高版本的浏览器会将格式原样打印];    innerText 不识别标签,  在获取标签内容时去除所有标签    value获取标签的value属性值 实例如下:    解析:    (1) 控制台的打印内容中, 第一段(以虚线划分) 使用innerHTML获取到&lt;div&g...
Python Selenium - innerHTML 属性
flyincyclone的博客
05-29 4677
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML(包含html标签)。 HTMLElementObject.innerHTML=text innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容。 获取元素的内容： element.innerHTML 给元素设置内容： element.innerHTML = htmlStr...
innerText 与 innerHtml的区别 （一）
热门推荐
安静的对折的专栏
09-16 4万+
innerText  与 innerHtml 都是打印标签之间的文本信息 1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent Document 这是P标签 这是P标签 这是P标签 var box = docu
Python全栈开发：Flask与Django实战Web应用
这份资源详细介绍了从Python环境搭建（包括Python安装和虚拟环境管理）到Flask和Django的实战应用，是全面学习Python全栈Web开发的宝贵资料。通过学习，开发者可以掌握构建现代Web应用所需的各种技能，从简单的个人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值