JavaScript

最新推荐文章于 2021-11-26 09:59:47 发布
最新推荐文章于 2021-11-26 09:59:47 发布
阅读量148 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45772158/article/details/107401049
版权

1.什么是JavaScript

1.1简介
JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。

2.快速入门

2.1引入JavaScript

1.内部标签

<script>
//....
</script>

2.外部引入
abc.js

//...

test.html

<script src="abc.js"></script>
2.2基本语法入门
1.<script>
    document.write("Hello World!!!");
</script>


2.<script language="JavaScript">
    document.write("Hello World!!!");
</script>


3.<script language="JavaScript" type="text/JavaScript">
    document.write("Hello World!!!");
</script>


4.<script language="JavaScript">
    document.write("Hello World!!!");
</script>


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

注意：document.write("Hello World!!!"); 必须保存为一个外部文件：hello.js 


6.<script language="JavaScript">
<!--
    document.write("Hello World!!!");
-->
</script>
3 数据类型

JS数据的表示：
整数：由正负号、数字构成，八进制、十进制、十六进制；
浮点数：由正负号、数字和小数点构成，常规记数法、科学记数法；
逻辑值：true、false
字符串值：单引号（‘ab’）、双引号(“ab”)
空值：null
未定义值：根本不存在的对象、已定义但没有赋值的量；
逻辑运算

&& 都为真则为真
|| 一个为真则为真
！ 真亦假，假既真

比较运算符

=
== 类型不一样，值一样
===类型一样，值一样

JavaScript常量：
布尔常量：true　　false
整数常量：3721　　0007　　0xaff（0Xaff）
浮点数常量：3.14　　.001　　3.721e+3　　-3.721E-3
字符串常量：“地址有误！”
含转义字符的字符串常量：

转义字符 意义
\b 退格（Backspace）
\f 换页（Form feed）
\n 换行（New line）
\r 返回（Carriage return）
\t 制表符（Tab）
’ 单引号（’）
" 双引号（"）
\ 反斜线（\）

数组常量：
Array可以包括任意的数据类型

var arr=[1,2,3,4,5,6,"1"],;

1.长度

arr.length

2.indexOf,通过元素获得下表索引

arr.indexOf(2)
1

字符串"1"和数字1不同
3.slice()截取Array 的一部分，返回一个新数组

arr.slice(3)
[4,5,6,"1"]
arr.slice(1,5)
[2,3,4,5]

4.push(),pop()

push:压入到尾部
arr.push("a")
[1,2,3,4,5,6,"1","a"]
pop:弹出尾部的一个元素
arr.pop("a")
[1,2,3,4,5,6,"1"]

5.unshift(),shift()头部

unshift():压入到头部
arr.unshift('a')
["a",1,2,3,4,5,6,"1"]
shift():弹出头部的一个元素
arr.shift()
[1,2,3,4,5,6,"1"]

6.排序sort()

["b","a","c"]
arr.sort()
["a","b","c"]

7.元素反转reverse()

["a","b","c"]
arr.reverse()
["c","b","a"]

8.concat()

["c","b","a"]
arr.concat([1,2,3])
["c","b","a",1,2,3]
concat()并没有修改数组，只会返回一个新数组

9.连接符join
打印拼接数据组，使用特定的字符串连接

["c","b","a"]
arr.join('-')
"c-b-a"

对象：
对象属性
（JavaScript 对象中的）名称:值对被称为属性。

var person = {Name:"xiaoguoplus",  age:62, sex:"男"，Color:blue};

对象方法
对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中

var person = {
Name:"xiaoguoplus",  
age:62, 
sex:"男"，
Color:blue}

1.对象赋值

person.name="xiaoguoplus"
"xiaoguoplus"
person.name
"xiaoguoplus"

2.使用一个不存在的对象属性，不会报错
javascript中的所有键都是字符串，只是任意对象
3，动态的删除

delete person.name
true
person

4,动态的添加

person.haha="haha"
"haha"
person

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

'age' in person
true 
'toString' in person
true

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

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

Map和set
map:

var map=new Map(['tom',100],['jack',90],['haha',80]);
var name =map.get('tom');//通过key获取value
map.set('admin',123456);
console.log(name);//100
map.delete(''tom");

Set:无序不重复集合

var set=new Set([3,1,1,1,1,]);
set.add(2);
set.delete(1);
console.log(set.has(3));//true

iterator
遍历数组

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[3,4,5];
for (let x of set){
console.log(x);
}
4.函数

4.1定义函数函数：
格式：
function 函数名([参数[,参数…]]){
<语句组>
[return <表达式>；]
}

约定：
1、函数名：易于识别；（同变量命名规则）
2、程序代码：模块化设计；
3、函数位置：按逻辑顺序，集中置顶。（…）

return语句：
格式：
return <表达式>；

功能：返回表达式的值。

函数的调用：
格式：
函数名([参数[,参数…]])

例1：

<Script>

function showName(name){
    document.write ( "我是" + name );
}

showName("小郭plus");

</Script>

例2：

<Script>

function showName(name){
    str="我是" + name;
    return str;
}

document.write(showName("小郭plus"));

</Script>

事件：
用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。

事件名称适用对象意义说明
Abortimage终止当图形尚未完全加载前
Blur失去焦点
Changet/pw/ta/select改变
DragDropwindow拖曳
Errorimg/win错误加载文件或图形时发生错误
Focus取得焦点
Movewindow移动
Resetform重置
Submitform

4.2变量的作用域
用作变量值的函数
若两个函数用相同的变量名，只要在函数内部，就不冲突

function xg(){
var x=1;
x=x+1;
}
function xg2(){
var x='a';
x=x+1;
}

提升变量的作用域

function xg(){
var x="x"+y;
console.log(x);
var y=y;
//结果:xundefined

}

所有的变量定义都放在函数的头部，不要乱放，便于维护

function xg2(){
var x=1;
y=x+1;
z,i,a;
//结果:xundefined

}

全局函数

x=1;
function f(){
console.log(x);
}
f();
console.log(x);

全局对象window

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

alert()这个函数本身也是一个window变量
方法
方法就是把函数放在对象的里面，对象只有两个东西，属性方法

var xiaoguoplus={
name:'xiaoguoplus',
birth:2000,
//方法
age:function(){
//今年-出生年
var now =new Date().getFullYear();
return now-this.birth;
}

}
//属性
xiaoguoplus.name
//方法
xiaoguoplus.age()

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

function getAge(){
//今年-出生年
var now =new Date().getFullYear();
return now-this.birth;
}
var xiaoguoplus={
name:'xiaoguoplus',
birth:2000,
//方法
age:getAge
}

//xiaoguoplus.age() ok

//getAge()

apply可以控制this指向

function getAge(){
//今年-出生年
var now =new Date().getFullYear();
return now-this.birth;
}
var xiaoguoplus={
name:'xiaoguoplus',
birth:2000,
//方法
age:getAge
}
var xiaoguo={
name:'xiaoguo',
birth:2000,
//方法
age:getAge
}

//xiaoguoplus.age() ok
getAge.apply(xiaoguoplus,[]);//this指向 xiaoguoplus参数为空
5内部对象

标准对象

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

Date

日期获取方法
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

json
JSON 是一种存储和交换数据的语法
为什么使用 JSON？
JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。

JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：
在 JSON 中，字符串值必须由双引号编写：

JSON
{ "name":"Bill Gates" }

在 JavaScript 中，您可以书写使用双引号或单引号的字符串值：

JavaScript
{ name:'Bill Gates' }

AJAX
什么是 AJAX？
AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）
Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

6，操作BOM对象

window代表浏览器窗口在这里插入图片描述
Navigator，封装浏览器信息
在这里插入图片描述

screen代表屏幕尺寸
在这里插入图片描述
location代表当前页面的url信息

document代表当前的页面，THML,DOM文档树
history 代表浏览器的历史记录

history.back()//后退
history。forward//前进
7.操作DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件
    获得dom节点
    在这里插入图片描述
<html>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。

getElementById 方法使用 id=“demo” 来查找元素。

innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。
更新节点

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

操作文本

  • id1.innerText=‘123’ 修改文本值
  • id1.innerHTML='123解析html文本文档
    操作css
id1.style.color='yellow';
id1.style.fontSize='20px';
id1.style.padding='2em';

删除节点
获取父节点，通过父节点删除自己

在这里插入图片描述
删除多个节点时，children是时刻变化的
插入节点
如果获得某个dom节点，假设为空，可以通过innerHTML就可以增加，若dom节点已存在元素了，需要追加
在这里插入图片描述

8，JQuery

下载压缩包https：//jquery.com/download/
在这里插入图片描述导包

<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"><./script>-->
<script src="lib/jquery-3.4.1.js"></script>
</head>
<a href ="" id="test-jquery'>点我</a>
<script>
$('#test-jquery').click(function{
alert('hello');
})
</script>

选择器 http://jquery.cuishifeng.cn/
在这里插入图片描述

小郭plus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析
weixin_34005394的博客
06-28 1388
1.背景在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式：//HTML部分//TS部分contents = '商品信息栏位商品信息介绍';但是上面的样式并不起作用，在Chorme中查看源码，发现style标签的样式在Angular编译的时候被屏蔽掉。这是为什么呢？客观别急，请往下看。2.解决方案先说解决方案，最后再分析出现这种问题的原因。修改上面的TS：// ...
使用innerHTML插入js脚本不生效问题解决
Rex__404的博客
09-01 4910
1.起因： 在使用innerHTML向某个网页插入一个按钮button，和对应的js，发现js不生效 原始代码 var mylogin = document.createElement("button"); var myjs = document.createElement("script"); mylogin.innerHTML = '<button type="button" οnclick="tologin()">提交</button>' myjs.innerHTML
html方法标签不起作用,使用div的innerHTML创建的脚本标签不起作用
weixin_32484447的博客
06-17 820
小编典典这是微不足道的。如规范中所述8.4解析HTML片段和8.2.3.5其他解析状态标志，)引用：使用innerHTML浏览器时_创建一个新的Document节点，并将其标记为HTML文档。2.如果存在一个context元素，并且context元素的Document处于quirks模式，则让Document处于quirks模式。否则，如果存在一个context元素，并且context元素的Doc...
innerhtml bokeh 不起作用 script src
唐心的博客
04-09 334
innerhtml 不起作用。 div 和iframe 的innerhtml和write 都 没有用 write 没有用 iframe write 和innerhtml没有用 用iframe 的srcdoc 可以。src 可以是可以。需求不行。 什么文献都是英文的。。。。 Note: script elements inserted using innerHTML do not execute when they are inserted. html5中在innerHTML中不会执行插入的脚本 crea.
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript JavaScript JavaScript
最新发布
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
Angular中innerHTML标签的样式不起作用的原因解析
10-16
主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
10-25
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。
JavaScript基础
10-22
JavaScript基础
JavaScript.docx
10-27
"JavaScript 基础知识" JavaScript 是一门广泛应用于 Web 开发的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。它非常容易学，本教程将教会您从初级到高级的 JavaScript 知识。 JavaScript 简介 ...
JavaScript学习
08-10
JavaScript学习
form表单中innerHTML不起作用
qq_20065991的博客
10-01 2399
今天写了一个ajax 发现在myeclipse里innerHTML怎么也调不出来 然后把span标签放到form表单外面就行了 后来把span标签转移到了form外面，发现可以正常使用了，原因可能是form表单里的数据因为安全问题不能被更改吧。...
JS中innerText和innerHTML的区别
陈广晗
03-09 9573
innerText主要是设置文本的，甚至标签内容，是没有标签的效果的。 innerHTML主要的作用是在标签中设置新的heml标签内容，是有标签效果的 先来看看innerText的效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt..
jQuery中innerText、innerHTML不能使用
qq_45863496的博客
11-26 1197
今天遇到一个问题，给button按钮动态显示内容的时候，用innerText和innerHtml都没有显示成功： <button id="signUp" class="sign-up-box" onclick="applySalon()"></button> if (now < endTime) { $("#signUp").innerText("报名结束"); } else { $("#signUp").in
JavaScript 正则
04-21
JavaScript 正则
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值