标签:可变 raw 验证 property int 返回值 遇到 结构 comment
全称Cascading Style Sheets,层叠样式表,具体的作用是美化页面,让页面中显得更加美观。
在HTML页面中有三个地方可以使用,分别是标签内,头部标签中以及在HTML中声明,然后用src连接外部,注意在使用的时候三种方法可以同时使用,遵循就近原则,受那个近就受谁的控制。
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">
如果html+css已经是一个成型的美女,那么JavaScript的作用就在于你找她要微信的时候她就会给你,也就是说,再HTML这个本地操作中加入了交互方式,我们可以在本地就进行一些动作,而不是完全依赖服务器端。
其实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");
}
}
}
?
变量在JavaScript中没有明确的类型,一个变量在赋予某个值之后后续也可以转化为其他类型的变量
number :数字,注意此处数字与其他类型的进行运算的话值是Nan
string:字符串
boolean:true || false
null: 空值
undefined: 未定义
加减乘除,三步运算符等等
while(),if else 结构,switch case结构,for循环。
注:在javascript中数组更像是Java中的List,长度可变,可以存入多个不同类型的值,自动加长。就算原本长度是2,写一个arr[5] = 1;他也会自动延长到6,再把中间那个值给填上。。。。
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
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的时候调不出来,单独用的可以的,很奇怪。
除此之外还有比较重要的一点需要说,就是跟事件的联系,事件的触发跟函数绑定时,不要写函数的(),这样写,事件触发的时候,函数才会被执行。
问题:函数有参数的时候怎么办呢?
(1)概念
发生了某件事,叫事件。
(2)常用事件及举例
onclick:点击
onchange:点击且失去焦点
onload:所有的都加载完
onsubmit:提交验证
onblur:失去对焦的时候发生
使用这些都是对于某个对象来说的,onload就是window的事件,其他事件使用方式如下:
var button = document.getElementById("btn"); button.onclick = function(){ alter("button is down"); }
也就是说要先获取到某个具体的标签(元素),再在此元素触发的时候进行操作。
(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
标签:可变 raw 验证 property int 返回值 遇到 结构 comment
原文地址:https://www.cnblogs.com/jenny2019/p/11824118.html