JS学习笔记(一)

最新推荐文章于 2016-10-16 12:13:19 发布

灵熙兔

最新推荐文章于 2016-10-16 12:13:19 发布

阅读量429

点赞数

分类专栏：【JavaScript】文章标签： JS-学习笔记

本文链接：https://blog.csdn.net/qq_25178609/article/details/50917388

版权

【JavaScript】专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Window对象方法：
这里写图片描述
1. document.getElementById 获取元素的方法一
语法：oElement = document .getElementById ( sID )
参数：sID――必选项。字符串 (String) 。
返回值：oElemen――对象 (Element) 。
说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回 null 。
注意： document.getElementById(” “) 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！是第一个JS兼容性问题
2. document 对象属性
document.title //设置文档标题等价于HTML的标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie

---------------------------------------------------------------------
对象方法
document.write()                  //动态向页面写入内容
document.createElement(Tag)       //创建一个html标签对象
document.getElementById(ID)       //获得指定ID值的对象
document.getElementsByName(Name)  //获得指定Name值的对象

3. link标签
作用1：定义文档与外部资源的关系
作用2：链接样式表
链接外部样式表实例：

JS动态修改CSS样式
getElementById获取的对象obj，通过”.“ 修改样式（第一种操作属性的方法，第二种是[‘属性/字符串’], 或者[参数])，HTML里怎么写，JS里怎么写。但是有一个例外：className
也就是，div里id类名为class，函数里应该写obj.className=”“;
```
另一个实例：
```
用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：

第一步：在连接样式表的元素里定义一个id,例如

我定义的id是css。

第二步：写一个js函数，代码如下：

    <script type="text/javascript"> 
        function change(a){ 
            var css=document.getElementById("css"); 
            if (a==1) 
                css.setAttribute("href","1.css"); 
            if (a==2) 
                css.setAttribute("href","2.css"); 
                } 
    </script>

这个函数的code可以放在页面的任何地方。

第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下： 
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a> 
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者
可以选择一个字体较大的样式表。这里需要注意的两点是： 
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。 
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%

5.函数传参：定不下来的时候
实例（一个参数)：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参</title>
    <style>
        #div1 {width:200px; height:200px;background:#a8eec6;}
    </style>
    <script>
        function changeColor(color){
            var oDiv=document.getElementById('div1');
            oDiv.style.background=color;
        }
    </script>
</head>
<body>
             <input type="button" value="tored" onclick="changeColor('red')"/>
             <input type="button" value="toblue" onclick="changeColor('blue')"/>
             <input type="button" value="togreen" onclick="changeColor('green')"/>
     <div id="div1">
         文本区域
     </div>
</body>
</html>

两个参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参</title>
    <style>
        #div1 {width:200px; height:200px;background:#a8eec6;}
    </style>
    <script>
    function setStyle(name,value)
        {
            var oDiv = document.getElementById('div1');
            /oDiv.style.name="value";不能这么写，计算机不识别/
            oDiv.style[name] = value;
        }
    </script>
</head>
    <body>
            <input type="button" value="toWidth" onclick="setStyle('width','400px')"/>
            <input type="button" value="toHeight" onclick="setStyle('height','400px')"/>
            <input type="button" value="toGreen" onclick="setStyle('background','green')"/>
        <div id="div1">
            文本区域
        </div>
    </body>
</html>

6.关于样式优先级：

行间样式style>id#>class.>html标签
CSS样式可以有很多种选择器形式，它们的权重可以用四位数字 X X X X 来表示。
首先，HTML元素的内联样式权重最高，可以用 1 0 0 0 来表示；
其次，ID选择器的样式权重次之，可以用 0 1 0 0 来表示；
第三，类选择器、属性选择器、伪类选择器，可以用 0 0 1 0 来表示；
第四，HTML元素选择器、伪元素选择器权重最低，可以用 0 0 0 1 来表示；
第五，通配符选择器，权重完全为0，对权重无贡献，可以用 0 0 0 0 来表示。

7.function（）行为样式结构相分离

 Web标准由一系列标准组合而成，其核心理念就是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。
 结构标准包括XML标准、XHTML标准、HTML标准；样式标准主要是指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
 一个符合标准的网页，标签中的标签名应该全部都是小写的，属性要加上引号，样式和行为不再夹杂在标签中，而应该分别单独存放在样式文件
 和脚本文件中。理想状态下，网页源代码由三部分组成：.html文件、.css文件和.js文件。标签中混有样式和行为的写法是不推荐的。
 常用到一个函数：window.onload是页面加载完成的时候才发生
 a.在JS语句调用 ：

   <script type="text/javascript"> 
        function func(){……} 
            window.onload=func; 
    </script>

b.同时调用多个函数 直接写到html的body标签里面,如：

    <html> 
        <body onload="func1();func2();func3();"> 
        </body> 
    </html>

c.js调用多个函数,以下这种调用方式可以用于不太复杂的JS程序中，如果程序函数很多，逻辑比较复杂，可以考虑用第四种方式。

    <script type="text/javascript"> 
        function func1(){……} 
        function func2(){……} 
        function func3(){……} 
        window.onload=function(){ 
        func1(); 
        func2(); 
        func3(); } 
    </script>

d.JS自定义函数式多次调用

    <script type="text/javascript"> 
        function func1(){……} 
        function func2(){……} 
        function func3(){……} 
        function addLoadEvent(func){ 
        var oldonload=window.onload; 
        if(typeof window.onload!="function"){ 
        window.onload=func;
        } 
        else{ 
        window.onload=function(){ 
            oldonload(); 
            func();} 
        } 
        } 
    addLoadEvent(func1); 
    addLoadEvent(func2); 
    addLoadEvent(func3); 
    </script>

8.getElementsByTagName

    <script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');
            aDiv[0].style.background='red';
        }
    </script>

9.循环

一般包括四部分：初始化，条件，语句，自增
for循环： for（var i=0，i<5,i++）{语句}
实例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width:200px;height:200px;float:left;
            border: 1px solid black;margin:10px;}
    </style>
    <script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');

            for (var i=0;i<aDiv.length;i++){
                aDiv[i].style.background='red';
            }
        }
    </script>
</head>
<body>
    <div>a </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

10.this
表示当前选中的对象，如选项卡小程序

<script>
        window.onload= function(){
              var oDiv=document.getElementById('div1');
              var aBtn=oDiv.getElementsByTagName('input');
              var aDiv=oDiv.getElementsByTagName('div');
            for (var i=0;i<aBtn.length;i++)
            {
                 aBtn[i].index=i;
                 aBtn[i].onclick=function()
                 {
                     //先让所有的按钮变为常态
                     for(var j=0;j<aBtn.length;j++)
                     {
                         aBtn[j].className='';
                         aDiv[j].style.display='none';
                     }
                     //再让按钮选中，并显示对应DIV
                    this.className='active';
                     aDiv[this.index].style.display='block';
                 }
            }
        }
    </script>

11.innerHTML
用来设置或获取位于对象起始和结束标签内的HTML。可以是文字，也可以是html代码

<script>
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn1=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn1.onclick=function(){
                oDiv.innerHTML=oTxt.value;
            }
        }
    </script>

灵熙兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记(一)

Window对象方法： 1. document.getElementById 获取元素的方法一语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。返回值：oElemen――对象 (Element) 。说明：根据指定的 id 属性值得
复制链接

扫一扫