JS(JavaScript)

最新推荐文章于 2023-06-02 18:40:18 发布
最新推荐文章于 2023-06-02 18:40:18 发布
阅读量402 收藏
点赞数
分类专栏： java 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51564881/article/details/124445513
版权

1、JS快速入门

1.1、引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script 标签内，写JavaScript 代码-->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->
<!--    外部引入-->
<!--    注意： script标签必须成对出现-->
    <script src="js/qj.js"></script>
<!--不用显示定义type,也默认就是javascript-->
    <script type="text/javascript">
    </script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>

1.2、基本语法入门

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

<!--  JavaScript严格区分大小写！-->
    <script>
        // 1. 定义变量   变量类型   变量名  =  变量值；
        var score = 71;
        // alert(num);
        // 2.条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if (score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }

        //console.log(score) 在浏览器的控制台打印变量！  System.out.println();
        /*
        * asdfsa*/
    </script>
</head>
<body>
</body>
</html>

1.3、数据类型

number

js不区分小数和整数，Number

NaN  // not a number
Infinity  // 表示无限大

let a = `nmber s, asdiajlsdfj, asdflaj` //``多行字符串

比较运算符

=
== 等于（类型不一样，值一样，也会判断为true）
===  绝对等于（类型一样，值一样，结果为 true）

须知：

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

数组

java 的数值必须是相同类型的对象，JS中不需要这样！

<script>
    //保证代码的可读性，尽量使用 []
    var arr = [1,2,3,4,5,'hello',null,true];
    
    new Array(1,12,1,2,3,4,'hello');
  </script>

map 和 Set

 <script>
        'use strict';
        // let i = 1;
        // ES6  let
        var map = new Map([['tom',100],['jack',90],['haha',80]]);
        var name = map.get('tom')
        map.set('admin',123455);
        console.log(name);
		
		set.add(2); //添加
		set.delete(1); 
		console.log(set.has(3)); // 是否包含某个元素
    </script>

对象

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

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

<script>
        //Person person = new Person(1,2,3,4,5);
        var person = {
            name: "blm",
            age: 3,
            tags: ['js','java','web','...']
        }
    </script>

1.4、严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
       前提： IDEA 需要设置支持 ES6 语法
       ‘use strict' ; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
       必须写在JavaScript的第一行！
       let  局部变量
       var  全局变量
-->
    <script>
        'use strict';
        let i = 1;

    </script>
</head>
<body>
</body>
</html>

1.5、iterator

ES6

遍历数组

// 通过 for of /  for  in 下标
var arr = [3,4,5]
for (var x of arr){
  console.log(x)
}

遍历map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
  console.log(x)
}

遍历set

var set = new Set([5,6,7]);
for (let x of set){
  console.log(x)
}

2、函数及面向对象

apply

在JS中可以控制 this 指向！

<script>
        function getAge() {
            var now = new Date().getFullYear();
            return now-this.birth;
        }

        var kuangshen = {
            name: 'qinjiang',
            birth: 2000,
            age: getAge()
        };

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

标准对象

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

2.1、Data

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

</head>
<body>

<script>
    var now = new Date();   //Thu Apr 14 2022 22:34:25 GMT+0800 (中国标准时间)
    now.getFullYear();   // 年
    now.getMonth();      // 月   0~11 代表月
    now.getDate();       // 日
    now.getDay();        //  星期几
    now.getHours();      // 时
    now.getMinutes();     // 分
    now.getSeconds();     // 秒

    now.getTime();       //时间戳  全世界统一  1970 1.1 0:00:00  毫秒数

    console.log(new Date(1649947358321))  // 时间戳转为时间
</script>

</body>
</html>

2.2、JSON

在JavaScript 一切皆为对象、任何JS支持的类型都可以用JSON来表示；number,string…

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用 key:value

JSON 字符串和 JS 对象的转化

var user = {
        name: "qinjiang",
        age: 3,
        sex: '男'
    }

    //对象转化为JSON字符串 {"name":"qinjiang","age":3,"sex":"男"}
    var jsonUser = JSON.stringify(user);

    //JSON 字符串转化为对象 参数为 JSON 字符串
    var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

3、面向对象编程

原型

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

    var xiaoming = {
        name: "xiaoming"
    };
    xiaoming.__proto__ = Student;

    var Bird = {
        fly: function () {
            console.log(this.name + "fly....");
        }
    };
    // 小明的原型 是 Student
    xiaoming.__proto__ = Bird;

3.1、操作BOM对象（重点）

浏览器介绍

BOM： 浏览器对象模型

window

window 代表 浏览器窗口

window.alert(1)
undefined
window.innerHeight
524
window.innerWidth
136
window.outerHeight
664
window.outerWidth
1060

Navigator

Navigator,封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'

screen

代表屏幕尺寸

screen.width
1920
screen.height
1080

location (重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_pg"
protocol: "https:"
reload: ƒ reload()  // 刷新网页
// 设置新的地址
location.assign('https://www.kuangstudy.com/')

document

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

document.title
'百度一下，你就知道'
document.title='BLM'
'BLM'

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

获取 cookie

document.cookie
'BIDUPSID=C3517486F9D5C386C2E3B70370DB74F8; PSTM=1632839215; BAIDUID=C3517486F9D5C386351802540B493283:FG=1; COOKIE_SESSION=11614_1_2_3_13_9_1_0_1_2_0_0_697_0_0_5_1646536251_1646547866_1646547861%7C9%2310018595_3_1646547861%7C2; BD_UPN=12314753; BAIDUID_BFESS=736E3B357BD74734DEEE99D84930FF89:FG=1; BDRCVFR[OEHfjv-pq1f]=K7PavkeTFPTUAN8ULuEQhPEUi4WU6; BD_HOME=1; H_PS_PSSID=; BA_HECTOR=8024a12g050k2l80vb1h5kts20r'

history

history 代表浏览器的历史记录

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

3.2、操作DOM对象（重点）

DOM ： 文档对象模型

核心

浏览器网页就是一个DOM树形结构!

  • 更新: 更新DOM节点
  • 遍历DOM节点: 得到DOM节点
  • 删除: 删除一个DOmain节点
  • 添加: 添加一个新的节点

要操作一个DOM节点,就必须要先获得这个DOM节点

获得DOM节点

<script>
    // 对应 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; // 获取父节点的所有子节点
    // father.firstChild
    // father.lastChild
</script>

更新节点

<div id="id1">


</div>

<script>
    var id1 = document.getElementById('id1')
</script>
  • id1.innerText=‘123’ 修改文本的值
  • id1.innerHTML=‘123’ 可以解析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.getElementsByTagName('p1');
   var father = p1.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); //追加
</script>

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


<script>
    var js = document.getElementById('js');      //已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p'); // 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hellow,kuangshen';
    // 创建一个标签节点（通过就这个属性，可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','Text/javascipt')
    list.appendChild(js); //追加
</script>

3.3、 操作表单（验证）

表单是什么 form DOM 树

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <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="woman" id="girl"> 女
    </p>

</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var giral_radio = document.getElementById('girl');

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'

    // 对于单选框，多选框等等固定的值， boy_radio.value 只能取到当前的值
    boy_radio.checked; // 查看返回的结果，是否为true ， 如果为true, 则被选中
    boy_radio.checked=true; // 赋值
</script>

提交表单

<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">

    <p>
        <span>用户名： </span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码： </span> <input type="password" id="password" name="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

<!--    绑定事件 onclick 被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa(){
        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 算法
        // pwd.value = md5(pwd.value);
        // console.log(pwd.value);
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true 就是通过提交，false, 阻止提交
        return true;
    }

</script>

##4、 JQuery

JavaScript

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

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jQuery.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>

    //选择器就是CSS的选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
    // 公式： $(selector).action()
</script>

</body>
</html>

选择器

<script>
    //原生JS ， 选择器少，麻烦不好记
    // 标签
    document.getElementsByTagName();
    // id
    document.getElementById();
    // class
    document.getElementsByClassName();
    
    // jQuery CSS 中的选择器它全部都能用！
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class').click();//class选择器
    
</script>

事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="lib/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>

小技巧

1.如果巩固JS （看jQuery源码，看游戏源码）

2.巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果）

博林慕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript.js
12-21
这个网页是采用angular.js的技术实现的，可以兼容html,css,js,jq的所有标签
jQuery的三种$()
chenzhijian92的博客
04-02 3321
$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数（个人观点，呵呵！）。     1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。 比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的&lt;a/&gt;这个标签...
JavaScript(js)
marjianjiandandan的博客
07-27 228
前面已经简单复习了SSM框架，现在来复习js的东西。 js是一门由浏览器执行直接嵌入到html的解释性弱类型的脚本语言。 它的作用是操作html，使前端用户和后台进行交互 由三部分组成： 语法:变量声明,数据类型,运算符,语句,函数,事件,绑定事件 BOM(浏览器对象模型)，可以通过它操作浏览器 DOM(文档对象模型)，通过它可以操作整个html页面 js和html的整合： 方式一...
JavaScript（JS）
菜鸟鸟的博客
03-16 432
一  JS的简介             JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。             特点：交互性（信息的动态交互）                        安全性（不可以直接访问本地磁盘）                        跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关） 二  JS和HTML的结合方式
关于JavaScript(JS)
撒哈拉奔跑的蜗牛~的博客
03-08 143
1.什么是JavaScript(JS)? 脚本语言(不需要编译直接被浏览器解析),客户端脚本,运行在浏览器中, 由三个部分组成 ECMAScript+DOM+BOM 2.DOM? DOM就是文档对象模型,就是将HTML文档各个部分,封装成对象,借助对象对HTML文档进行增删改查 要想使用必须先要引入js文件 <script src="js/jquery-3.3.1.min.js"></script> 3.变量和常量 javaScript属于弱类型语言,不区分数据类型 定义局
three.js javascript 002
12-01
three.js javascript 002
three.js javascript 001
12-01
three.js javascript 001
js javaScript 验证校验小工具包
02-25
js javaScript 验证校验小工具包
rocketbooster:Phase.js javascript 游戏
06-05
火箭助推器Phase.js javascript 游戏
js:javascript
04-17
js javascript由GKCube
JavaScript-JS基础
m0_48081612的博客
05-19 143
JavaScript是一种由网景公司于1995年推出的脚本语言，它可以在浏览器中运行，为网页添加交互功能，如动画、表单验证、游戏等。JavaScript是一种多范式的动态语言，它支持对象、函数、事件和原型等概念，具有灵活和强大的表达能力。JavaScript还可以与HTML和CSS等网页技术结合，实现网页的动态更新和样式变化。在本文中，我们将介绍JavaScript的基本语法，如何编写和运行JavaScript代码，如何使用变量、数据类型、运算符、控制流程和数组等。
JavaScript（JS）的简单了解
m0_68989458的博客
08-09 2124
JavaScript（JS）的简单了解
JavaScript 介绍
qq_51787166的博客
05-16 641
简介 JS诞生于1995年,开发者希望它看起来像Java，因此取名为Javascript。两者的关系仅仅是名字相近，语法风格实际上与Self及Scheme较为接近。 JS是一种解释型语言，它不需要编译。以交互式和动态的方式呈现网页，允许页面对事件做出反应，展示特殊效果。 JS的出现主要是用于处理网页中的前端验证，所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如: 用户名的长度、密码的长度 、邮箱的格式等。 组成 完整的JavaScript实现包含以下3个部分.
JS（JavaScript）详解
weixin_53455615的博客
09-19 7181
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript组成ECMAScript：JavaScript的核心，语法格式，使用方法文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
js---javaScript基础知识
A123ppleQueen的博客
07-22 1676
javascript是脚本语言，这门语言可用于html和web。 javascript是一种轻量级的编程语言。 是可以插入html页面的编程代码，插入后，通过浏览器执行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> doc.
javascript(js)基础学习
daoer_sofu的专栏
01-27 257
类型 Undefined、Null、Boolean、Number和String，Object function构造函数创建Object 类型判断 js判断对象、函数、和全局变量 commonjs typeof module === “object” && module && typeof module.exports === “object” amd .........
JavaScript简介
ernester的博客
10-18 2011
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同编译器是在代码执行之前进行编译，生成中间代码文件解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
JavaScript教程通俗易懂
只想AC的博客
06-02 264
什么是JavaScript？基本语法是什么样？如何理解面向对象？ 操作BOM，操作DOM，jQuery怎么快速上手？ 趣味加实战，新特性补充讲解，都在这里啦
jQuery的三种“$()”
fenghao289的专栏
12-29 1313
$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数（个人观点，呵呵！）。 1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。    比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的这个标签。如：
node.js javascript runtime
最新发布
08-18
Node.js 是一个 JavaScript 运行时(Runtime)，用于在浏览器之外的平台上执行 JavaScript 代码。与浏览器中的 JavaScript 不同，Node.js 不具备内置的 DOM 或浏览器功能。它采用事件驱动、异步编程的方式，并提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值