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小结的主要内容,如果未能解决你的问题,请参考以下文章

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发

炫酷 CSS 背景效果的 10 个代码片段

48个值得掌握的JavaScript代码片段(上)

JavaScript 代码片段

Vue学习之动画小结

正则表达式学习小结