JSD11072班web0205天串讲.docx

1、JSD11072班web0205天串讲 JSD1107_2班web02_web05天串讲串讲人：刘鸽1、css (1)cascading style sheet 级联样式表， 按照w3c的规范，页面的数据与结构由html来负责， 页面的外观（展现给用户的界面）由css来负责。 (2)css的基本语法 选择器名称 属性：属性值; 属性2：属性值2; 比如 #d1 font-size:50px; (3)施加样式（将样式施加到指定的html标签之上） 通过选择器来施加。 a,标签选择器 body font-size:50px; background-color:#cccccc; 对具有相同标签名的所

2、有标签起作用。 b,class选择器 .选择器的名称 对标签class属性值和选择器名称相同的标签起 作用。 标签名.选择器的名称 标签的class属性要与选择器名称相同， 并且标签名要一致。 c,id选择器 #选择器的名称 标签的id属性要与选择器的名称相同。 d,选择器的分组 div,h1,p font-size:120px; 表示对div,h1,p都施加该样式 e,选择器的派生 div p font-size:150px; (4)样式的继承 子标签会继承父标签的样式。 (5)样式的优先级 浏览器默认样式 外部样式:使用link 引入外部的.css文件。 内部样式：使用style定义的样式

3、 内联样式:使用标签的style属性定义的样式 从上往向优先级增大。 (6)几个重要的属性 a,位置相关的属性 margin:外边距 margin-left: margin-right: margin-top: margin-bottom: 也可以简写为 margin: 顶，右，底，左 margin:0px; margin:20px auto; 左右居中，顶、底各20px; padding:内边距 padding-left: padding-right: padding-top: padding-bottom: 也可以简写为 padding: 顶，右，底，左 内边距在使用时，要注意，子标签会将

4、标签 撑开。 b,边框 border:宽度 样式 颜色; border-left:左边框 border-right: border-bottom: border-top: c,背景 background-color:#cccccc; background-image:url(图片的地址); background-repeat:no-repeat/repeat-x/repeat-y; background-attachment:fixed/scroll(默认); background-postion:100px 200px; background:背景 图片 平铺方式 依附方式 水平位置 垂直位

5、置 d,文字 font-size:文字大小 font-weight:粗细 100-900 font-family:字体 text-decoration: none/underline下划线 cursor:pointer/wait text-align: left/right/center e,列表 list-style-type:none;除掉小圆点 f,关键属性 float:浮动 left/right 其作用：取消块级标签的独占一行的特性。 clear:取消浮动 both; (7)布局： body,ul,li,img margin:0px; padding:0px; font-size:12

6、px; (8)链接的伪样式 a:link color: red 没有访问时 a:visited color: blue 访问后 a:active color: lime 鼠标点击但还没有放开时 a:hover color: aqua 鼠标指向时 display属性： block: html标记以块标记的形式来显示 inline: html标记以行内标记的形式来显示 none: 隐藏html标记position属性： static:(默认值)浏览器默认将html标记按 从左到右，从上到下摆放。 absolute:相对父标记偏移 relative:先按照默认方式摆放，然后再偏移 1、javascr

7、ipt基础 (1)javascript是什么，能做什么？ 是网景公司开发的一种用于与页面进行交互的 脚本语言。 javascript程序在浏览器端执行。 javascript程序可以写在.js结尾的文件里。 作用： a,前端验证（就是对用户提交的表单中的 数据进行验证，比如验证用户名是否为空, 如果验证通不过，则浏览器不会将数据提交 给服务器）。 b,ajax核心技术之一，用于异步向服务器发送 请求并动态更新页面。 c,与页面进行交互，生成动态的效果。 d,获得浏览器相关的信息。2、语法基础 (1)数据类型 a,基本数据类型 number:数字类型 string:字符串 boolean: tr

8、ue/false 布尔类型 null:变量没有存放任何对象的地址 undefined:未定义 alert(a); b,引用类型变量 Object: Array: Date: Math: (2)变量 javascript是一种弱类型语言，变量的类型 在运行时确认，并且可以随时转换。 javascript大小写敏感。 标识符不能使用关键字和保留字 标识符首字母只能是 A$_开头，首字母以外，可以包含 数字。 var f = 1ab error! var f = ab3; ok! var s = _ab ok! 变量的作用域： 在函数内部，不使用var声明的变量是一个全局变量。 没有语句块作用域 (

9、3)数组 a,特点： js中的数组长度可变，存放的数据类型可以是任意的。 b,数组的创建： var arr = new Array(); arr0 = 1; arr3 = 2; alert(arr.length); var arr = 1,2; c,数组对象的常用方法和属性 length属性返回数组的长度 toString()方法, 返回数组的字符串表示 concat方法, 用于连接两个数组 join()方法，用于将数组中的各个元素连接成 字符串。 reverse()方法，将数组反转 slice()用于截取数组的一部分并以 数组的形式返回 sort()排序，可通过如下形式来重新定义排序方式：

10、var arr4 = arr3.sort(function(a1,a2) return -a1.length + a2.length; ); d,数组可以当作堆栈和队列来使用 push(); pop(); shift(); (4)字符串的常用方法和属性 length属性 返回字符串的长度 charAt(index) 返回指定位置的字符 substring(from, to) 返回子字符串 indexOf(str) 指定字符串在原字符串中 第一次出现的位置 lastIndexOf(str) 指定字符串在原字符串 中最后一次出现的的位置 match(regexp) 返回匹配指定正则表达式的字符串

11、，返回的结果是一个数组: var str2 = asd212abc345; var reg2 = /0-9+/g; global 搜索全局 var arr = str2.match(reg2); search(regexp) 返回按照正则表达式 检索到的字符串位置 str2.search(reg2) toLowerCase/toUpperCase 返回小写/大写形式 replace(regexp,abc); 替换符合reg正则表达式规定的字符串 str2 = str2.replace(reg2,888); split(,): 分解,返回的是一个数组 3、DOM(Document Object

12、Model) (1)什么是dom? w3c定义了一套规则，由于将结构化的文档（XML/HTML) 转化为一棵树，目的是为了便于对结构化的文档 进行增删改查操作。 (2)w3c dom模型 a,继承关系图(了解) Node Document HTMLDocument HTMLBodyElement Element HTMLElement HTMLFormElement HTMLInputElement HTMLSelectElement HTMLOptionElement HTMLDivElement HTMLTableElement HTMLTableCaptionElement HTMLTa

13、bleRowElement HTMLTableCellElement b,操作 查找： 方式一，使用id document.getElementById(id); 方式二，遍历（浏览器不兼容） parentNode previousSibling nextSibling childNodes firstChild lastChild getElementsByTagName(tagName) 创建 document.createElement(Tag) 添加 appendChild insertBefore replaceChild 删除 removeChild 样式操作： 方式一，通过设置className属性方式二，通过修改style属性: var obj = document.getElementById(d1); /css属性名如果有-,则除掉-号，第一个字 /母大写,比如 background-color变成 /