JavaScript基础笔记集合_html/css_WEB-ITnose
如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力,谢谢
js简介
js是脚本语言。浏览器是逐行的读取代码，而传统编程会在执行前进行编译
js存放的位置
- html脚本必须放在<script>、</script>之内。
- <script>可放置在<head>、<body>里</script>
- 和css一样，JS可以存放在外面，通过
- 现代浏览器不需要声明type="text/javascript"
- 通常的做法是把函数放入或页面的底部，这样就可以把他们放到同一位置，并且不会干扰页面内容
消息对话框
直接弹出消息对话框alert
alert("text");
w3c： alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
确认消息对话框(confirm)
var message=confirm("str");---------------str为消息对话框显示的内容confirm返回值boolean
获得内容对话框
var message=prompt("str");-------------str消息对话框显示的内容你输入的内容会被prompt返回
demo
<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(带标签)，用于跳出代码块格式：语句只会执行1，2；3,4不会执行
label:{statement1;statement2;break:label;statement3;statement4;}登录后复制
验证
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】
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
