html、css、js

2019-01-22 本文已影响0人丫甘九

css的选择器

选择器：他要对哪个标签里面的样式进行操作

基本选择器

（1）标签选择器
使用标签名作为选择器的全称

div{
border:1px;
}

(2)class选择器
每个html标签都有的一个属性 class

<style type = "text/css">
div.haha{
border:1px;
}
.hehe{
border:2px;
}
/*当同一种样式要添加到不同的标签中，但是这个标签中的class属性一样，
则可以使用.hehe这种形式*/
<body>
<div class = "haha">举头望明月，低头思故乡</div>
<div class = "hehe">锄禾日当午，汗滴禾下土</p>
<p class = "hehe">黄河之水天上来</p>
</body>

（3）id选择器
每个html标签上面都有一个属性 id

js的简介

js

是基于对象和时间爱你驱动的语言，应用于客户端

基于对象：提供了很多对象，可以直接拿过来使用
事件驱动：html做静态网页，js做动态网页
客户端：专门指的是浏览器（js在浏览器里面运行）

js的特点

（1）交互性

信息的动态互动
（2）安全性
js不能访问本地磁盘文件
（3）跨平台性
java里面跨平台性虚拟机
只有能够支持js的浏览器，都可以运行

js与java的区别（二者无任何关系）

（1）java是sun公司开发的，js是网景公司开发的
（2）js是基于对象，java是面向对象
（3）java是强类型语言，js是弱类型语言

例如java中 int i = “10”；错误
js中 int i = 10; int m = "10";正确
（4）js只需要解析就可以执行，而java需要先编译成字节码文件，再执行

js的组成

三部分组成
（1）ECMAScript

ECMA:欧洲计算机协会
由ECMA组织指定的js的语法，语句.....
（2）BOM
broswer object modle:浏览器对象模型
（3）DOM
document object modle：文档对象模型

js与html结合的方式

第一种

使用一个标签
<script type = ""text/javascript> js代码 </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type = text/javascript>
    //向页面弹出一个框，显示内容
    alert("aaaaa");

</script>
</body>
</html>

image.png

第二种

使用script标签，引入一个外部的js代码
-创建一个js文件，写js代码
<script type = ""text/javascript src = "1.js"></script>
使用第二种方法的时候，就不要在script标签里面写js代码了，写了也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type = text/javascript src="jiehe.js"></script>
</body>

//向页面弹出一个框，显示内容
alert("bbbbb");

UQF(@SB8(OW7})QU})}6$`I.png

js的原始类型

string : 字符型
var str = "abc";
number：数字型
var number = 123;
boolean : true或false
var flge = true；
null
undifined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type = text/javascript">
    //定义一个字符型
    var str = "abc";
    //向页面弹出一个框，显示内容
    alert("str");

   //定义一个数字
    var num = 123;
    //向页面弹出一个框，显示内容
    alert("num");

    //定义一个boolean类型
    var flge = true;
    //向页面弹出一个框，显示内容
    alert("flge");

</script>
</body>
</html>

js的语句

js的全局变量和局部变量

全局变量
在script标签里面，定义一个变量，这个变量在页面js部分都可以使用
在方法外部使用，在方法内部使用，在另外一个script标签里使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var aa = 10;
        alert("在方法外部调用aa"+aa);
        //定义一个方法
        function text1() {
            alert("在方法内部调用aa"+aa);
        }
        text1();

    </script>
<script type="text/javascript">
    alert("在另外一个script标签使用"+aa);/*error*/

    </script>

</body>
</html>s'

局部变量
在方法内部定义一个变量，只能在方法内部使用
如果在方法的外部调用这个变量，提示出错
ie自带一个调式工具，ie8及以上版本中，键盘上的 F12，在页面下方出现一个条，里面有一个控制台。可以报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function text11() {
        var bb = 20;
        alert("在方法内部"+bb);
    }
    text11();
    alert("在方法外部"+bb)
    </script>

</body>
</html>

script标签应该放的位置

建议把script放在</body>的后面
现在如果有这样一个需求：
在js里面获取input里面的值，如果把script标签放在head里面
会出现问题
html解析是从上到下解析的，script标签放到的是head里面的，直接在里面获取input的值，
因为页面还没有解析到input那一行，肯定取不到

js的String对象

如何来创建一个string对象

var str = "abc";

方法和属性

属性 length

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //length的属性
    var str = "abcde";//定义一个字符串
    document.write(str.length);//向页面直接输出内容
    </script>

</body>
</html>

方法
（1）与html相关的方法（设置数据样式的方法）
bold()方法加粗
fontcolor()方法设置字体的颜色
fontsize()方法设置字体的大小
link()方法将字符显示成超链接
sub()和sup()方法上标和下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //length的属性
    var str = "abcde";
    document.write(str.length);

    //bold方法
    var str1 = "asdf";
    document.write("<hr/>");
    document.write(str1.bold());

    //fontcolor方法
    var str2 = "www";
    document.write("<hr/>");
    document.write(str2.fontcolor("red"));

    //fontsize方法
    var str3 = "sssss";
    document.write("<hr/>");
    document.write(str3.fontsize(7));

    //link方法
    var str4 = "我是链接";
    document.write("<hr/>");
    document.write(str4.link("bianliang.html"));

    //link方法
    document.write("<hr/>");
    var s5 = "100";
    var s6 = "200";
    var s7 = "300";
    document.write(s5.sub());
    document.write(s6);
    document.write(s7.sup());
    </script>

</body>
</html>

image.png
注：图片第一行为属性length的显示

（2）与java相似的方法（与java中很类似的方法）

concat() 连接字符串
charAt() 返回指定位置的字符串
indexOf() 返回字符串的位置
split() 且范儿呢字符串成数组
replace() 替换字符串
substr()和substring() 截取字符串
注：具体不同在代码中注释体现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //concat方法 连接字符串
    var str1 = "abc";
    var str2 = "dfg";
    document.write(str1.concat(str2));

    //charAt()方法 获取指定位置的字符串
    document.write("<hr/>");
    var str3 = "abcdefg";
    document.write(str3.charAt(5));

    //indexOf()方法 获取指定字符的位置
    document.write("<hr/>");
    var str4 = "qwerty";
    document.write(str4.indexOf("r"));//字符不从在，则返回-1

    //replace()方法 用指定字符代替指定字符
    document.write("<hr/>");
    var str5 = "sdfgh";
    document.write(str5.replace("s","E"));

    //split方法 以指定字符作为分隔符获取字符串 切分字符串成数组
    document.write("<hr/>");
    var str6 = "a-b-c-d";
    var arr1 = str6.split("-");
    document.write("length: "+arr1.length);

    //substr()和substring() 获取从指定下标位置的字符到指定位置下标位置的字符串
    document.write("<hr/>");
    var str7 = "abcdefghijklmn";
    //从第几位开始向后截取几位字符
    document.write(str7.substr(5,3));//从第五位开始向后截取三位字符
    document.write("<hr/>");
    //从第几位开始到第几位结束，不包括最后一位
    document.write(str7.substring(5,3));
//【5,3） 从第五位开始到第三位结束，不包括第三位
    </script>

</body>
</html>

Snipaste_2019-03-11_20-44-18.png

js的array对象

创建数组（三种）

var arr1 = [1,2,3];
var arr2 = new Array(3); 长度是三
var arr3 = new Array(1,2,3); 数组中的元素是123
var arr4 = []; //创建一个空数组

属性

length 查看数组的长度

方法

concat()方法数组的连接
join（）方法根据指定的字符分割数组
push（）向数组末尾添加元素,返回数组的新的长度
如果添加的是一个数组，这个时候把数组当成一个整体字符串加进去
pop（）表示删除最后一个元素，返回删除的那个元素
reverse（）颠倒数组中元素的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
 //length属性
    var  arr1 = [1,2.3];
    document.write(arr1.length);

    //concat()方法
    document.write("<hr/>");
    var arr2 = [1,2,3];
    var arr3 = [4,5,6];
    document.write(arr2.concat(arr3));

    //join()方法
    document.write("<hr/>");
    var arr4 = new Array(3);
    arr4[0] = "a";
    arr4[1] = "b";
    arr4[2] = "c";
    document.write(arr4);
    document.write("<hr/>");
    document.write(arr4.join("-"));

    //push()方法
 document.write("<hr/>");
 var arr5= new Array(3);
 arr5[0] = "张美丽";
 arr5[1] = "李美丽";
 arr5[2] = "韩美丽";
 document.write("old array:"+arr5);
 document.write("<hr/>");
 document.write("old length:"+arr5.length);
 document.write("<hr/>");
 document.write("new length:"+arr5.push("王漂亮"));
 document.write("<hr/>");
 document.write("new array:"+arr5);


 document.write("<hr/>");
 var arr6 = ["aaa","bbb","ccc"];
 var arr7 = ["www","qqq"];
 document.write("old array:"+arr6);
 document.write("<hr/>");
 document.write("old length:"+arr6.length);
 document.write("<hr/>");
 document.write("new length:"+arr6.push(arr7));
 document.write("<hr/>");
 document.write("new array:"+arr6);
 for(var i=0;i<arr6.length;i++){
alert(arr6[i]);
 }

 //pop方法
 document.write("<hr/>");
 var arr8 = ["zhangsan","lisi","wangmazi","caidonghao"];
 document.write("old array:"+arr8);
 document.write("<hr/>");
 document.write("return:"+arr8.pop());
 document.write("<hr/>");
 document.write("new array:"+arr8);

 //reverse()方法
 document.write("<hr/>");
 var arr9 = ["zhangsan","lisi","wangmazi","caidonghao"];
 document.write("old array:"+arr8);
 document.write("<hr/>");
 document.write("new array:"+arr8.reverse());









</script>

</body>
</html>

image.png

js的Date对象

js里面获取当前的时间

var data = new Data();

获取当前的年方法

getFullYear()

获取当前的月方法

getMonth()
注:返回的是0-11月，如果想要得到准确的值，加一

获取当前的星期方法

getDay()

获取当前的日

getData()

获取当前的小时

getHours()

获取当前的分钟

getMinutes()

获取当前的秒

getSeconds()

获取毫秒数

getTime()
注：返回的是1977 1 1至今的毫秒数
应用场景：使用毫秒数处理缓从的效果（不有缓从）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //获取当前时间
    var data = new Data();
    document.write(data);
    //转换成习惯的格式
    document.write("<hr/>");
    document.write(data.toLocaleString());
    //获取当前的年
    document.write("<hr/>");
    document.write("Year:"+data.getFullYear());
    //获取当前的月
    document.write("<hr/>");
    var data1 = data.getMonth()+1;
    document.write("Mouth:"+data1);
    //获取当前的星期
    document.write("<hr/>");
    document.write("Week:"+data.getDay());
    //获取当前的天
    document.write("<hr/>");
    document.write("Day:"+data.getDate());
    //获取当前的小时
    document.write("<hr/>");
    var data1 = data.getHours();
    document.write("Hours:"+data);
    //获取当前的分钟
    document.write("<hr/>");
    document.write("Minutes:"+data.getMinutes());
    //获取当前的秒
    document.write("<hr/>");
    document.write("Seconds:"+data.getSeconds());
    //获取当前的毫秒秒
    document.write("<hr/>");
    document.write("Time:"+data.getTime());
</script>
</body>
</html>

js的Math对象

数学的运算
里面都是静态方法，使用可以直接使用

ceil(m):向上舍入
floor(m):向上舍入
round(m):四舍五入
random(m):得到随机数
注：得到0-1的随机数
得到0-9的随机数
Math.random()10
Math.floor(Math.random()10);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var mm = 10.7;
    document.write("old:"+mm);
    document.write("<hr/>");
    document.write("ceil:"+Math.ceil(mm));

    document.write("<hr/>");
    document.write("floor:"+Math.floor(mm));

    document.write("<hr/>");
    document.write("round:"+Math.round(mm));

    document.write("<hr/>");
    document.write("random:"+Math.random(mm));

    document.write("<hr/>");
    document.write("random:"+Math.floor(Math.random(mm)));
</script>
</body>
</html>

image.png

js的全局变量

由于不属于任何一个对象，直接写名称就可以使用

eval():执行js代码，（如果字符是一个js代码，使用方法直接执行）
encodeURI():对字符进行编码
encodeURI()：对字符进行解码
encodeURIComponent()和decodeURIComponent()
-isNaN():判断当前字符串是否为数字
如果是数字，返回false
如果不是数字，返回true
parseInt（）：类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
//eval方法
    var str = "alert('1234');";
    eval(str);

    // encodeURI()
    document.write("<hr/>");
    var str1 = "测试中文aaa1234";
    var encode1 = encodeURI(str1);
    document.write(encode1);

document.write("<hr/>");
var decode1 = encodeURI(str1);
document.write(decode1);

//isNaN（）方法 返回true或者false
   document.write("<hr/>");
   var str2 = "aaaaa";
   alert(isNaN(str2));

   //parseInt()
document.write("<hr/>");
var str3 = "123";
document.write(parseInt(str3)+1);
</script>
</body>
</html>

image.png

html、css、js

css的选择器

选择器：他要对哪个标签里面的样式进行操作

基本选择器

js的简介

js

js的特点

js与java的区别（二者无任何关系）

js的组成

js与html结合的方式

js的原始类型

js的语句

js的全局变量和局部变量

script标签应该放的位置

js的String对象

如何来创建一个string对象

方法和属性

js的array对象

创建数组（三种）

属性

方法

js的Date对象

js里面获取当前的时间

获取当前的年方法

获取当前的月方法

获取当前的星期方法

获取当前的日

获取当前的小时

获取当前的分钟

获取当前的秒

获取毫秒数

js的Math对象

js的全局变量

猜你喜欢

热点阅读