java——HTML、css、JavaScript、jQuery 详细介绍

5. 属性选择器 格式： 标签名[属性名=‘属性值’]

6. 子孙元素选择器

7. 子元素选择器

8. 分组选择器

如果需要对页面中多种不相关的元素设置相同的效果，此时一个选择器如果选择不到的话可以使用分组选择器把多个选择器合并到一起

-格式： .class,#id,h3{样式代码}

9. 伪类选择器 用于选择元素的状态

/*a 是超链接 直接{}加颜色

• 未访问状态 a:link{ color:red; }

• 访问过状态 a:visited{color:yellow;}

• 鼠标悬停状态 a:hover{color:blue;}

• 鼠标点击时状态 a:active{color:green;}

####选择器回顾：

标签名选择器 标签名{}

id选择器 #id{}

类选择器 .class{}

子孙选择器 div span a{}

子元素选择器 div>span>a{}

任意元素选择器 *{}

分组选择器 #id,.class,标签名{}

属性选择器 input[type=‘password’]{}

伪类选择器 未访问a:link 访问过 a:visited 悬停 a:hover 点击时 a:active

####常用样式属性

• color 字体颜色

• border 边框

• background-color 背景颜色

#####颜色的赋值方式

1. 通过颜色名称赋值 red blue pink yellow green …

2. 通过6位的16进制赋值 ，每两位表示一个颜色每个颜色的取值为0-255 三原色 rgb redgreenblue红绿蓝（了解）

举例：红色 #ff0000 蓝色 #0000ff 绿色 #00ff00

黄色 #ffff00 黑色 #000000 白色 #ffffff

3. 通过3位的16进制赋值 #0f0 等效 #00ff00

4. 通过三位10进制赋值 rgb(0-255,0-255,0-255); 红色 rgb(255,0,0);

5. 通过四位10进制赋值 alpha：透明度 rgba(0-255,0-255,0-255,0-1); 透明度值越小越透明 background-color: rgba(255,0,0,0.2)

#####设置背景图片

/设置图片/

background-image:url(“…/imgs/a.jpg”)

控制属性背景图片的平铺效果:

background-repeat:repeat;

-repeat; 在垂直方向和水平方向重复，为重复值

-repeat-x; 仅在水平方向重复

· -repeat-y；仅在垂直方向重复

· -no-repeat；仅显示一次

/* 设置元素的宽高 _/

width: 500px;

height: 500px;

background-color: yellow;

/_ 设置背景图片 _/

background-image: url(“…/imgs/k.jpg”);

/_ 设置背景图片的尺寸

如果图片尺寸小于元素的尺寸

则会自动重复平铺 _/

background-size: 300px 300px;

/_ 禁止重复 _/

background-repeat: no-repeat;

/_ 控制背景图片的位置

1.横向位置 left/center/right左中右

2.纵向位置 top/center/bottom上中下

可以实现9宫格的9个位置

_/

/_ background-position: center center; _/

/_ 通过百分比控制位置

第一个参数0代表左边缘 100%代表右边缘

第二个参数0代表上边缘 100%代表下边缘

_/

background-position: 80% 80%;

####练习 创建demo10 页面中添加三个div 第一个div尺寸300_300 设置背景图片正好填充，要求图片全部显示，第二个div尺寸500_500，背景颜色为红色 背景图片尺寸100_100 要求图片只显示一张显示在正中间，第三个div尺寸200_200背景绿色 图片100_100显示在div的左下角的位置（要求使用百分比方式控制位置）

———————————————————————————————————

###布局相关的样式

####盒子模型

• 盒子模型包括元素的宽高，外边距，内边距和边框。

#####元素的宽高

• width/height 通过该属性设置元素的宽高

• 只能对块级元素设置宽高，行内元素的宽高只能受内容影响

#####外边距

• 指元素距离上级元素边框或相邻兄弟元素边框

• 如何设置外边距：

/* 给某个方向外边距单独赋值 */

/* margin-top: 20px; 上

margin-left: 20px; 右

margin-bottom: 10px; 下

margin-right: 20px; */ 左

/* 批量赋值外边距 */

/* margin: 30px; // 四个方向全是30 */

/* margin: 10px 30px; // 上下10 左右30 */

/* margin: 0 auto; // 水平居中 */

margin: 10px 20px 30px 40px;/* 上右下左 */

• 如果元素的上边缘和上级元素的上边缘重叠此时添加上外边距会出现粘连效果，通过给上级元素添加overflow:hidden解决

• 如果上下相邻两元素同时添加了下外边距和上外边距，取最大值。

####行内元素外边距相关

• 行内元素左右外边距生效，上下不生效

• 左右相邻两个元素 同时存在右外边距和左外边距时取两个值相加之和

上下取最大，左右相加

#####边框

/1.粗细 2.样式 3.颜色/

/border: 19px solid blue;实线/

/border: 10px dashed read;虚线/

/border: 10px groove green;凹槽线/

/border: 10px inset yellow;嵌入式线/

/* 单独给元素的某一个方向添加边框 _/

border-top: 12px solid green; 上

border-left: 12px solid blue; 右

border-bottom: 12px solid pink; 下

border-right: 12px solid yellow; 左

/_ 值越大越圆 */

border-radius: 4px;

• 块级元素：四个边加边框全部生效并且全部影响元素所占宽高

• 行内元素：四个边加边框全部生效 ，但是左右边框会影响元素所占宽度上下边框不影响元素所占高度

#####内边距

• 什么是内边距：元素边框距内容的距离

/* 内边距会影响元素的宽高 _/

/_ padding-left: 20px;

padding-top: 20px; _/

padding: 10px; /_ 四个边的内边距都是10px _/

padding: 10px 20px; /_ 上下10 左右20 _/

padding: 10px 20px 30px 40px; /_ 上右下左 */

• 块级元素：内边距全部生效并且会影响元素的所占宽高

• 行内元素：内边距全部生效但是左右内边距会影响元素所占宽度上下内边距不影响元素所占高度

#####块级元素和行内元素关于盒子模型的总结

1. 块级元素：可以设置宽高，外边距全部生效，边框全部生效并且全部影响宽高，内边距全部生效并且全部影响宽高

2. 行内元素：不可以设置宽高，外边距左右生效上下不生效，边框全部生效但是左右影响宽，上下不影响高，内边距全部生效但是左右影响宽上下不影响高

####文本相关属性

/* 文本对齐方式 left/center/right 左中右*/

text-align: center;

/* 文本修饰

underline下划线

overline上划线

line-through删除线

none 无

删除线使用

text-decoration: line-through;*/

/*去掉ul的点

ul{list-style:none;*/

/*去掉超链接的下划线 指向a

text-decoration: none;*/

/* 文本颜色 */

color: green;

/* 文本阴影

1 阴影颜色

2和3 代表阴影偏移坐标

4 阴影模糊程度值越大越模糊

*/

text-shadow: red 5px 5px 5px;

/* 行高 用于实现上下居中 */

line-height: 50px;

####字体相关属性

/* 字体大小 单位像素*/

font-size: 10px;

/* 字体粗细 bold加粗

normal 默认效果 */

font-weight: bold;

/* 斜体 */

font-style: italic;

/* 字体名称 可以赋值多个 依次检测

哪个可用用哪个 */

font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;

###课程回顾：

1. 盒子模型： 外边距 内边距 边框 宽高

2. 宽度计算公式：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距

####学子商城首页练习：

1. 段落标签p自带上下外边距，如果不需要可以设置成margin：0;

2. display：block;是把行内元素改成块级元素

3. float:left/right; 浮动元素 明天会细讲

####溢出设置 overflow

1. 超出范围隐藏 overflow:hidden;

2. 超出范围显示 overflow:visible;

3. 超出范围滚动显示 overflow:scroll;

4.解决粘连问题:

####显示方式 display

4. block：块级元素的默认值，可以设置宽高 盒子模型相关没有任何限制，但是元素必须独占一行

5. inline: 行内元素的默认值，可以和多个行内元素共占一行，不能修改宽高，而且盒子模型相关的上下(外边距，内边距，边框)不能赋值或没有效果

6. inline-block: 行内块，可以修改宽高 也可以共占一行

———————————————————————————————————

浮动:float: left;左浮动 float:right; 右浮动

###定位

####position定位

#####文档流定位（静态定位）

• 默认是文档流定位 元素如果是文档流定位则显示的位置会从上到下 从左向右排列

• 设置方式： position:static；

#####相对定位

• 相对定位元素不会脱离文档流，不影响其它元素的位置，相对定位通过上右下左让元素相对于元素初始位置做偏移

• 设置方式： position：relative；

直接top,right,left,bottom上右左下调位置 left:10px;(右移用左，下移用上)

• 应用场景：存在于页面中的元素如果需要做位置移动，但是不希望页面中的其它元素跟着移动，此时使用相对定位

• 总结：不脱离文档流，相对于初始位置

#####绝对定位

• 元素脱离文档流，后面的元素会往上顶，上下左右的值相对于窗口或相对于做了非static定位(推荐相对定位)的祖先元素，如果多个祖先元素做了相对定位则就近原则。

• 设置方式： position：absolute；

直接top,right,left,bottom上右左下调位置 top:10px;(右移用左，下移用上)

• 应用场景：当元素需要层叠显示并且不希望元素存在于文档流中时使用

• 总结： 脱离文档流，相对于窗口或相对定位的祖先元素

#####固定定位

• 元素固定在窗口的某个位置，不会因为内容位置的改变改变自身位置

• 设置方式： position:fixed;

• 总结：脱离文档流，相对于窗口

####浮动定位

元素脱离文档流，元素可以在当前所在行左侧或右侧浮动，当撞到父元素边框或行内其他浮动元素时停止

• 如果一行浮动元素装不下会自动换行，换行时有可能会被卡住

• 如果元素上面的元素浮动了则元素会往上顶，如果不希望元素往上顶可以设置元素两侧不允许有浮动 clear:both

• 当元素的所有子元素全部浮动时此时自动识别的高度为0，

通过overflow：hidden解决

• 应用场景：把纵向排列的元素改成横向时使用

####行内元素的垂直对齐方式

vertical-align:默认baseline/top/middle/bottom

###CSS的三大特性

1. 继承性：子元素可以继承祖先元素中的部分样式，只能继承color/font-开头/text-开头的属性

• 有个别标签自带效果，不能继承自带效果的样式 比如： 超链接，h1-h6

2. 层叠性：通过不同的选择器可以多次指向同一个元素 如果设置的属性不一样则所有的效果全部生效,如果作用相同的属性 则根据选择器的优先级决定

3. 优先级：当多个选择器选择同一个元素并且设置相同的属性时会根据以下规则

• 直接选中优先级高于间接选中(继承)

• 如果是相同选择器：后执行的覆盖前面执行的

• 如果是不同选择器：根据选择器的作用范围决定优先级，范围(id<class<标签名<继承<元素默认样式)越小优先级越高 (id>class>标签名>继承>元素默认样式 )

———————————————————————————————————

###JavaScript 简称JS

• 用于给页面添加动态效果或动态内容的

• JS历史：1995年由网景(NetScape)公司发布 LiveScript 同年改名为JavaScript，和Java没有关系，为了蹭热度。

• 语音特点： 属于脚本语言不需要编译，由浏览器解析执行，JavaScript可以嵌套在html中 ，基于面向对象，弱类型的语言, 交互性：可以用户直接交换，安全性：该语言只能访问浏览器里面的内容

###如何在html页面中引入JavaScript

1. 在元素的事件属性中，如按钮的点击事件

<input type=“button” value=“点我试试！”

οnclick=“alert(‘试试就试试！’)”>

2. 在script标签中写js代表 script标签可以写在页面的任何位置 推荐写在head里面

3. 在单独的js文件中写js代码 通过script标签中的src属性引入，引入过文件的script标签不能在标签体中 继续写js代码

###JavaScript语法

数据类型，变量，运算符，语句，方法（函数）

####数据类型

1. 数值类型(number)

NaN (Not a Number) isNaN(18)= false isNaN(“abc”)=true

2. 字符串类型(string)

3. 布尔值类型(boolean)

4. 未定义类型(undefined)

5. 对象类型(object)

####变量的声明和赋值

var x = 18; //类型为number 值 18

var name = “张三”; //类型string 值 张三

var b = true/false; //类型Boolean 值 true/false

var y; //类型是undefined 值 undefined

var p = new Person();

####数据类型之间的隐式转换

• js中数据类型会根据不同的场景进行自动类型转换

1. 数值类型

• 转字符串： 直接转 18->“18” “abc”+18 = “abc18” （只有加法会把数值转字符串）

• 转布尔值: 0和NaN转false 非0即真(true)

2. 字符串类型

• 转数值: 能转直接转 不能转则转成NaN； （NaN和任何数值进行任何运算结果都是NaN） “35”->35 “abc”->NaN

• 转布尔值: 只有空字符串(“”) 转false 其它true “”->false, “a”->true

3. 布尔值类型

• 转数值： true=1 false=0 30+true=31 30+false=30

• 转字符串： 直接转 “abc”+true = “abctrue”

4. undefined类型

• 转数值： NaN

• 转字符串： “undefined”

• 转布尔值： false

5. null

• 转数值：0 28+null=28

• 转字符串： “null” “abc”+null = “abcnull”

• 转布尔值： false

###运算符

• JS语言中的运算符和Java中大致相同

• 和，==会先将等号两端的类型统一然后再比较值，===先判断类型是否相等如果不等则直接false如果相等再比较值是否相等

• typeof typeof 66+6 =“number6”

• 两数相除 结果会自动生成整数或小数 5/2=2.5 4/2=2

###语句 if else while do while for switch case

• JS语言中的语句和Java中大致相同

• 1. 语句中写条件的括号中如果不是布尔值类型会自动转成布尔值
• 2. for循环中 int i 改成 var i 不支持增强for循环（foreach)

###函数(方法)声明

Java中声明函数的写法

public String run(int age,String name){

return “abc”;

}

• JS中写法

function run(age,name){

return “abc”;

}

• 格式一： function 方法名(参数列表){ return xxx; }

• 格式二： var 方法名 = function(参数列表){ return xxx; }

###和页面相关的函数

1. 通过id得到页面中元素的函数

var input = document.getElementById(“myinput”);

2. 从文本框中获取内容和设置内容

input.value = “abc”;

alert(input.value);

3. 给div设置文本内容

d.innerText=“abc”;

4. 给div设置html内容

d.innerHTML+= “

abc

”;

———————————————————————————————————

String 数组 日期对象 正则

###String相关内容

1. 创建字符串的两种方式

var s1 = “abc”; //单引号和双引号都可以

var s2 = new String(“abc”);

2. 把字符串转成数值

parseInt(str)//把字符串转成整数，还可以把小数转成整数

parseFloat(str)//把字符串转成小数

Number(str)//等效parseFloat

3. 字符串转大小写

str.toUpperCase()//转大写 str.toLowerCase()//转小写

4. 获取字符串出现的位置 从0开始

var str = “abcdefgem”;

-从前面找

str.indexOf(“e”);

-从后面找

str.lastIndexOf(“e”);

5. 截取字符串 从0开始

str.substring(start,[end]);

6. 替换字符串

str.replace(old,new);

color

var x = “