第一章爬虫基础-前端JavaScript 2021-09-04

最新推荐文章于 2024-03-09 11:44:20 发布

偶入编程深似海

最新推荐文章于 2024-03-09 11:44:20 发布

阅读量430

点赞数

分类专栏： python 爬虫文章标签： javascript 爬虫 python

本文链接：https://blog.csdn.net/qq_21438267/article/details/120095898

版权

python 爬虫专栏收录该内容

17 篇文章 2 订阅

订阅专栏

爬虫系列总目录

本章节介绍爬虫基础知识，包括网络，前端界面HTML,CSS, JS 等。
第一章爬虫基础-网络传输协议
 第一章爬虫基础-请求与响应头
 第一章爬虫基础-前端HTML
第一章爬虫基础-前端CSS
第一章爬虫基础-前端JavaScript

1、JS介绍

JavaScript（简称“JS”，后面都称呼为JS）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。

2、嵌入页面的三种方式

代码如下（示例）：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  JS导入外部JS文件-->
    <script src="click.js"></script>
    <!-- 页面内使用script标签 -->
    <script type="text/javascript"> alert('ok！'); </script>
</head>
<body>
<!--行间事件-->
<input type="button" value="点击" onclick="alert('你点击了点击这个按钮!')">
</body>

3、 JS变量

JS和Python一样，也是一门弱类型语言，变量的数据类型由变量中的值决定，定义变量需要使用关键字 var。

3.1 JS变量类型

1、基本数据类型

number 数字类型
string 字符串类型
boolean 布尔类型（True/False）
undefined undefined类型，此类型指的是变量没有初始化，它的值就是undefined
null null类型，表示空对象，如果说定义的变量是为了后面保存对象使用，可以给变量初始化为null

2、复合类型

object

3.2 JS语句格式

JS的每一条语句都要以";"（英文分号）结尾

    <script type="text/javascript">
        var num = 123;
        var str = 'hello js!';
        function func_name() {
            alert('alert弹窗！');
        };
        func_name();
    </script>

4、获取元素

4.1 原生JS中获取HTML元素可以使用以下方法:

通过ID获取 document.getElementById()
通过name属性： document.getElementByName()
通过标签名： document.getElementByTagName()
通过类名： document.getElementByClassName()
通过选择器获取一个元素： document.querySelector()
通过选择器获取全部元素：document.querySelectorAll()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var all_div = document.getElementsByClassName('box');
            console.log(all_div.length);
            console.log(all_div[2]);
        }
    </script>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</body>

4.2 使用内置对象通过标签名获取标签选择集(getElementsByTagName)

参数为获取元素的标签名字，string类型，必须传参数，不区分大小写
返回值为标签选择集，并非为数组。如果没有找到该标签则返回空
返回值选择集可以使用下标的方式操作选择集中的标签元素。

5、操作元素

JS获取到页面元素后，就可以对获取到的元素的属性进行操作，属性的操作包括读和写。

5.1 操作属性的方法：

. 操作: 针对获取是ByID 的结果, .属性操作获取对应属性值。
[]操作：填入下标，获取选择集中的内容；填入对应属性（属性为字符类型），获取属性值。

5.2 JS中属性的写法：

HTML的属性和JS里面的属性写法一致
class写成className
style里面的属性，以”-“连接的改写成小驼峰，比如background-color在JS中为style.backgroundColor

5.3 innerHTML

innerHTML可以直接读取或者写入标签包裹的内容, <>标签包裹的内容</>

6、运算符与条件语句

6.1 运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：== ,===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
==与===的区别:
== 只判断值，不判断类型，实际上里面有类型转换
=== 不仅判断值，还需要判断类型，只有两者都相同时，才为TRUE。

7、JS函数

7.1 JS函数定义与执行

函数传参：

    <script type="text/javascript">
        function func_alert(a) {
            alert(a);
        }

        var n = 1000;
        func_alert(n);
    </script>

7.2 JS函数执行与解析

JS解析分为两个步骤，先是编译，然后执行。函数会在编译阶段进行提前，也就是可以把执行函数这个步骤放到函数定义前；

7.3 JS匿名函数

JS中可以在定义函数的时候不命名，这个就是匿名函数，匿名函数可以直接赋值给元素绑定的事件来完成匿名函数的调用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            box.onclick = function () {
                alert('匿名函数点击弹窗')
            }
        }
    </script>
</head>
<body>
<div id="box">div box</div>

return的作用：

返回函数执行的结果
结束函数的运行
阻止默认行为

阻止鼠标右键的默认行为：

    <script type="text/javascript">
        document.oncontextmenu = function () {
            return false;
        }
    </script>

8、调试的方法

调试的时候一般来说不使用document.title，而alert()需要弹出，会阻止函数的运行。console.log不会有这个缺点，所以最常用的则是console.log。

alert
console.log (常用的调试程序的方法)
document.title

偶入编程深似海

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第一章爬虫基础-前端JavaScript 2021-09-04

爬虫系列文章本章节介绍爬虫基础知识，包括网络，前端界面HTML,CSS, JS 等。第一章爬虫基础-网络传输协议第一章爬虫基础-请求与响应头第一章爬虫基础-前端HTML第一章爬虫基础-前端CSS爬虫基础-前端JavaScript爬虫系列文章1、JS介绍2、嵌入页面的三种方式3、 JS变量3.1 JS变量类型3.2 JS语句格式4、获取元素4.1 原生JS中获取HTML元素可以使用以下方法:4.2 使用内置对象通过标签名获取标签选择集(getElementsByTagName)5、操
复制链接

扫一扫