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>

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 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>

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>

posted @ 2018-12-29 23:52 疯狂的骆驼阅读(134) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

疯狂的骆驼

js笔记

7.2 DOM 节点

公告