js笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js.js"></script> //引入方式 </head> <body> </body> </html>
变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var a = 1; //支持一行定义多个变量,但必须用;号隔开 alert(a); // 显示到提示框 document.write(a) // 显示到页面 </script> </body> </html>
数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //js五种数据类型,1:Number 2:String3:Boolean 4:Undefined 5:null // if (false){ // //true false用于判断 // alert("success") // } //Undefined 如果声明了某个变量未对它赋值则该变量是Undefined类型 // var a; // alert(a) //null 占一个对象位置 var obj = new Animal(); var obj=null </script> </body> </html>
数据类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // alert(1+"hello"); // 1hello拼接 // alert(1+true); //true相当于1 // alert(1+false); //false相于0 // alert("hello"+false) // hellofalse拼接 //var ret = parseInt(3.14); //转成整数 //var ret = parseInt("3.14"); //转成整数 //var ret = parseInt("3.14ad"); //转成整数 //var ret = parseInt("a3.14ad"); //NaN:当字符串转换成数字失败时就是NaN;属于Number类型 // alert(ret) // alert(NaN==0); // alert(NaN>0); // alert(NaN<0); // alert(NaN==NaN); //NaN数据在表达式中一定结果为false,只有!=是true var i = 10; var s = "hello"; var obj=new Object(); console.log(typeof (i)) console.log(typeof (s)) </script> </body> </html>
js遍历字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var s = "hello"; for (var i in s){document.write( s[i])}; for (var i in s){console.log(s[i])}; </script> </body> </html>
js获取指定字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var s = "hello"; document.write(s.charAt(3)); //字符 document.write(s.charCodeAt(3)); //编码 </script> </body> </html>
查询字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //查询字符串match search var s = "hello"; console.log(s.search("l"));//返回的第一个匹配结果的索引值 console.log(s.match("e")[0]); //返回数组,里面是所有匹配的结果 console.log(s.match("e")[0]);//通过索引值获取字符 </script> </body> </html>
截取字符
<script> var s = "hello"; // console.log(s.replace("e","E")); // console.log(s.split("e")); // console.log(s.concat("world")) //截取字符串 console.log(s.substr(1,1)); console.log(s.substring(1,3)); console.log(s.slice(1,3)); </script>
数组创建
<script> var arr=[1,2,3,6]; var arr2=Array(1,2,3,6); console.log(arr.length); console.log(arr2.length); </script>
join字符拼接
<script> var ret =["hello","mxiaohu"].join("+++"); //将数组内的字符串拼接成一个字符串 alert(ret) </script>
数组
<script> var ret =["hello","mxiaohu",13]; ret.unshift(17); // ret.shift() alert(ret) </script>
添加元素
<script> var ret =["hello","mxiaohu"]; ret.push(13); ret.push("wlord",17); alert(ret) </script>
向前面添加
<script> var ret =["hello","mxiaohu",13]; ret.unshift(17); // ret.shift() alert(ret) </script>
window对象
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
提示框
<script> var ret =confirm("内容是否保存") alert(ret) </script>
7.2 DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。
节点(自身)属性:
- attributes - 节点(元素)的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点(元素)的文本值
导航属性:
- parentNode - 节点(元素)的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点(元素)的子节点
注意:
<div id="div1">
<div id="div2"></div>
<p>hello yuan</p>
</div>
<script>
var div=document.getElementById("div2");
console.log(div.nextSibling.nodeName); //思考:为什么不是P?
</script>
推荐导航属性:
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分,以及节点之间的关系:
访问 HTML 元素(节点),访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素:
页面查找:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
局部查找:
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>