web笔记javaScript-02

最新推荐文章于 2024-07-26 20:46:33 发布

Serendipity_yuha

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量57

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Serendipity_yuha/article/details/127288560

版权

day02 js交互

1.回顾

什么是js
    基于对象和事件驱动的解释性脚本语言
js的组成
  ECMAScript  js的语法标准 常用对象  js的核心
  DOM  document Object Model  文档对象模型
  BOM  Browser Object Model  浏览器对象模型
变量命名规则
    变量：存储数据的容器  就是给存储区域起个名字
  以数字 字母 下划线 $组成  但是不能以数字开头
  不能使用关键字和保留字
  见名知意 遵循驼峰命名
  变量重名会被覆盖
js的特性
    基于对象  事件驱动 解释性  跨平台
  
什么时候会出现undefined？
     声明变量没有赋值
a is not defined是什么意思
   没有声明  但是使用了

2.js交互

交互步骤：找对应的标签，添加事件，事件反馈

2.1获取标签

2.2.1通过id名获取

document.getElementById("id名");
适合：适合单个标签获取

<body>
    <!-- 标签就是元素 -->
    <div class="box" id="wrap">这是div标签</div>
    <script>
        // 1.通过id名获取 document.getElementById("id名");
        var oDiv = document.getElementById("wrap");
        console.log(oDiv); 
    </script>
</body>

2.2.2通过类名获取

document.getElementsByClassName("class名字") 获取整个文档下的对应标签
父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签

==注意：通过类名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]==

==注意：元素集合只有一个元素，也要通过下标的形式获取==

    <script>
        //2.通过类名获取
        //2.1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签
        var oDiv = document.getElementsByClassName("box");
        console.log(oDiv);//HTMLCollection(3)  元素集合
        //获取元素集合中的具体某一个标签  语法  元素集合[下标]
        console.log(oDiv[0]);
        console.log(oDiv[2]);
        // 2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签
        //先获取父元素  通过class类名
        var oUl = document.getElementsByClassName("list");
        console.log(oUl[0]);//元素集合中哪怕只有一个 也有通过下标的形式获取
        // 获取ul下的box
        var list = oUl[0].getElementsByClassName("box");
        console.log(list);
    </script>

2.2.3通过标签名获取

document.getElementsByTagName("标签名") 获取整个文档下的对应标签
父元素.getElementsByTagName("标签名") 获取父元素下对应的标签

==注意：通过标签名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]==

==注意：元素集合只有一个元素，也要通过下标的形式获取==


    <script>
        // 3.通过标签名获取
        // 3.1 document.getElementsByTagName("标签名")  获取整个文档下的对应标签
        var oDiv = document.getElementsByTagName("div");
        console.log(oDiv);//HTMLCollection(4)  元素集合  获取元素集合中具体的标签  元素集合[下标]
        console.log(oDiv[1]);
        //3.2 父元素.getElementsByTagName("标签名")  获取父元素下对应的标签
        var oUl = document.getElementsByTagName("ul")[0];
        console.log(oUl);
        var xDiv = oUl.getElementsByTagName("div");
        console.log(xDiv);//HTMLCollection [div]
    </script>

2.2鼠标事件

添加事件

元素.事件类型 = function(){   要做什么事   }

鼠标事件类型

 onclick  鼠标左键单击
 ondblclick 鼠标双击
 onmouseover/onmouseenter  鼠标移入
 onmouseout/onmouseleave   鼠标移出
 onmousemove  鼠标移动
 onmousedown  鼠标按下
 onmouseup    鼠标抬起
 oncontextmenu 鼠标右键显示菜单

        // 1.获取元素
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv);
        // 2.鼠标单击 onclick
        oDiv.onclick = function () {
            console.log("单击");
        }
        // 3.鼠标双击 ondblclick
        oDiv.ondblclick = function () {
            console.log("双击");
        }
        // 4.鼠标移入 onmouseover
        oDiv.onmouseover = function () {
            console.log("移入");
        }
        // 5.鼠标移动  onmousemove
        oDiv.onmousemove = function () {
            console.log("移动");
        }
        // 6.鼠标移出 onmouseout
        oDiv.onmouseout = function () {
            console.log("移出");
        }
        // 7.鼠标按下  onmousedown
        oDiv.onmousedown = function () {
            console.log("按下");
        }
        // 8.鼠标抬起  onmouseup
        oDiv.onmouseup = function () {
            console.log("抬起");
        }
        // 9.鼠标右键显示菜单
        oDiv.oncontextmenu = function () {
            console.log("右击显示菜单项");
        }
        // 10.onmouseenter  onmouseleavae  移入移出
        oDiv.onmouseenter = function () {
            console.log("移入1");
        }
        oDiv.onmouseleave = function () {
            console.log("移出1");
        }

3.操作内容

标签分为：闭合标签和表单元素两种

3.1闭合标签

获取：元素.innerHTML 元素.innerText
设置：元素.innerHTML = 值元素.innerText = 值

 <script>
        var oDiv = document.getElementsByTagName("div")[0];
        // 1.闭合标签的内容  获取及设置   
        // 1-1获取 元素.innerHTML  元素.innerText
        console.log(oDiv.innerHTML);//这是一个div标签
        console.log(oDiv.innerText);//这是一个div标签
        // 1-2设置  元素.innerHTML = 值   元素.innerText = 值  重写之前的内容
        oDiv.innerHTML = "这是一个新的文本内容";
        oDiv.innerText = 123;
        /*
            innerHTML和innerText的区别?
            相同点：都是重写覆盖闭合标签上的原有内容
            不同点：innerHTML可以识别标签  innerText不识别标签
        */
        // 1-3 区别
        oDiv.innerHTML = "<b>456</b>";//innerHTML可以识别标签
        oDiv.innerText = "<i>098765</i>";//innerText不识别标签

        // 1-4  在原有的文本内容上追加内容   字符串数据类型遇到+ 是拼接
        // 原有的内容 + 新的值
        oDiv.innerHTML = oDiv.innerText + "123";
    </script>

==面试题： innerHTML和innerText的区别?==

相同点：都是重写覆盖闭合标签上的原有内容
不同点：innerHTML可以识别标签  innerText不识别标签

3.2表单元素

获取元素.value
设置元素.value = 值

body>
    <form action="">
        <input type="text" placeholder="请输入文本内容" value="张三">
    </form>
    <script>
        var oInp = document.getElementsByTagName("input")[0];
        // 表单元素的设置和获取
        // 1-1获取  元素.value
        console.log(oInp.value);
        // 1-2设置  元素.value   = 值
        oInp.value = "李四";
    </script>
</body>

4.操作样式

获取元素.style.样式名
设置元素.style.样式名 = 值

==注意事项==

注意1:如果样式名是连字符在js中需要改写成小驼峰命名将连字符去掉连字符后的首字母换成大写例如：background-color需要改为backgroundColor
注意2 只能获取行内样式内部样式和外部样式无法获取

<body>
    <!-- 行内引入 -->
    <div style="width: 200px;height:200px;background-color: red;"></div>
    <script>
        // 注意1  如果样式名是连字符 在js中需要改写成小驼峰命名 将连字符去掉 连字符后的首字母换成大写
        // 注意2  只能获取行内样式  内部样式和外部样式无法获取
        var oDiv = document.getElementsByTagName("div")[0];
        // 1.获取样式   元素.style.样式名
        console.log(oDiv.style.width);//200px
        console.log(oDiv.style.height);//200px
        console.log(oDiv.style.backgroundColor);// red
        // 2.设置样式   元素.style.样式名 = 值
        oDiv.style.width = "500px";
        oDiv.style.height = "600px";
        oDiv.style.borderRadius = "50%";
    </script>
</body>

5.操作属性

属性：存在开始标签上例如class id style src alt
获取：元素.属性名
设置：元素.属性名 = 值

==注意：class需要写成className==

<body>
    <div class="box" id="wrap"></div>
    <img src="./img/1.jpg" alt="表情包">
    <input type="text">
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        var oImg = document.getElementsByTagName("img")[0];
        var oInput = document.getElementsByTagName("input")[0];
        // 获取   元素.属性名  特殊：class需要写成className
        console.log(oDiv.id);//wrap
        console.log(oDiv.className);//box
        console.log(oImg.src);//
        console.log(oInput.type);//text
        // 设置   元素.属性名  = 值
        oDiv.className = "box1";
        oInput.type = "password";
    </script>
</body>

6.数据类型

数据类型：根据数据的特征及功能分为不同的数据类型，不同的数据类型有不同的操作

6.1数据类型的分类

六大数据类型：五种基本数据类型和一种特殊数据类型
五种基本数据类型
- number 数值类型 1234
- string 字符串类型 "文字" '文字'
- boolean 布尔类型 true false
- undefined 未定义
- null 空对象
特殊数据类型(复杂数据类型引用数据类型对象数据类型)
- object 对象类型 { "name":"张三" }
- array 数组类型 [1,2,3,4]
- function 函数 function(){}

6.2检测数据类型typeof

语法1 typeof(要检测的数据)
语法2 typeof 要检测的数据类型

       /* 
            typeof检测结果  面试题
                number类型的数据    number
                string类型的数据    string
                boolean类型的数据   boolean
                undefined          undefined
                null                object
                object类型的数据     object
                array类型的数据      object
                function函数         function
        */
        var a = 10;
        // 1.语法1  typeof(要检测的数据)
        console.log(typeof (a));//number
        // 2.语法2  typeof 要检测的数据类型
        console.log(typeof a);//number
        console.log("结果", typeof a);
        console.log(1, typeof a);//1 'number'

        console.log(typeof "文字");//string
        console.log(typeof true);//boolean
        console.log(typeof undefined);//undefined
        console.log(typeof null);//object
        console.log(typeof {});//object
        console.log(typeof [1, 2, 3]);//object
        console.log(typeof function () { });//function

7.面试题

1.innerHTML和innerText的区别
2.操作标签属性、样式、内容
3.js的数据类型有哪些？
4.typeof的检测结果？

Serendipity_yuha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web笔记javaScript-02

什么是js基于对象和事件驱动的解释性脚本语言js的组成ECMAScript js的语法标准常用对象 js的核心DOM document Object Model 文档对象模型BOM Browser Object Model 浏览器对象模型变量命名规则变量：存储数据的容器就是给存储区域起个名字以数字字母下划线 $组成但是不能以数字开头不能使用关键字和保留字见名知意遵循驼峰命名变量重名会被覆盖js的特性基于对象事件驱动解释性跨平台。
复制链接

扫一扫