Js是我们学习web程序不得不接触的编程语言,虽然很多人喜欢用jqeury,但是,原生态的js其实更加的灵活和简化,不用加载巨大的jquery类库。而且其实现的
功能相对来说其实更加的复制。这里介绍几个最近我经常使用的js函数。
Js是一种由上到下逐行执行的语言,如果某一个地方出错,就会影响其下方的js代码不能执行,所以写js应该比较谨慎,一行行去写。Js也是有对象的概念,比
如我们写document.body,这个获取的结果就是一个对象。我们可以用
<script type=”text/javascript”>
var obj = document.body;
for(var i in obj){
alert(i+”=”+obj[i]);
}
</script>
在html body里面随便写一些标签和内容,然后直接浏览器打开,我们会看到弹出很多值,其中有几个比较重要的说一下。
1、children,一般情况下后面会是[object HTMLCollection],是个对象,表示其内部还有html标签(我们这样获取,都是对标签内部而已的),既然已经是对象,
如果再对他操作就不用再在其前面加document.了。
2、outerText,是本标签内所有的非html标签值,他会过滤掉所有的html标签。
3、outerHTML,是本标签(包括标签本身)所有的内容(包括html标签,就是原样输出,这里的原样,如果里面有用js加载写入的东西是获取不到的,他只能获取右
击查看源代码所能看到的!其实也是和他的js执行的顺序是有关的,如果你的获取在另个写入的js之前,肯定就获取不到,如果在其后,可能获得到,没验证)
4、innerText,和第2个效果是一样的,这里如果我们给其赋值=”<div>sfsdf</div>”,就能让本标签的内容改变结果为<div>sfsdf</div>,html标签不会被解析
5、innerHTML,和3差不多,但是他不包含标签本身,这里如果我们给其赋值=”<div>sfsdf</div>”,就能让本标签的内容改变,结果为sfsdf
6、hidden,隐藏属性,如果是false,就是不隐藏,如果是true,就是隐藏。
7、tabIndex,是本标签的层,我之前说过,html是三维的,这个值越大,层级就越靠前
8、childElementCount,其下级标签有几个
9、firstElementChild,这个是获取其内部的第一个标签,这个参数很有用
10、id,className获取id和class
11、scrollHeight、标签的高度(像素)
12、scrollWidth、标签的宽度(像素)
13、scrollTop、距离顶部的距离(像素)
14、style、一般也是一个object,他的样式,可以改变他的样式
15、tagName、标签的标识如BODY,DIV,A等等
16、parentElement、其父级标签,同理也是对象
还有很多很多,这几个是比较常用到的,很多参数有细微的差别,需要我们根据其解释二行实践来总结,基本上这些参数就能帮我们完成很多功能了。这里要声
明一点先,js改变的东西,无论是某个标签的内容,还是样式,还是说增加的东西,搜索引擎是搜不到的,因为搜索引擎不能识别js,所以,因为这个一点,我
们有的时候也就可以利用他做一些我们不希望搜索引擎搜到而又要展现给用户的东西。
再说几个js函数
1、

这个appendChild其实也是上面的一个参数,但是也可以叫他为函数,他的作用就是为当前一个对象(标签,以对象形式)内部增加一个标签,这个增加的标签我们是可以随便去定义的,当然定义的这个标签要用createElement来创建,并且给其附一些属性值即可。上面就是创建了一个js链接标签。同样我们也可以创建一个div等等。
2、document.body.insertBefore(divObj,first);这个函数是对当前标签下面的一个标签之前增加一个标签,这个函数的好处就是可以指定任意位置的标签前来增加新标签了。里面的两个参数当然也是一个对象了。比如和前面的createElement结合,先创建一个div标签的对象d1,然后可以再获取一下body下的第一个标签,f1 = document.body.firstElementChild,那么执行document.body.insertBefore(d1,f1);就将这个新建的div插入到了body的最开始位置,如果你要在某个div里面插入,一定要注意insertBefore前要是这个标签的对象。
其实这个创建标签的功能,我们也可以用上面的innerHTML等来做,比如先获取下远标签内容innerHTML,然后可以用innerHTML = ‘div’+obj.innerHTML来做。
总结:这些函数的大小写一定要注意,必须一致,还有就是上面的这些参数或函数我是在谷歌浏览器上测试的,有的参数可能在ie下为另一个,比如firstElementChild,在ie上面是firstChild,随意用这样的功能最好是要加一个浏览器版本的判断控制语句,这里有个非常简单的。

 

这是我自己总结的一点,觉得js和php结合使用是可以做很多比较有意思的功能的。编程其实就那么简单!

本文链接:http://www.521php.com/archives/1146/

程序本天成,妙手偶得之!我们只是代码的搬运工!

转载请注明:http://www.521php.com/archives/1146/

发表评论

昵称:

网址:

eg.博客主题调用的是Gravatar头像,你可以通过邮箱注册获得头像.
/ 快捷键:Ctrl+Enter