黑马程序员技术交流社区

标题: 【石家庄校区】HTML、CSS、JavaScript、JQuery笔记 [打印本页]

作者: chenlong43210    时间: 2018-5-3 16:01
标题: 【石家庄校区】HTML、CSS、JavaScript、JQuery笔记
本帖最后由 chenlong43210 于 2018-5-3 16:18 编辑

HTML
HTML(Hyper Text Markup Language):超文本标记语言。
作用:制作页面(静态页面),数据显示的描述。
HTML文件后缀:.html|.htm
书写规则:
        标签必须用<>引起来,已经定义好的标签
        属性 key="value" (建议属性值用双引号引起来)
        不区分大小写标签:
        <!-- 注释内容 -->
        //版本声明
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">       //html4标准
       <!doctype html>                //html5标准
        <html></html> //根标签
        <head></head> //头标签,头部分,语言        
<title></title> 标题标签        
<link>        资源引用标签         
      rel="stylesheet"        //描述目标文件与当前文档的关系,外部样式表        
      type="text/css"         //文档类型         
      media        //指定目标文档在哪种设备上起作用        
如:<link rel="stylesheet" type="text/css" media="screen,print" href=".css">
        <style type="text/css">        定义样式,引入文档类型
       <body>        体标签 </body>
       <font>文字</font>        //字体标签
                face="黑体"(字体样式)
                size="(1-7字号)"
排版标签:<h1>...<h6>                //标题标签。换行,留白,加粗
<p>     //段落标签,前后空行
<hr/>                        //水平分隔线
<br/>                        //换行
<center>                //内容居中显示
<b>        粗体|<i>斜体|<u>下划线
<img src="图片源"/>        //图片标签
        alt=""                 图片找不到显示此内容
        title=""         鼠标移上显示此内容
//列表标签
<ol>        //有序列表。默认1.2.3.
        type="1"        默认。(a,A,i 罗马字符,I 大写罗马字符)
       start="10"        从10开始
       <li>        //列表项,缩进
<ul>        //无序列表。
        type="disc"        //默认,实心原点(circle空心原点,square实心正方形)  
      <li>        //缩进
//超链接。链接资源<a></a>  
        href=""        //""默认指向当前文件目录。如果不指定任何协议,按照默认协议file://解析。#表示当前页面
        target="_self"        //默认,当前页面打开        
        _blank        新页面打开        
        框架名        打开到指定框架显示
//表格
<table>                //表格
        cellpadding        文字边距
        cellspacing        单元格间距
        <thead>
        <tbody>        //不定义也存在,可省略
                <caption>        //表格标题,居中
                <tr>                //行
                        <th>        //表头单元格,加粗居中
                        <td>        //单元格
                                colspan=""        //占的列数,跨列合并
                                rowspan=""        //占的行数,跨行合并

//表单标签
<form>
        action="url?name=chen"        //指定提交路径并且get提交数据,不写默认提交到本页面
        method="get|post"                //提交方式,默认get,不只有这两种
        enctype="application/..."         以键值对的形式发送请求报文
                multipart/...                        用于传送文件流
        <input />        表单输入
                type="text" //文本框        属性maxlength
                        password//密码框
                        radio        //单选按钮,需指定value属性用于提交
                        checkbox//多选按钮,需指定value属性用于提交。如果name一样,会提交多个
                        button        //普通按钮。无任何功能
                        reset        //重置按钮。还原表单初始状态
                        submit        //提交按钮。
                        file        //文件框。value返回选择文件的路径
                        hidden        //隐藏字段。页面上不显示,但会提交到服务器
                        image        //图片提交按钮,图片作为按钮
                                src="图片路径"
                name
                        必须有name属性才可以提交至服务器
                        可以将几个单选框(复选框)设置为一组,name属性相同即可
                value=""                //文本框默认值、按钮名称
                size=""                        //文本框的长度
                maxlength=""        //输入的最大长度
                placeholder=""        //用于文本框灰化提示内容,提示内容不会提交至服务器
                disabled="disabled"        //禁用此元素,不会提交
                readonly="readonly"        //只读文本框
        <select name="">        下拉框,需指定value属性用于提交
                size=""                        行数
                multiple=true        成为多选列表框
                <option value="">
                        selected="selected"        //默认选中此项
        <textarea name=""  cols=""  rows="" >        文本域
        提交至服务器内容格式
                URL?key=value&key2=vlaue2&...
                文本框、密码框、文本域 手写内容直接传递过去
                单选框、多选框 需设置value属性
                下拉框 默认把选中的内容传至服务器,可设置value值传递指定值
        默认值
                文本框、密码框、文本域 设置value属性即可
                单选框、多选框 的指定项添加属性checked="checked"
                下拉框 的指定项添加selected="selected。默认第一个
        get和post区别
                get                数据显示在地址栏中。请求大小有限制
                post        数据不会显示在地址栏中。请求大小无限制

//框架标签
<frameset>        框架集。可嵌套。与body标签冲突
        rows="30%,*"        //按行分,水平切割
        cols="30%,*"        //按列分,垂直切割
        border="5"                边框宽度
        borderColor=""        边框颜色
        frameBorder=""        是否有边框(yes,no)
        <frame src="显示的页面URL.html" />        框架,具体实现
                name=""         //用于a标签 target属性 链接
                noresize="noresize"        不能改变框架大小
                scrolling="no"                是否显示滚动条(yes、no、auto)
<iframe src=".html" >插入一个页面、内联框架、画中画标签。如果浏览器不支持,则显示此段文字</iframe>
        frameborder="0"        去掉边框

//块标签,无含义,封装数据
        <div>        封装整行,默认独占一行
        <span>        封装行内,默认在同一行

<label for="其他控件id"></label>标签
<wbr>文字</wbr>  自动换行标签
<abbr title="说明文字"></abbr>        缩写说明,鼠标放上文字会显示说明文字
<pre>        预定义标签,保留文字格式
<marquee>        滚动标签
        direction        滚动方向left right down up
        behavior        alternate来回滚动。scroll直线滚动。side滚动一遍固定在末端
        scrolldelay="90ms"(100)  

<fieldset>        分组框
        <legend>标题

HTML转义特殊字符
                数字代码    字符代码
        <   <       <        (less then)
        >   >       >        (great then)
        &   &       &        
        空格            
CSS
——CSS(Cascading Style Sheets)层叠样式表。

        作用:渲染页面;提高工作效率

       

——引入方式:

        1、行内样式         (不建议使用)每个html标签中都有一个style属性。属性值是css代码

        2、页面内样式         使用标签<style type="text/css"></style>。一般定义在<head>标签中

        3、外部样式         关联css文件

                (1)html代码导入。<link href=".css" rel="stylesheet" type="text/css" />

                (2)css代码导入。<style type="text/css">@import url(.css);</style>

        优先级:就近原则

       

——语法

        注释:/*  */

        格式:选择器{属性1:值1;...}

       

——选择器

                id选择器        #id值{}

                class选择器        .class值{}。标签class属性中可以写多个类

                元素选择器         元素名{}

        扩展选择器

                /*后代选择器。空格

                s1 s2{}        s1后的所有s2

                s1>s2:s1子元素的s2

                s1+s2:s1紧接的s2元素

                s1~s2:s1后所有的s2兄弟元素

                /*属性选择器。html元素必须有一个属性且有值

                元素名[属性名="属性值"]{}

                元素名[属性名~="属性值"]{}        属性包括值选择器

                /*锚伪类选择器。标签的某些状态,顺序不可变

                a:link{}        点击前样式

                a:visited{}        点击后样式

                a:hover{}        鼠标悬停样式。可作用于其他元素

                a:action{}        点击样式,鼠标按下不松。可作用于其他元素

               

            /*伪类
            p:first-line        段落第一行文本
            p:first-letter        段落中第一个字母
            :focus                        具有焦点的元素
            :first-child{}        第一个元素
            :last-child{}        最后一个元素
            :not        不包含指定的选择器
            :noly-child        是父元素的唯一子元素
            :after{}                之后执行
            :nth-child(4n)        选择到4的倍数的元素。odd奇数even 偶数

——属性

        ——浮动

        float:left|right|none        浮动

        clear:left|right|both        清除浮动

        ——盒子模型,每个元素都有

        padding:        内边距,设置多个值顺序:上右下左

        margin:        外边距,会合并

        border:px solid #000;         //边框。double双线。solid实线。dashed虚线。none 取消边框

        border-radius:px;        圆角边框|50%正方形成一个圆

        border-image        便框框图片

        box-shadow:0px 0px 5px 5px #ccc;        阴影

        content        内容

        ——定位

        position:

                absolute        绝对定位,不占位置。距离网页左上角的位置

                fixed                固定位置,距离浏览器窗口左上角的位置

                relative        相对定位,占位置,参照元素本身的位置。对象不可层叠,保留原位置占用空间。如果父对象没有absolute|relative,则依据body。

                static                默认偏移量失效

                使用另外两个属性:left、right

               

    ——字体
    font-size:字体大小,默认16px
    font-family:字体样式(隶书)
            @font-face{font-family:myFont;src:url();}        上传字体
    font-style:italic|oblique        字体风格倾斜
    font-weigth:bold字体加粗,normal不加粗
    font-variant:        字体大写或小写
    ——文本
    color:文本颜色
    line-height:44px;        行高,通常设置居中
    text-decoration:        文本装饰
            underline        下划线
            overline        上划线
            line-througt删除线
            blink                闪烁
            none                无
    text-align: 文本对齐方式
    vertical-align:top|middle|bottom        垂直对齐方式
    white-space:nowrap|pre;        不换行|当做pre标签
    border:1px solid red;        边框
    text-transform:capitalize(首字母大写)|lowercase(全小写)|uppercase(全大写)
    text-shadow:        文本阴影
            第一个参数:阴影x轴偏移量px
            第二个参数:阴影y轴偏移量px
            第三个参数:模糊程度px
            第四个参数:阴影颜色
    word-wrap:        文本换行规则,英文单词不会被拆开
    text-indent:2em;        首行缩进2字符,用在<p>

    ——背景
    background-color:背景颜色
    background-image:url("")背景图片
    background-repeat:no-repeat|repeat-x|repeat-y|repeat
    background-position:px px|% %        设置背景图片显示的位置,可为负数
    background-size:px px|% %|cover(拉伸可以超出)|contain(拉伸不能超出)
    background-attachment:scroll(随着内容一起滚动)|fixed(不滚动)
    ——尺寸
    width
    height
    ——布局
    overflow:        内容溢出时
            hidden        隐藏滚动条,隐藏没显示全的部分
            scroll        滚动
            visible        默认。直接显示,超出部分不占位
            auto        如果溢出就滚动否则不显示滚动条
    visibility:设置元素是否显示
            visible        显示
            hidden        隐藏,占位
    display:        设置元素是否显示
            none        隐藏,不占位
            block        设置为块级元素
            inline        设置为行级元素
    z-index:        值越大越在前面

    ——多列
    column-count: 3;        分割成3列
    column-gap:5px ;        列间距
    column-rule:1px solid blue;        列分割线
    column-width        列的宽度
    ——列表样式ul
    list-style-type                列表类型。none取消样式。upper-alpha大写字母
    list-style:none                前面的点去掉
    list-style-image:url(".bmp");        设置图片作为列表项。使用url函数
    list-style-position        列表标志位置
    ——表格
    border-collapse:collapse;        单边框线
    ——轮廓
    outline        轮廓属性
    outline-color        颜色
    outline-style:groove实线|double双实线|dotted虚线
    outline-width        线的宽度
    ——变换
    transform:        变换
            2D转换
            translate(xpx,ypx)        平移
            rotate(deg)                        旋转度数
            scale(x1倍,y2倍)        缩放
            skew(xdeg,ydeg)                倾斜
            matrix()        以变换矩阵变换
            ——3D转换       
            rotateX(deg)
            rotateY(deg)
    ——过渡
    transition:width 1s,height 2s,transform 2s;        过渡时间
    transition-delay:1s;        延时1s后执行
    transition-duration:1s;        1s完成本样式的改变
    animation: anim 5s alternate;        5s持续执行anim
            @keyframes anim{        定义anim
                    0%{background-color: red;left: 0px;top:0px;}
    ——其他样式
    cursor:pointer;                鼠标移上变成手的样式
    opacity:0-1;        透明度
    text-overflow:ellipsis;        被剪切的部分显示省略号
    max-width:20px;                最大宽度
    zoom:1;        设置对象缩放比例
    maxLength='11';                最大字数
    outline:none;                去掉边框
    !important;                提高优先级
    resize:none;        文本域下的小三角不能拖动
    times
JavaScript

——含义

        JavaScript 基于对象和事件驱动的脚本语言,轻量级编程语言,主要应用在客户端由浏览器执行。俗称js

                特点

                交互性        可以动态交互,页面更加丰富

                安全性        不允许直接访问本地硬盘

                跨平台性        只要可以解析JS的浏览器都可以执行,和平台无关

       

——js组成部分

        ECMAScript:基础语法

        BOM(Browser Object Model) 浏览器对象模型

        DOM(Document Object Model) 文档对象模型

——JS引入方式

        1、将javascript代码封装到标签中

        <script type="text/javascript">js代码</javascript>

        2、导入外部js文件

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

——基础语法        高级程序设计语言具备共性内容,各语言的表现形式不同。

       

    区分大小写
    分号可有可无,建议加上
    注释        //、/**/
    标识符        用于标识数据和表达式的符号,通常理解为在程序中自定义的名称,如变量名、函数名
            同Java
            命名规范
                    类:首字母大写
                    方法:首字母小写
    变量。弱变量类型语言
            var 变量名 = 值;        //定义变量。var不写也行,因为js是非严谨的语言,但开发建议按照严谨的方式定义。
    数据类型
            原始类型。通过typeof判断
                    undefined        未定义,变量没有值。其实就是一个常量,可以==undefined 比较。
                    null        空
                    boolean        布尔型(true|false)
                    string        字符或字符串 ''、""
                    number        数值型,整数和小数
            引用类型。object对象类型 默认值null
           
    运算符。同Java
            比较运算符
                    ==        双等。判断值是否相等,自动类型转换
                    ===        全等。先判断类型是否相同,再判断值是否相等
                    false为非1或null。true为非0
            判断。如:
                    undefined==null结果   true
                    undefined===null结果   false
                    判断变量是否可用:先判断类型是否为undefined,再判断值是否为null,否则可用
                    typeof(n)!='undefined'

    语句。同Java
            for(var i in 数组){}
           
    函数        对功能代码进行封装,提高代码复用性
            function 函数名(参数列表){        //参数可不用写var
                    函数体
                    return 返回值;        //无返回可省略
            }
            注意:不存在重载,没传的参数值为undefined传入。
                    多传的参数不丢,函数中有一个数组 arguments 对参数进行存储
                    var v=函数名();        //函数运行,结果赋值给v
                    var v=函数名;        //函数对象引用赋值给v。可通过v()调用
                    打印 函数名                //输出的是方法定义格式字符串
            动态函数        使用js内置对象 Function
                    var 函数名=new Function("参数","方法体");        //创建函数对象,后期可变,用的不多
            匿名函数        没有名字的函数,函数的简写形式。只调用一次
                    方式一:var v = function(参数){方法体}        //常用,不需要定义方法名,直接写参数列表与方法体
                            可以将方法赋值给一个变量,这个变量表示一个方法
                    方式二:(function(n1,n2){...})(1,2);        //定义的同时完成调用
                    方式三:new Function("n1","n2","return n1+n2");       
                    变量名(参数1,参数2);  //通过变量调用
    闭包
            在子函数中并没有声明name变量,当需要使用name时,会向前找,发现整个函数中没有声明,则向上一级找,进入了函数f1中,这里有个参数name,则使用这个变量的值
            作用域链:即使方法f1运行完成了,name依然在子函数中被使用,不会被释放,这形成了变量作用域的链
            建议:先声明再使用,尽量不要使用闭包,因为会让变量在内存中长期存在,无法释放

    异常
            try{可能发生异常代码块}catch(err){错误信息处理}        异常捕获
            throw new Error("报错啦")|throw "";        手动抛出一个异常
                    e.message;        异常信息       

——DOM(Document Object Model)文档对象模型。

        只要是标记型文档,DOM这种技术都可以对其进行操作。如:(HTML、XML)

        将标记型文档封装成对象,目的:为了更为方便操作文档以及文档中所有内容

        DOM技术解析方式:将标记型文档加载到内存解析成一颗DOM树,并将树种内容都封装成节点对象

                好处:可对节点进行任意操作

                弊端:需将整个标记型文档加载进内存。如果体积很大,较为浪费空间

        SAX解析方式:民间常用解析方式,基于事件驱动的解析。不是W3C标准。DOM是W3C标准

                获取数据速度快,但不能对标记进行增删改查

        DHTML        动态HTML。不是语言,是多项技术综合体的简称

                包含:HTML,CSS,DOM,Javascript

                HTML         提供标签,对数据封装,便于对标签中数据操作

                CSS                提供样式属性

                DOM         将标签型文档以及文档所有内容解析封装成对象。在对象中定义属性和行为,便于对对象操作

                JS                 提供程序设计语言,对页面中的对象进行逻辑操作

        DOM模型

                节点(Node)以下都可以称为节点

                文档(Document)整个HTML文档

                元素(Element对象)

                属性(Attribute)

                文本(Text)

               

    document 对象
            获得元素
            getElementById("Id")                通过Id获取一个元素
            getElementsByName("name")        根据name获取多个元素
            getElementsByTagName("标签名"):        根据标签名称获取 多个元素节点
            getElementsByClassName("class值")        根据样式名称获取 多个元素节点
            创建元素
            createElement("标签名")                创建一个元素节点并返回这个节点
            createTextNode("文本文字")        创建文本,并返回这个节点
            其他
            title
            offsetLeft        位置
            offsetTop
            offsetWidth        尺寸
            offsetHeight网页尺寸,不包含滚动条
            scrollHeight网页尺寸,包含滚动条

    元素对象
            //通过节点的层次关系获取节点对象
            parentNode        获取父节点       
            childNodes        获取直接子节点集合
            firstChild        返回当前节点的第一个子节点
            lastChild        返回当前节点的最后一个子节点
            nextSibling                下一个兄弟节点
           
            //操作属性
            html属性                                        获取|设置 节点属性
            getAttribute("属性")                获取元素属性
            setAttribute("属性","值")        设值元素属性
            className                                        获取|设置 class属性
            //样式
            style        获取style属性对象
                    .css属性        获取|设置样式
                    .CssText="width:100px;...";                修改样式
           
            //添加节点
            appendChild(newNode)        添加子节点作为最后一个子节点
            insertBefore(newNode,refNode)        在refNode节点之前插入newNode节点
            //删除节点
            removeChild(node)        将子节点node删除。删除元素会改变长度,可用i-- ,重置索引位置
            //替换节点
            replaceChild(node1,node2)        子节点node2被替换成node1。
            //复制节点
            cloneNode(true)                //复制当前节点和里面的内容。flase或不写 只复制当前节点

            //其他
            innerHTML="HTML代码"        获取|设置 标签之间的文本
            nodeName        节点名称
            nodeType        节点类型。如:1标签,2属性,3文本
            nodeValue        节点值。指value属性的值。标签型节点没有值。
           
           
    |--table标签
            caption        获取标题对象
            tfoot        返回该表格里所有<tfoot.../>元素
            thead        返回该表格里所有<thead.../>元素
            tBodies        返回该表格里所有<tbody.../>元素组成的数组
            rows        获取该表格tr对象集合
            insertRow([index])        添加一行在指定索引位置,返回tr对象
            deleteRow([index])        删除表格中index索引处的行
            createCaption()                为该表格创建标题
            createTFoot()                为该表格创建<tfoot.../>元素,假如已存在就返回现有的
            createTHead()                为该表格创建<thead.../>元素,假如已存在就返回现有的
            deleteCaption()                删除表格标题
            deleteTFoot()                从表格删除tFoot元素及其内容
            deleteTHead()                从表格删除tHead元素及其内容
            --tr行标签
            rowIndex        返回该行在表格内的索引值
            sectionRowIndex        返回该行在其所在元素(tbody,thead等元素)的索引值
            insertCell(index)        参数可不写。在index处创建一个单元格,返回新创建的单元格
            deleteCell(index)        删除某行在index索引处的单元格
            cells        返回该行单元格集合
            --td单元格标签
            cellIndex        返回该单元格在表格行内的索引值
           
    form标签
            action        返回该表单的提交地址
            element        返回表单内全部表单控件组成的数组
                    .element[index]                        返回该表单中的index个表单控件
                    .element[elementName]        返回表单内id或name为elementName的表单控件
            length                返回表单内表单域的个数
            method                返回表单内的method属性,主要有get和set两个值
            target                确定提交表单时的结果窗口,_self、_blank(打开新窗口)、_top
            reset()                重置表单
            submit()        提交表单
    select标签
            form                        返回列表框、下拉菜单所在的表单对象
            length                        返回列表框、下拉菜单的选项个数。设置为0相当于清空项
            selectedIndex        返回下拉列表中选中选项的索引值
            type                        返回下拉列表的类型,多选返回sleect-multiple,单选返回select-one
            options                        返回所有选项数组
                    defaultSelected        返回该选项是否被默认选中
                    index                         返回该选项在列表中的索引
                    selected                返回该选项是否被选中
                    text                        返回该选项呈现的文本
                    value                        返回该选项的value属性值
           
            DOM为列表框、下拉菜单添加选项的方式,构造器
                    new Option(text,value,defaultSelected,selected)
                            text                        该选项的文本
                            value                        该选项的值
                            defaultSelected        设置默认是否显示该选项
                            selected                设置该选项当前是否被选中
                    直接为<select.../>的指定选项赋值
                            列表框或下拉菜单对象.options=创建好的option对象
                    删除列表框下拉菜单的选项的方法
                            1、列表框或下拉菜单对象.remove(index)
                            2、列表框或下拉菜单对象.option[index]=null

——BOM(Brower Object Model)浏览器对象模型

        Window对象(可省略,因为持有其他对象引用,相当于最顶层对象)

                属性

                document         对 Document 对象的只读引用

                history         对 History 对象的只读引用

                location         用于窗口或框架的 Location 对象

                Navigator         对 Navigator 对象的只读引用

                Screen                 对 Screen 对象的只读引用

                cookieEnableed        如果启用cookie返回true,否则返回false

                方法

                alert(str)                 弹出对话框               

                confirm(str)        弹出确认对话框,确定返回true,取消返回false               

                prompt("提示消息","默认值")         弹出输入对话框,确定返回输入值,取消返回null               

                var x=setTimeout("fn",ms)        ms后执行一次fn

                        clearTimeout(x)                清除

                var x=setInterval("fn",ms)每隔ms执行fn

                        clearInterval(x);        清除

                open("URL"[,"窗口名称","特性"])                打开新窗口,可只有第一个参数

                        特性:height=200,width=200,top=10,left=10,status=no,toolbar=no,menubar=no,location=no

                close()        关闭当前窗口

                事件

                onload                        //页面内容加载完成后执行

        Navigator        包含浏览器相关信息

                appName                浏览器名称

                appVersion

        Screen                屏幕信息

                Height|Width屏幕高度|宽度

        History                历史URL记录

                go(int)                指定前进或后退多少个页面,正前进,负后退

                back()|forward()        前一个|后一个

        Location        URL信息

                href                获取或设置当前窗口地址

                protocol        获取或设置web协议(如返回 http:)、装载该文档所使用的协议

                host                文档所在地址的主机地址

                port                返回web主机的端口、文档所在地址的服务端口

                reload()        刷新当前页面

——事件:事件是可以被javascript侦测到的一种行为

        事件流:描述的是在页面中接受事件的顺序

                冒泡型事件        从内到外执行函数,使用多,更兼容

                捕获型事件        从外到内执行函数

        事件处理:

                1、HTML事件处理

                2、DOM0级事件处理

                        得到事件对象:op.onclick=function(oEvent){if(window.event){oEvent=window.event;}}

                3、DOM2级事件处理,可以绑定多个事件

                标准DOM中的事件监听方法,添加事件句柄

                        [DomObject].addEventListener("事件类型","处理函数","冒泡事件或捕获事件");                true:捕获型事件 false:冒泡型事件

                        [DomObject].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");

                        [DomObject].addEventListener        返回是否支持addEventListener

                        标准DOM中得到事件对象

                        op.onclick=function(oEvent){//作为参数传进来}

                IE中的事件监听方法

                        [DomObject].attachEvent("on事件类型","处理函数");//添加监听

                        [DomObject].detachEvent("on事件类型","处理函数");//取消监听

                        [DomObject].attachEvent("onclick",demo)        返回是否支持attachEvent

                        IE中得到事件对象

                        op.onclick=function(){var oEvent=window.event;}

    Event事件对象
            IE                                                        标准DOM                                        描述
    altKey,shiftKey,ctrlKey                同IE                                按下alt、shift、ctrl为true,否则为false
    canselBubble                                stopPropagation()        阻止事件冒泡
    button                                                同IE                                对应按下鼠标键的值
    clientX,clientY                        同IE                                鼠标指针在客户区域的坐标,不包括工具栏等
    screenX,screenY                        同IE                                鼠标指针相对于整个计算机屏幕的坐标值
    keyCode                                                同IE                                按键的代号
    returnValue                                        同IE                                设置false时取消元素的默认事件
    srcElement                                        target                                引起事件的元素/对象,获取事件目标
    type                                                同IE                                事件的名称
    tagName        标签源名称
                                                            preventDefault()        阻止事件默认行为
    绑定事件
    1.通过标签事件属性
            <xxx /> 参数若是this,将当前元素的dom对象传给函数
    2.派发事件
            dom对象.onxxx=function(){...}

    鼠标事件:
    onmousemove        !鼠标在某个元素上移动时持续触发
    onmouseover        !鼠标指针移到一个元素上时触发
    onmouseout        !鼠标指针移除一个元素边界时触发
    onmousedown        单击任意一个鼠标按键时触发
    onmouseup        松开鼠标任意一个按键时触发
    键盘事件:
    onkeyup                !释放某个按键时触发
    onkeydown        按下键盘上某个按键时触发,一直按会持续触发       
    onkeypress        按下某个按键并产生字符时触发,忽略shift等功能键
    HTML事件:
    window.onload        !页面完全加载后触发
    window.onunload        页面完全卸载后触发
    form对象.onsubmit        !返回true或其他值就提交,返回false不提交
    dom对象.
            onclick                !单击鼠标左键触发
            ondblclick        双击鼠标左键触发
            onfocus                !任何元素或窗口获得焦点时触发
            onblur                !任何元素或窗口失去焦点时触发
            onselect        选择了文本框的一个或多个字符时触发
            onchange        文本框失去焦点时,并且在它获取焦点后内容发生过改变时触发。下拉菜单控件改变时
            onabort                图像加载被中断
            onerror                加载图像或文档错误时
            onreset                重置按钮被点击
            onresize        窗口或框架被重新调整大小

——对象        只要是基于对象的语言,或者是面向对象的语言,就存在对象的概念。对象是一个封装体,既可以封装数据也可以封装函数

        创建对象。自定义对象

                1、people=new Object();        创建对象

                        people.name="zs";                添加属性设值

                2、function Person(name){       

                        this.Name=name;//声明一个属性并初始化,为类增加成员

                        this.say=function(){                //声明一个匿名方法

                                alert(this.Name);

                        }

                }

                var p1=new Person('zhh');  //获取对象:new 类名称();

                p1.say();        //访问:对象.成员

               

    ——JS内置对象
    new Object()        //所有对象的顶层
            toString()        //Array转换成字符串由逗号分隔连接。
            valueOf()

    Array 数组。
            //创建数组
            var arr = [1,2];        //定义数组
            var arr=[];
            var arr=new Array();
                    (5)                //数组长度为5
                    (1,2,3)        //数组元素为1,2,3
            //属性/方法
            length                //设置或获取数组的长度
            arr[index]        //赋值或获取值
                    长度可变,如果赋值超过索引,则增加至长度。空的用undefined
                    元素类型可变
            push()        末尾添加元素
            unshift        往数组开头添加元素
            shift        删除并返回数组的第一个元素
            pop                删除并返回数组的最后一个元素
            reverse()        颠倒数组顺序
            sort()        按“字符串”的自然排序规则进行升序
            splice       
            slice        获取start到end处的子数组
            join        将数组元素以指定符号连接 返回字符串
            concat()        合并数组
           
    new String("")|""        //字符串对象。\n        换行
            length        长度
            charAt(index)        //返回指定索引的字符
            indexOf()                查找子串首次出现的位置,如果没有则返回-1
            lastIndexOf()
            split(str)                将字符串按照str字符进行拆返回数组
            substr(start,length)
            substring(start,end)        截取子串
            match("正则表达式")                使用正则表达式搜索目标子字符串,有返回字符串,没有返回null
            bold()        //字符串两端加加粗标记
            fontcolor("red")        //加颜色
            link("url")
            toUpperCase()、toLowerCase()        大小写转换
            slice()                同substring()可用负数,从末尾开始计算               
            concat()        将多个字符串拼接成一个字符串
            replace(,)        将字符串中的某个子串以特定的字符串替换
            search()        使用正则表达式搜索目标子字符串
            原型属性,就是该对象原有的描述。该描述中如果添加了新功能,该对象都会具备这些功能。
            String.prototype        //获取原型对象,对对象功能扩展
                    .属性名=值        //添加属性键值
                    .属性名=匿名方法|之前定义的属性名        //添加方法
    new RegExp("正则表达式",["flags"]);        //正则对象。特殊符号需转义
            参数 flags:i(忽略大小写),n(多行查找),g(全文查找出现的所有)
            语法2:reg=/正则表达式/i;        //特殊符号无需转义
            match()                //返回查找到的结果的数组
            test(str)        检索字符串中的指定值,返回值是 true 或 false,功能同C#中的IsMatch
            exec(str)        检索字符串中的指定值,返回值是被找到的值,如果没有发现匹配,则返回 null,功能同C#中的Match
    new Date()        获取当前时间对象
            .getTime()        获取毫秒。距1970年
            .setFullYear(yyyy,MM,dd,HH,mm,ss)        设置指定时间
            .setMonth
            .setDate
            .setHours
            .getFullYear()        获取年
            .getMonth                月
            .getDate                日
            .getDay                        星期0-6,0表示星期天
            .getHours                时,24小时制
            .getMinutes                分
            .getSeconds                秒
            .getMilliseconds毫秒
            .toLocaleTimeString()表示根据本地时间格式,把 Date 对象的时间部分转换为字符串
            .toLocaleDateString()表示根据本地时间格式,把 Date 对象的日期部分转换为字符串
            如:var date=new Date(yyyy,MM,dd,HH,mm,ss)        获取指定时间的日期对象

    Math        静态类
            random()                返回0-1随机数
            round(num)                四舍五入
            max(,,,,)                返回最大的值
            max.apply(numList)        返回数组中最大的值
            abs(num)        返回绝对值后的数
            floor(num)        num舍去小数
    console.log()        调试


JQuery

概述:JS的框架(js类库),对原生JS常见的方法和对象进行封装,方便使用
js对象和jquery对象的区别:
        jquery就是js中的new Object生成的普通对象
        js对象和jquery对象的方法不能共用
js对象和jquery对象的转换
        dom -> jquery:$(dom对象)
        jquery -> dom
                1. jquery对象[index]
                2. jquery对象.get(index)
遍历元素对象
    1. $对象.each(function(i,n){}) //遍历每个对象执行方法体(this为当前遍历的对象。i,索引。n,值)
    2. $.each($对象,function(i,n){})
选择器

    基本
        #id                         //id选择器
        .class                 //类选择器
        元素                     //元素选择器
        *                    //通配符选择器。所有标签
        选择器1,选择器2...        //组合(并列)选择器,逗号隔开
    层级
        ancestor descendant        //ancestor元素后代所有
        parent > child                 //parent元素的子元素child
        prev + next                 //prev后一个next
        prev ~ siblings         //prev后所有兄弟元素
    基本过滤
            :first
            :last
            :even                 偶数
            :odd                 奇数
            :eq(index)         等于index
            :gt(index)         大于index
            :lt(index)         小于index
            :not(选择器)
    内容
            :contains(text)         //包含内容的
            :empty                        //为空的
            :has(选择器)          //包含指定的元素的
            :parent                        //是父亲角色的
    可见性
            :hidden
            :visible
    属性
            [属性]                             含有属性的
            [属性="属性值"]
            [attribute!=value]
            [attribute^=value] 含有attribute属性值以value开头的
            [attribute$=value] 含有attribute属性值以value结尾的
            [attribute*=value] 含有attribute属性值包含value的
            [attrSel1][attrSel2][attrSelN] 并且
    子元素
            :nth-child(index1开始)        每一个第index子元素的
            :first-child                         每一个第一个子元素的
            :last-child                         每一个最后一个子元素的
            :only-child                         只有一个子元素的
    表单
            :input         匹配所有表单元素包括select,textarea
            :text
            :password
            :radio
            :checkbox
            :submit
            :image
            :reset
            :button
            :file
            :hidden
    表单对象属性
            :checked         匹配所有选中的单选复选按钮
            :selected         匹配所有的列表框下拉菜单选中的
            :enabled         可用的
            :disabled         不可用的
筛选方法
    过滤
            eq(索引)                指定索引
            first()
            last()
            not(jq对象)        返回除了jq对象
            slice(1,4)          索引从1到4的,一个参数代表索引值到最后
            is(选择器)           判断是否是指定元素
    查找
            children([选择器]);        拿到子级所有元素|指定选择
            find([选择器]);                拿到后代所有元素|指定选择
            prev(),                拿到前一个元素
            next();                拿到下一个元素
            prevAll(),        拿到前边所有元素
            nextAll(),        拿到同级后边所有元素
            siblings(),        拿到同级兄弟元素
    串联
            add('标签');组合选择器
            andSelf();         加上自己
属性操作
    属性
            attr 旧版本|prop 新版本。使用方式一样
        prop("属性")                                 获取属性值
        prop("属性","值")                        设置一个
        prop({"属性1":"值1",...})         设置多个
        removeProp("属性")                 移除属性
    HTML代码/文本/值
            html()        获取|设置标签内的内容和标签
            text()        获取|设置标签内的文本
            val()        获取|设置input标签的value值

文档处理

    内部插入
        append(content)                后追加子元素
                content: 要追加到目标中的内容(String, Element, jQuery)
        appendTo(选择器);
        prepend(content);        前追加子元素
        prependTo(选择器);
    外部插入
        after(this);        往后面追加this
        before(this);        往前面追加this
        insertAfter('div1');        把this追加到div1后
        insertBefore('div1');        把this追加到div1前
    替换
        replaceWith(content);        当前标签替换成content
        replaceAll();                        反之
    删除
        empty();        把标签中内容清空
        remove();        把标签移除,返回不保留事件
        detach();        把标签移除,返回保留事件
    复制
        clone([true]);        把自己克隆一份,但不复制事件(true:复制事件)

CSS处理

    CSS类
        addClass("class名称")                添加样式
        removeClass("class名称")        移除样式
        toggleClass("class名称")        如果存在(不存在)就删除(添加)一个类。
    CSS。针对style属性
        css("属性");                  获取样式值
        css({'':'','':''});        设置多个样式
    位置
        offset();                距离文档左上角偏移量        .left        .top
        position();                距离父坐标左上角偏移量        .left        .top
        scrollTop(val);
    尺寸
        height();|width();        有效高度|宽度,不包括内边距、边框、外边距
        innerHeight();                再加上marage和padding
        innerWidth();
        outerHeight();                再加上边框
        outerWidth();
    三个高
        屏幕可视区域的高  $(window).height();
        文档总高度                $(document).height();
        滚动的高                 $(window).scrollTop();
效果
    show([speed,[fn]])        //显示
            speed:预定速度字符串("slow","normal","fast")或毫秒数值(如:1000)
            fn:在动画完成时执行的函数,每个元素执行一次。
    hide([speed,[fn]])        //隐藏
    slideDown([speed,[fn]])                //滑下,显示
    slideUp([speed,[fn]])                //滑上,隐藏
    fadeIn([speed,[fn]])                //淡入
    fadeOut([speed,[fn]])                //淡出
    fadeTo(s,0.5)                                //淡入、淡出到0.5透明度
    animate({'':''},speed,[fn])         //自定义动画

事件

    事件处理。事件类型和js中一样,把on去掉即可
            $对象.xxx(fn);        //绑定事件
            on|bind(type,fn)  //绑定事件。on 1.7+
            trigger(type) //触发事件。触发浏览器默认同名行为
            triggerHandler(type) //不触发浏览器默认行为。只执行绑定的事件的方法
    事件。
            $(fn)|$(document).ready(fn)|写在HTML文档末尾  //DOM树加载完毕执行
            $(document).contextmenu(fn) //当右键菜单出现的时候执行
            hover(fover,fout) //鼠标移入移出
            toggle(f1,f2[,f3,f4...]) //click事件函数轮流执行。无参默认显示/隐藏事件。1.9-
    事件委派。为未来创建的元素绑定事件
            delegate(selector,type,fn) //为未来创建的子元素绑定事件
    参数:
            selector:选择器字符串,用于过滤器触发事件的元素。
            type:一个或多个事件的字符串形式。 由空格分隔多个事件值
            fn:当事件发生时运行的函数







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2