CSS与JavaScript小结
Posted jenny2019
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于CSS与JavaScript小结的主要内容，如果未能解决你的问题，请参考以下文章