maven 的 pom 文件与打包详解

LeetCode 382. 链表随机节点(蓄水池算法)

  返回  

js03基础

2021/8/20 22:46:24 浏览:

目录

1.dom.. 1

1.1概述... 1

1.2HTML操作... 2

1.3属性操作... 3

1.4样式操作... 4

1.5DOM事件... 4

1.6批量操作... 6

1.6.1 getElementsByTagName(  ) 6

1.6.2连续打点... 6

1.7对应与排它... 7

1.8样式的计算... 8

1.dom

1.1概述

我们前面学习的都是JS语言核心部分,也就是ECMAScript。

一般都是在控制台、输出语句里操作,JS还包括

DOMBOM

DOM (Document Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。 这使得JavaScript操作HTML, 不是在操作字符串,而是在操作节点,极大地降低了编程难度。

DOM对很多东西做了抽象,提供了丰富的APl(方法):取得元素、css样式、事件、运动、元素尺寸位置、节点操作等等。

  //操作dom

        var app = document.getElementById('app');

        //修改内容

        app.innerHTML = '你是好人';

        //获取

        console.log(app.innerHTML);

1.2HTML操作

document:表示文档(表示整个页面)对象。

document对象具有页面几乎所有的方法或者属性。

读取: document.title 页面的标题。

赋值:使用=进行赋值。

一般操作元素都是从获取元素开始的。.

获取元素的方法: getElementByld() 通过id属性获取元素对象

通过id属性得到的数据类型是对象

通过元素对象操作属性

读取:可以通过对象的点方法得到属性名。

设置:用 = 进行赋值      

点语法只能读取或者设置元素的自带的属性不能设置读取元素的自定义属性。

//修改标题

        document.title = 'good man ';

        //获取

        console.log(document.title);

        console.log(document.head);

        console.log(document.body);

        //获取h1元素//用这个获取元素更专业

        var app = document.getElementById('app');

        console.log(app);

        //早期为元素创建id时,会在js中创建一个同名变量

        //获取属性

        console.log(app.id);//app

        console.log(app.style);//

        //获取自定义属性

        console.log(app.class);//undefined

        console.log(app.demo);//undefined

        console.log(app.color);//undefined

        //如果想要通过点语法访问以上属性,需要改名

        //class→classNamefor→ htmlFor

        //rowspan→rowSpancolspan→colSpan

        //修改属性,通过赋值 = ,一半点语法修改

1.3属性操作

属性操作方法

读取: getAttribute() 可以读取元素自带属性或者是自定义属性

设置: setAttribute() 设置元素自带属性或者是自定义属性

点语法和getAttribute()setAttribute()区别:

1点语法只能读取或者设置元素的自带有属性getAttribute()setAttribute()可以读取元素自带属性或者是自定义属性

2点语法操作有些属性名需要改名字getAttribute() setAttribute()不用改名, 是什么就直接书写什么。

class→className      for→ htmlFor

rowspan→rowSpan    colspan→colSpan

3 style属性:通过点语法得到的style对象,而getAttribute()得到的是字符串

4点语法得到style可以继续打点。而getAttribute()得到的是字符串不能继续打点调用属性。

总结:除了自定义属性使用getAttribute(),其他所有情况都使用点语法。

      //获取元素

        var app = document.getElementById('app');

        //可以通过点语法设置属性

        console.log(app.className);

        // getAttribute

        console.log(app.getAttribute('class'));

        //获取style

        console.log(app.style);//点语法获取的是对象,大量的属性

        console.log(app.getAttribute('style'));//单一指定属性,字符串

        //获取自定义属性,color,点语法无法获取

        //getAttribute可以直接获取

        console.log(app.getAttribute('color'));//red

        //其他属性没有区别

        //修改属性

        app.className = 'deemm213 asd';

        app.setAttribute('class''asdasfvx');

        //自定义属性

        app.setAttribute('color''asdasfvx');

        //新增属性

        app.setAttribute('coloasdr''qaqaqq');

        app.title = "hello";//点语法可以添加自身拥有的属性

        app.setAttribute('title''good man')

        //修改样式

        //点语法要转成驼峰式命名,是在原有的基础上修改属性

        app.style.fontSize = '100px';

        //按照css规则书写,覆盖原有的

        app.setAttribute('style''font-size:100px')

1.4样式操作

css操作就是更改元素的样式。

通过点语法的style得到对象(包含css所有的样式)。

能够继续打点调用style属性。

属性名:如果是单一属性需要改为驼峰命名法(删除横线,将横线后面的单词首字母大写)。

读取:通过点语法直接获取style对象中的css样式

设置:使用 = 进行设置,将新的属性值属性在= 右侧。必须用双引号包裹

属性值的写法:原来css属性值怎么写,js就怎么写。

使用点语法设置css样式,是书写行内的样式。

       还可以通过setAttribute修改样式,修改的时候,会覆盖原有的行内式样式,属性值是css样式的字符串(遵守css规则)。

1.5DOM事件

事件监听:我们计算机在解析我们JS代码的时候,会去看某一些元素身上是否添加了事件。随时监听这些事件有没有被触发,如果触发就立即执行相应的行为。

onclick       单击          ondblclick      双击    

onmouseenter鼠标进入      onmouseleave  鼠标离开       

onmousedown鼠标按下      onmouseup    鼠标弹起

onfocus      获取焦点      onblur         失去焦点

onload       加载完毕之后

元素绑定事件:元素事件名 = fn。可以绑定匿名函数或者函数名(千万不要在函数名后面书写小括号)

注意:

我们在body中书写js时,需要将js书写在所有html元素之后。当html元素加载完毕之后在执行js。

如果js书写在head标签中,必须书写onload事件window.onload表示html元素加载完毕之后执行内部的语句

<script>

        //注意:如果要在此处创建js,必须书写onload事件,

        //window.onload表示当html元素加载完毕之后执行内部的语句

        //window是一个全局对象,包含dom一些API,例如可以通过window

        //监听页面加载完成//即页面加载完成再加载此处js

        window.onload = function () {

        }

    </script>

</head><body>

    <h1 id="app" style="color:green;background-color: pink;" class="demo" color="red">hello qaqq</h1>

    <input id='inp' type="text" style=" padding:10px;margin-top:50px;">

    <script>

        //绑定事件监听用户与页面的交互

        var app = document.getElementById('app');

        var inp = document.getElementById('inp');

        //监听点击h1元素//设置的是回调函数

        //给一个对象设置多个同名属性(多次绑定),

        //会导致后面的覆盖前面的

        app.onclick = function () {

            console.log('click h1');

        }

        //双击

        function fn() {

            console.log('click h1 2423');

        }

        app.ondblclick = fn;//注意不要加括号让他执行

        //鼠标的移入与移出

        app.onmouseenter = fn;

        app.onmouseleave = fn;

        //监听输入框获取焦点

        inp.onfocus = function () {

            console.log('获取焦点');

        }

        inp.onblur = function () {

            console.log('失去获取焦点');

        }

    </script></body>

1.6批量操作

1.6.1 getElementsByTagName(  )

getElementByld()getElementsByTagName()都是兼容IE低版本。全线兼容。

getElementsByClassName()不兼容IE低版本。

getElementsByTagName(  ) 通过元素的标签名得到元素

    <section>

<div>1<div>2<div>3<div>4<div>5 </div> </div> </div> </div> </div>

    </section>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <script>

        //获取页面中所有div

        var divs = document.getElementsByTagName('div');

        console.log(divs);

        //遍历div

     for (var i = 0i <= divs.lengthi++) {

            //类数组对象,可以通过每一个索引值访问类数组成员

            console.log(divs[i]);

        }

得到的是页面上所有的同种标签组成的类数组对象。

类数组中保存的每一个数据也是元素对象。

得到的类数组对象具有length属性。表示保存的同种标签的元素个数

可以通过数组的索引值得到任何一个对象。

不管元素嵌套多深,getElementsBy TagName(" p")也可以查找。

类数组对象保存数据的顺序和标签之间的嵌套没有关系,和标签首次出现的顺序有关。

1.6.2连续打点

getElementByld()只能被document调用

//getElementById只能被document调用

        var div3 = document.getElementById('div3');

        console.log(div3);

getElementsByTagName(),其它元素对象可以打点调用该方法。还可以将多条语句连续书写。

通过getElementsByTagNam(")得到的一定是类数组对象,即使只有一个元素也是类数组对象。想得到该元素对象,仍然需要书写索引值

批量操作事件

通过getElementsByTagName()得到的是类数组对象,我们可以通过批量操作的方式给数组每一个元素添加相同事件

案例:

给元素批量添加点击事件,触发事件时弹出该元素对象的索引值

注意:事件回调函数中,存储索引值有两种方式

1.利用IIFE和闭包实现对数据的存储

2.通过this访问元素自身,再获取数据

1.7对应与排它

我们一般习惯用一个元素去控制其它元素。根据它们之间的联系(索引值相同)进行书写。

排他:选中的元素改变其它元素,让其他元素变成原状。

根据这一思想我们可以实现-些交互功能,如:选项卡的实现。

[点击此处链接到选项卡]

核心算法:

   .app .header span.choose {

            colorred;

        }

           .app .body .choose {

            displayblock;

        }

  //绑定事件

        for (i = 0len = spans.lengthi < leni++) {

            //设置索引值

            //一个类数组,用自身来存储数据,当 i = 0 时,

            //类数组第 1 个数据,存储 0 ,当 i = 1 ,时

            //类数组第 2 个数据,存储 1 ...

            //spans[i].onclick,表示,当第 i 个元素被点击时

            //触发条件

            spans[i].index = i;

            //绑定事件

            spans[i].onclick = function () {

                //排它法,设置样式

                //清除所有

                for (var j = 0j < lenj++) {

                    //清除每一个span的类

                    spans[j].className = '';

                    // spans[j].style.color = 'black';

                }

                //返回被点击的span的类,即给被点击的span

                //添加一个class=choose的属性

                //通过之前给choose设置的stylecolor属性

                //来给当前span添加color属性

                spans[this.index].className = 'choose';

                //p使用排它

                //注意:此处是另外一组对象了,记得重新设置var

                for (var k = 0klen = ps.lengthk < klenk++) {

                    //清除所有p的类

                    ps[k].className = '';}

                //设置特殊的:对应法

                ps[this.index].className = 'choose';

1.8样式的计算

计算后的样式:指的是HTML元素在css各种选择器综合作用下,得到的最终样式。

高级浏览器的方法: window.getComputedStyle(),该方法接收一个要进行样式计算的元素,并返回一个可以进行属性查询的接口。返回接口提供了一个名为getPropertyValue()的方法, 用于检索特定样式属性的计算样式。getPropertyValue方法接收css属性名称,而不是驼峰式的名称。getPropertyValue()可以不写, 直接用方括号来检索属性也可以。

getComputedStyle:得到的样式是一个对象,包含了所有的css样式。是window对象的方法

注:也可以直接使用 [  ] 继续得到具体的计算后的属性值。(中括号中可以使用驼峰也可以使用短横)

getPropertyValue:得到的是具体的某一个属性的值参数和css书写一样不能使用驼峰

IE6,7,8方法

低版本浏览器不认识getComputedStyle

IE低版本计算后的方法,currentStyle.(对象打点调用currentStyle,继续打点调用具体的某个计算后的样式属性)。currentStyle也可以直接使用 [  ] 得到计算后的样式属性。

注意:不管是中括号还是点语法都只能用驼峰命名法。(使用方法和style非常类似)

       //此方法获取的是元素  元素 ,行内的元素

        var app = document.getElementById('app');

        console.log(app);

        //获取样式 

        //此种方法 style获取样式, 只是获取 行内的 样式

        console.log(app.style);//"color"

        console.log(app.width);//undfined

   //获取全部的样式,通过全局方法getComputerStyle

        var result = getComputedStyle(app);

        //注意:获取指定样式时,不能驼峰命名

        //注意:[] 中括号可以直接获取指定属性值,随便命名

        console.log(result.getPropertyValue('width'));//200px

        console.log(result.getPropertyValue('height'));//200px

        console.log(result.getPropertyValue('color'));//rgb(255, 0, 0)

        console.log(result['color']);//rgb(255, 0, 0)

        console.log(result['backgroundColor']);//rgb(0, 128, 0)

1.9     能力检测

不管是低版本还是高级浏览器都可以正常输出计算后的样式。需要进行能力检测(就是判断认不认识window. getComoutedStyle)

        #app {

            font-size40px;

            width200px;

            height200px;

            background-colorgreen;

            border-bottom-colorpink;

            border-bottom-width20px;

            border-bottom-stylesolid; } </style></head><body>

    <!-- 计算样式 -->

    <div id="app" style="color: red;">hello </div>

    <script>

        /*封装一个getStyle方法,可以在不同浏览器下获取样式

        *@obj--          元素对象;

        *@key--          样式的属性名称

        *return(返回值) 获取的样式 

        **/

        function getStyle(objkey) {

            //能力检测:判断浏览器的能力,能做什么就做什么

            //浏览器是否支持,getComputerStyle方法,

            //支持就使用

            //加上window,是为了保证

            //在没有其他浏览器上,即使没有这个方法(getst),也不会报错

            if (window.getComputedStyle) {

                //获取对象中的样式,返回key

                //就用这玩意儿,法一

                return getComputedStyle(obj)[key];

                //法二,如果使用下面这种方式,需要转换成横线法

                //如:boderLeftColor => boder-left-color

                //注意:([])是要捕获它

                //特别注意:

                //此处,function里的形参,需要按需填写,写的时候就测试

                //看看输出的是什么玩意儿

                // key = key.replace(/[ A-Z]/g, function ($1) {

                //     //返回的是

                //     // $1 = $1.toString();

                //     return '-' + $1.toLowerCase();

                // })

                // return getComputedStyle(obj).getPropertyValue(key);

            } else {

                //垃圾ie判断法

                var style = obj.currentStyle;

                //判断有样式可以获取,

                if (style) {

                    //返回样式

                    //由于ie [ ] 只支持驼峰命名,所以需要转换,横杠法去转换

                    //如:boderLeftColor <= boder-left-color

                    key = key.replace(/(-[a-z])?/gfunction (match$1) {

                        return ($1 || '').toUpperCase();

                        console.log(1$1);

                    })

                    return style[key];

                } else {

                    //如果没有样式,则提示用户

                    alert('垃圾电脑,这都不支持,快换了')

                }

            }

        }

        //测试

        //获取元素

        var app = document.getElementById('app');

        alert(getStyle(app'color'));

        alert(getStyle(app'fontSize'));

        alert(getStyle(app'font-size'));

    </script>

</body>

</html>

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号