jsday03(css回顾 js开始基本变量 js头的一些标签函数操作方式基本语法)

来源：互联网发布：初识seo ppt 编辑：程序博客网时间：2024/06/06 01:34

css层叠样式表
将网页中的样式分离出来完全由css来控制
增强样式的复用性以及可扩展性
选择器（属性名:属性值;属性名:属性值…）
CSS和html代码相结合的四种方式
1、每一个html标签都有一个style属性
2、当页面有多个标签有相同样式时可以进行复用

<style>css代码</style>

3、当有多个页面中的标签的样式相同时还可以将样式单独封装成一个css文件通过在每个页面定义

<style>@import url("1.css");</style>

4、通过html中head标签中的link标签链接一个css文件

<link rel="stylesheet" href="1.css"/>

为了提高相同样式的复用性以及可扩展性可以将多个标签样式进行单独的定义并封装成css文件在一个css中使用 css的import将多个标签样式文件导入然后在html页面上使用link标签导入这个总的css文件即可
1、css
@import url(“b.css”);
@import url(“div.css”)；

<link rel="stylesheet" href="1.css"/>

加载原则是越近越优先

选择器其实就是样式要作用的标签容器
当样式分离后 html作用在于用标签封装数据然后将css加载到指定标签上

选择器的基本分类
1、标签选择器其实就是html中的每一个标签名
2、类选择器其实就是每一个标签中的class属性用.的形式表示
只用来给css所使用可以对不同标签进行相同样式设定
3、ID选择器其实就是每一个标签中的ID属性但是要保证ID的唯一性 ID 用#来标识不仅可以被css所使用还可以被javascript所使用
选择器优先级 ID>CLass>标签
扩展选择器
1、关联选择器其实就是对标签中的标签进行样式定义选择器选择器 …
2、组合选择器对多个选择器进行相同样式定义将多个选择器通过逗号隔开的形式
3、伪元素选择器其实就是元素的一种状态

<style type="text/css">.a{    background-color:#060;    }.z{    background-color:#9C0;    }.z b{background-color:#C99}.z,p ba:link,a:visited{    color:#F60 ;    text-decoration:blink;    }</style></head><body><a href="#" onclick="alert('hhh')">没有默认效果的超链接</a><div class="z">额<b >为</b>我呜呜呜呜</div><p>喂喂<b>喂</b></p></body>

a:link : 超链接点击前状态
a: visited : 超链接点击后状态
a:hover : 光标悬停在超链接上的效果
a:active :左键按下瞬间效果
在定义这些状态时有一个顺序 L V H A
p: first-letter
p:first-line
:focus: IE6不支持但FF支持
css滤镜其实就是通过一些代码完成丰富了样式

当使用到css的更多属性时还需要查阅css的api
网页设计的时候 div+css
div 行级区域
span块级区域
p行级区域 p中不要嵌套div

javascript 概述
javascript 是基于对象和事件的脚本语言
特点
1、安全性(不允许直接访问本地硬盘) 它可以做的就是信息的动态交互
2、跨平台性 (只要是可以解释JS的浏览器的都可以执行和平台无关)

JavaScript 与java不同
js是Netscape公司的产品 Java是sun 公司的产品
js是基于对象 java是面向对象
js只需解释就可以执行 java要先编译称字节码文件再执行
js是弱类型 java是强类型
javascript和html的结合方式
想要将其他代码融入到html中都是以标签的形式
js代码存放到标签对<script></script>中
使用script 标签的src属性引入一个js文件 (方便后期维护扩展)
<script src="test.js" type="javascript"></script>规范中script标签必须加入type属性
javascript语法
每一种语言都有自己的语法规则 js语法和java很像所以学习起来比较容易js中也有变量语句函数数组等常见语言组成元素
1、变量
通过关键字var 来定义弱类型即是不用指定具体的数据类型
例var x =3; x=”hrllo”;
js中特殊的常量值undefined 当变量没有初始化就被使用该变量的值就是undefined(未定义)
2、语句(与java语句格式相同)
判断语句(if语句) 判断尽量用双与双或
var x=3；
if(x==4)可以进行比较运算
if(x=4)可以进行赋值运算而且可以同样进行判断不报错
因为js中0就是false 非0就是true 通常用1来表示
所以if(x=4) 结果是true
选择结构(switch语句)
循环结构(while语句 do…while 语句 for语句)
不同的是没有了具体数据类型的限制使用时要注意
3、函数
一般函数
格式
function 函数名(形式参数…)
{
执行语句;
return 返回值;
}
函数是多条执行语句的封装体只有被调用才会被执行
注意调用有参数的函数但没有给其传值函数一样可以运行或者调用没有参数的函数给其传值该函数也一样运行简单点说只要写了函数名后面跟了一对小括号该函数就会运行那么传递的参数呢？
其实在函数中有一个参数数组对象(arguments) 该对象将传递的参数都封装在一个数组中
function demo()定义函数
｛
alert(arguments.length);
｝
demo(“hello,”,123,true); 调用函数
那么弹出的对话框结果是3 如果想得到所有的参数值可以通过for循环遍历该数组
for(var x=0;x

<style type="text/css">table {    width: 600px;    border-collapse: collapse;}table th {    border: #009 1px solid}</style></head><body><script type="text/javascript">window.onload=method;//有名函数 和匿名函数都行 /*window.onload=function(){    alert("window on"); }*///匿名函数 往往可以作为事件的处理方式存在 经常用function method(){       alert("window onnn");}var show =  function(){    alert("func run");  }show();//动态函数/*var show = new Function("x","y", "var sum=x+y;return sum;");var sum =show(5,7);alert(sum);*//*function show(){    for(var x=0;x<arguments.length;x++)    alert(arguments[x]);        return 4;}alert(show());alert(show);*///函数在js中就是对象 这样做返回show所指向的函数对象//show(3,4,5);//js没有重载传进去几个参数就几个 但是还是要按照java思路来编写 可读性高 要实现什么功能 要通过哪些参数来参与实现/*var x= 4;function show(x){    x=5;    //局部变量不改变全局变量}show(x);alert(x);*//*function show(arr){    for(var x=0;x<arr.length;x++)    {        for(var y=x+1;y<arr.length;y++)        {            if(arr[x]>arr[y])            {                var temp=arr[y];                arr[y] =arr[x];                arr[x]=temp;                }        }       }}var arr=[1,4,6,2,45,6];show(arr);var x=3;alert(x);var str="";var a = printArray(arr);alert(a);function printArray(arr){       alert(str);    for(var x=0;x<arr.length;x++)    {        if(x!=arr.length-1)            str+=arr[x]+",";        else            str+=arr[x];        }    return str;}*//*var arr=["abc",5,true,80.6];arr[6]=100;//数组相当于集合 可变长度for(var x= 0;x<arr.length;x++){    alert(arr[x]);  }*//*var arr=[1,4,6,2,45,6];for(var x=0;x<arr.length;x++){    for(var y=x+1;y<arr.length;y++)    {        if(arr[x]>arr[y])        {            var temp=arr[y];            arr[y] =arr[x];            arr[x]=temp;            }    }   }for(var x= 0;x<arr.length;x++){    alert(arr[x]);}*///用表格形式显示一个99乘法表/*document.write("<table border='1'>");for(var x=1;x<=9;x++){    document.write("<tr>");    for(var y=1;y<=x;y++)    {        document.write("<th>"+y+"*"+x+"="+x*y+"</th>");    }    document.write("</tr>");}document.write("</table>");*//*document.write("hh");document.write("</th>");document.write("</tr>");*///var x= 1;/*var sum ="";for(var x=0;x<=10;x++){       if(x==10)    sum=sum+"x="+x;    else    sum=sum+"x="+x+",";}*///alert(sum);/*document.writeln("<font color='red'>sum</font>");*///写到新页面上去了/*while(x<3){    alert("x="+x);    x++;    }*//*switch(x){    case "aa":    alert('a');    break;    case "bb":    alert('b');    break;    case "cc":    alert('c');    break;    case "dd":    alert('d');    break;}*//*var x= 3*115/115;alert(true+1);if(3==x)alert("true");else alert("no");var y;*/</script>

阅读全文

0 0

jsday03(css回顾 js开始基本变量 js头的一些标签 函数操作方式 基本语法)

jsday03(css回顾 js开始基本变量 js头的一些标签函数操作方式基本语法)