#--[石家庄校区]web阶段笔记--

#--day01--
# HTML
## 表单标签
```html
<form action="表单数据提交的地址" method="提交的方式：方式有很多，常用的get,post">
    get/post提交的区别：
            1.数据在地址栏是否显示
            2.提交的数据是否有大小的限制
   
    表单元素：
            表单的输入：input
                                    根据type属性的不同有不同的输入类型
             <input type="text" name="" value="默认值"/>
                    <input type="password" name="" value="默认值" maxLength="输入的最大的长度"/>
   
             <input type="radio" name="" value="提交到后台的值" checked="checked"/>
                    <input type="checkbox" name="" value="提交到后台的值" checked="checked"/>
             <input type="file" name="" /> 文件上传
             <input type="submit"  value="是显示在按钮上的字"/>
                    <input type="reset"  value="是显示在按钮上的字"/>
                    <input type="button"  value="是显示在按钮上的字"/>
            表单文本域：textarea
                    <textarea name="" rows="几行" cols="几列"></textarea>
            表单下拉列表：select
                    <select  name="">
                <option value="提交到后台的值"></option>
                            </select>
</form>
```
## 图片

```html
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置  ./ 代表当前的路径  ../ 回到上一层的路径 "/>
```
## 超链接

```html
<a href="要跳转的一个地址" target="打开的方式：_self  _blank">链接</a>
```
#--day02--
# CSS
## 三种引入的方式及其优先级关系

1.行内样式：直接在标签上写style属性，

2.页面内样式：在head标签内写style标签，在style标签中写样式

3.外部样式：定义外部样式文件，.css文件，然后在html中 引入即可，引入的用link

优先级关系：就近原则

## 选择器

1.元素选择器：直接写标签名  div{  }

2.ID选择器：使用#号    #id名称{ }

3.类选择器：使用.  .类名{ }

4.后代选择器：使用空格   div #id1{ }

## 浮动和清除浮动

浮动：float
清除浮动： clear
## 盒子模型和定位

盒子模型：  外边距：margin   边框：border   内边距:padding

定位：position,left,top
​        position: absolute  fixed
## 显示和隐藏

display:   block:显示   none:隐藏   inline:在一行显示

#--day03--
# JS
## ECMASCRIPT:语法

记跟java语法不一致的地方：

​        弱变量类型的语言：
        体现在变量的声明上:var
​        ===：全等：类型和值都相等的时候才为true

内置对象：

​        Date：  new Date().getTime():毫秒值/缓存

js中的事件：以on开头
​        鼠标类：
​                onclick:单击

​                ondblclick:双击

​                onmouseover:鼠标在某个元素上面

​                onmousemove:移动

​                onmouseout:离开

​        键盘类：  onkeyup:弹起

​        焦点类：

​                onfocus:获得焦点

​                onblur:失去焦点

​        表单提交：    onsubmit

​        页面的加载：  onload

​        下拉列表的改变： onchange

## BOM：浏览器对象模型

**window:**

​        setInterval()/clearInterval()

​        setTimeout()/clearTimeout()

​        alert()：一般做调试用

​        confirm()：确认框

​        prompt()：可输入的对话框

​        open():打开一个小窗口

**history:**

​        history.go(-1)/history.back()

**location:**

​        location.href="":可以用作页面的跳转

#--day04--
## DOM：文档对象模型
document:  整个html文档加载到内存中可以用document对象表示

element:   标签

attribute:    标签上的属性

text:    文本

获得页面的元素：

​        document.getElemenById():只能获得到一个元素

​        document.getElementsByName();获得的是元素的一个集合

创建元素：

​        document.createElement():创建元素

​        document.createTextNode():创建文本

添加元素：

​        element.appendChild()

移除元素：

​        element.removeChild()
#--day05--
# Jquery
## 核心
jQuery的方法只能由jQuery的对象调用

核心的函数：$()

​      括号里面可以写：   1.选择器   2.原生的Js对象   3.数组

入口函数：

$(function(){  
});

$(document).ready(function(){   
});

## 选择器

```javascript
1.id选择器

$("#自定义的id名称")

2.类选择器

$(".自定义的类名")

3.元素选择器

$("直接写元素名称")

4.后代选择器

$("form input") 使用空格

5.属性选择器

$("input[属性名称=属性值]")

6.表单对象属性

:checked  单选/复选

:selected  下拉列表
```

## 效果函数

基本的显示和隐藏：show()/hide()

向下/上滑动：slideDown()/slideUp()

淡入/淡出:fadeIn()/fadeOut()

## jQuery改变页面元素样式的两类方式

1.通过css()函数：适用于样式代码比较少的情况

2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况

## jQuery操作元素属性

attr()/prop()

```javascript
$("#id").prop("src")  获得属性的值
$("#id").prop("src","da") 修改属性的值
$("#id").prop({"":"","":""}) 一次性修改多个属性
```

## html/text/val

html()/text()/val()

```java
$("#id").html();获取元素里面的html代码
$("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签

$("#id").text();获取元素里面的文本
$("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html

$("#id").val():获取元素value属性的值
$("#id").val("afda") 用括号里面的内容去设置元素value属性
```
#--day06--
## jQuery的文档操作
1.append() 2.appendTo() 3.insertBefore() 4.insertAfter() 5.empty() 6.remove()
## 事件

跟原始的事件是一致的，只不过是去掉on：focus,blur,click,dblclick,mouseover,mousemove,mouseout,keyup,keydown,keypress,submit,change

```javascript
$("#id").click(function(){
   
});
$("#id").on("click",function(){
   
});
$("#id").bind("click",function(){
   
});

事件的委托：delegate()
$("#id").delegate(".aaa","click",function(){
   
});

鼠标悬停的事件：hover
1.如果鼠标悬停只想有样式的效果：可以使用CSS的伪类
2.除了样式的效果还有别的业务逻辑的操作,hover函数
```

## jQuery的遍历

```javascript
$("img").each(function(i,n){
    i:遍历的下表
    n:遍历出来的每一个
});
$.each(object,function(i,n){
    object:待遍历的数组
    i:遍历的下表
    n:遍历出来的每一个
});
```

## 查找/过滤

1.parent() 2.find() 3.is()

- [:selected](selected.html)
* 事件切换
hover
鼠标放在上面和离开显示设置的样式
* 事件处理
on
bind
里面可以写多个事件(多个事件名称,一个函数)(("1 2 3 ...",function(){});)
* 事件委派
delegate()
将未来的没有加载的事件委派给父类,这样就可以执行后来的事件了

链式函数执行没有先后顺序,触发哪个执行哪个

# * 在js中获取值用value(对象调用value)
# * 在jq中获取值用val() (对象调val())

#--[石家庄校区]web阶段笔记--

#--day01--
# HTML
## 表单标签
```html
<form action="表单数据提交的地址" method="提交的方式：方式有很多，常用的get,post">
    get/post提交的区别：
            1.数据在地址栏是否显示
            2.提交的数据是否有大小的限制
   
    表单元素：
            表单的输入：input
                                    根据type属性的不同有不同的输入类型
             <input type="text" name="" value="默认值"/>
                    <input type="password" name="" value="默认值" maxLength="输入的最大的长度"/>
   
             <input type="radio" name="" value="提交到后台的值" checked="checked"/>
                    <input type="checkbox" name="" value="提交到后台的值" checked="checked"/>
             <input type="file" name="" /> 文件上传
             <input type="submit"  value="是显示在按钮上的字"/>
                    <input type="reset"  value="是显示在按钮上的字"/>
                    <input type="button"  value="是显示在按钮上的字"/>
            表单文本域：textarea
                    <textarea name="" rows="几行" cols="几列"></textarea>
            表单下拉列表：select
                    <select  name="">
                <option value="提交到后台的值"></option>
                            </select>
</form>
```
## 图片

```html
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置  ./ 代表当前的路径  ../ 回到上一层的路径 "/>
```
## 超链接

```html
<a href="要跳转的一个地址" target="打开的方式：_self  _blank">链接</a>
```
#--day02--
# CSS
## 三种引入的方式及其优先级关系

1.行内样式：直接在标签上写style属性，

2.页面内样式：在head标签内写style标签，在style标签中写样式

3.外部样式：定义外部样式文件，.css文件，然后在html中 引入即可，引入的用link

优先级关系：就近原则

## 选择器

1.元素选择器：直接写标签名  div{  }

2.ID选择器：使用#号    #id名称{ }

3.类选择器：使用.  .类名{ }

4.后代选择器：使用空格   div #id1{ }

## 浮动和清除浮动

浮动：float
清除浮动： clear
## 盒子模型和定位

盒子模型：  外边距：margin   边框：border   内边距:padding

定位：position,left,top
​        position: absolute  fixed
## 显示和隐藏

display:   block:显示   none:隐藏   inline:在一行显示

#--day03--
# JS
## ECMASCRIPT:语法

记跟java语法不一致的地方：

​        弱变量类型的语言：
        体现在变量的声明上:var
​        ===：全等：类型和值都相等的时候才为true

内置对象：

​        Date：  new Date().getTime():毫秒值/缓存

js中的事件：以on开头
​        鼠标类：
​                onclick:单击

​                ondblclick:双击

​                onmouseover:鼠标在某个元素上面

​                onmousemove:移动

​                onmouseout:离开

​        键盘类：  onkeyup:弹起

​        焦点类：

​                onfocus:获得焦点

​                onblur:失去焦点

​        表单提交：    onsubmit

​        页面的加载：  onload

​        下拉列表的改变： onchange

## BOM：浏览器对象模型

**window:**

​        setInterval()/clearInterval()

​        setTimeout()/clearTimeout()

​        alert()：一般做调试用

​        confirm()：确认框

​        prompt()：可输入的对话框

​        open():打开一个小窗口

**history:**

​        history.go(-1)/history.back()

**location:**

​        location.href="":可以用作页面的跳转

#--day04--
## DOM：文档对象模型
document:  整个html文档加载到内存中可以用document对象表示

element:   标签

attribute:    标签上的属性

text:    文本

获得页面的元素：

​        document.getElemenById():只能获得到一个元素

​        document.getElementsByName();获得的是元素的一个集合

创建元素：

​        document.createElement():创建元素

​        document.createTextNode():创建文本

添加元素：

​        element.appendChild()

移除元素：

​        element.removeChild()
#--day05--
# Jquery
## 核心
jQuery的方法只能由jQuery的对象调用

核心的函数：$()

​      括号里面可以写：   1.选择器   2.原生的Js对象   3.数组

入口函数：

$(function(){  
});

$(document).ready(function(){   
});

## 选择器

```javascript
1.id选择器

$("#自定义的id名称")

2.类选择器

$(".自定义的类名")

3.元素选择器

$("直接写元素名称")

4.后代选择器

$("form input") 使用空格

5.属性选择器

$("input[属性名称=属性值]")

6.表单对象属性

:checked  单选/复选

:selected  下拉列表
```

## 效果函数

基本的显示和隐藏：show()/hide()

向下/上滑动：slideDown()/slideUp()

淡入/淡出:fadeIn()/fadeOut()

## jQuery改变页面元素样式的两类方式

1.通过css()函数：适用于样式代码比较少的情况

2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况

## jQuery操作元素属性

attr()/prop()

```javascript
$("#id").prop("src")  获得属性的值
$("#id").prop("src","da") 修改属性的值
$("#id").prop({"":"","":""}) 一次性修改多个属性
```

## html/text/val

html()/text()/val()

```java
$("#id").html();获取元素里面的html代码
$("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签

$("#id").text();获取元素里面的文本
$("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html

$("#id").val():获取元素value属性的值
$("#id").val("afda") 用括号里面的内容去设置元素value属性
```
#--day06--
## jQuery的文档操作
1.append() 2.appendTo() 3.insertBefore() 4.insertAfter() 5.empty() 6.remove()
## 事件

跟原始的事件是一致的，只不过是去掉on：focus,blur,click,dblclick,mouseover,mousemove,mouseout,keyup,keydown,keypress,submit,change

```javascript
$("#id").click(function(){
   
});
$("#id").on("click",function(){
   
});
$("#id").bind("click",function(){
   
});

事件的委托：delegate()
$("#id").delegate(".aaa","click",function(){
   
});

鼠标悬停的事件：hover
1.如果鼠标悬停只想有样式的效果：可以使用CSS的伪类
2.除了样式的效果还有别的业务逻辑的操作,hover函数
```

## jQuery的遍历

```javascript
$("img").each(function(i,n){
    i:遍历的下表
    n:遍历出来的每一个
});
$.each(object,function(i,n){
    object:待遍历的数组
    i:遍历的下表
    n:遍历出来的每一个
});
```

## 查找/过滤

1.parent() 2.find() 3.is()

- [:selected](selected.html)
* 事件切换
hover
鼠标放在上面和离开显示设置的样式
* 事件处理
on
bind
里面可以写多个事件(多个事件名称,一个函数)(("1 2 3 ...",function(){});)
* 事件委派
delegate()
将未来的没有加载的事件委派给父类,这样就可以执行后来的事件了

链式函数执行没有先后顺序,触发哪个执行哪个

# * 在js中获取值用value(对象调用value)
# * 在jq中获取值用val() (对象调val())