我的传智播客之javaweb_day02学习总结

来源：互联网发布：淘宝助理批量修改价格编辑：程序博客网时间：2024/05/22 19:26

css的简介

css：层叠式样式表

层叠：一层一层的叠加样式
样式表：提供更多属性和属性值实现更多样式变化
css将显示样式和网页内容分离

css和html的四种结合方式

html标签上都有一个style属性

<div style="background-color:red;color:green;">xxx</div><div style="属性名称:属性值;属性名称:属性值;……">xxx</div>

使用html的<style>标签,写在<head>里

<style type="text/css">    div {        background-color:red;        color:green;    };</style>

在<style>内使用@import语句

<style type="text/css">    @import url(xxx.css);</style>

使用头标签<link>，引用外部css文件

<link rel="stylesheet" type="text/css" href="xxx.css" />

第三种方式一般不用，有些浏览器不起作用。主要用第四种。

css的优先级

一般情况:

由上到下,由外到内,优先级由低到高.
后加载的样式优先级高

css的基本选择器

标签选择器
使用标签名作为选择器的名称
class选择器
每个html标签都有一个class属性

// css内.xxx {        background-color:red;        color:green;}// html内<div class="xxx">aaa</div>

id选择器

// css内#xxx {    background-color:red;    color:green;}// html内<div id="xxx">aaa</div>

css基本选择器的优先级

标签内的style属性 > id选择器 > class选择器 > 标签选择器

css的扩展选择器

关联选择器

设置div标签里面p标签的样式，嵌套标签里面的样式。

// css内div p {    background-color:red;   }// html内<div>    <p>xxx</p></div>

组合选择器

把div和p标签设置成相同的样式，把不同的标签设置成相同的样式。

// css内div, p {    background-color:red;   }// html内<div>xxx</div><p>yyy</p>

伪元素选择器
css里面提供了一些定义好的样式，可以拿过来使用。
例：
超链接<a>的状态: 原始状态（:link）,悬停状态（:hover）,点击状态（:active）,点击之后（:visited）

css的盒子模型

把数据封装到一个区域，分别依次是上、下、左、右。可以统一设置或分别设置。

边框

border: 2px solid red; //（粗细|样式|颜色）

内边距

 padding: 20px; //（粗细）

外边距

margin: 20px; //（粗细）

css的布局的漂浮

float
- 属性
  - left：文本流向对象的右边
  - right：文本流向对象的左边

div {    float: left;}

css的布局的定位

position:
- 属性
  - absolute：将对象从文档流中拖出
  - relative：不会把对象从文档流中拖出
- 都通过用top,bottom,left,right进行定位

div {    position: absolute;    top: 50px;    left: 30px;}

js的简介

基于对象和事件驱动的语言,应用于客户端.

 - 基于对象: 提供好了很多对象,可以直接拿过来使用 - 事件驱动: js的动态效果 - 客户端: 专门指浏览器

特点
- 交互性：信息的动态交互
- 安全性：js不能访问本地磁盘文件
- 跨平台性：能够支持js的浏览器都可以运行
与java的区别
- 不同的开发公司
- js基于对象，java面向对象
- js是弱类型的语言 var m = “10”;
- js通过浏览器解释就能执行
js的组成
- ECMAScript：ECMA指欧洲计算机协会，由这个组织制定js的语法，语句……
- BOM：（Browser Object Model）浏览器对象模型，对浏览器相关的对象进行操作。
- DOM：（Document Object Model）文档对象模型，对网页里的内容进行操作。

js和html的结合方式

使用<script>标签

<script type="text/javascript">    ... </script>

使用<script>标签引入一个外部的js文件

<script type="text/javascrpit" src="xxx.js">

使用第二种方式时，不要再在<scrpit>标签里写js代码了，浏览器不会再执行里面的代码。

js的原始类型和声明变量

定义变量：使用关键字var
js的原始类型
- string：字符串
  - var str = "abc";
- number: 数字类型
  - var m = 123;
- boolean（true 和 false）：
  - var flag = true;
- null：获取对象的引用，null表示引用对象为空，所有对象的引用也是Object，null也是一个Object。
- undefined：定义一个变量，没有赋值
  - var aa;
typeof()：查看当前变量的数据类型

js的语句

if判断语句
switch语句：js都支持所有数据类型
循环语句：for (var xx=；；…)、while、do-while……

js的运算符

js不区分整数和小数

// java 123 / 1000 * 1000 = 0// js123 / 1000 * 1000 = 123

字符串的相加和相减的操作
- 相加：字符串连接
- 相减：减运算

var str = "456";alert(str+1); // str = "4561" alert(str-1); // str = "455"var str = "abc";alert(str-1); // str = NaN

boolean的操作

var flag = true; // true = 1, false = 0alert(flag+1); // flag= 2

== 和 === 的区别
==比较的只是值，===比较的是值和类型。

var a = "5";if (a == 5) {   // true    alert(a);           }

引用知识
直接向页面输出的语句，可以向页面输出变量，固定值和html代码：

document.write("aaa");document.write("<hr/>");

js的数组

定义数组

// 1.直接指定元素var arr1 = [1,2,"4",true];// 2.使用内置对象Arrayvar arr2 = new Array(5); // 定义一个数组,数组的长度是5arr2[0] = "1";// 3.使用内置对象Arrayvar arr3 = new Array(3,4,5) // 定义一个数组,元素是3,4,5

数组有一个length属性：获取数组的长度

var arr = new Array(5);alert("length:" + arr.length); // 5

js的函数

定义函数：参数列表里直接写参数名称

// 1.使用关键字functionfunction 方法名(参数列表) {    方法体;    返回值(根据实际需要)}    例:        function test() {            alert("aaa");        }        function add1(a, b) {            var sum = a + b;            alert(sum);        }        function add2(a, b, c) {                        var sum = a + b + c;                        return sum;        }// 2.匿名函数var xxx = function(参数列表) {    方法体和返回值;}    例:        var add3 = function add3(a, b) {            var sum = a + b;            alert(sum);        }// 3.使用js的内置对象Function(了解),称为动态函数var xxx = new Function("参数列表", "方法体和返回值");    例:        var add3 = function add3(a, b) {            var sum = a + b;            alert(sum);        }

js的全局变量和局部变量

全局变量：在<script>标签里定义一个变量，这个变量在页面的所有js中都可以使用。在方法外部使用，在方法内部使用,在另外一个<script>标签使用。
局部变量：在方法内部定义一个变量，只能在方法内部使用。如果在方法外部调用这个变量，提示出错。

script放的位置

建议把<script>标签放在</body>后面，因为html是从上到下解析的。

js的重载

function add1(a, b) {    var sum = a + b;    return sum;}function add1(a, b, c) {    var sum = a + b + c;    return sum;}function add1(a, b, c, d) {    var sum = a + b + c + d;    return sum;}// 调用“所谓”的重载函数add1(1,2); // NaN,没有出现重载add1(1,2,3); // NaN,没有出现重载add1(1,2,3,4); // 10

为何出现此情况？等待下次学习。

0 0