Javascript学习

最新推荐文章于 2022-10-13 09:14:19 发布
最新推荐文章于 2022-10-13 09:14:19 发布
阅读量212 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongsanjin/article/details/106978345
版权

文章目录

1、js函数

1.1、定义函数

绝对值函数

定义方式1

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到 return 代表函数结束，返回结果！

如果没有执行 return，函数执行完也会返回结果，结果为 undefined

定义方式2

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(x){ … }这是一个匿名函数。但是可以把结果赋值给 abs，通过 abs 就可以调用函数！

方式一和方式二等价。

调用函数

abs(10)		//10
abs(-10)	//10

参数问题：js可以传任意个参数，也可以不传递参数~

假设不存在参数，规避方法：

var abs = function(x){
    //手动抛出异常来判断
    if(typeof x!== 'number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments代表传递进来的所有的参数，是一个数组！

var abs = function(x){
    
    console.log("x=>"+x);
    for (var i = 0; i<arguments.length; i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

rest

以前：

if (argumments.length>2){
    for (var i=2; i<arguments.length; i++){
		//。。。。
    }
}

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~…

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest 参数只能写在最后面，必须用 … 标识。

1.2、变量作用域

在 JavaScript 中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用

function qj(){
	var x = 1;
    x = x+1;
}

x = x + 2; 	//报错：Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
    var x = 1;
    x = x+1;
}

function qj2(){
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj(){
    var x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
    function qj2(){
        var y = x + 1;	//2
    }
    
    var z = y + 1;	// Uncaught ReferenceError: y is not defined
}

提升变量的作用域

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果：xundefined

说明：js执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值；

js 中养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

全局函数

//全局变量
x = 1;
function f() {
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在 window 对象下；

alert() 这个函数本身也是一个window变量；

var x = 'xxx';
window.alert(x);

var old_alert = window.alert;
//old_alert(x);

window.alert = function(){
    
};
//发现 alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找的，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于所有的全局变量都会绑定到 window 上。如果不同的 js 文件，使用了相同的全局变量，会发生冲突，解决冲突：

//唯一全局变量
var kuangApp = {};

//定义全局变量
kuangApp.name = 'kuangshen';
kuangApp.add = function (a,b){
    return a+b;
}

把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突的问题。

局部作用域 let

function aaa(){
    for (var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1); //问题：i 出了这个作用域还可以使用
}

ES6 let 关键子，解决局部作用域冲突问题！

function aaa(){
    for (let i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

建议使用 let 去定义局部作用域的变量

常量 const

在ES6 之前，怎么定义常量：只有用全大写字母定义的变量就是常量；建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);

在 ES6 引入了常量关键字const

const PI = '3.14'; //只读变量
console.log(PI);
PI = '123'; // TypeError:Assignment to constant variable.
console.log(PI);

1.3、方法

定义方法

var kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    //方法
    age: function (){
        //今年 - 出生的年
        var now = new Date().getFullYear();
        return now - this.bitrh;
    }
}
//属性
kuangshen.name
//方法，一定要带  ()
kuangshen.age()

this代表什么？拆开写法：

function getAge(){
    //今年 - 出生的年
    var now = new Date().getFullYear();
    return now - this.bitrh;
}
var kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    age: getAge
}

//kuangshen.age()	正常显示
//getAge()	NaN		（this指的是window）

this是无法指向的，是默认指向调用它的那个对象；

apply在 js 中可以控制 this 指向！

getAge.apply(kuangshen,[]); // this,指向了 kuangshen,参数为空

2、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NAN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date

基本使用

var now = new Date();	//时间
now.getFullYear();	//年
now.getMonth();		//月	  0~11    代表月
now.getDate();		//日
now.getDay();		//星期几
now.getHours();		//时
now.getMinutes();	//分
now.getSeconds();	//秒

now.getTime();		//时间戳
console.log(new Date('时间戳')) //时间戳转时间

3、面向对象编程

  • 类：模板
  • 对象：具体的实例

原型对象

原型：

var Student = {
    name: "qinjiang",
    age: 3,
    run: function () {
        console.log(this.name + " run...");
    }
};

var xiaoming = {
    name: "xiaoming"
};

//原型对象 小明的原型对象时student
xiaoming._proto_ = Student;


function student(name) {
    this.name = name;
}
//给student新增一个方法
student.prototype.hello = function () {
    alert('Hello')
};

class关键字

class关键字，是在 ES6 引入

1、定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}

var xiaoming = new student("xiaoming");
var xiaohong = new student("xiaohong");
xiaoming.hello();

2、继承

class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    
    myGrade(){
        alert('我是一名小学生');
    }
}
var xiaohong = new XiaoStudent("xiaohong",1);

4、操作BOM对象

Javascript诞生就是为了能够在浏览器中运行！

BOM：浏览器对象模型

window

window 代表浏览器窗口

window.alert(1)
window.innerHeight		//浏览器内部高度
window.innerWidth		//浏览器内部宽度
window.outerHeight		//浏览器外部高度
window.outerWidth		//浏览器外部宽度

navigator

navigator 封装了浏览器的信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

大多数时候，不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码。

screen

屏幕

screen.width		//屏幕宽度
screen.height		//屏幕高度

location

location代表当前页面的URL信息

host: "www.baidu.com"				//主机
href: "https://www.baidu.com/"		//当前指向位置
protocol: "https:"					//协议
reload: ƒ reload()		//刷新网页
// 设置新地址
location.assign('新的url地址')

document

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
	var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie 原理

举例：淘宝和天猫之间

服务器端可以设置cookie：httpOnly

history

history 代表浏览器的历史记录

history.back()		//前进
history.forward()	//后退

5、操作DOM对象

DOM：文档对象模型，是HTML和XML文档的编程接口。

核心

浏览器网页就是一个Dom 树形结构！

  • 更新：更新Dom节点
  • 遍历dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild	父节点的第一个子节点
// father.lastChild		父节点的最后一个子节点

更新节点

<div id = "id1">
    
</div>
<script>
	var id1 = document.getElementById('id1');
</script>

操作文本

  • id1.innerText='456'修改文本的值
  • id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作JS

id1.style.color = 'yellow';		//属性使用 字符串 包裹
id1.style.fontSize = '20px';	//驼峰命名问题
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
	var self = document.getElementById('p1');
    var father = self.parentElement;
    father.removeChild(self)
    
    //删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意~

插入节点

获得某个Dom节点，假设这个dom节点是空的，通过 innerHTML 就可以增加一个元素了，但是这个DOM节点已经存在元素，就不可以这么做，会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
	var js = document.getElementById('js');// 已经存在的节点
    var list = document.getElementById('list');
    list.appendChild(js);	// 追加到后面(默认是将前面js放到了后面)
</script>

创建一个新的标签，实现插入

<script>
	// 通过Js 创建一个新的节点
    var newP = document.createElement('p'); // 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello.Kuangshen';
    // 创建一个标签节点 （通过这个属性，可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
    // 可以创建一个style标签
    var myStyle = document.createElement('style'); //创建一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{backgroud-color: chartreuse;}';	//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

6、操作表单

表单是什么 form DOM树

  • 文本框 text
  • 下拉框 < select>
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • …

表单的目的：提交信息

获取要提交的信息

<form action="" method="">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>
</form>

<script>
	var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    
    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'
    
    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
    gitl_radio.checked = true; //赋值
</script>

7、jQuery

jQuery 库，里面存在大量的 Javascript 函数

获取jQuery

可使用在线cdn引入
下载引入(分开发版，和压缩版)

使用公式

$(selector).action()

$(选择器).事件()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    </head>
    <body>
        <a href="" id="test-jquery">点我</a>
        
        <script>
            //选择器就是css的选择器
            $('#test-jquery').click(function(){
                alert('hello,jQuery');
            })
        </script>
    </body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery   css 中的选择器它全部都能用！
$('p').click();			// 标签选择器
$('#id1').click();		// id选择器
$('.class1').click()	// class选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <style>
            #divMove{
                width: 500px;
                height: 500px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!-- 要求：获取鼠标当前的一个坐标 -->
        mouse : <span id="mouseMove"></span>
        <div id="divMove">
            在这里移动鼠标试试
        </div>

        <script>
            //当网页元素加载完毕之后，响应事件
            $(function(){
                $('#divMove').mousemove(function (e){
                    $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
                })
            })
        </script>
    </body>
</html>

操作DOM

节点文本操作

//id为 test-ul 下的 name=python 的 li 标签
$('#test-ul li[name=python]').text();	//获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
//id为 test-ul 标签下得html标签
$('#test-ul').html();	//获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css 的操作

$('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质为css属性设置display : none

$('#test-ul li[name=python]').show()	//显示
$('#test-ul li[name=python]').hide()	//隐藏
K.X
关注
专栏目录
JavaScript学习
10-02
JavaScript学习 JavaScript学习JavaScript学习 JavaScript学习JavaScript学习 JavaScript学习JavaScript学习 JavaScript学习
JavaScript学习指南
03-20
JavaScript学习指南 JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上最流行的编程语言之一。它主要用于客户端的交互式网页开发，也可以在服务器端通过Node.js平台进行后端开发。JavaScript与Java...
js的window对象(BOM 1)
weixin_30430169的博客
08-16 88
window对象 window对象是BOM（浏览器对象模型）的核心。window对象既是通过JS访问浏览器窗口的接口，也是ECMAScript规定的global对象。 1.全局作用域 全局作用域中定义的变量和方法都会变成window对象的属性和方法。 定义的全局变量和定义的window对象属性还是有区别的： 全局变量不能通过delete操作符删除，但window对象属性可以 var ...
js的window对象与属性的使用
悦分享
11-23 1万+
1.BOM的概述     browser object modal :浏览器对象模型。     浏览器对象：window对象。     Window 对象会在 &lt;body&gt; 或 &lt;frameset&gt; 每次出现时被自动创建。 2. window对象 window对象是BOM中所有对象的核心。BOM    Browser  Object Model 3.window对象的...
javasript基础-----运算符与表达式（优先级，剔除非数字，处理浮点溢出）、数据/类型/变量（检测类型）
wenmin1987的博客
01-12 252
运算符的优先级： 优先级 运算类型 关联性 运算符 20 圆括号() n/a（不相关） ( … ) 19 成员访问 . 从左到右 … . … 需计算的成员访问[] 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 () 从左到右 …...
前端基础3-2——JavaScript
weixin_44238066的博客
02-08 626
JS（2）
javaScript学习
qq_54202620的博客
12-31 1045
JavaScript 1.什么是JavaScript 是全球最流行的脚本语言。 ECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上! 2.快速入门 2.1引入方式 内部标签 外部引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <...
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
JavaScript学习（一）
05-25
JavaScript学习（一） JavaScript是一种广泛应用于网页和网络应用的脚本语言，由 Netscape 的 Brendan Eich 在1995年发明。它主要用于客户端的网页交互，赋予网页动态功能，如响应用户操作、处理数据、与服务器通信...
JavaScript学习笔记
weixin_43288477的博客
09-07 1064
文章目录1.什么是JavaScript？1.1 概述1.2 历史2.快速入门2.1 引入JavaScript2.2 基本语法入门 1.什么是JavaScript？ 1.1 概述 JavaScript是一门世界最流行的脚本语言 Java、JavaScript，名字里的java只是为了蹭Java的热度。 一个合格的后端人员，必须要精通JavaScript 1.2 历史 JavaScript历史博客 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到ES6，但是大部分浏览器还只停留在支
Javascript复习题
热门推荐
采菊东篱下，Python满乾坤！
09-09 2万+
Javascript复习题 一、选择题 1、写“Hello World”的正确javascript语法是？                            (A) A.document.write("Hello World")            B. "Hello World"   C.response.write("Hello World")              D.
javaScript笔记
qq_43549054的博客
01-29 256
0、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 0.1、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScript（行为）
js中的函数
flqbestboy的专栏
08-09 781
什么是函数？ 编程的角度：   具有某种功能的代码判断。 生活的角度：   函数就是一个完成特定功能的工具 一般情况下，函数都具备参数和返回值 函数如何创建？  常见的函数有哪些？？ Math.pow(a, 5); alert("ok"); document.write("你好")
JavaScript函数
H24568的博客
01-22 138
JavaScript函数 一.函数的定义 创建函数有两种方式第一种就直接定义函数 function abs(x) { if(x>=0) { return x; } else { return -x; } } 这里是定义了一个abs求绝对值的函数 var abs = function(x) { if(x>=0) { return x; } else { return -x; } }
7.狂神说JavaScript
最新发布
归期无期的博客
10-13 251
此文章仅供自己查找复习使用，如有侵权，请联系作者删除
JavaScript简单入门（二）
tylambition的博客
02-14 189
4、函数 4.1定义函数 方式一 function abs(x) { if(x>=0){ return x; }else{ return -x; } } 方式二 var abs=function (x) { if(x>=0...
ES6入门系列四（测试题分析）
diaochou1143的博客
11-07 564
0、导言 ES6中新增了不少的新特性，来点测试题热热身。具体题目来源请看：http://perfectionkills.com/javascript-quiz-es6/。 以下将一题一题来解析what和why。 1、题目一 (function(x, f = () => x) { var x; var y = x; x = 2; return [x, ...
JavaScript学习(二) 函数
weixin_45845042的博客
04-26 201
JavaScript学习 (一) (数据类型） 文章目录JavaScript学习 (一) (数据类型）1，变量定义2，数值3，比较运算符4，字符串5，数组6，对象7，流程结构8，Map 与Set 1，变量定义 //使用严格检查模式 'use strict' let a =1; let b= 'string'; let c= "string"; let d =true; 2，数值 **Num...
es6函数的扩展
qq_39974123的博客
09-02 231
函数参数的默认值 es6允许为函数的参数设置默认值，用法如下 function log(x, y = 'World') { console.log(x, y); } 参数变量不能再次声明。另外，使用参数默认值的时候，不能有同名参数，但是不用默认值可以有同名参数 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。参数默认值是惰性求值的。 let x = 99; function f...
JavaScript学习资源大全
"JavaScript学习指南" JavaScript，又称为JS，是一种广泛应用于网页和互联网应用的轻量级编程语言，它主要用于客户端的网页脚本编写，使网页具有动态交互性。JavaScript可以操控HTML元素、处理用户输入、操作DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值