深圳建企业网站公司,保定酒店网站制作,多个网站备案,自己做的网站微信pc端显示乱码文章目录 JavaScript语言JavaScript介绍JavaScript引入数据类型节点document方法Element属性事件 JavaScript语言
JavaScript介绍
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”#xff0c;指的是它不具备开发操作系统的能力#xff0c;而是只用来编写控制其他大型… 文章目录 JavaScript语言JavaScript介绍JavaScript引入数据类型节点document方法Element属性事件 JavaScript语言
JavaScript介绍
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”指的是它不具备开发操作系统的能力而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式embedded语言。它本身提供的核心语法不算很多
为什么学习 JavaScript
操控浏览器的能力广泛的使用领域易学性
JavaScript与ECMAScript的关系
ECMAScript和JavaScript的关系是前者是后者的规格后者是前者的一种实现。在日常场合这两个词是可以互换的。
变量提升
JavaScript 引擎的工作方式是先解析代码获取所有被声明的变量然后再一行一行地运行。这造成的结果就是所有的变量的声明语句都会被提升到代码的头部这就叫做变量提升hoisting。
JavaScript引入
嵌入到HTML文件中
bodyscriptvar age 20/script
/body引入本地独立JS文件
bodyscript typetext/javascript src./it.js /script
/body引入网络来源文件
bodyscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js /script
/body数据类型
JavaScript 语言的每一个值都属于某一种数据类型。JavaScript 的数据类型共有六种。ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型
原始类型
var age 20;
var name it;
var learn true;合成类型
对象因为一个对象往往是多个原始类型的值的合成可以看作是一个存放各种值的容器
var user {name:it,age:20,learn:true
}undefined和null一般将它们看成两个特殊值。
节点
DOM 的最小组成单位叫做节点node。
文档的树形结构DOM 树就是由各种不同类型的节点组成。
每个节点可以看作是文档树的一片叶子。
节点的类型有七种
Document整个文档树的顶层节点DocumentTypedoctype标签Element网页的各种HTML标签Attribute网页元素的属性比如class“right”Text标签之间或标签包含的文本Comment注释DocumentFragment文档的片段
浏览器原生提供document节点代表整个文档
document方法
document.getElementsByTagName方法搜索 HTML 标签名返回符合条件的元素。
它的返回值是一个类似数组对象HTMLCollection实例可以实时反映 HTML 文档的变化。
如果没有任何匹配的元素就返回一个空集。
var paras document.getElementsByTagName(p);如果传入*就可以返回文档中所有 HTML 元素
var allElements document.getElementsByTagName(*);document.getElementsByClassName方法返回一个类似数组的对象HTMLCollection实例包括了所有class名字符合指定条件的元素元素的变化实时反映在返回结果中
document.getElementsByName方法用于选择拥有name属性的 HTML 元素比如form、radio、img等返回一个类似数组的的对象NodeList实例因为name属性相同的元素可能不止一个
document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点则返回null
document.createElement方法用来生成元素节点并返回该节点
document.createTextNode方法用来生成文本节点Text实例并返回该节点。它的参数是文本节点的内容
Element属性
Element对象对应网页的 HTML 元素。
每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象以下简称元素节点
Element.id属性返回指定元素的id属性该属性可读写
// HTML 代码为 p idfoo
var p document.querySelector(p);
p.id // fooclassName属性用来读写当前元素节点的class属性。它的值是一个字符串每个class之间用空格分割
// HTML 代码 div classone two three idmyDiv/div
var div document.getElementById(myDiv);
div.classNameclassList对象有下列方法 add()增加一个 class。remove()移除一个 class。contains()检查当前元素是否包含某个 class。toggle()将某个 class 移入或移出当前元素。 var div document.getElementById(myDiv);div.classList.add(myCssClass);
div.classList.add(foo, bar);
div.classList.remove(myCssClass);
div.classList.toggle(myCssClass); // 如果 myCssClass 不存在就加入否则移除
div.classList.contains(myCssClass); // 返回 true 或者 falseElement.innerHTML属性返回一个字符串等同于该元素包含的所有 HTML 代码。该属性可读写常用来设置某个节点的内容。它能改写所有元素节点的内容包括HTML和body元素
el.innerHTML ;Element.innerText
innerText和innerHTML类似不同的是innerText无法识别元素会直接渲染成字符串
事件
鼠标事件指与鼠标相关的事件具体的事件主要有以下一些
click按下鼠标时触发dblclick在同一个元素上双击鼠标时触发mousedown按下鼠标键时触发mouseup释放按下的鼠标键时触发mousemove当鼠标在节点内部移动时触发。当鼠标持续移动时该事件会连触发。mouseenter鼠标进入一个节点时触发进入子节点不会触发这个事件mouseleave鼠标离开一个节点时触发离开父节点不会触发这个事件mouseover鼠标进入一个节点时触发进入子节点会再一次触发这个事件mouseout鼠标离开一个节点时触发离开父节点也会触发这个事件wheel滚动鼠标的滚轮时触发
键盘事件由用户击打键盘触发主要有keydown、keypress、keyup三个事件
keydown按下键盘时触发。keypress按下有值的键时触发即按下 Ctrl、Alt、Shift、Meta 这样无值的键这个事件不会触发。对于有值的键按下时先触发keydown事件再触发这个事件。keyup松开键盘时触发该事件
username.onkeypress function(e){console.log(keypress事件);
}表单事件是在使用表单元素及输入框元素可以监听的一系列事件
input事件select事件Change事件reset事件submit事件
input事件:
input事件当input、select、textarea的值发生变化时触发。对于复选框input typecheckbox或单选框input typeradio用户改变选项时也会触发这个事件
input事件的一个特点就是会连续触发比如用户每按下一次按键就会触发一次input事件。
var username document.getElementById(username);
username.oninput function(e){console.log(e.target.value);
}select事件:
select事件当在input、textarea里面选中文本时触发
// HTML 代码如下
// input idtest typetext valueSelect me! /var elem document.getElementById(test);
elem.addEventListener(select, function (e) {console.log(e.type); // select
}, false);Change事件:
Change事件当input、select、textarea的值发生变化时触发。它与input事件的最大不同就是不会连续触发只有当全部修改完成时才会触发
var email document.getElementById(email);
email.onchange function(e){console.log(e.target.value);
}reset 事件/submit 事件:
这两个事件发生在表单对象form上而不是发生在表单的成员上。
reset事件当表单重置所有表单成员变回默认值时触发。
submit事件当表单数据向服务器提交时触发。注意submit事件的发生对象是form元素而不是button元素因为提交的是表单而不是按钮
form idmyForm onsubmitsubmitHandlebutton onclickresetHandle重置数据/buttonbutton提交/button
/formvar myForm document.getElementById(myForm)
function resetHandle(){myForm.reset();
}
function submitHandle(){console.log(提交);
}
