JavaScript

最新推荐文章于 2024-05-18 21:57:13 发布
最新推荐文章于 2024-05-18 21:57:13 发布
阅读量838 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cling_y/article/details/121192577
版权

1、引入JavaScript

a、内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("test");
    </script>
</head>
<body>

</body>
</html>

b、外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js1.js"></script>
</head>
<body>

</body>
</html>

2、基本语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //所有得变量都是使用var来定义
       var num = 123;
       var name = "cling"
        alert(num+name)
        //console.log（变量）：用来在网页中得控制台来打印变量
    </script>
</head>
<body>

</body>
</html>

2.1 严格检查模式

在script标签得第一行中添加  'use strict'。

2.2多行字符串编写：

括在table键上面哪个键的里面

2.3 数组

a.slice（）截取array中的一部分，规则也是左边闭区间右边开区间。
b.push():压入到尾部。pop:尾部弹出
unshift:压入到头部。shift:从头部弹出
c.sort()排序。reverce()倒序
d.concat():修改数组，返回一个新的数组。但是原来的数组没有被破坏
在这里插入图片描述

e.join():拼接数组
在这里插入图片描述

2.4对象

a.定义

var person = {
	属性 ：属性值 ，
	属性 ：属性值，
	属性 ：属性值
}

b.动态添加、删除属性

		delete person name		//删除name属性
		person.haha = "hahah"		//添加haha属性

c.判断属性是否在对象中，其父类的属性也算
	属性 in 对象
d.判断对象自己本身的属性：

在这里插入图片描述

2.5 Map和Set

Map:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        var map = new Map([['tom',100],['jack',90]]);       //Map的定义
        var name= map.get("tpm")                            //通过key获取value
        map.set("cling",60)                                 //新增或则修改
        map.delete("cling")                                 //删除
    </script>
</head>
<body>
</body>
</html>

Set:无序不重复的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        var set = new Set([1,2,3]);         //创建set
        set.add(5);                         //添加
        set.delete(4)                       //删除
    </script>
</head>
<body>
</body>
</html>

iterator ：遍历Map和Set

for(let x of arr){
console.log(x)
}
for(let x of map){
console.log(x)
}
for(let x of set){
console.log(x)
}

3.1函数

//第一种方式：
    function abs(x) {
        ...
    }
    //第二种方式
    var  abs = function (x) {
        ...
    }

3.1.1全局变量的规范：

因为定义的全局变量都会绑定到Windows上。所以在使用了不同的js文件，就会使相同的全局便量发生冲突。为了避免这种冲突就需要使用自己定义的唯一空间名字中，来降低全局命名的冲突问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    var cling = {};			//定义自己的唯一空间
    cling.name = "cling";
    cling.age = 3
    </script>
</head>
<body>
</body>
</html>

3.1.2 局部的变量建议使用let定义

a.由于使用的var定义，所以在作用域之外后i还是可以使用。

在这里插入图片描述
在这里插入图片描述
b.使用let来定义后就使真的局部变量了
在这里插入图片描述

在这里插入图片描述

3.1.3 ES6中使用const定义的常量（全大写）不能更改

3.1.4 JSON和JS对象对比

        var user = {
            name:"cling",
            age:3,
            sex:'mail'
        }
        var jsonUser = JSON.stringify(user);    //对象转换为json字符串
        var obj = JSON.parse(jsonUser);         //json字符串转化为对象

3.1.5 操作BOM对象

a.window(浏览器窗口)

window.innerHeight
763
window.outerHeight
834
window.innerWidth
522
window.outerWidth
1536
window.alert("asdf")

b.location（当前的页面URL的信息）

location
Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms"
origin: "http://localhost:63342"
pathname: "/JavaScript/lesson1/js1.html"
port: "63342"
protocol: "http:"
reload: ƒ reload()
replace: ƒ replace()
search: "?_ijt=uj8je791vjtt6l1tg6jks02tms"
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location

c.document(文本内容)

document.title="cling"
'cling'

d.history

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

3.1.6操作DOM对象

获取节点
var h1 = document. getElementsBytagName(hl),
var p1= document. getElementById(p1);
var p2 = document. getElementsByctassName(p2);
更新节点
s.style.color='yellow';		 //s使已经获取的一个节点
'yellow'
s.style.fontSize='500px';
'500px'
删除节点
方法一
<body>
<div id="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    <ul id="ul">
        <li>li1</li>
        <li>li2</li>
    </ul>

    <script>
    </script>
</div>
</body>

在这里插入图片描述

方法二

注意：同时删除多个节点的时候，children的下表是时刻都在变化的。
在这里插入图片描述

插入节点

创建一个新的标签:

var newp = document.createElement('p'); //创建一个p标签
ul.append(newp);		//插入到ul中去
newp.id='newp'		//设置id
newp.innerText='cling'		//设置名字

4、表单操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <p>
        <span>username:</span> <input type="text" id="username">
    </p>
    <p>
        <span>password:</span> <input type="password" id="pwd">
    </p>
    <button type="button" onclick="click()">提交</button>
</form>
<script>
    function click() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        var pwd_md5 = md5(pwd);         //使用md5进行加密
        console.log(uname.value);           //这里的value有点问题
        console.log(pwd.value);
    }
</script>
</body>
</html>

jQuery

jQuery包含大量的JavaScript函数

1、

可以引入下载的包也可以引用在线的CDN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>        //在线cdn
</head>
<body>
<a href="" id="test-jquery">点击</a>
<script>
    $("#test-jquery").click(function () {
            alert("a")
    })
</script>
</body>
</html>

2、鼠标位置追踪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
    #divMouse{
        height: 500px;
        width: 500px;
        border:1px solid red;
    }
</style>
<body>
    mouse:<span id="mouseMove">展示</span>
    <div id="divMouse">moveMouse</div>
<script>
    $(function () {
        $("#divMouse").mousemove(function (e) {
            $("#mouseMove").text('X:'+e.pageX+',Y:'+e.pageY);
        })
    })
</script>
</body>
</html>

3、juqery相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="ul">
    <li name="li1">one</li>
    <li class="class1">two</li>
    <li id="li3">three</li>
    <li id="li4">four</li>
</ul>

<script>
    $('#ul li[class=class1]').text();               //读取内容
    $('#ul li[class=class1]').text("修改的内容");       //修改内容提供
    $('#ul li[id=li3]').html("<strong>newStrong</strong>");     //修改HTML格式
    $('#ul li[class=class1]').css({ "color": "#ff0011", "background": "blue" });
    $('#ul li[class=class1]').hide();           //隐藏标签
    $('#ul li[class=class1]').show();           //显示标签
</script>
</body>
</html>
Cling007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript
03-09
Java脚本
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 16万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 74万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4397
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 179
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值