CSS与JavaScript小结

一、css

全称Cascading Style Sheets,层叠样式表，具体的作用是美化页面，让页面中显得更加美观。

1、使用方式

在HTML页面中有三个地方可以使用，分别是标签内，头部标签中以及在HTML中声明，然后用src连接外部，注意在使用的时候三种方法可以同时使用，遵循就近原则，受那个近就受谁的控制。

2、具体操作

1）在具体的标签里面，比如p段落标签，直接写到p之中：

<p style = "color:red">
    
</p>

2）在头部标签中，声明方式如下：

<head>
    <style type = "text/css">
        p{
            color:pink;
            font-size:40px;
        }
    </style>
</head>

注：本段是直接设置所有的属性，此外也可以通过其他方式来进行设置，比如根据具体的class属性来对其进行设置，使用方式是.class{}，也可通过id来设置，使用方式是#id{}，具体使用方式如下：

.c_g{
    background-color = black;
}
#23{
    background-color = pink;
}

3）除了上述两种方式之外，还可以有第三中声明方式，也就是写一个单独的css文件，然后再HTML中与其连接的方式，其格式为<link type = "text/css" href = "外部css文件" rel = "stylesheet">,其中rel属性表示自己连接的是一个样式表，link表示连接，href表示地址。

示例如下：

<link type = "text/css" href = "demo.css" rel= "stylesheet">

二、javascript

1、引入&概念

如果html+css已经是一个成型的美女，那么JavaScript的作用就在于你找她要微信的时候她就会给你，也就是说，再HTML这个本地操作中加入了交互方式，我们可以在本地就进行一些动作，而不是完全依赖服务器端。

2、使用方式（插入方式，具体位置）

其实JavaScript的使用方式与css并无太大差别，只不过也有些区别，那就是JavaScript也可以使用在body中，不过在使用时应注意一点，如果不使用window.onload 事件的话，如果所需标签还没加载，则javascript语句找不到相应的属性，代码也就不会按照预期的执行。

1）在标签的具体语句中,这个用的比较少，就写一个简单的，用到了再查

<button onclick="alert('hello');">
    按钮
</button>

注：此方法耦合程度高，不适合实际编程使用。

2) 同css，只不过可以再body中使用，使用时应以<script>开始，使用</script>结束，具体的功能写在中间，具体如下：

<head>
     <script>
        var show = function(){
            alert("in unnamed function()")
        }
     </script>   
</head>

注意在此处并没有用window.onload，这是因为本功能无需加载完当前所有页面才可以运行。

3) 在外部文件写JavaScript代码，并在HTML文件中声明连接的方式建立，也是我最喜欢的一种方式。

举例（onchange）：

<head>
    <script type= "text/javascript" src = "demo.js">
        再这里的代码不会执行，因为与css不同，只可以由最大的指定，最小的无论写什么都不会执行。
    </script>
</head>

window.onload = function(){
    var text = document.getElementById("name");
    text.onchange = function(){
        var textValue = document.getElementById("name").value;
        //也可以 var textValue = text.value;
        if(value == "tom"){
            alert("unable to use");
        }else{
            alert("able to use");
        }
    }
}

3、基本语法

（1）变量（基本类型变量，五种）

变量在JavaScript中没有明确的类型，一个变量在赋予某个值之后后续也可以转化为其他类型的变量

number :数字，注意此处数字与其他类型的进行运算的话值是Nan

string:字符串

boolean:true || false

null: 空值

undefined: 未定义

（2）运算符

加减乘除，三步运算符等等

（3）循环、分支、判断结构

while(),if else 结构，switch case结构，for循环。

（4）数组

注：在javascript中数组更像是Java中的List，长度可变，可以存入多个不同类型的值，自动加长。就算原本长度是2，写一个arr[5] = 1;他也会自动延长到6，再把中间那个值给填上。。。。

（5）函数

a、声明方式（两种，与Java比较)

两种方式，一种是类似于c语言的写法，function 开头，方法名在其后，括号中是参数组。具体写法如下：

function method1（i，j）{

    return i+j;

    //所有函数在声明的时候都不写返回值，不管其有没有，这跟JavaScript语言中函数的具体使用方法有关

}

第二种是匿名function的方式：

var method2 = function(arg){

    alert(arg);

}

b、使用（重点：参数）

在任意一个函数中，参数都可以多传，类似于Java中的变长参数组Object ... objs，全部参数都存在arguements数组中，可以在方法体中进行查看。没传参数也不报错，只不过里面的类型是undefined

（6）对象

a、声明方式（两种，与Java比较，在具体的方法比较：重写重载，返回值）

同样有两种方式，方式一，new object();

var obj = new object();

obj.name = "cup";

obj.color = "red";

obj.display = function(){

    alert("i'm"+this.name+",my color is "+this.color);

}

方法二，json格式：

var obj2 = {

    name:"car",

    age:2,

    display:function(){

        alert("i'm a car");

    }

}

注意区别就是用json这种格式的话，属性用：来赋值，中间都不要有空格，属性与属性，属性与方法之间用逗号隔开。

b、使用方式（自己遇到的坑）

方法使用跟c语言没什么区别，调用就完事了，有返回值别忘赋值给其他值。在这里遇到一个小坑，就是用对象里面的方法在用onclick的时候调不出来，单独用的可以的，很奇怪。

除此之外还有比较重要的一点需要说，就是跟事件的联系，事件的触发跟函数绑定时，不要写函数的（），这样写，事件触发的时候，函数才会被执行。

问题:函数有参数的时候怎么办呢？

4、事件

（1）概念

发生了某件事，叫事件。

（2）常用事件及举例

onclick：点击

onchange:点击且失去焦点

onload:所有的都加载完

onsubmit:提交验证

onblur:失去对焦的时候发生

使用这些都是对于某个对象来说的，onload就是window的事件，其他事件使用方式如下：

var button = document.getElementById("btn");

button.onclick = function(){

    alter("button is down");

}

也就是说要先获取到某个具体的标签（元素），再在此元素触发的时候进行操作。

5、DOM

（1）DOM标准

Document Object Model ,这是一种把文件看成对象的方法，上面的事件使用就用到了这张方法。

（2）DOM树

（3）document对象的概念

document对象是window对象的一个属性，代表了整个html文档，将整个文档抽象成为了document对象。

（4）查API

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	一个具体的元素节点
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组

建议使用顺序：先使用id查找。如果没有id的情况下，考虑使用name进行查找。

如果id，和name属性都没有，最后使用标签名tag查找。

后面的还没讲到，暂且整理到这里。

（5）增删改API

我是福尔斯甘，如果对本篇有疑问，或者发现有什么错误之处，欢迎提出指出，觉得评论不方便的话，本人邮箱是96532354@qq.com，qq同号，欢迎共同学习讨论问题，
谢谢大家支持~~