javascript代码实例教程-js进阶_js

上一篇: javascript代码实例教程-jQuery选... 下一篇:javascript代码实例教程-JavaScr...

javascript代码实例教程-js进阶

发布时间：2019-02-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js进阶，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

复制代码

<html>

<body>

VAR ps = document.getelementsbytagname('p');

alert(ps);

</script>

</body>

</html>

复制代码

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

复制代码

<html>

<body>

var ps = document.getElementsByTagName('p');

alert(ps[0].align);

</script>

</body>

</html>

复制代码

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

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

复制代码

<html>

<body>

var ps = document.getElementsByTagName('p');

alert(ps[0].innerHTML);

</script>

</body>

</html>

复制代码

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

复制代码

<html>

<body>

var ps = document.getElementById("two");

alert(ps.innerHTML);

</script>

</body>

</html>

复制代码

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

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

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

<form>

</form>

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

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

but.onclick=click;

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

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

复制代码

<form>

</form>

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>

<form>

</form>

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>

</form>

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

下面说说子对象，

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

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

function color(c) {

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

}

</script>

</body>

复制代码

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

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

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

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

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

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-js进阶全部内容，希望文章能够帮你解决javascript代码实例教程-js进阶所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: javascript代码实例教程-jQuery选... 下一篇:javascript代码实例教程-JavaScr...

猜你在找的js相关文章

全站导航更多