【石家庄校区】js阶段内容

# 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
<table>
    <tr>
        <td  colspan="" rowspan=""></td>
    </tr>
</table>

单元格的合并：
    只要找准跨行还是跨列
```
## 图片
```html
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置  ./ 代表当前的路径  ../ 回到上一层的路径 "/>
```
## 超链接
```html
<a href="要跳转的一个地址" target="打开的方式：_self  _blank">链接</a>
```
# 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:在一行显示
# 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="":可以用作页面的跳转
## DOM：文档对象模型
document:
​    整个html文档加载到内存中可以用document对象表示
element:
​    标签
attribute:
​    标签上的属性
text:
​    文本
获得页面的元素：
​    document.getElemenById():只能获得到一个元素
​    document.getElementsByName();获得的是元素的一个集合
创建元素：
​    document.createElement():创建元素
​    document.createTextNode():创建文本
添加元素：
​    element.appendChild()
移除元素：
​    element.removeChild()
# Jquery
## 核心
jQuery的方法只能由jQuery的对象调用
核心的函数：$()
​    括号里面可以写：
​        1.选择器
​        2.原生的Js对象
​        3.数组
入口函数：
```javascript
$(function(){
});
$(document).ready(function(){  
});
```
## 选择器
1.id选择器
```javascript
$("#自定义的id名称")
```
2.类选择器
```javascript
$(".自定义的类名")
```
3.元素选择器
```javascript
$("直接写元素名称")
```
4.后代选择器
```javascript
$("form input") 使用空格
```
5.属性选择器
```javascript
$("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属性
```
## 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)

【石家庄校区】js阶段内容

# 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
<table>
    <tr>
        <td  colspan="" rowspan=""></td>
    </tr>
</table>

单元格的合并：
    只要找准跨行还是跨列
```
## 图片
```html
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置  ./ 代表当前的路径  ../ 回到上一层的路径 "/>
```
## 超链接
```html
<a href="要跳转的一个地址" target="打开的方式：_self  _blank">链接</a>
```
# 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:在一行显示
# 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="":可以用作页面的跳转
## DOM：文档对象模型
document:
​    整个html文档加载到内存中可以用document对象表示
element:
​    标签
attribute:
​    标签上的属性
text:
​    文本
获得页面的元素：
​    document.getElemenById():只能获得到一个元素
​    document.getElementsByName();获得的是元素的一个集合
创建元素：
​    document.createElement():创建元素
​    document.createTextNode():创建文本
添加元素：
​    element.appendChild()
移除元素：
​    element.removeChild()
# Jquery
## 核心
jQuery的方法只能由jQuery的对象调用
核心的函数：$()
​    括号里面可以写：
​        1.选择器
​        2.原生的Js对象
​        3.数组
入口函数：
```javascript
$(function(){
});
$(document).ready(function(){  
});
```
## 选择器
1.id选择器
```javascript
$("#自定义的id名称")
```
2.类选择器
```javascript
$(".自定义的类名")
```
3.元素选择器
```javascript
$("直接写元素名称")
```
4.后代选择器
```javascript
$("form input") 使用空格
```
5.属性选择器
```javascript
$("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属性
```
## 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)