javascript学习笔记之中级版

热爱可抵岁月mrx

已于 2022-05-17 21:26:27 修改

阅读量322

点赞数 1

分类专栏： web前端文章标签： javascript 前端开发语言

于 2022-05-03 11:48:46 首次发布

本文链接：https://blog.csdn.net/qq_55695208/article/details/122878013

版权

web前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

js代码如何获取body里的标签？

<button id="btn">原来是这样啊</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            alert("是啊是啊");
        }
    </script>

可以通过一个id属性来连接，这种属于行为和结构耦合。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function() {
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                alert("卷王尚且在世，怎能不奋斗");
            }
        }
    </script>

</head>

<body>
    <button id="btn">原来是这样啊</button>
</body>

</html>

上面的onload属性是说在这个页面运行完毕都在运行自身的函数，是个非常恭敬的函数。

注意：我们需要使用属性时都是对象.属性名即可，但有一个例外就是classs。对象.class很不ok;

replaceChild 替换节点

removeChild 删除子节点

a标签点击后都会默认跳转，在js中我们可以通过return false;

var name = document.getElementById("name").value;
 alert(name);

js中需要获取Input标签的内容可以用对象点value。点value的时候可能弹不出提示框。

js操作内联样式的方法

语法：对象名.style.样式名= 样式值。

注意：如果CSS的样式中含有-，这种名称在js中是不合法的，比如：background-color，需要将这种样式名修改为驼峰命名法。去掉-,然后将-后的首字母大写。

获取当前显示的样式

IE8方式

元素.currentStyle.样式名(只支持IE浏览器)

正常浏览器方式

getComputedStyle()方法：这个方法是window的，可以直接使用，需要传两个参数，第一个：要获取样式的元素，第二个:可以传递一个伪元素，一般都是null。

用这个放回的对象点元素即可。（不支持IE8及一下浏览器）

 var hh = getComputedStyle(haha, null);
            alert(hh.backgroundColor);

 <script>
        var haha = document.getElementById("haha");
        haha.onmousemove = function(event) {
            var showMSG = document.getElementById("showMSG");
            var x = event.clientX;
            var y = event.clientY;

            showMSG.innerHTML = "X:" + x + " Y:" + y;
        }
    </script>

onmousemove为鼠标事件，在某元素内移动鼠标即可触发事件， event.clientX获取当前鼠标所在的x轴信息。注意：后面的X是大写，忌粗心大意。

设置偏移量只对开启定位的元素有作用。

获取鼠标的坐标

clientX和clientY：是用户获取鼠标在当前的可见窗口的坐标(div的偏移量，是相对于整个页面的)

pageX和pageY可以获取鼠标相对于当前页面的坐标。

如何获取滚动条上方的距离？

获取这段距离需要用到一个属性——scrollTop,这个需要多注意兼容性，旧版本的chrome认为这个属性是属于body的，新版本认为属于html的。

var sor = document.documentElement.scrollTop;
console.log(sor);
新版本

var sor = document.body.scrollTop;
console.log(sor);
旧版本

事件的冒泡（Bubble）

所谓的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素也会被触发。再说白点就是事件的嵌套，一个元素嵌套着另一个元素，两个元素都有事件，里面的元素被触发的话，外面的元素事件也会被触发。

如果想取消事件冒泡可用cancelBubble。

 var haha = document.getElementById("haha");
            haha.onclick = function(event) {
                alert("我是内部的哦");
                event.cancelBubble = true;
            }

事件的委派

指将事件统一半绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派时利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

如何给元素添加多个响应函数？

对象.事件 = 函数。这种方法只能绑定一个响应函数。

addEventListener():这个方法可以为元素添加多个响应函数。

参数一：事件的字符串，onclick不要on。

参数二：回调函数，当事件触发时该函数会被调用。

参数三：是否在捕获阶段触发事件，需要一个布尔值，一般都传false，默认传false。

注意：addEventListener()只可以在IE8以上版本使用。IE８及IE８一下的使用attachEvent()


    <script>
        window.onload = function() {
            var anni = document.getElementById("anniu");
            anni.addEventListener("click", function() {
                alert("道貌岸然")
            }, false);
            anni.addEventListener("click", function() {
                alert("惨笑");
            });
        }
    </script>

在JS中定义类的方式有两种
    第一种
        function 类名（形式参数列表）{
            this.属性名=参数；
            this.方法名=function(){
                
            }
        }
    第二种
        类名= function(形式参数列表){
            this.属性名=参数；
            this.方法名=function(形式参数列表){
                
            }
            
        }

鼠标滚轮滚动事件

onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性，在火狐中使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventLIstener（）函数来绑定。

如何获取滚轮方向呢？

在谷歌中使用event.wheelDelta可以获取鼠标滚轮滚动的方向。向上滚：120，向下滚：-120。这个值我们不看大小，一般看正负。

在火狐中使用event.detail来获取滚动的方向，向上滚：-3，向下滚：3

思考：

如果我们在使用滚轮事件时，给body高，使他产生滚动条，这样在滚动鼠标时页面也会跟着滚动，这是浏览器的默认操作，怎么解决？

谷歌可以使用return false;来取消默认行为，如果时使用addEventListener()方法来绑定的响应函数，取消默认行为采用event.preventDefault()；

JS中==和===的区别

当进行双等号比较时候：先检查两个操作数数据类型，如果相同，则进行===比较，如果不同，则愿意为你进行一次类型转换，转换成相同类型后再进行比较，而===比较时，如果类型不同，直接就是false.

BOM---浏览器对象模型

BOM提供了一组对象，我们通过JS操作浏览器。

热爱可抵岁月mrx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记之中级版

js代码如何获取body里的标签？<button id="btn">原来是这样啊</button> <script> var btn = document.getElementById("btn"); btn.onclick = function() { alert("是啊是啊"); } </script>可以通过一个id属性来连接，这种属于行为和结构耦合。
复制链接

扫一扫