js进阶

2022-07-16 16:16:22

　　上篇博客提到js是纯oop思想的语言也就是在使用js编程的时候注重的是：什么时候什么东西做什么。

　　之前提到Js一经加载会马上执行，如果我们要控制的对象在js代码的下面那么网页被打开时js会先被执行然后加载下面的html代码，当js被执行的时候，下面的html代码还没加载到，js控制的对象还没有存在于当前的页面这个时候js就会报错，提示找不到对象，根据这个原理呢，我们编写js代码的时候，要尽量把js代码写在html下面以确保所有的html代码全部被加载，而像一些自定义函数之类的js定义，则应该要写在html页面的最上面，比如<head>里面，以确保下面的js代码运行时可以找到这个自定义函数，之前说到了document对象，它是整个html文档对象，也是所有html对象的根源，因为所有的html代码都是写在页面内，不会写在页面的外面，我们想控制一个对象，就要得到代表这个对象的量，document最容易这个词就表示了这个量，但是，我们在实际效果中我们要控制的往往不是document本身，而是它里面的html元素，比如<div><input>之类的，为了方便的我们找到文档里的html元素，document给我们提供了两个常用的方法。

　　getElementById,getElementByTagName,这两个名字是区分大小写的，getElementByTagName可以让我们通过html标签名来找到这个html元素，getElementById可以通过我们定义的id来找到html元素，每个html元素都是一个对象，既然是对象就有自己的属性和方法，我们先说下document.getElementByTagName方法，这个可以通过标签名字找到，但一个html页面中往往不止一个叫这个名字的，所以这个方法会返回一个数组，数组中的每一个量就对应每一个用这个标签名的东西，下面实践一下，

<html>
<body>
<div>第一个</div>
<div>第二个</div>
<script type="text/javascript">
    var divs = document.getElementsByTagName(‘div‘);
    alert(divs);
</script>
</body>
</html>

返回值还是一个对象，那怎么证明是一个数组呢，统计下它有多少个索引就可以了，由于在js中每一个常规的量都是用对象的方法来表达，如果真是一个数组对象的话它就会知道自己哟多少个索引，也就是属性length alert(divs.length);结果弹出div的总数，这个就是数组的总数，php中我们知道数组由多个量组成的，由于getElementsByTagName方法会返回使用这个标签的所有对象，它只能用数组的形式给我们装回来，那要怎么读取其中一个量呢，和php是一样的用[] divs[0]就是取回第一个量也就是页面中第一个使用这个标签的对象，之前提到凡是自身有属性，又可以再标记中写东西的html标签都是DOM对象，<标签属性=属性值>内容</标签>凡是符合的都是DOM对象，那上面的标记的属性是否可以直接读取呢，对象.属性，用这种方法我们可以试一试，

<html>
<body>
<div align="center">第一个</div>
<div>第二个</div>
<script type="text/javascript">
    var divs = document.getElementsByTagName(‘div‘);
    alert(divs[0].align);
</script>
</body>
</html>

很显然是可以读取的那么是否可以赋值呢？

alert(divs[0].align="right");可以看到产生的相应的变化，对于js和html来说这个很直观，如果要读取对象的内容，这意味着内容应该是一个属性，而不是方法，因为内容是名词不是做什么（方法），DOM有两个属性表示内容，一个是innerHTML另一个是innerText,, innerHTML是指内容里的一切包含html代码在内，innerText只有文字，因为我们的html元素里面还可能嵌套额外的html标签，我们试一试，

<html>
<body>
<div align="center"><h1>第一个</h1></div>
<div>第二个</div>
<script type="text/javascript">
    var divs = document.getElementsByTagName(‘div‘);
    alert(divs[0].innerHTML);
</script>
</body>
</html>

　　下面说说DOM对象的getElementById 网页做大之后div可能很多，要一个一个去算是很累人的，getElementById,提供了这个便利，只要在html某个标签中指定一个id属性，就可以通过getElementById方法找到，

<html>
<body>
<div align="center"><h1>第一个</h1></div>
<div id="two">第二个</div>
<script type="text/javascript">
    var divs = document.getElementById("two");
    alert(divs.innerHTML);
</script>
</body>
</html>

通过id找到对象然后打印对象的内容，相对getElementsByTagName是一种精确地查找，

如果说我们要找一个表单对象呢，比如<input type="text" name="username" id="username" />

在制作用户注册的时候往往有多个表单元素要填写，如果填写错了一个提交了才发现就要全部重写了，最好的办法呢，是用户提交前知道那地方错了，这个时间的把握非常重要，也就是说这个js不是一开始就运行的，那什么时候运行呢，我们在填写一个表单的时候填写完之后，当表单按钮被点击的时候，点击和提交之间，例子如下：

<form>
<input type="text" name="username" id="username" />
<input type="submit" id="b" value="提交" />
</form>

表单如上，上面说到点击的时候说明是点击事件onclick 我们首先找到它

var but = document.getElementById(‘b‘);

but.onclick=click;

然后给它的oncilck事件绑定一个方法，要检查的是username填写的名字，先找到它，

var inp = document.getElementById("username");这是一个input对象填写东西是什么呢，这不是一个DOM对象，它没有innerText,input对象都有value属性默认是空的，

<form>
<input type="text" name="username" id="username" />
<input type="submit" id="b" value="提交" />
</form>
<script type="text/javascript">
    function onclick(){
        var inp = document.getElementById("username");
        var con = inp.value;
        alert(con);
    }
    var but = document.getElementById("b");
    but.onclick=click();
</script>

找到会被点击的东西然后给它的点击事件绑定click方法，click方法的任务是找到表单然后读取它的值，最后弹出这个值

全部代码如下，

<html>
<body>
<div align="center"><h1>第一个</h1></div>
<div id="two">第二个</div>

<form>
<input type="text" name="username" id="username" />
<input type="submit" id="b" value="提交" />
</form>
<script type="text/javascript">
    function click(){
        var inp = document.getElementById("username");
        var con = inp.value;
        if(con==‘‘)
            alert("用户名不能为空");
    }
    var but = document.getElementById("b");
    but.onclick=click;
</script>

</body>
</html>

在此注意：but.onclick=click而不是but.onclick=click(),我换一种写法就会看懂了，在面向对象中由于有事件这一概念，而事件，要执行一个方法，或者说一个过程，更准确的表达代码如下

but.onclick= function(){

                   var inp = document.getElementById("username");

                   var con = inp.value;

                   if(con==‘‘)

                            alert("用户名不能为空");

         }

把一个过程交给一个事件，或者如下写

var click= function(){

                   var inp = document.getElementById("username");

                   var con = inp.value;

                   if(con==‘‘)

                            alert("用户名不能为空");

         }

这样写就清晰多了。

下面继续表单的问题，就是表单提交以后即使没有填写还是会被提交，因为submit的确被点击了，我们在此可以改成button，

<html>
<body>
<div align="center"><h1>第一个</h1></div>
<div id="two">第二个</div>

<form id=”form”>
<input type="text" name="username" id="username" />
<input type="button" id="b" value="提交" />
</form>
<script type="text/javascript">
    function click(){
        var inp = document.getElementById("username");
        var con = inp.value;
        if(con==‘‘){
            alert("用户名不能为空");
            return false;
}
document.getElementById("form").submit();        
    }
    var but = document.getElementById("b");
    but.onclick=click;
</script>

</body>
</html>

当检查到用户名为空的时候，弹出一个提示框，然后用 return 返回，以中断自定义函数的执行。不然提示完了，下面的代码还是会被执行的。

return 在 PHP 里说过的，是返回值，在自定义函数中出现的时候，会中断自定义函数的执行，并返回值。在这里，其实返回什么不重要，只是为了中断自定义函数而已。如果不想弹出提示框，同学们可以自行发挥想像力。比如，指定哪个对象，或者 div 显示什么。div 是 DOM 对象，innerHTML 属性，即然可以用于读出内容，当然也可以用于写入内容了。

下面说说子对象，

document.getElementById() 这个的意思是，在文档里找到这个ID。如果我不想在一个文档里找呢？我想在指定范围里找呢？

比如，一个 DIV 里面还有N个 DIV。或者，一个 <ul> 里的所有 li。这就涉及一个子对象的问题，对象里面还有对象。虽然可以给 ul 里的每个 li 都指定 ID ，但是太麻烦了。我们可以先找到这个 ul 再找里面的 li。

<ul id="list">

  <li>第一个</li>

  <li>第二个</li>

</ul>

要找到这个 ul 很容易，只要用 getElementById 就可以。

var list = document.getElementById("list");

之前说过，符合这个格式的，都是 DOM 对象。而 getElementById 和 getElementsByTagName 方法，都是 DOM 对象的方法。也就是说，只要是 DOM 对象，就可以用这个方法，而不是局限于 document。document 是整个文档对象，也只是一个对象。

var list = document.getElementById("list");

var lis = list.getElementsByTagName("li");

这样，我们就可以得到所有的 li 了，而且，只是这个 ul 里的。为了方便起见，我们可以连起来写。

var lis = document.getElementById("list").getElementsByTagName("li");

在文档里找到 list ，然后在里面找到所有 li。li 就是 ul 的子对象。

所有的 HTML 标签，都是 document 的子对象。如果把它们用一个量来表示，可以写成长长的一串。

document.body.ul.li……

之后，就看最后这个对象是什么对象了，都有什么方法和属性可供我们操作了。

最常用的子对象，呵呵，应该要算是 style 对象。CSS 样式对象。

style 在标签里，看起来像是一个属性。

但是，JS 还是把它当成一个对象来理解，因为它里面还有更多的属性和值。虽然没有什么方法。所以，style 其实应该算是一个子对象。而且，通过 CSS 对象，我们可以实现的效果更多。凡是 CSS 可以定义的属性，都是 CSS 对象的属性。对应的值，就是属性值。

alert(document.getElementById("f").style.color);

（文档中找到 f 对象）这是一个对象了。对象的.style 的颜色。相对的，也可以给它赋值。

<body>

<script>

function color(c) {

   document.getElementById("f").style.color = c;

}

</script>

 

 

<div id="f" style="color:red;">文字</div>

 

<input type="button" value="红色" onclick="color(‘red‘);" />

<input type="button" value="绿色" onclick="color(‘green‘);" />

<input type="button" value="蓝色" onclick="color(‘blue‘);" />

</body>

当不同按钮点击的时候，我可以通过参数，传递进不同的值，然后赋值给 style 的 color，文字的颜色也会跟着改变。

当然了，如果我们指定是 CSS 的隐藏属性的话，呵呵。那它就会，显示，隐藏。以此类推，就看我们改变的是对象的哪一个 CSS 属性了。什么时候，改变了对象的，样式的，啥……

配合不同的事件，比如窗口大小变化，滚动条位置变化。

当滚动时，读取滚动条位置，计算出对应 DIV 绝对定位的 Top 值。可以做到，让一个 DIV 一直跟着滚动条走。最常见的就是飘浮在网页左右两边的广告条，就是用这个原理制作出来的。

说到底，JS 的熟悉程度，完全取决于你对 JS 的对象的了解程度。然后跟据不同对象的属性、方法，进行相应的计算、控制，就可以做出各种千变万化的“动态”网页效果了。比如，当鼠标悬停在某个对象上面的时候，另一个 DIV 的宽度就产生变化，或者高度。这个效果，就常见于各种下拉菜单的制作，或者干脆隐藏/显示。

js进阶,布布扣,bubuko.com

js进阶

码农公寓

相关文章