JavaWeb前端基础入门

前端课程阶段总结

 

一、HTML

用来写页面的

(一)文字排版标签

标题标签h1~h6

独占一行

字体加粗

内置字号，h1最大，h6最小

横线标签 <hr>

自闭合标签

常用属性：

   width: 横线的长短

   size：横线的粗细

   color：横线的颜色

   align：横线的水平位置  left/center/right

段落标签 <p>

换行标签 <br>

自闭合标签

(二)图片标签 <img>

标签的属性：

    src：图片的路径

     width：图片显示的宽度

    height：图片显示的高度

    title：鼠标悬浮提示

    alt：图片加载不出来时，显示的文字提示信息

(三)清单和超链接标签

清单标签

无序清单<ul>：没有序号的清单，清单项前边显示一个小标记

    属性：

        type：circle小圆圈， disc 小圆点，square 小方块

有序清单<ol>：清单项前边有序号

    属性：

        type：1/a/A/i/I

清单项标签<li>

 

超链接标签<a>

属性：

    href：跳转的地址

    target：在哪显示新页面。_self，  _blank在新窗口显示页面， frame的名称

(四)表格标签

<table>：表格整体

    width：表格的宽度

    align：表格整体的水平位置

    bgcolor：表格的背景色

    border：边框线条

<tr>：行

    height:行高

    align：行里所有单元格的内容的水平位置

<td>：单元格

    align：单元格里内容的水平位置

<th>：表头单元格

    用法和td完全一样，只是自带样式：加粗，并水平居中

<caption>：表格的标题

    和tr同一级别的标签，通常是写在第一个tr之前

 

合并单元格的步骤：

1.  确定用哪个属性：跨行合并用rowspan，跨列合并用colspan

2.  确定属性加在哪个单元格上：加要在合并的单元格里，最前边的那单元格上

3.  确定属性的值是多少：要合并几个单元格，值就是几

4.  删除被合并掉的单元格

(五)框架标签

<frameset>

  rows：上下分行。rows=”200,*”分成上下两行，上边行高200px，下边行高剩余全部。分成几部分，就必须有几frame

  cols：左右分列。用法和rows完全一样

<frame>

  name：框架的名称，主要是给超链接a标签使用的

  src：要嵌套进来的页面的路径

  noresize：固定值noresize。表示框架不可拖动更改大小

(六)表单标签

 <form>标签

属性：

    name：表单的名称

    action：表单数据提交的路径

    method：表单数据提交的方式。get/post

get和post提交的区别：

    get提交数据在请求行里，会显示到地址栏；post提交在请求体里，不会显示到地址栏

    get提交不安全；post提交相对安全

    get提交有长度限制（IE）；post提交理论上没有长度限制

<input>标签

type：

    text：文本框

    password：密码框。显示的是掩码

    radio：单行按钮。name相同的radio属于同一组，同组互斥

            在需要默认选中的选项上增加属性：checked = “checked”

    checkbox：复选框。name相同的checkbox属于同一组，目的仅仅是方便服务端接收数据 在需要默认选中的选项上增加属性：checked = “checked”

   button：普通按钮。没有绑定任何事件

    submit：表单提交按钮。把按钮所在的表单提交

    reset：重置按钮。把按钮所在的表单数据重置为默认值

    image：图片提交按钮。功能和submit完全一样，只是用一张图片作为按钮

    hidden：隐藏域。不会显示到页面上的表单项，如果有name属性，表单项的值可以被提交

name：

    如果表单项的数据需要提交，就必须有name属性 

readonly：

    固定值readonly，表示表单项的值不可更改，但是如果有name，可以被提交

disabled：

    固定值disabled，表示表单项不可用，也不会被提交

<select>标签：下拉框

<select>:

    name：如果数据需要提交，就必须有name属性

    multiple：固定值multiple，表示下拉框可以多选

    size：下拉框的高度，可以显示几个选项

<option>：

    value：下拉选项的值。选中哪个下拉选项，就提交哪个选项的value值

    selected：这个选项被选中

 

下拉框的默认值：

    在没有手动设置默认值的情况 ，会默认选中第一个选项

    手动设置默认值：在需要默认选中的选项上，增加属性 selected=”selected”

<textarea>文本域标签

name：如果数据需要提交，就必须有name属性

rows:文本域的高度可以显示几行

cols：文本域的宽度可以显示几列

文本域的默认值设置：

    在textarea的标签体里设置的

---

二、CSS

(一)怎样引入css—引入方式

行内样式

    <div style=”width:200px;height:200px;background-color:red”></div>

内部样式

    在head标签里增加子标签style，然后把样式代码写在style标签里

    <style type=”text/css”>

        /*写样式代码*/

        选择器{样式名:值; 样式名:值;….}

    </style>

外部样式

     在head标签里增加子标签link，引入外部css文件

    <link rel=”stylesheet” type=”text/css” href =”css文件路径” >

(二)怎样选中要修饰的标签--选择器

基本选择器

•     标签选择器   标签名称{样式名:值; 样式名:值;….}
•     id选择器    #id值{样式名:值; 样式名:值;….}
•     类选择器     .class名称{样式名:值; 样式名:值;….}

 

    优先级：id选择器 > 类选择器 > 标签选择器  如果优先级相同，后加载覆盖先加载  

 

层级选择器

    父选择器 后代选择器 大后代选择器.. {样式名:值; 样式名:值;….}

     注意：空格表示后代，而不是父子关系

 

属性选择器

    选择器[属性名=”值”] {样式名:值; 样式名:值;….}

---

三、JavaScript

用来操作浏览器和html文档，实现动态效果的

(一)引入方式

内部js

    使用script标签

    <script type=”text/javascrit”>

        //js代码

     </script>

外部js

     <script type=”text/javascript” src=”js文件路径 ”></script>

 

注意：

    js代码在页面内任意位置都可以运行，但是越晚越好

    内部和外部写法都是script标签，但是一个script标签不能既内部，又外部

(二)ECMAScript（语法）

变量定义

所有变量定义都使用 var

数据类型

基本数据类型

    boolean

    number

    string

    null

    undefined

引用数据类型

    Array

        创建数组：var arr = [];

        常用属性：length 可以获取数组的长度，也可以设置数组的长度

        常用方法：

            concat：把多个数组合并成一个

            join：把数组拼接成字符串

            reverse：反转数组里元素的顺序。不会返回新数组

    Date

        创建对象：

             var date = new Date();

             var date = new Date(年，月，日); 月是从0开始

            var date = new Date(年，月，日，时，分，秒); 月是从0开始

        常用方法：

            toLocaleString()转换成本地日期格式的字符串

            getTime() 获取毫秒值

            setTime() 设置毫秒值

 

    Math

        不需要创建对象，直接使用它的方法

        常用方法：

            abs：取绝对值

            floor：向下取整

            ceil：向上取整

            round：四舍五入

            random：取随机数

   

    RegExp

        创建对象：var reg = /正则表达式/;

        常用方法：

            reg.test(字符串)：返回boolean值，如果校验格式符合，结果是true；否则是false

运算符

==和===

    ==:比较值

    ===:比较值和类型

&&和||

     js的boolean运算中只有&&和||，没有&和|

+-*/

    +：有字符串是拼接字符串

     -*/：有字符串，会先转换成数字再运算。如果转换不成功，结果是NaN

逻辑语句

if判断：

    false，0, “”, null, undefined是false，其它是true

函数

普通函数

     function add(a, b){

         return a+b;

    }

     var result = add(3,5);

匿名函数

    var fn = function(){

        alert();

     }

    通过变量名调用匿名函数

    把匿名函数作为另外一个函数的实参

事件

常见的事件

    onclick：单击

    onsubmit：表单提交

    onchange：域内容改变，一般监听select下拉框

    onload：加载完成事件，一般用于监听页面加载完成

事件绑定方法

    <input type=”button” οnclick=”alert()” value=”按钮1”/>

   

<input type=”button” οnclick=”showWin()” value=”按钮2”/>

function showWin(){

    alert();

}

 

<input type=”button” id=”btn3” value=”按钮3”/>

document.getElementById(“btn3”).onclick = function(){

    alert();

}

(三)BOM

有哪些bom对象

window：浏览器窗口对象，是所有bom对象的顶级对象

location：浏览器地址信息对象

history对象：浏览历史记录信息对象

navigator对象：浏览器信息对象，只读，可以获取浏览器的内核、版本等信息

screen对象：浏览器屏幕显示信息

window对象

提供了弹窗方法

    普通弹窗：alert()   没有返回值

    确认弹窗：confirm()  返回boolean值

    输入弹窗：prompt()   返回输入的内容或者null

提供了定时器

    执行多次的定时器

        设置：var timer = setInterval(函数对象, 间隔毫秒值);

        清除：clearInterval(timer);

    执行一次的延时器

        设置：var timer = setTimeout(函数对象, 延迟毫秒值);

        清除：clearTimeout (timer);

 

提供了全局函数

    parseInt：转换成整数

     parseFloat：转换成小数

    eval：字符串作为js代码来执行

    encodeURI：编码字符串

    decodeURI：解码字符串

location

获取网址：var url = location.href

设置网址：location.href = “”;  在当前窗口打开页面

        window.open(“”); 在新窗口打开页面

history

history.forward()前进一步

history.back() 后退一步

history.go(n)  切换n步

(四)DOM

操作html文档

l  操作标签

获取标签

    getElementById:根据id获取一个Element对象

    getElementsByName：根据name属性值获取一批Element对象

    getElementsByTagName：根据标签名称获取一批Element对象

    getElementsByClassName：根据class名称获取一批Element对象

 

创建标签

     document.createElement(“标签名称”);

 

插入标签

    父标签对象.appendChild(子标签对象);

    是剪切插入的方式

 

删除标签

    标签对象.remove()

 

操作标签本：

    获取标签体：var inner = 标签对象.innerHTML;

    设置标签体：标签对象.innerHTML= “新标签体，如果有html代码会生效”

操作属性

• 获取属性

    var v = 标签对象.属性名

    var v = 标签对象.getAttribute(“属性名”);

• 设置属性

    标签对象.属性名=值

     标签对象.setAttribute(“属性名”,值);

 

• 删除属性

    标签对象.removeAttribute(“属性名”);

---

四、jQuery

(一)dom操作

获取标签-选择器

基本选择器

    标签选择器 $(“div”)

    id选择器  $(“#id”)

    类选择器  $(“.class名称”)

 

层级选择器

    $(“a b”) 祖孙选择器

  $(“a>b”) 父子选择器

  $(“a+b”) 兄弟选择器：同级后边相邻的元素

  $(“a~b”)弟弟选择器：同级后边所有的元素

属性选择器

  $(“A[attr]”)：获取包含有attr属性的A元素

$(“A[attr=’v’]”)：获取attr属性值是v的A元素

$(“A[attr^=’v’]”)：获取attr属性值以v开头的A元素

$(“A[attr$=’v’]”)：获取attr属性值以v结尾的A元素

$(“A[attr*=’v’]”)：获取attr属性值包含v的A元素

$(“A[attr!=’v’]”)：获取attr属性值不等于v的A元素

 $(“A[attr=’v’][attr2]”)：复合属性选择器

 

基本过滤选择器

一般是和其它选择器配合使用，对其它选择器的结果进行再次过滤

:first   获取第一个   $(“div:first”)

:last   获取最后一个

:not(selector)  不要selector的结果   $(“div:not(.cls)”)

:odd   获取索引为奇数的元素  $(“div:odd”)

:even  获取牵引为偶数的元素

:gt(n)  获取索引大于n的元素

  :lt(n)   获取牵引小于n的元素

:eq(n)  获取牵引等于n的元素

 :animated 获取动起来的动画

 :header 获取所有标题元素h1~h6

表单属性选择器

    :enabled

    :disabled:

    :selected  获取被选中的下拉选项option标签

    :checked   获取被选中的单选或复选选项

其它dom操作

操作标签体:

相当于js的innerHTML

获取标签体：jQuery对象.html();

设置标签体：jQuery对象.html(“<h1>代码会生效</h1>”);

操作标签体里文本:

相当于js里的innerText

获取文本：jQuery对象.text();

设置文本：jQuery对象.text(“<h1>代码会生效</h1>”);

操作表单项的值:

可以操作任意表单项的值，比如：文本框、密码框、单选、多选、下拉框的值、文本域的值

获取值：jQuery对象.val();

设置值：jQuery对象.val(值);

操作样式:

获取样式：jQuery对象.css(“样式名称”);

设置样式：jQuery对象.css(“样式名称”,”样式值”);

操作属性

    获取属性：

       jQuery对象.attr(“属性名”)

        jQuery对象.prop(“属性名”)

    设置属性：

        jQuery对象.attr(“属性名”, 值)

        jQuery对象.prop(“属性名”, 值)

    删除属性：

        jQuery对象. removeAttr(“属性名”, 值)

        jQuery对象.removeProp(“属性名”, 值)

    注意：操作selected和checked属性必须使用prop的方法。其它属性优先尝试attr的方法 

 

操作class属性

    添加class：jQuery对象.addClass()

    删除class：jQuery对象.removeClass()

    切换class：jQuery对象.toggleClass()

创建标签

     $(“<li id=”li”>可以加标签体</li>”)

插入标签

    正向插入

         A.append(B)： 把B插入A内部的最后

A.prepend(B)：把B插入到A内部最前

A.before(B)：把B插入A的前边

A.after(B)：把B插入到A的后边

    反射插入

        A.appendTo(B)：把A插入到B内部最后

A.prependTo(B)：把A插入到B内部最前

A.insertBefore(B)：把A插入到B前边

A.insertAfter(B)：把A插入到B后边

删除标签

    jQuery对象.remove()：删除标签

   jQuery对象.empty()：清除子标签

(二)event

和js事件的区别：

     jQuery事件名称不带on

    jQuery事件是方法

     jQuery响应行为是事件方法的实参

 

常用的事件：click( function), change(function), submit( function), $(function)或者$(document).ready( function)

hover()函数

    如果传两个函数实参，第一个是鼠标移入的响应行为，第二个是鼠标移出的响应行为

    如果传一个函数实参，表示鼠标移入移出共同的响应行为

on()函数：给未来元素绑定事件

    现在元素.on(“事件名称”，”选择器字符串”, function)

(三)循环遍历

基本循环遍历

 

jQuery框架的全局each方法

$.each(被循环遍历的对象, function(index, element){

    index:索引

    element：被循环遍历中的每一个元素

    this：和element作用一样

});

jQuery对象的each方法

jQuery对象.each(function(index, element){

    index:索引

    element：被循环遍历中的每一个元素

    this：和element作用一样

});

(四)表单校验插件

1.  需要引入的文件

jQuery类库

插件自己的js文件

2.  基本校验语法

表单的jQuery对象.validate({

    rules:{

        表单项的name:{

   规则名称: 值,

   …

   规则名称: 值

}

},

    messages:{

        表单项的name:{

   规则名称: 值,

   …

   规则名称: 值

}

}

});

3.  自定义错误信息的位置

在想要显示错误信息的地方加上如下标签：

<label class=”error” for=”表单项的name”></label>

4.  自定义校验规则

$.validator.addMethod(“规则名称”,function(value, element, params){

    value：要校验的值

    element：要校验的表单项标签对象

    params：使用规则 时规则的值

 

    校验通过return true；否则return false

}, “默认提示信息”);

---

五、bootstrap

(一)需要引入的文件

css文件夹、fonts文件夹、js文件夹

注意：三个文件夹的层次结构不要乱

(二)栅格系统

容器

    container：宽度固定的，但是会随着设备类型而改变。两边有留白

    container-fluid：宽度始终100%

行row

    一行分成12份

 

单元格col-*-*

    第一个 *：表示设备类型

        lg:大型设备台式电脑>=1200px

        md:中型设备台式电脑>=992px

        sm:平板设备>=768px

        xs:手机设备<768px

    第二个 *：表示单元格占几份