JavaScript基础笔记集合_html/css_WEB-ITnose-html教學-PHP中文網

<scrpit>function xx(){var message=confirm("str");if (confirm==true){document.write("str");}</script><body><input type="button" onclick="xx()" value="xxx" /></body>

登入後複製

数据类型

动态类型

js拥有动态类型，意味着相同的变量，可以用作不同类型。

var x=2;var x ="a";

登入後複製

数字类型

js只有一种数字类型，可以加小数点，或者不加，太大或太小的数字可以用科学计数法
整数最大15位，小数最大17位。3.八进制以【0】开头，十六进制以【0x】开头。科学计数法：
```
var a=123e5---12300000; var b=123e-5------0.00123
```
登入後複製

数组

创建数组

var a = new Array() ;a=["a","b"];var a =new Array("a","b");var a =["a","b"];

登入後複製

数组相加

a.concat();

用数组中的元素组成字符串

a.join(".")-----默认两元素之间逗号隔开，这里设置用[.]隔开。

排序

a.sort();

布尔

var a =new Boolean(0); 当值为空或者为：0、-0、null、""、false、undefined或者NaN时，返回false。

对象

对象简述

对象由{}分隔，在{}内，对象的属性以(name:value)来定义。属性用逗号分隔var person{firstname="a",lastname="b"}寻址方式： person.firstname;person["firstname"]

创建对象的方法

1.定义并创建对象实例。

dog=new Object();-----创建dog对象dog.name="diudiu";-----dog对象属性|| dog={name:"diudiu",};

登入後複製

2.使用函数定义对象，然后创建对象实例

function(name,habit){    this.name=name;    this.habit=habit;}var a=new dog("diudiu",bite);

登入後複製

为已有对象添加属性

假设dog对象已经存在，但是没有gf属性`dog.gf="joyce";

变量

当向变量赋值文本时，加引号
赋值数字时，不要加引号，否则会当文本处理
重新申明变量，变量的值不会丢失。

常用变量类型

var a =new Number/Array/String/Boolean/Object;

字符串

var txt="abc";常用方法：

txt.lenght()------获取长度txt.fontsize(12px)-----文字大小txt.link("http://")----为字符串加链接txt.strike()-------删除线txt.toLowerCase/UpperCase----大小写转换txt.indexOf("a")-----定位字母a出现位置txt.match("a")-------查找字符，找到返回该字符，否则nulltxt.replace(/b/,"xxx")-------把字符b替换成xxx

登入後複製

打开/关闭窗口

打开窗口

window.open("url","name","features","replace")

window.open("http://www.baidu.com","_blank","width=200,height=200,status=no")

wondow_open

features

关闭窗口

window.close();--------------关闭本窗口<窗口对象>.close();----------关闭指定窗口

函数

函数格式function name(){}
函数对大小写敏感
函数可以返回值，通过return语句，并且return是一条函数结束语句。
函数可以传参数，形参与实参一一对应。
局部变量随函数而消亡。
在函数内为全局变量赋值，该变量依旧是全局变量。

循环

for/in循环

<script>     var txt;     var person={name:"bill",age=20}     for(var x in person){          txt+=person[x];}</script>

登入後複製

x遍历person对象每一个属性

continue&break

continue只能用在循环中
break(不带标签)只能用在循环或switch中
break(带标签)，用于跳出代码块格式：
```
label:{statement1;statement2;break:label;statement3;statement4;}
```
登入後複製
语句只会执行1，2；3,4不会执行

验证

JavaScript可用来在数据被送往服务器前对表单输入的数据进行验证

demo

如果field值为空，返回false，否则true

function validate(field,alerttxt){    with(field){    if(value==null||value=="")        {alert(alerttxt);return false}    else return true;    }

登入後複製

DOM简介

DOM-document object model定义：当网页被加载时，浏览器会创建页面的DOM。它是用以访问html元素的正式w3c标准。

html dom 树

通过可编程的对象模型，js获得了足够的能力来改变html它可以改变元素，属性，样式，以及对事件做出反应。

通过js改变html/css

获取并改变html元素内容

var mychar=document.getElementById("idName");mychar.InnerHTML="xxx";----------将id为idName的内容改为xxx

登入後複製

改变元素属性

document.getElementById("imageName").src="";------改变图片链接

改变元素样式

格式：Object.style.property=new style;

var mychar=document.getElementById("idName");mychar.style.color="red";

登入後複製

改变输出流

document.write("sunOpar");--------这个方法将覆盖原来的html页面

增删元素

增加

在id为box的div元素中增加p标签

html：

js:

var fir=document.creatElement("p");---创建p标签var lat=document.creatTextNode("新文本");fir.appendChild(lst);var element=document.getElementById("box");element.appendChild(fir);

登入後複製

删除

要删除元素，需要得到该元素的父元素

var child=document.getElementById("id1");child.parentNode.remove(child);

登入後複製

正则表达式

正则表达式简述

当你要检索某个文本时，可以使用一种模式来检索文本，RegExp就是这种模式。

定义

var part=new RegExp("after");---定义part的RegExp为【after】

检索(boolean)

part.test("aftervax")-----由于这个字符串包含【after】，返回true

检索(指定值)

part.exec("aafterrr")-------由于也包含，返回该值【after】

第二个参数

part=new RegExp("a","g")-----【g】意思是【global】，搜索所有的【a】part.exec("acdadcda")------此时会返回所有【a】，输出是:【aaanull】

登入後複製

改变RegExp

part.compile("before")----把【after】改成【before】

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1276

C# 教程

1256

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

＆lt; strong＆gt;，lt; b＆gt;有什麼區別標籤和lt; em＆gt;，＆lt; i＆gt;標籤？ Apr 28, 2025 pm 05:42 PM

本文討論了HTML標籤，和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。

超越HTML：網絡開發的基本技術 Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

See all articles

JavaScript基础笔记集合_html/css_WEB-ITnose

js简介

js存放的位置

消息对话框

直接弹出消息对话框alert

确认消息对话框(confirm)

获得内容对话框

demo

数据类型

动态类型

数字类型

数组

创建数组

数组相加

用数组中的元素组成字符串

布尔

对象

对象简述

创建对象的方法

为已有对象添加属性

变量

常用变量类型

字符串

打开/关闭窗口

打开窗口

关闭窗口

函数

循环

for/in循环

continue&break

验证

demo

DOM简介

通过js改变html/css

获取并改变html元素内容

改变元素属性

改变元素样式

改变输出流

增删元素

正则表达式

正则表达式简述

定义

检索(boolean)

检索(指定值)

第二个参数

改变RegExp

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題