码迷,mamicode.com
首页 > 编程语言 > 详细

初识Javascript(一)

时间:2018-06-17 11:07:19      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:pad   center   双击   window   结果   有一个   www   后缀   false   

1、Javascript介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        //如果script里面涉及到操作后面的元素,而又非得把script放在前面的话,需要加上:
        window.onload = function () {
            console.log("我是head里面的4");
            //这里再写代码(意思是:当整个页面加载完成之后,再执行这里的代码)
        }//一个页面中只能出现一次window.onload
    </script>
</head>
<body>
    <div></div>
    <p></p>
    <script src="index.js"></script>
    <script>
        /*
        1.JavaScript 是一种脚本语言,是一种动态类型、弱类型
        2.JavaScript通常用来操作HTML页面的
           html骨架(页面结构),css是样式(元素大小、颜色、位置、隐藏或显示等),js是行为(部分动画效果、页面与用户交互等)

       JS代码写在哪里:
           script标签里面
           写在外部.js后缀文件里面,通过script标签引入
           写在标签里面
       注意:在引入js文件的script里面,一定不能再写js代码
           标签里面写js代码一般情况下不推荐(指行内的样式)

        script标签的位置:
           head或者body里面
           要注意是否需要加上window.onload
           如果说没有什么特别的要求,一般script标签放在body结束之前
       */
        /*
      注释里面是没有要求的
      1.严格区分大小写 alert才是js本身自带的,Alert不是自带的
      2.语句字符必须是英文符号
      3.某些完整的语句后面需要分号
      4.引号里面代表字符串,所以不需要满足上面的条件
       */
        /*
        多行注释
        */
        //单行注释
        alert("调试代码");//弹窗  用来调试代码
        console.log("调试代码");//打印 用来调试代码
    </script>
</body>
</html>

2、元素获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: #c4ff7b;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">666</div>
    <p class="box1">1</p>
    <p class="box1">2</p>
    <p class="box1">3</p>
    <p class="box1">4</p>
    <div id="wrap">
        <i class="box2">iiiii1</i>
        <p class="box3">
            <i>iiiiii2</i>
        </p>
    </div>
    <script>
        /*
       那么JS如何操作页面:
           其实,要操作页面,就是操作标签,JS要操作标签,就要先获取标签
       js获取独有标签
           document.title
           document.head
           document.body

       其他标签的获取,id前面必须是document,其他的前面可以是某个元素(id,document),但不能是集合
               通过id获取元素,
                   document.getElementById()
               通过className获取元素(不支持IE8及以下)
                   .getElementsByClassName()
               通过标签名获取元素
                   .getElementsByTagName()

               通过选择器的写法获取元素(不兼容IE7及以下)
                   .querySelector()
                   .querySelectorAll()
               通过name值获取
                    document.getElementsByName()
        */
        document.title = "666";
        // 修改别的标签的内容,得用innerHTML(会解析标签),innerText(不会解析标签)
        document.body.innerHTML = "888";

        // 获取的是确切的某个元素,可以直接操作这个元素
        var oBox = document.getElementById("box");
        console.log(oBox);
         oBox.innerHTML += "888";
         oBox.innerHTML = "<h1>888</h1>";
        oBox.innerText = "<h1>888</h1>"

        // 获取的是很多元素的集合,设置操作的时候要通过下标(索引、序号)拿到对应的某一个
        var aP = document.getElementsByClassName("box1");
        aP[0].innerHTML = "666";
        console.log(aP.length);

        var aP = document.getElementsByTagName("p");
        aP[0].innerHTML = "666";

        // 获取第一个对应的元素
        var oI = document.querySelector("#wrap i");
        oI.innerHTML += "888";

        var oI = document.querySelectorAll("#wrap i");
        console.log(oI.length);
        oI[0].innerHTML += "999";
         /*
        定义变量规则:
            1.不能使用关键字或者保留字,(js里面已经赋予他有意义的词,或者留着备用的词)
            2.只能包含 数字 字母 $ _ 并且不能以数字开头
            3.严格区分大小写
            4.尽量见名知意

            用 ,号可以让一个var定义多个变量
            var变量时并不要求立马赋值
            var a, b, c;
         */
    </script>
</body>
</html>

3、Javascript鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 50px;
            height: 50px;
            background: #b864ff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
         /*
      所谓事件,是指 JavaScript 捕获到用户的操作,并做出正确的响应。
      在事件函数里面,有一个关键字this,代表当前触发事件的这个元素
      事件:用户的操作
      元素.事件 = 函数;
      鼠标事件:
          左键单击 onclick
          左键双击 ondblclick
          鼠标移入 onmouseover/onmouseenter ***
          鼠标移出 onmouseout/onmouseleave ***
       */
        var oBox = document.getElementById("box");
        oBox.onclick = function () {
            alert("我被点击了");
        };
        oBox.onmouseenter = function () {
            console.log("鼠标移入");
            this.innerHTML = "<h1>1</h1>";
            // oBox.innerHTML = "<h1>1</h1>"; //与上一句效果一样innerHTML会解析标签
        };
        oBox.onmouseleave = function () {
            console.log("鼠标移出");
        }
    </script>
</body>
</html>

4、Javascript操作标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" id="box" class="box" target="_black" tz="xp">百度</a>
    <script>
        /*
        js操作元素的标签属性:
            规范的标签属性:
                . 符号直接操作(可读可写)
            不规范(自定义)的标签属性:
                获取:.getAttribute()
                设置:.setAttribute()
                移除:.removeAttribute()

          注意:
          所有的 路径、颜色 获取的结果不一定是你写的内容
          通过id获取的元素赋值给变量后,假设修改了id,这个变量还是表示这个元素
          自定义标签属性的操作方式,同样可以操作符合规范的标签属性
         */
        var oA = document.getElementById("box");
        // alert(oA.target);//可读
        // oA.target = "_self";//可写
        // alert(oA.className);//class属性  要用className
        // oA.className = "";
        // alert(oA.getAttribute("tz"));
        // oA.setAttribute("tz","xxp");
        // oA.setAttribute("py","web");
        // oA.removeAttribute("class");
        // alert(oA.href)
        //点操作可以直接修改
        oA.id = "wrap";
        oA.target = "_self";
    </script>
</body>
</html>

5、Javascript操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 50px;
            height: 50px;
            background: #b864ff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /*
       行内样式标签属性:大部分情况下,js都是通过行内样式来达到修改样式的目的
        */
        //当我们需要修改单个属性的时候,我们一般都是直接.操作去修改元素的行内样式
        var oBox = document.getElementById("box");
        // oBox.style.width = "300px";
        // oBox.style.height = "300px";
        // oBox.style.cssText = "width: 300px;height: 300px;background: red;"

        // 操作复合属性时,要注意用驼峰写法(去掉-号,-号后面的第一个单词大写)
        // oBox.style.marginLeft = "20px";
        // oBox.style["margin-top"] = "50px";

        oBox.onmouseenter = function () {
            this.style.background = "red";
            this.style.width = "300px";
            this.style.height = "300px";
        }
    </script>
</body>
</html>

6、Javascript数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /*
        js六大数据类型
        number——数字  在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确
        string——字符串
        boolean——布尔值 true false
        null
        undefined——未定义 一个变量声明之后没有赋值就是undefined
        object——对象
        在js里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将它归为单独一类数据类型null
       */
        // var a = 0.55; //number
        // var a = "555"; //string
        // var a = true;//boolean  true || false
        // var a;
        // var a = function () {
        //     alert(1)
        // };函数不属于六大数据类型,属于alert(typeof a);弹出function
        // var a = [];//object
        // var a = {};//object
        var a = document.getElementById("box");
        alert(typeof a);
    </script>
</body>
</html>

 

初识Javascript(一)

标签:pad   center   双击   window   结果   有一个   www   后缀   false   

原文地址:https://www.cnblogs.com/wangwei13631476567/p/9191903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!