首页 前端知识 CSS及javascript

CSS及javascript

2024-09-09 00:09:11 前端知识 前端哥 221 103 我要收藏

一、CSS简介

css是一门语言,用于控制网页的表现。

cascading style sheet:层叠样式表

二、css的导入方式

css代码与html代码的结合方式

(1)css导入html有三种方式:

1.内联样式:<div style="color:red">...</div>

2.内部样式:<style type="text/css"> div{}

3.外部样式:定义link标签,引入外部css文件

(2)css的选择器与属性

1.css选择器即选择需要设置样式的元素(标签)注意:将style写入<head>中。

元素选择器

id选择器

类选择器

谁选择的范围小,谁先生效。

2.属性

案例:

三、JavaScript简介

javascript是一门跨平台,面向对象的脚本语言(不用编译),可与网页交互。

javascript能改变html的内容。

JavaScript能改变图像的src属性值。

javascript能进行表单验证。

四、JavaScript引入方式

1.内部脚本:<script>标签可以放置于任何地方,数量也不受限制。但一般放置于<body>中。将JS代码定义在HTML中。alert()==》弹出警告框

2.外部脚本:创文件,写alert()

导入html中,<script src="..."></script>

五、JavaScript的基本语法

(1)书写语法:

区分大小写

分号写不写都无所谓,但一般情况下写

注释://表示单行注释,/*...*/表示多行注释

大括号表示代码块

(2)输出语句:

使用window.alert("");写入警告框

使用document.write()写入HTML页面里输出

使用console.log()写入浏览器控制台

(3)变量

类似于全局变量,可重复定义。

用var关键字来声明变量,变量可以存储不同类型的值

let只在代码块中有效,不可重复声明。

(4)数据类型

原始:number,String,boolean,null,undefined

引用

使用typeof运算符可获取数据类型

(5)运算符

一元运算符:++,--

算术运算符:+,-,*,/,%

赋值运算符:+=,-=,*=,/=,%=

关系运算符:>,<,>=,<=,!=,==(会类型转换),===(全等于,判断类型是否一样)

逻辑运算符:&&,||,!

三元运算符:条件表达式?true_value:false_value

(6)类型转换:

1.其他类型转为number

        String--》number

用parseInt(eg.alert(parseInt(str)))

string的字面值不是数字,则转换成NAN。

        boolean--》number

true转成1,false转成0.不能用parseInt

2.其他类型转为boolean

    number:0和NAN转成false

        其他数字转成true

    string:空字符串转成false

        其他则转成true

    null:false

    undefined:false

str!=null&&str.length>0        =str

(7)流程控制语句

if,switch,for(建议用let),while,do...while

(8)函数(方法)

funtion        名(参数1,参数2[可传任意个参数]){

return ...;

}

直接调用名();

六、JavaScript对象

(1)Array(类似于java中的集合)

1. var 名=new Array(元素列表);

2.var 名=[        ];

Array对象的属性:length:元素的个数

方法:push:添加

eg.名.push();

splice:删除元素

eg.名.splice(m,n);从m开始删,删n个元素

(2)String

1.var 名=new String();

2.var 名=“ ”;

属性:length,不再是Java中的方法了

方法:charAt(),Indexof(),trim()--》去除字符串两端的空格

(3)自定义对象

var 名={

属性名:值,

属性名:值,

属性名:值...

属性名:function(){

        }

};

(4)BOM对象

Brouser object Model(浏览器对象模型)

JavaScript将浏览器的各个部分封装成对象。

1.window:窗口对象

方法:alert();

confirm();弹出确定,取消键,有返回值。

定时器:setTimeout(function(){},毫秒值)只执行一次

setInterval() 循环执行

2.History:历史记录对象

history.方法()

方法:back():前一个

forward():后一个

3.Location:地址栏对象

location.方法()

属性:设置或返回完整的URL

(5)DOM(Document Object Model)文档对象模型

可对Html文档进行操作

Html DOM:针对html文档的标准模型

image:<img>

Button:<input type="button">

1.获取Element元素对象

使用document对象的方法来获取

        getElementById()通过id属性来获取,返回一个Element对象

        getElementByName()通过name属性来获取,返回一个对象数组

        getElementByclassName()通过class属性来获取一个Element对象数组

        getElementBytagName()通过标签名称,获取一个对象数组

Dom将img封装成对象,可以修改src属性值。

div:style:设置元素css的样式

        innerHtml:设置元素内容

元素.style.color="...";返回元素的样式

input中的checkbox多选:可以改变是否被选择

对象.checked=true|false;

eg.document.getElementById("check1").checked=true;

(6)事件监听

JavaScript能够在事件被监测时执行代码

事件即发生在元素上的事情

1.事件绑定方式

第一种方法不建议,JavaScript代码与HTML代码耦合

2.常见的事件(DOM event)

onblur:失去焦点

onfocus:获得焦点

onchange:域的内容被改变

onsubmit:返回true,表单被提交

                  返回false,表单不被提交

七、正则表达式

1.定义:直接量:注意不要加引号

var reg=/^\w{6,12}$/

创建regexp对象:

var reg=new regexp("^\\w{6,12}$")

2.方法:测试给定的字符串是否符合规则

返回true或false,eg.reg.test(str)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17953.html
标签
评论
发布的文章

Qt构建JSON及解析JSON

2024-09-29 22:09:49

NPM:配置阿里镜像库

2024-09-29 22:09:46

npm版本切换工具nvm

2024-09-29 22:09:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!