添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
率性的橙子  ·  如何用LaTeX将图片旋转90度，并保留图题？·  1 年前    · 
小眼睛的电梯  ·  第3期（3）：UE4全景图技巧（1） - 知乎·  1 年前    · 
憨厚的脸盆  ·  c++ - ...·  2 年前    · 
link之家  ›  javaScript简单入门 -
log文件 python数组操作 脚本 js
https://zhuanlan.zhihu.com/p/107130855
从容的墨镜
1 年前
javaScript简单入门

javaScript简单入门

3 年前

1、什么是JavaScript？

JavaScript是一门世界上最流行的脚本语言

2、快速入门

2.1 引入JavaScript

  1. 内部标签 
<script>
//...
</script>


2、外部引入

hello.js

//...

test.html 

<script src="hello.js"></script>

2.2 基本语法入门 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
 <script>
     //1.定义变量 变量类型 变量名=变量值;
     var score=71;
     alert(score);
     //2.条件控制
     if(score>60&&score<70){
         alert("60~70");
     }else{
         alert("不在范围内")
     //在浏览器的控制台打印变量！
     console.log(score);
 </script>
</head>
</body>
</html>

浏览器调试操作：

2.3 数据类型

数值、文本、图形、音频、视频...

变量

var a=1;//不能以数字开头

number

js不区分小数和整数，Nunmber

123 //整数
123.1//浮点数123.1
1.23e3//科学计数法

字符串

‘abc’ “abc”

布尔值

true，false

逻辑运算

&& 与
|| 或
！ 非

比较运算符

=

==等于（类型不一样，值一样也会判true）

===绝对等于(类型一样，值一样，结果true)

这是js的缺陷，坚持不用==比较

须知：

  • NaN===NaN，这个与所有的值都不相等，包括自己
  • 只能通过isNaN(NaN)来判断


浮点数问题：

console.log(1/3)===(1-2/3) //false

尽量避免使用浮点数进行运算，存在精度问题！

null和undefined
  • null 空
  • undefined未定义
数组

java的数值必须是相同类型的值，js不需要这样 

//保证代码可读性，尽量使用[]
var arr=[1,2,3,'hello',ture];
new Array(1,24,'hello');

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，数组是中括号

每个属性使用逗号隔开，最后一个不需要添加逗号 

var person={
    name:"tyl",
    age:3,
    tags:['js','java']

取对象的值：

person.age

2.4严格检查模式 

<!DOCTYPE html>
<html lang="en">
    <meta




    
 charset="UTF-8">
    <title>Title</title>
    支持ES6才行
     'use strict';严格检查模式，预防JavaScript的随意性导致的一些问题
     必须写在js的第一行
     局部变量建议都使用let去定义
    <script>
        'use strict';
        //局部变量
         let i=1;
    </script>
</head>
</body>
</html>

3、数据类型

3.1 字符串

1、正常字符串我们使用 单引号，或者双引号包裹

2、注意转义字符\

\'
\n
\t
\u####
Ascll字符

3、多行字符串编写 

//tab上面的`
var msg=`你好

4、模板字符串 

let name='tyl';
let age=3;
let msg=`你好啊，${name}`

5、字符串长度

str.length

6、字符串的可变性，不可变

7、大小写转换 

//方法
str.toUpperCase()
str.toLowerCase()

8、其他 

indexOf()
substring()//[)

3.2 数组

Array可以包含任意的数据类型

var arr=[1,2,3,'hello']

1、长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化,如果赋值过小，元素会丢失

2、indexOf，通过元素获得下标索引

字符串的“1”和数字1是不同的

3、slice（）截取Array的一部分，返回一个新数组，类似于String中的substring

4、push（）、pop（）、unshift（）、shift（）

push：压入到尾部
pop：弹出尾部的一个元素
unshift：压入到头部
shift：弹出头部的一个元素

5、排序sort（）

6、元素反转reverse（）

7、concat（）注意：并没有修改数组，只是会返回一个新的数组

8、j连接符join

打印拼接数组，使用特定的字串连接


9、多维数组

3.3 对象

若干键值对

var 对象名{
属性名:属性值,
属性名:属性值,
属性名:属性值
}

js中的对象，{,,,,}表示一个对象，键值对描述属性xxx：xxx，不同属性之间用逗号隔开，最后一个属性不加逗号！

1、对象赋值

2、使用一个不存在的对象属性，不会报错！undefined

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在这个对象中！xxx in xxx

6、判断一个属性是否是这个对象自身拥有的str.hasOwnProperty('name')

3.4流程控制（略）

forEach循环 

var age=[12,34,54,56,57,3,2,2];
age.forEach(function (value) {
    console.log(value);

for..in循环 

var age=[12,34,54,56,57,3,2,2];
for(var num in age){
    console.log(age[num])

3.5 Map和Set

Map 

//ES6 Map
var map=new Map([['tom',100],['tyl',200],['rose',0]]);
var score=map.get('tyl');
console.log(score);
map.set('adi',123);

Set：无序不重复的集合 

var set=new Set([1,2,43,1,1,3]);//去重
set.add(2);
set.delete(1);

4、函数

4.1定义函数

方式一 

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

方式二 

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

参数问题：JavaScript可以任意个参数，也可以不传参数

arguments

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

rest

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

function(xx,xx,...rest){}

只能写在最后面，必须用...标识

4.2变量的作用域

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

假设在函数体中声明，则再函数体外不可使用（非要实现的话，可以考虑闭包） 
function f() {
    var x=1;
x=x+1;//Uncaught ReferenceError: x is not defined

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

假设内部函数变量与外部函数的变量重名时： 

function f() {
    var x=1;
    function f1() {
        var x=2;
        console.log('in'+x);
    f1()
    console.log('out'+x);
//输出：in2 out1

函数查找变量从自身函数开始，由内向外查找。假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的值！

提升变量的作用域 
function f1() {
    var x="x"+y;
    console.log(x);
    var y='y';
//结果：xundefined

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

//全局变量
x=1;
function f(){
    console.log(x);
f();
console.log(x);
全局对象window 
var x='xx'
alert(x);
alert(window.x);//默认所有的全局变量都会自动绑定在window对象下

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

提示：将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部变量域：let 
function a(){
    for(var i=0;i<10;i++){
        consloe.log(i)
    console.log(i);//i依旧能使用  
function b(){
    for(let i=0;i<10;i++){
        consloe.log(i)
    console.log(i);//无法使用
常量const

只读变量，无法修改

4.3方法

方法就是把函数放在对象的里面，对象只有两个东西：属性，方法 

 var tyl={
        name:'tyl',
        age:20,
        score:function () {
            return this.age*100;
 //方法调用要带()

this指向调用它的对象

apply

所有的function都有apply方法，可以指向调用对象

5、对象

标准对象

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

5.1Date 

var now=new Date();//Thu Feb 13 2020 17:13:10 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一
console.log(new Date(1581585190751));//时间戳转换为时间

5.2 JSON

JSON([JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

在js中，一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都用key：value 
var user= {
     name: "tyl",
     age: 1,
     sex: "男"
 //对象转化为json字符串 "{"name":"tyl","age":1,"sex":"男"}"
 var json_user=JSON.stringify(user);
 //json字符串转换为对象 参数为json字符串
 var obj=JSON.parse('{"name":"tyl","age":1,"sex":"男"}');

JSON与js对象的区别： 

var obj={a:'hello',b:'one'};
var json='{"a":"hello","b","one"}'

5.3Ajax

  • 原生的js写法，xhr异步请求
  • JQuery封装好的方法
  • asios 请求

6、面向对象编程

6.1 原型对象

所有的 JavaScript 对象都会从一个 prototype （原型对象）中继承属性和方法。 

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
 //添加一个属性
Person.prototype.nationality = "English";
 //添加一个方法
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;

1、 ES6之后，引入class关键字 

//ES6之后
class Student{
    constructor(name){
        this.name=name;
    hello(){
        alert('hello')
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('xiaohong');

2 、继承 

class




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

本质依旧是原型对象，且可以发现原型的原型会一直到object，最终形成原型链

7操作BOM对象（重点)

浏览器介绍

js和浏览器的关系？

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

BOM：浏览器对象模型

  • IE
  • Chrome
  • Safari
  • FireFox

三方：QQ浏览器、360浏览器

window

代表浏览器窗口

Navigator

封装了浏览器的信息

screen

代表屏幕尺寸

location

代表当前页面的URL信息

document

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

可以获取具体的文档树节点

获取cookie

history

代表浏览器的历史记录

8、操作DOM对象（重点）

DOM：文档对象模型

核心：浏览器网页是一个Dom树形结构

  • 更新：更新Dom节点
  • 遍历dom节点
  • 删除
  • 添
获取Dom节点原生代码，之后可以用jQUery 
//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var childrens=father.children;//获取父节点下所有子节点
更新节点 
//操作文本
p1.innerText='p1...' //修改文本值
p1.innerHTML='<strong>hello</strong>'
//操作css
p1.style.color='yellow'
删除结点 
//先获取父节点，再删除自己
var self=document.getElementById('p1');
father=self.parentElement;
father.removeChild(p1)

注意：删除多个结点时，children是在时刻变化的，以下操作是错误的 

//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[3]);
插入结点

我们获得了某个Dom结点，假设这个dom结点时空的，我们通过innerHTML就可以增加一个元素，但是这个DOM结点已经存在元素了，我们就不能这么操作，会产生覆盖！

追加方式： 

var list=document.getElementById('lsit');
var js=document.getElementById('js');//已经存在结点
father.appendChild(js);

创建方式： 

//创建一个新的结点
var newp=document.createElement('p');
newp.id='newp';
newp.innerHTML='新标签';
list.appendChild(newp);
//创建一个style标签
var myStytle=document.createElement("style");
    myStytle.setAttribute('type','text/css');
    myStytle.innerHTML='body{background-color:yellow;}'
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(myStytle);

插入方式 

//要包含的结点，insertBefore(newNode,targetNode)
p2.insertBefore(js,p2);

9、操作表单（验证）

表单：form

  • 文本框 text
  • 下拉框
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏框 hidden
  • 密码框 password
  • ....

表单的作用：提交信息

获取要提交的信息 
<form action="post">
        <span>用户名：</span><input type="text" id="username">
    <!--多选框的值，就是定义好的value，无法更改-->
        <span>性别:</span>
        <input type="radio" name="sex",value="man",id="boy">男
        <input type="radio" name="sex",value="woman",id="girl">女
</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
</script>
提交表单

MD5加密密码，表单优化，采用一个隐藏的input 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，用onsubmit接收
<form action="https://www.baidu.com/" method="post" onsubmit="return f()">
        <span>用户名：</span><input type="text" id="username" name="username">
        <!--此时采用name属性可以在抓包中被发现原始密码,-->
        <!--<span>密码：</span><input type="password" id="password" name="password">-->
        <span>密码：</span><input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <!--方式二：按钮绑定事件 onclick被点击-->
    <!--<button  type="submit" onclick="f()">提交</button>-->
    <button  type="submit" >提交</button>
</form>
<script>
    function f() {
      var uname=document.getElementById('username');
      var pwd=document.getElementById('input-password');
      var md5pwd=document.getElementById('md5-password');
      console.log(uname.value);
      console.log(pwd.value);
       //MD5算法
        md5pwd.value=md5(pwd.value);
        console.log(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
</script>
</body>
</html>

10、JQuery

JavaScript JQuery库，里面存在大量的JavaScript函数

获取jquery 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引入jquery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
</body>
</html>

或者导入下载好的js文件： 

<!--导入下载好的js文件-->
<script src="js/jquery-3.4.1.js"></script>

统一公式使用： 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引入jquery-->
   <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
    <!--导入下载好的js文件-->
    <script src="js/jquery-3.4.1.js"></script>
</head>
公式：$(selector).action()
<a href="#" id="test-jquery">点我</a>
<script>
    // document.getElementById('id');
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert("hello,jquery");
</script>
</body>
</html>
选择器： 
<script>
    //选择器，原生js，选择器少
    document.getElementsByTagName();
    document.getElementById();
    document.getElementsByClassName();
    //jQuery css中的选择器都能用
    $('p').click();//标签选择器
    $('#id').click();//id选择器
    $('.class').click();//class选择器   
</script>

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

事件

鼠标事件，键盘事件，其他事件 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
    </style>
</head>
<!--获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
    <script>
       //当网页元素加载完毕之后，响应事件
       // $(document).ready(function () {
       // })
    //可简化为$(function()){...}
    $(function () {
        $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
    </script>
</body>
</html>
操作DOM

1、结点文本操作 

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
<script>
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text('设置值');//设置值
 
推荐文章
率性的橙子  ·  如何用LaTeX将图片旋转90度，并保留图题？
1 年前
小眼睛的电梯  ·  第3期（3）：UE4全景图技巧（1） - 知乎
1 年前
憨厚的脸盆  ·  c++ - InternetCanonicalizeUrl fails to decode diacritic letters - Stack Overflow
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
link之家 - 链接快照平台
© 2024 ~ 沪ICP备11025650号