精华内容
下载资源
问答
  • JavaWeb前端开发知识总结(jQuery)

    千次阅读 多人点赞 2017-05-03 10:36:11
    JavaWeb前端开发知识总结-jQuery

    JavaWeb前端开发知识总结(jQuery)

    1. jQuery技术

    JQuery是一个javascript的框架(javascript的类库).对传统的javascript进行了封装.
    jQuery文件的引入

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

    jQuery基础语法

    # 基础语法是:$(selector).action()
      * 美元符号定义jQuery; 
      * 选择符(selector)"查询""查找"HTML元素;
      * jQuery的action()执行对元素的操作. 

    1.1 文档就绪函数

    文档加载完成时执行的jQuery代码.

    // 传统的js代码实现文档加载入口函数
    window.onload = function() {}
    // jQuery方式的入口函数,方式1
    $(document).ready(function(){JQ代码});
    // jQuery方式的入口函数,方式2(方式1的简写)
    $(function(){JQ代码});

    传统的javascript的入口函数和jQuery入口函数的区别

    # 传统的onload方式:
        * 一个html页面中只能有一个,只能调用一次;
        * 在文档加载完成后才执行,效率低下;
    jQuery方式:
        * 一个html页面中可以有多个(可以调用多次),按照由上至下顺序执行;
        * 在DOM对象绘制完成时就执行,效率高;

    jQuery对象和javascript对象间的转换

    js对象转换为jq对象: $(js对象)
    jq对象转换为js对象: jq对象[0] (或jq对象get(0)) –> 相当于是通过jq方式获取的是js对象数组,通过索引获取其中的js对象

    // js对象转换为jq对象
    var tdiv = document.getElementById("tDiv");
    $(tdiv).html("nihao");
    // jq对象转换为
    $("#tDiv")[0].innerHTML="java";
    $("#tDiv")get(0).innerHTML="java";

    1.2 jQuery的效果

    注意事项:效果的前提被操作的元素必须先声明display:none属性.

    # 显示/隐藏:show()和hide()方法
        * 使用一:Jq对象.方法名();
        * 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
        * 使用三:Jq对象.方法名(毫秒值); // 1000
        * 使用四:Jq对象.方法名(毫秒值,function(){});
    # 向下/上滑动:slideDown()和slideUp()方法
        * 使用一:Jq对象.方法名();
        * 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
        * 使用三:Jq对象.方法名(毫秒值); // 1000
        * 使用四:Jq对象.方法名(毫秒值,function(){});
    # 淡入/淡出:fadeIn()和fadeOut()方法
        * 使用一:Jq对象.方法名();
        * 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
        * 使用三:Jq对象.方法名(毫秒值); // 1000
        * 使用四:Jq对象.方法名(毫秒值,function(){});
    # 自定义动画:animate()方法
    # 单击切换效果函数:toggle()方法
        * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

    案例代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>jQuery效果案例</title>
            <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
            <script>
                // 入口函数
                $(function(){
                    // 显示图片
                    $("#btu1").click(function(){
                        $("#imgId").show(2000);
                    });
                    // 隐藏图片
                    $("#btu2").click(function(){
                        $("#imgId").hide(1000);
                    });
                    // 下滑图片
                    $("#btu3").click(function(){
                        $("#imgId").slideDown(2000);
                    });
                    // 上滑图片
                    $("#btu4").click(function(){
                        $("#imgId").slideUp(2000);
                    });
                    // 淡入图片
                    $("#btu5").click(function(){
                        $("#imgId").fadeIn(2000);
                    });
                    // 淡出图片
                    $("#btu6").click(function(){
                        $("#imgId").fadeOut(2000);
                    });
                    // toggle方法,通过id为conP的段落控制id为texP的段落的切换效果
                    $("#conP").click(function(){
                        // 可以使用toggle(),slideToggle(),fadeToggle()三种方式
                        $("#texP").slideToggle(500);
                    });
                });
            </script>
        </head>
        <body>
            <div>
                <input type="button" id="btu1" value="显示图片" />
                <input type="button" id="btu2" value="隐藏图片" />
                <input type="button" id="btu3" value="下滑图片" />
                <input type="button" id="btu4" value="上滑图片" />
                <input type="button" id="btu5" value="淡入图片" />
                <input type="button" id="btu6" value="淡出图片" />
                <hr />
                <div id="imgId" style="display: none;">
                    <img src="img/test.jpg" />
                </div>
            </div>
            <hr />
            <div>
                <p id="conP" style="width: 400px;background-color: burlywood;">单击切换段落出现和隐藏</p>
                <p id="texP" style="width: 400px;height: 200px;background-color: burlywood;">
                    give me some sunshine<br />
                    give me some rain
                </p>
                <p >
                    give me another chance<br />
                    I want to grow up once again
                </p>
            </div>
        </body>
    </html>

    1.3 jQuery选择器

    下面介绍各种常用的jQuery选择器:

    1.3.1 基本选择器

    # id选择器
        * 用法:$(“#id”)
        * $("#one").css("background", "red"); // 选择ID为one的元素,将其背景色修改为red
    # 类选择器
        * 用法:$(“.类名”)
        * $(".mini").css({"background":"red","border":"2px solid blue"}); // 选择class属性值为mini的元素
    # 元素选择器
        * 用法:$("元素名称")
        * $("div").css("background", "red"); // 选择所有的div标签元素
    # 通配符选择器
        * 用法:$("*")
        * $("*").css("background", "red"); // 选择所有的标签元素(body内)
    # 并列选择器
        * 用法:$("选择器,选择器,选择器")
        * $("#two, span, .mini").css("background", "red"); // 选择ID为two或span标签或class属性值为mini的元素

    1.3.2 层级选择器

    # 后代选择器:
        * 用法:$(祖先元素 子元素)  包括其含有的所有的指定元素(包括孙子级别的元素)
        * $("#two div").css("background", "red"); // 选择ID为two节点中包含的所有div标签元素
    # 子元素选择器
        * 用法:$(父类元素 > 子类元素)  获取父类元素中的第一层级的子类元素(只包含儿子元素)
        * $("#two > div").css("background", "red"); // 选择ID为two节点中第一层级的div标签元素
    # 下一个元素
        * 用法:$(元素 + 下一个元素)   紧邻该元素的下一个同辈元素(元素的类型不一定相同)
        * $("#two + div").css("background", "red"); // 选择ID为two元素的紧邻的div元素
    # 兄弟元素
        * 用法:$(元素 ~ 下一个元素)  该元素后面的所有的同辈元素
        * $("#two ~ div").css("background", "red"); // 选择ID为two元素后面为div标签的所有元素

    1.3.3 基本过滤器选择器

    # 奇数选择器:匹配所有索引值为奇数的元素,从0开始计数
        * 用法:$(:odd)  
        * $("tr:odd").addClass("odd"); // 选择所有的tr标签中所有的奇数行,添加其class属性为odd类
    # 偶数选择器:匹配所有索引值为偶数的元素,从0开始计数
        * 用法:$(:even)  
        * $("tr:even").addClass("even"); // 选择所有的tr标签中所有的偶数行,添加其class属性为even类

    1.3.4 内容选择器

    # 匹配选择器:匹配包含给定文本的元素
        * 用法:$(:contains(text))
        * $("div:contains('a')").css("background", "red"); // 选择div标签元素包含字符串a的所有的div

    1.3.5 属性选择器

    # 匹配属性选择器:匹配包含给定属性的元素
        * 用法:$(元素[属性名])
        * $("div[id]").css("background", "red"); // 获取所有具有ID属性的div元素
    # 匹配属性值选择器:匹配给定的属性是某个特定值的元素
        * 用法:$(元素[属性名==特定值])
        * $("div[id='four']").css("background", "red"); // 选择ID属性值为four的所有div元素
    # 匹配属性值不为特定值:匹配所有不含有指定的属性,或者属性不等于特定值的元素
        * 用法:$(元素[属性名 != 特定值])
        * $("div[id !='four']").css("background", "red"); // 选择ID属性值不是four的所有div元素

    1.3.6 表单元素选择器

    # input元素选择器:
        * 用法:$(选择器:input)  获取指定选择器或元素下的所有的input元素
        * $(form:input); // 获取form表单下所有的input元素
    # checkbox元素选择器:匹配所有复选框
        * 用法:$(选择器:checkbox)  获取指定选择器或元素下的所有的checkbox元素

    1.3.7 表单属性选择器

    # checked选择器:匹配所有选中的被选中元素(复选框,单选框等,不包括select中的option)
        * 用法:$(选择器:checked) 获取指定选择器或标签元素下的所有的checked为true的元素
        * $(input:checked); // 获取input标签下checked属性为true的所有元素
    # selected选择器:匹配所有选中的option元素
        * 用法:$(选择器:selected) 获取指定选择器或标签元素下的所有的selected为true的元素
        * $(select:selected); // 获取select标签下所有的selected属性为true的元素

    1.3.8 jQuery选择器综合案例

    /*style.css*/
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .actionDiv {
        width: 100%;
        background: aquamarine;
    }
    .actionDiv span {
        color: #000000;
        font-size: 24px;
    }
    .btnDiv {
        width: 100%;
        background: burlywood;
    }
    .itemDiv {
        width: 200px;
        height: 200px;
        background: crimson;
        margin-left: 5px;
        margin-top: 5px;
        float: left;
        color: #FFFFFF;
    }
    .itemSpan {
        display: block;
        width: 200px;
        height: 200px;
        background: seagreen;
        margin-left: 5px;
        margin-top: 5px;
        float: left;
        color: #FFFFFF;
    }
    #container {
        height: auto;
        width: 100%;
        background: bisque;
        border: 1px solid #ffffff;
    }
    .addDiv {
        width: 100px;
        height: 100px;
        color: #FFFFFF;
        background: red;
        position: relative;
        animation: mymove 5s infinite;
        -webkit-animation: mymove 5s infinite;
        /*Safari and Chrome*/
    }
    .borderDiv {
        width: 40px;
        height: 40px;
        margin: 5px auto;
        border: 1px solid #DC143C;
    }
    .item {
        width: 60px;
        height: 60px;
        margin-left: 5px;
        margin-top: 5px;
        float: left;
        color: #000000;
        background: cornflowerblue;
    }
    .addBg {
        background: black;
    }
    @keyframes mymove {
        from {
            left: 0px;
        }
        to {
            left: 200px;
        }
    }
    @-webkit-keyframes mymove
    /*Safari and Chrome*/
    {
        from {
            left: 0px;
        }
        to {
            left: 200px;
        }
    }
    <!DOCTYPE html>
    <!--jQuery选择器练习-->
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <link rel="stylesheet" href="css/style.css" />
            <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
            <script type="text/javascript">
                // jquery练习
                $(function(){
                    // 恢复颜色
                    $("#reset").bind("click",function(){
                        // window.location = location.href;
                        location.reload();
                    });
                    // 改变id=container元素的背景颜色
                    $("#btn1").bind("click",function(){
                        // $("#container").css("background","blue");
                        $("#container").attr("style","background: red;")
                    });
                    // 改变class=itemDiv元素的背景颜色
                    $("#btn2").bind("click",function(){
                        $(".itemDiv").attr("style","background: blue;");
                    });
                    // 改变所有div元素的背景颜色
                    $("#btn3").bind("click",function(){
                        $("div").attr("style","background: yellow;");
                    });
                    // 改变所有元素的背景颜色
                    $("#btn4").bind("click",function(){
                        $("*").attr("style","background: green;");
                    });
                    // 改变id=itemDiv3和span标签的背景颜色
                    $("#btn5").bind("click",function(){
                        $("#itemDiv3,span").attr("style","background: greenyellow;");
                    });
                    // 隐藏class=spanDiv的元素
                    $("#btn6").bind("click",function(){
                        $(".itemDiv").attr("hidden",true);
                    });
                    // 获得id=container元素的内容体
                    $("#btn7").bind("click",function(){
                        var data = $("#container").html();
                        alert(data);
                    });
                    // 设置id=container元素的内容体(添加一个class=addDiv的div)
                    $("#btn8").bind("click",function(){
                        $("#container").append("<div class='addDiv'>addDiv</div>");
                    });
                    // 改变id=container下面所有class=itemDiv的背景颜色
                    $("#btn9").bind("click",function(){
                        $("#container .itemDiv").attr("style","background: hotpink;")
                    });
                    // 获得id=itemDiv1下面所有class=item的个数
                    $("#btn10").bind("click",function(){
                        var length = $("#itemDiv1 .item").length;
                        alert(length);
                    });
                    // 获得所有class=item的个数
                    $("#btn11").bind("click",function(){
                        var length = $(".item").length;
                        alert(length);
                    });
                    // 删除id=itemSpan下面所有的元素
                    $("#btn12").bind("click",function(){
                        $("#itemSpan *").remove();
                    });
                    // 将id=itemDiv4下面的元素追加到id=itemDiv7后面
                    $("#btn13").bind("click",function(){
                        $("#itemDiv4 *").appendTo("#itemDiv7");
                    });
                    // 给id=itemDiv4下面class=item的元素的div子元素添加一个addBg的class
                    $("#btn14").bind("click",function(){
                        $("#itemDiv4>div[class='item']").addClass("addBg");   // 沒有效果,item的将addBg的设置给覆盖了
                    });
                    // 隐藏id=itemSpan下面所有class=item的元素
                    $("#btn15").bind("click",function(){
                        $("#itemSpan .item").attr("hidden",true);
                    });
                    // 将id=itemSpan下面所有class=item的元素的个数写入id=itemDiv7的内容体
                    $("#btn16").bind("click",function(){
                        $("#itemDiv7").html($("#itemDiv7").text()+$("#itemSpan .item").length);
                    });
                    // 改变id=container下面第一层子元素的背景颜色
                    $("#btn17").bind("click",function(){
                        $("#container > *").attr("style","background: blueviolet;")
                    });
                    // 选中所有的复选框
                    $("#btn18").bind("click",function(){
                        $(":checkbox").attr("checked",true);
                    });
                    // 选中所有选中的复选框
                    $("#btn19").bind("click",function(){
                        $(":checkbox[checked='checked']").each(function(x,n){
                            alert(n.value);
                        });
                    });
                    // 给用户名输入框设置一个value(随意值)
                    $("#btn20").bind("click",function(){
                        $(":input[name='username']").val("somnus");
                    });
                    // 设置密码输入框只读
                    $("#btn21").bind("click",function(){
                        $(":input[name='password']").attr("readonly","readonly");
                    });
                    // 选中省级下拉框的上海下拉项
                    $("#btn22").bind("click",function(){
                        // $("option[value='上海']").attr("selected","selected");
                        $("#province_").attr("value","上海");
                    });
                    // 选中性别单选按钮中的女
                    $("#btn23").bind("click",function(){
                        $(":radio[value='女']").attr("checked","checked");
                    });
                    // 向省级下拉框中添加下拉项(数据随意)
                    $("#btn24").bind("click",function(){
                        $("#province_").append("<option value='成都'>成都</option>");
                        $("#province_").append("<option value='成都'>成都</option>");
                        $("#province_").append("<option value='重庆'>重庆</option>");
                    });
                });
            </script>
        </head>
        <body>
            <div class="actionDiv">
                <span>
                    一.基本选择器练习
                    <input type="button" id="reset" value="恢复" style="font-size: 20px;font-weight: 5px;"/>
                </span>
                <div class="btnDiv">
                    <input type="button" id="btn1" value="改变id=container元素的背景颜色" />
                    <input type="button" id="btn2" value="改变class=itemDiv元素的背景颜色" />
                    <input type="button" id="btn3" value="改变所有div元素的背景颜色" />
                    <input type="button" id="btn4" value="改变所有元素的背景颜色" />
                    <input type="button" id="btn5" value="改变id=itemDiv3和span标签的背景颜色" />
                </div>
                <div class="btnDiv">
                    <input type="button" id="btn6" value="隐藏class=itemDiv的元素" />
                    <input type="button" id="btn7" value="获得id=container元素的内容体" />
                    <input type="button" id="btn8" value="设置id=container元素的内容体(添加一个class=addDiv的div)" />
                </div>
                <span>二.层级选择器</span>
                <div class="btnDiv">
                    <input type="button" id="btn9" value="改变id=container下面所有class=itemDiv的背景颜色" />
                    <input type="button" id="btn10" value="获得id=itemDiv1下面所有class=item的个数" />
                    <input type="button" id="btn11" value="获得所有class=item的个数" />
                    <input type="button" id="btn12" value="删除id=itemSpan下面所有的元素" />
                    <input type="button" id="btn13" value="将id=itemDiv4下面的元素追加到id=itemDiv7后面" />
                    <input type="button" id="btn14" value="给id=itemDiv4下面class=item的元素的div子元素添加一个addBg的class" />
                </div>
                <div class="btnDiv">
                    <input type="button" id="btn15" value="隐藏id=itemSpan下面所有class=item的元素" />
                    <input type="button" id="btn16" value="将id=itemSpan下面所有class=item的元素的个数写入id=itemDiv7的内容体" />
                    <input type="button" id="btn17" value="改变id=container下面第一层子元素的背景颜色" />
                </div>
                <span>
                    二.表单选择器 
                </span>
                <div class="btnDiv">
                    <input type="button" id="btn18" value="选中所有的复选框" />
                    <input type="button" id="btn19" value="选中所有选中的复选框" />
                    <input type="button" id="btn20" value="给用户名输入框设置一个value(随意值)" />
                    <input type="button" id="btn21" value="设置密码输入框只读" />
                    <input type="button" id="btn22" value="选中省级下拉框的上海下拉项" />
                    <input type="button" id="btn23" value="选中性别单选按钮中的女" />
                </div>
                <div class="btnDiv">
                    <input type="button" id="btn24" value="向省级下拉框中添加下拉项(数据随意)" />
                </div>
            </div>
            <div id="container">
                <div id="itemDiv1" class="itemDiv">itemDiv1<br/>
                    <div class="item">0-item1</div>
                    <div class="item">0-item2</div>
                    <div class="item">0-item3</div>
                    <div class="item">0-item4</div>
                    <div class="item">0-item5</div>
                    <div class="item">0-item6</div>
                </div>
                <div id="itemDiv2" class="itemDiv">itemDiv2<br/>
                    <div class="item">1-item1
                    </div>
                    <div class="item">1-item2</div>
                    <div class="item">1-item3</div>
                    <div class="item">1-item4</div>
                    <div class="item">1-item5</div>
                </div>
                <div id="itemDiv3" class="itemDiv">itemDiv3<br/>
                    <div class="item">2-item1</div>
                    <div class="item">2-item2</div>
                    <div class="item">2-item3</div>
                    <div class="item">2-item4</div>
                </div>
                <div id="itemDiv4" class="itemDiv">itemDiv4<br/>
                    <div class="item">3-item1</div>
                    <div class="item">3-item2</div>
                    <div class="item">3-item3</div>
                    <br>
                    <div class="item">
                        <div class="borderDiv"></div>
                    </div>
                </div>
                <div class="itemDiv">itemDiv5<br/>
                    <div class="item">4-item1</div>
                    <div class="item">4-item2</div>
                </div>
                <div class="itemDiv">itemDiv6<br/>
                    <div class="item">5-item1</div>
                </div>
                <div id="itemDiv7" class="itemDiv">itemDiv7<br/>
                </div>
                <span id="itemSpan" class="itemSpan">itemSpan<br/>
                    <div class="item">span1</div>   
                    <div class="item">span2</div>   
                    <div class="item">span3</div>   
                    <div class="item">span4</div>   
                </span>
                <br style="clear: both;">
                <hr />
                <form id="form" style="margin: 0 auto;width: 40%;">
                    用户名:&nbsp;&nbsp;
                    <input type="text" name="username" id="username"/><br />
                    密码:&nbsp;&nbsp;&nbsp;
                    <input type="password" name="password"/><br />
                    文件选择:&nbsp;&nbsp;
                    <input type="file" name="file"/><br />
                    爱好:&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="hobby" checked="checked" value="足球"/>足球
                        <input type="checkbox" name="hobby" checked="checked" value="篮球"/>篮球
                        <input type="checkbox" name="hobby" value="网球"/>网球<br />
                    省:&nbsp;&nbsp;&nbsp;&nbsp;
                    <select name="province" id="province_">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="南京">南京</option>
                    </select>
                    <br />
                    性别:&nbsp;&nbsp;
                    <input type="radio" name="sex" value="男"/>男 &nbsp;&nbsp;
                    <input type="radio" name="sex" value="女"/><br />
                    备注:&nbsp;&nbsp;&nbsp;
                    <textarea name="desc"></textarea><br/>
    
                    普通按钮:&nbsp;&nbsp;&nbsp;
                    <input type="button" value="普通按钮" /><button>Button</button>
                </form>
                <hr />
            </div>
        </body>
    </html>

    1.4 使用jQuery操作元素的属性

    1.4.1 使用css方法

    # 使用:jq对象.css(属性参数);
        * $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开
        * $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式

    1.4.2 使用CSS类的方法

    # 添加属性:addClass()方法
        * 用法:jq对象.addClass(class类)
        * $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd
    # 删除属性:removeClass()方法
        * 用法:jq对象.removeClass(class类)
        * $("tbody tr:odd").removeClass("odd"); // 将tbody标签内的奇数行删除样式类odd

    1.4.3 属性值操作方法

    # attr(name):设置或返回被选元素的属性值
        * 用法:jq对象.attr(属性名,属性值)
        * $("img").attr("src","img/test.jpg"); // 将img的添加src属性,值为"img/test.jpg"
        * 用法:jq对象.attr({属性名:属性值,属性名2:属性值})  属性名可以有"",属性值必须有""
        * $("img").attr({"src":"img/test.jpg","alt":"test"}); // 将img的src和alt属性设为指定值
    # removeAttr(name):删除元素指定的属性
        * 用法:jq对象.removeAttr(属性名)
        * $("img").removeAttr("src"); // 删除img标签元素的src属性   
    # prop(name):设置或返回元素的属性值
        * 用法:jq对象.prop(属性名,属性值)
        * $("input[type='checkbox']").prop("checked"); // 将type类型为checkbox的input标签元素的选中(前提是有checked属性)
        *用法: jq对象.prop({属性名:属性值,属性名2:属性值})  属性名可以有"",属性值必须有""
        * $("input[type='checkbox']").prop({"checked":true, "disabled":true}); // 将checkbox选中并禁用
    # removeProp(name):用来删除由.prop()方法设置的属性集(attr设置的属性值也可删除)
        * 用法:jq对象.removeProp(属性名)
        *  $("img").removeProp("src"); // 删除img标签元素的src属性

    attr()和prop()方法的区别:

    attr()方法:不能修改布尔类型的属性值,一般用于操作非布尔值元素的属性;
    prop()方法:可以修改布尔类型的属性值,一般用于操作布尔值元素的属性.

    1.4.4 HTML/文本/值的设置

    # html(value):设置或获取对象的内容,一般针对含有文本的元素,使用在图片上无效
        * 用法:jq对象.html()        获取jq对象的内容
        * $("p").html(); // 获取p标签的内容
        * 用法:jq对象.html(value)   设置jq对象的值为value
        * $("p").html("java"); // 将所有的p标签的内容设为java
    # text(value):设置或获取对象的内容
        * 用法:jq对象.text()        获取jq对象的内容
        * $("p").text(); // 获取p标签的内容
        * 用法:jq对象.text(value)   设置jq对象的值为value
        * $("p").text("java"); // 将所有的p标签的内容设为java
    # val(value):设置或获取元素的值(相当于是js对象中value属性)
        * 用法:jq对象.val()
        * $("input[type='text']").val(); // 获取input的value值
        * 用法:val(value值)
        * $("input[type='text']").val(value); // 设置文本框的值为value

    1.5 jQuery对象访问

    # each(callback):以每一个匹配的元素作为上下文来执行一个函数(callback)
        * 用法:jq对象.each(function(迭代变量){要执行之代码}); 使用return可以跳出循环
        *$("img").each(function(n){ // 将所有的img标签添加src属性,n是从0开始
            // this是代表DOM对象
            // $(this)是代表jq对象
            this.src = "img/" + n + ".jpg";
        * });
    # size():返回jq对象中元素的个数
        * 用法:jq对象.size()
        * var num = $("img").size(); //返回img对象的个数
    # length:返回jq对象中元素的个数
        * 用法:jq对象.length;
        * var num = $("img").length; // 获取img对象的个数
    # get([index]):取得其中一个匹配的元素, num表示取得第几个匹配的元素,num从0开始
        * 用法:jq对象.get(num); 当无参数时,是获取所有的匹配的对象集合
        * $("img").get(); // 获取所有img对象的集合
        * $("img").get(0); // 获取匹配的第一个元素对象,与$(this)[0]等价

    1.6 文档处理

    # append(content):向每个匹配的元素内部追加内容,其中内容可以是标签
        * 用法:jq对象.append(内容);
        * $("p").append("内容"); // 向所有p标签内添加内容(追加)
        * $("select").append("<option value='内容'>内容</option>"); // 向select标签添加option标签
    # appendTo(content):把所有匹配的元素追加到另一个指定的元素中
        * 用法:jq对象.appendTo(元素)  将jq对象添加到元素中
        * $("p").appendTo("div"); // 将所有p标签元素追加到div中
    # prepend(content):向每个匹配的元素内部前置内容,参数是要插入到目标元素内部前端的内容
        * 用法:jq对象.prepend(内容);
        * $("p").prepend("<b>Hello</b>"); // 向所有p标签元素内部的前面插入内容
    # prependTo(content):把所有匹配的元素前置到另一个、指定的元素中
        * 用法:jq对象.prependTo(元素)  将jq对象前置到元素内容中
        * $("p").prependTo("#AdDiv"); // 将所有的p标签内容前置到id为AdDiv元素内部的前面
    
    # empty():删除匹配的元素集合中所有的子节点
        * 用法:jq对象.empty();  删除jq对象中所有的子节点,jq对象本身不删除
        * $("p").empty(); // 删除所有p元素中的子节点元素
    # remove([expr]):从DOM中删除所有匹配的元素,参数是用于筛选元素的jQuery表达式
        * 用法:jq对象.remove(选择器)  
        * $("p").remove(); // 删除所有的p标签元素,其本身要被删除
        * $("div").remove("#AdDiv"); // 删除所有ID为AdDiv的div元素

    1.7 jQuery筛选功能

    # children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,参数是过滤子元素的表达式
        * 用法:jq对象.children(过滤器)
        * $("div").children(); // 获取所有div元素的所有子元素
        * $("div").children("#AdDiv"); // 获取所有div元素的子元素中ID为AdDiv的所有元素
    # find(expr|obj|ele):搜索所有与指定表达式匹配的元素对象,这个函数是找出正在处理的元素的后代元素的好方法,不包括本身元素,是在本元素的子元素中查找
        expr:用于查找的表达式
        obj:一个用于匹配元素的jQuery对象
        ele:一个DOM元素
        * 用法:jq对象.find(参数)
        * $("p").find("span"); // 查找所有p标签元素下的span元素对象
    # parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合,参数是筛选表达方式
        * 用法:jq对象.parent(筛选表达式)
        * $("p").parent(); // 获取p元素的所有的父类元素对象

    1.8 jQuery工具类

    # jQuery.each(object, [callback]):通用例遍方法,可用于例遍对象和数组
        object:需要例遍的对象或数组
        callback:每个成员/元素执行的回调函数
        * 用法:$.each(对象或数组,function(i,n){代码}); i是循环的索引值,n是每次循环时的值
        * $.each(数组或对象集合, function(i, n) {  // 将数组内容添加到select的option中
                $("select").append("<option value='"+i+"'>"+n+"</option>");
        * });
        * 用法:$(对象或数组).each(function(i,n){代码}); i是循环的索引值,n是每次循环时的值
        * $(数组或对象集合).each(function(i, n) {  // 将数组内容添加到select的option中
                $("select").append("<option value='"+i+"'>"+n+"</option>");
        * });

    案例代码

    // 定义省份和城市信息
    var provinceArr = ["北京市", "河南省", "四川省", "湖北省", "浙江省"];
    // 定义存储城市信息的二维数组,与省份数组的元素相对应
    var citys = new Array(provinceArr.length);
    // 北京对应的城市信息
    citys[0] = ["北京市"];
    // 河南对应的城市信息
    citys[1] = ["郑州市", "开封市", "洛阳市", "信阳市"];
    // 四川对应的城市信息
    citys[2] = ["成都市", "遂宁市", "乐山市", "绵阳市"];
    // 湖北对应的城市信息
    citys[3] = ["武汉市", "襄阳市", "荆州市", "恩施市"];
    // 浙江省对应的城市信息
    citys[4] = ["杭州市", "温州市", "义乌市", "嘉兴市"];
    // 初始化省份信息
    $(function(){
      var $p = $("#province");
      $.each(provinceArr, function(i, n) {
        $p.append("<option value='"+i+"'>"+n+"</option>");
      });
    });
    // 生成省份和城市信息
    $(function(){
      var $city = $("#city");
      var $p = $("#province");
      $p.change(function(){
        // 将城市的信息清空,方式1
        $("#city option[value]").remove();
        // 将城市的信息清空,方式2,将下拉框的options数组长度设为1,保留第一个
        // $city[0].options.length = 1;
        // 添加城市的信息
        $.each(citys[$p.val()], function(i, n) {
          $city.append("<option value='"+n+"'>"+n+"</option>");
        });
      });
    });

    1.9 jQuery的事件

    # on(events,[selector],[data],fn):在选择元素上绑定一个或多个事件的事件处理函数,参数中不能使用this
        * events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin";
        * selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代,如果选择的< null或省略,当它到达选定的元素,事件总是触发;
        * data:当一个事件被触发时要传递event.data给事件处理函数;
        * fn:该事件被触发时执行的函数, false 值也可以做一个函数的简写,返回false.
        * 用法:jq对象.on(事件,事件处理函数)
          * $("p").on("click", function(){
              alert(this.text());
          * });
        * 用法:jq对象.on(事件,参数,事件处理函数)
          * function myHandler(event) {
              alert(event.data.foo);
            }
          * $("p").on("click", {foo: "bar"}, myHandler); // 传递参数
    # bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数
        * type: 含有一个或多个事件类型的字符串,由空格分隔多个事件,比如"click"或"submit",还可以是自定义事件名;
        * data:作为event.data属性值传递给事件对象的额外数据对象;
        * fn:绑定到每个匹配元素的事件上面的处理函数.
        * 用法:jq对象.bind(事件,参数,事件处理函数)
        * $("p").bind("click", function(){
            alert( $(this).text() );
        * });
        * $('#foo').bind('mouseenter mouseleave', function() {
            $(this).toggleClass('entered');
        * });
        * $("button").bind({
            click:function(){$("p").slideToggle();},
            mouseover:function(){$("body").css("background-color","red");},  
            mouseout:function(){$("body").css("background-color","#FFFFFF");}  
        * });
    # delegate(selector,[type],[data],fn):指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
        * selector:选择器字符串,用于过滤器触发事件的元素;
        * type:附加到元素的一个或多个事件,由空格分隔多个事件值,必须是有效的事件;
        * data:传递到函数的额外数据;
        * fn:当事件发生时运行的函数.
        * 用法:jq对象.delegate(过滤器字符串,事件类型,参数,事件执行函数)
        * $("div").delegate("button","click",function(){ // 按钮点击显示/隐藏p标签
                $("p").slideToggle();
        * });
    # blur([[data],fn]):当元素失去焦点时触发blur事件
        * data:blur([Data], fn)可传入data供函数fn处理;
        * fn:在每一个匹配元素的blur事件中绑定的处理函数.
        * 用法:jq对象.blur(参数,事件处理函数)
        * $("p").blur(function(){alert("段落失去焦点")}); // 当p标签元素失去焦点,提示信息
    # change([[data],fn]):当元素的值发生改变时,会发生change事件,作用于文本域,textarea和select元素,在元素失去焦点时触发
        * data:change([Data],fn)可传入data供函数fn处理;
        * fn:在每一个匹配元素的change事件中绑定的处理函数.
        * 用法:jq对象.change(参数,修改事件处理函数)
        * $("input[type='text']").change(function(){alert(this.innerHtml)});
    # click([[data],fn]):触发每一个匹配元素的click事件
        * data:click([Data],fn)可传入data供函数fn处理;
        * fn:在每一个匹配元素的click事件中绑定的处理函数.
        * 用法:jq对象.click(参数,点击事件处理函数)
        * $("button").click(function(){处理代码}); // button标签元素的点击事件
    # focus([[data],fn]):当元素获得焦点时,触发focus事件
        * data:focus([Data], fn)可传入data供函数fn处理;
        * fn:在每一个匹配元素的focus事件中绑定的处理函数.
        * 用法:jq对象.focus(参数,获得焦点处理函数)
        * $("input[type='text']").focus(function(){alert("文本框获得焦点")});
    # submit([[data],fn]):当提交表单时,会发生submit事件,只适用于表单元素
        * data:submit([Data],fn)可传入data供函数fn处理;
        * fn:在每一个匹配元素的submit事件中绑定的处理函数.
        * 用法:jq对象.submit(参数,提交表单处理函数)
        * $("form").submit(function(){alert("表单提交")});
    # trigger(type,[data]):在每一个匹配的元素上触发某类事件
        * $(选择器).trigger('事件类型',处理函数);
    # triggerHandler(type, [data]):触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器默认动作,也不会产生事件冒泡
        * $(选择器).trigger('事件类型',处理函数);
    # trigger和triggerHandler的区别:
        * triggerHandler不会触发浏览器默认事件,trigger会触发浏览器默认事件;
        * triggerHandler只触发匹配对象集合中第一个元素的事件处理函数,trigger触发匹配对象集合中每一元素的事件函数;
        * triggerHandler返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象,如果最开始的jQuery对象集合为空,返回undefined.

    1.10 jQuery综合案例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>注册页面</title>
            <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
            <script>
                $(function() {
                    // 定义数组:
                    var cities = [
                        ["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
                        ["南京市", "苏州市", "扬州市", "无锡市"],
                        ["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施"],
                        ["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
                        ["长春市", "吉林市", "四平市", "延边市"]
                    ];
                    var $city = $("#city");
                    // 获得代表省份的下拉列表:
                    $("#province").change(function() {
                        // alert(this.value);
                        // alert($(this).val());
                        $city.get(0).options.length = 1;
    
                        var val = this.value;
                        // 遍历并且判断:
                        $.each(cities, function(i, n) {
                            // 判断:
                            if(i == val) {
                                $(n).each(function(j, m) {
                                    // alert(j+"   "+m);
                                    $city.append("<option>" + m + "</option>");
                                });
                            }
                        });
                    });
                });
            </script>
    
            <!--jQuery进行表单校验-->
            <script>
                $(function() {
                    // 将必填项的输入框添加*
                    $(".require").parent().append("<b class='high'> *</b>");
    
                    // 为所有的输入框添加失去焦点事件
                    $("form input").blur(function() {
                        // 将所有的提示信息清除
                        $(this).parent().children(".formtips").remove();
    
                        // 判断失去焦点的元素是否是username
                        if($(this).attr("id") == "username") {
                            if($(this).val() == "") {
                                $(this).parent().append("<span class='formtips onError'>用户名不能为空</span>");
                            } else {
                                $(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>");
                            }
                        }
    
                        // 判断失去焦点的元素是否是password
                        if($(this).attr("id") == "password") {
                            if($(this).val() == "") {
                                $(this).parent().append("<span class='formtips onError'>密码不能为空</span>");
                            } else {
                                if($(this).val().length < 6) {
                                    $(this).parent().append("<span class='formtips onError'>密码长度至少六位</span>");
                                } else {
                                    $(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");
                                }
                            }
                        }
                        // 判断失去焦点的元素是否是repassword
                        if($(this).attr("id") == "repassword") {
                            if($(this).val() == "") {
                                $(this).parent().append("<span class='formtips onError'>确认密码不能为空</span>");
                            } else {
                                // 获取密码框的后面是否有span标签
                                // 获取密码框的兄弟元素span标签(如果有),再获取span标签的父元素td,在td的子元素中查找class属性为onError
                                // if($("#password").siblings().parent().find(".onError").length != 0){
                                // 获取密码框的含有class属性为onError的所有兄弟元素集合
                                if($("#password").siblings(".onError").length != 0) {
                                    // 获取密码框的父元素td,在td的所有子元素中查找所有的class属性为onError的元素集合
                                    // if($("#password").parent().find(".onError").length != 0){
                                    $(this).parent().append("<span class='formtips onError'>第一次输入密码有误</span>");
                                } else if($(this).val() != $("#password").val()) {
                                    $(this).parent().append("<span class='formtips onError'>两次密码不一致</span>");
                                } else {
                                    $(this).parent().append("<span class='formtips onSuccess'>确认密码可用</span>");
                                }
                            }
                        }
    
                        // 校验邮箱
                        if($(this).attr("id") == "email") {
                            if($(this).val() == "") {
                                $(this).parent().append("<span class='formtips onError'>邮箱不能为空</span>");
                            } else {
                                if($(this).val().match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {
                                    $(this).parent().append("<span class='formtips onSuccess'>邮箱可用</span>");
                                } else {
                                    $(this).parent().append("<span class='formtips onError'>邮箱格式错误</span>");
                                }
                            }
                        }
                        // JQ对象绑定事件,返回的是自身,则可以使用链式绑定其他事件
                        // 输入框的获取焦点事件
                    }).focus(function() {
                        // 自身对象的失去焦点方法
                        $(this).triggerHandler("blur");
                        // 输入框的键盘输入事件
                    }).keyup(function() {
                        $(this).triggerHandler("blur");
                    });
    
                    // form表单提交校验
                    $("form").submit(function() {
                        // 触发所有input的blur事件,以便完成各个字段信息的校验
                        $("input").trigger("blur");
                        // 获取出现错误信息的输入框的个数
                        var length = $(".onError").length;
                        if(length > 0) {
                            alert("信息存在错误,请重新填写!")
                            return false; //返回false,form表单不会提交
                        }
                    });
                });
            </script>
        </head>
        <body>
            <!--整体DIV-->
            <div class="bodyDiv">
                <form action="" method="post">
                    <table border="0" width="100%" cellspacing="15">
                        <tr>
                            <td>用户名</td>
                            <td><input type="text" id="username" name="username" class="require"></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input type="password" id="password" name="password" class="require"></td>
                        </tr>
                        <tr>
                            <td>确认密码</td>
                            <td><input type="password" id="repassword" name="repassword" class="require"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td><input type="radio" name="sex" value="男"><input type="radio" name="sex" value="女"></td>
                        </tr>
                        <tr>
                            <td>籍贯</td>
                            <td>
                                <select id="province" name="province">
                                    <option value="">-请选择-</option>
                                    <option value="0">浙江省</option>
                                    <option value="1">江苏省</option>
                                    <option value="2">湖北省</option>
                                    <option value="3">河北省</option>
                                    <option value="4">吉林省</option>
                                </select>
                                <select id="city" name="city">
                                    <option>-请选择-</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>爱好</td>
                            <td>
                                <input type="checkbox" name="hobby" value="篮球" />篮球
                                <input type="checkbox" name="hobby" value="足球" />足球
                                <input type="checkbox" name="hobby" value="排球" />排球
                                <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
                            </td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td><input type="text" id="email" name="email"></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </body>
    </html>
    展开全文
  • JavaWeb前端开发知识总结(HTML)

    千次阅读 2017-05-03 10:33:33
    JavaWeb前端开发知识总结-HTML

    JavaWeb前端开发知识总结(HTML)

    1. HTML技术

    1.1 HTML概述

    HTML是用来描述网页的一种语言;
    HTML指的是超文本标记语言 (Hyper Text Markup Language) ;
    HTML不是一种编程语言,而是一种标记语言 (markup language) ,标记语言是一套标记标签 (markup tag)
    HTML使用标记标签来描述网页.

    1.2 HTML标签

    • HTML标记标签通常被称为HTML标签 (HTML tag).
      • HTML 标签是由尖括号包围的关键词,比如 ;
      • HTML 标签通常是成对出现的,比如;
      • 标签对中的第一个标签是开始标签,第二个标签是结束标签;
      • 开始和结束标签也被称为开放标签和闭合标签.
    • HTML规范:
      • 格式: <标签 属性1=“属性值1” 属性2=“属性值2”…>内容题

    1.2.1 排版标签

    段落标签(P标签):

    特点:段前和断后自动换行
    格式:<p align="center">段落内容</p>
    align属性:对齐方式,取值可以是:center/right/left

    换行标签(br标签):

    <br/>换行:源码的换行被浏览器忽略成一个空格而不能实现换行,使用br标签代表换行.

    特殊字符:

    空格:&nbsp;
    >  :  &gt;
    <  :  &lt;

    1.2.2 超链接标签

    作用:跳转指定资源,资源可以是:图片/文件/网页.
    格式:<a href="指定资源路径" target="跳转方式">名称</a>
    属性:
        href:指定跳转的资源路径;
        target属性:
            _blank:新开一个网页标签页;
            _self:在本身网页打开,覆盖之前的网页;
    注意:href属性和标签的内容体同时存在才能有超链接效果;
    扩展:href=""和href="#"区别:
        href="":会刷新页面;
        href="#":只是在地址栏添加了一个#,不会刷新页面;
    <a>标签绑定事件一定要将href="#",绑定事件,可以通过事件的返回值控制链接是否跳转.

    1.2.3 图片标签

    作用:在网页中展示图片;
    格式:<img src="本地路径图片或者互联网图片"/>
    相对路径:
        1.同一级目录     -- <img src="1.png" />或者<img src="./1.png" />
        2.下级目录       -- <img src="img/1.png" />或者<img src="./img/1.png" />
        3.在上一级目录   -- <img src="../1.png" />
        4.在上一级目录的photo文件夹内:  -- <img src="../photo/1.png" />

    1.2.4 表格标签

    表格创建步骤:
        1.<table></table>
        2.<table><tr></tr></table>
        3.<table><tr><td>内容</td></tr></table>
    <table>标签:
        作用:定义一个表格
        属性:
            边框—border:数字;
            align:对齐方式,可取值为center/right/left;
    <tr>标签:
        作用:定义表格中的行;
    单元格<td><th>:
        <th>:用于表格的表头(字体会居中加粗),表格的每列的说明;
        <td>:一般单元格,用于展示具体数据;
        跨行属性:rowspan="数字"  -- 数字代表跨几行;
        跨列属性:colspan="数字"  -- 数字代表跨几列;
        跨行跨列步骤:
            1.确定合并方式,是跨行还是跨列;
            2.确定合并几行或者几列;
            3.删除被设置合并属性外的其他需要被合并的单元格;

    1.3 表单

    1.3.1 input标签

    type属性:
        - text:type的默认值;
        - password:密码框;
        - radio:单选框,checked属性设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组),
            没有被选中不会提交,后台获取不到name属性,不能设置readonly属性;
        - checkbox:复选框,checked设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组),
            不能设置readonly属性;
        - button:普通按钮,点击事件默认会提交表单;
        - submit:提交表单按钮;
        - reset:重置表单按钮(相当于重新加载网页);
        - file:文本选择框;
        - hidden:隐藏输入框,一般设置不需要显示的数据;
    name属性:
         表单元素名称,代表提交之后的参数名,对于radio/checkbox,name可以使用来分组;
    value属性:设置<input>标签的默认值
        1.对于radio/checkbox类型一定要设置value属性,value代表的是该标签的提交的值;
        2.对于按钮类型,设置按钮显示的名称;
    readOnly只读属性:
        readOnly="readOnly",对于radio/disabled/按钮类型没有效果;
    disabled禁用属性:disabled="disabled";

    1.3.2 select标签

    作用:下拉选择框,配合<option>标签使用
    常用属性:
        name属性:表单名称以及提交后的参数名;
        multiple:设置下拉选项可以多选--multiple="multiple"
        readOnly:不能设置只读;
        disabled禁用:不能设置禁用;
    子标签:<option>标签
    <option><option/>之间的值是浏览器显示在下拉列表中的内容,而value属性中的值是表单被提交时被发送到服务器的值,如果没有指定value属性,选项的值将设置为<option>标签中的内容.
        属性:
            value:对于选项的值;
            selected:设置默认选中--selected="selected"

    1.3.3 textarea标签

    <textarea>标签:文本域,可以输入大量文字,可以自动换行
    属性:
        name:标签名称以及提交后的参数名;
        cols:文本框所占列数;
        rows:文本框所占行数;
        readOnly:只读属性 -- readOnly="readOnly";
        disabled:禁用 -- disabled="disabled";

    1.3.4 form标签

    作用:提交表单
    属性:
        action:提交的地址;
        method:提交的方式, get/post;
          get/post提交表单的区别:
              1.get地址栏有参数显示,post不会再地址栏显示参数(参数是放在了请求体中);
              2.get提交数据不安全(在地址栏显示数据),post相对安全;
              3.get提交的数据有限制大小(地址栏的数据长度有限制),post理论上对提交的数据大小不限制.

    2.HTML综合案例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>用户注册</title>
        </head>
        <body>
            <form action="#" method="post">
                <table border="4" width="500" height="20" align="center">
                    <tr>
                        <td align="right" width="100">用户名:</td>
                        <td>
                            <input type="text" name="name" id="name" placeholder="请输入用户名" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">密码:</td>
                        <td>
                            <input type="password" name="rpassword" id="rpassword" placeholder="请输入密码" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码:</td>
                        <td>
                            <input type="password" name="rpassword" id="rpassword" placeholder="请确认密码" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">性别:</td>
                        <td>
                            <input type="radio" name="sex" value="男" checked="checked" /><input type="radio" name="sex" value="女" /></td>
                    </tr>
                    <tr>
                        <td align="right">籍贯:</td>
                        <td>
                            <select name="pronvice">
                                <option value="请选择">--请选择--</option>
                                <option value="北京">北京</option>
                                <option value="深圳">深圳</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                                <option value="成都" selected="selected">成都</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>头像:</td>
                        <td>
                            <input type="file" name="file" id="file" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit" name="submit" value="注册" /> &nbsp; &nbsp; &nbsp;
                            <input type="reset" name="reset" value="重置" />
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
    展开全文
  • JavaWeb前端开发知识总结-JavaScript

    JavaWeb前端开发知识总结(JavaScript)

    1. JavaScript技术

    1.1 JavaScript概述

    1.一个轻量级的脚本语言;
    2.嵌入到HTML去执行;
    3.执行顺序由上往下;
    一定注意:在使用DOM操作HTML标签,要保证HTML标签已经加载到内存中.
    window.onload = function(){ } // 入口函数,当页面加载完成后会调用该函数

    JavaScript组成:

    JavaScript有三部分组成:
    ECMAScript:是javascript的基础,定义了基本的语法;
    BOM(浏览器对象模型):browser object model,BOM主要处理浏览器窗口和框架;
    DOM(文档对象模型):document Object model,DOM将把整个页面规划成由节点层级构成的文档.

    1.2 ECMAScript基本语法

    变量:

    声明变量使用var关键字:
    如:var a;  
    如:var b=字符串/数字/boolean/undefined/null;
    注意:变量声明可以不使用var关键字如a = ""; 但是直接使用就会报错(is not defined);
    使用函数:alert(变量),可以输出变量的值(以弹窗的形式).

    数据类型:

    原始类型:
        字符串:var str = "字符串"; var str1='字符串';typeof(str)---返回string;
        number:var num = 99;var num=99.999;typeof(num)---返回number;
        boolean类型:true/false
        undefined:未定义,var a; alert(a)---返回undefined;
        null:占位,typeof(null) --- 返回object;
    引用类型(object):
        数组:new Array();
        字符串对象:new String();

    运算符:

    基本运算符:+,-,*,/,%,可以进行扩展
    逻辑运算符:>,<,>=,<=,!=,==,===
        与java区别:===判断值和数据类型都是一致的才返回true;
        javaScript没有&和|;

    自定义函数:

    格式:function 函数名(参数列表){js代码}
    注意事项:
    1.参数列表没有var关键字;
    2.函数调用根据方法名进行调用,不存在重载方法,所以后面的方法会覆盖前面定义方法;
    3.一定有return返回值,如果函数不写return那么返回undefined,如果写了就直接返回指定的数据.

    1.3 BOM浏览器对象模型

    window对象:

    消息弹出框:
        alert():弹出框,可以有参数,显示参数的值;
        confirm():确认框,返回true/false;
        prompt输入框:返回输入的内容;
    定时器:
        循环定时器:
            1.setInterval("执行函数",毫秒值)--每隔多少毫米执行一次指定函数;
            2.格式: 
                setInterval("fun()",5000);    
                setInterval(function(){},5000);
            3.循环定时器返回值 var id = setInterval("fun()",5000);
            4.清除定时就要使用定时器返回的id—— clearInterval(id);
        一次性定时器:用法和循环定时器相同
            setTimeout(),设置定时;
            clearTimeout(),取消定时.

    location对象:

    href属性:表示当前地址栏的网址
        获取当前地址栏网址:location.href;
        设置当前地址栏的网址:location.href="网址";
    刷新页面:
        1.location.reload();
        2.location.href=location.href;

    1.4 DOM文档对象模型

    概述:

    DOM对象时根据HTML网页生成一个DOM树形结构,它由浏览器自动生成.

    获取DOM元素:

    1.通过id——document.getElementById("对应HTML标签的id属性值");
    2.通过name——document.getElementsByName("对应表单元素的name属性值");
    3.通过标签名称——document.getElementsByTagName("标签名称");
    
    注意事项:
        1.当form表单中存在相同的id时,通过documen.getElementById()获取的是第一个id的对象,后面相同id的对象获取不到.

    操作DOM元素属性:

    表单value属性:
        获得value属性:document.getElementBy(id).value;
        设置value属性:document.getElementBy(id).value="值";
    选中radio/checkbox:
        操作checked属性,checked="checked";
    选中下拉框:
        操作selected属性,selected="selected";
    操作HTML标签的内容:
        操作innerHTML,innerHTML="javascript".
    
    注意事项:
        1.使用DOM对象设置标签的style属性时,需先获取标签的style属性,然后再进行style属性值的设置;
        2.获取表单中radio单选框的值,需要将同一组中的所有的radio遍历,获取checked属性为true的value值;
        3.获取表单中checkbox复选框的值,需将同组的所有checkbox遍历,获取checked属性值为true的value值;
        4.获取表单中下拉框(select)的值,直接获取select的id,然后获取其属性值value;
        5.隐藏表格中某一行:tab.rows[x].hidden = "hidden";
        6.使用数组的length属性,将其长度设为0,可以将数组清空;
        7.使用Ajax传递参数含有中文时,使用编码(encodeURI),后台使用解码(decodeURI);

    添加DOM元素:

    添加DOM元素的步骤:
    1.首先获取父节点:parentObj;
    2.创建一个节点对象:var childObj=document.createElement();
    3.创建一个文本对象:var textNode= document.createTextNode();
    4.讲文本对象添加到节点对象中:childObj.appendChild(textNode);
    5.讲节点对象添加到父节点对象中:parentObj.appendChild(childObj).

    删除DOM元素:

    方式一:父元素对象.removeChild(子元素对象);
    方式二:对象.remove().

    1.5 JavaScript事件绑定

    1.加载完毕事件绑定:window.onload = function(){js代码};
    2.DOM对象绑定事件:
        绑定事件步骤:
            1.获得绑定对象:obj
            2.确定绑定什么事件--onclick/onfocus/onblur/ onsubmit/onchange....
            3.绑定事件:obj.onclick = function(){js功能代码};
    注意事项:
        1.onload事件能加在<body>,<img>,<link>,<script>标签上;
        2.onsubmit事件使用在form表单中,需要有返回值,当返回true时,表单提交,返回false时表单不提交,默认是true;
        3.标签进行DOM方式绑定事件时,需要保证要绑定的标签已经加载进内存中,一般绑定写在window.onload=function() {}内,再绑定时调用具体的时间函数;
        4.form表单中的<input type="button">默认是submit,会提交表单;
    展开全文
  • JavaWeb前端开发知识总结-CSS

    JavaWeb前端开发知识总结(CSS)

    1. CSS技术

    1.1 CSS概述

    • CSS 指层叠样式表 (*C*ascading *S*tyle *S*heets) .

    CSS规范

    引入方式:
        1.<标签 style="css属性1:属性值1;css属性2:值1 值2;..." >内容体</标签>
        2.<style> 选择器 { css代码 } </style>
        3.<link rel="stylesheet" href="相对路径css文件" /> /*使用外部的css文件*/
    注意事项:  
        1.引入外部CSS样式时,使用<link rel="stylesheet" href="css/style.css" />,其中的rel属性不能省略;
        2.div布局时使用float属性进行div的浮动排列,当一行布局结束后使用clear属性进行浮动布局的清除.
    优先级:行内样式>页面样式>外部样式.

    1.2 CSS选择器

    元素选择器:
        标签名称{ css代码 }
    id选择器:
         #id属性值{ css代码 }
    类选择器:
        .class属性值{ css代码 }
    并列选择器:
        选择器1,选择器2{ css代码 }
    后代选择器:
        选择器1 选择器2{ css代码 }  /*选择器1里面所有选择器2*/
    子元素选择器:
        选择器1 > 选择器2{ css代码 }  /*选择器1里面的第一层选择器2所代表的元素*/

    1.3 CSS常用属性

    字体:
        大小:font-size:数字px;
        颜色:color
        字体:font-family,字体的类型
        字体粗细:font-weight:数字
    对齐方式:对于文本的对齐方式,text-align:center/right/left
    布局(浮动属性)float:针对块级元素(div,table)有效,使用display:inline-black,可以将行内元素转换为块元素
        float的值--left:向左浮动,使用-- float:left
        float的值--right:向右浮动,使用-- float:right
    清除浮动clear:both/left/right,可以是<br clear="all" />进行清除浮动
    width/height:宽度高度,只针对块级元素有效.

    盒子模型:

    边框border:宽度 颜色 样式;
        border:1px solid red;
        border-bottom:1px solid red;
    margin:外边距
        描述:边框距离外部的
        margin: 10px; /*设置四边外边距*/
        margin:10px 5px; /*上下是10px,左右5px*/
        margin-left:5px; /*设置左外边距*/
        对于div居中:margin:0 auto;等价于margin-left:auto;margin-right:auto;
    padding:内边距
        padding:10px;  /*设置四周内边距*/
        padding:10px 5px; /*上下内边距10px  左右内边距5px*/
        padding-left:5px;
    展开全文
  • JavaWeb前端开发知识总结(mysql)

    千次阅读 2017-05-03 10:36:46
    JavaWeb前端开发知识总结-MySql
  • 我们来说一下网站,应用web前端开发技术推出的HTML5响应式网站比起传统的网站是可以“移动”的。它可以根据设备的大小自行去改变页面的布局,从而让用户们的体验上升到一个新的高度,这样一来它就不仅仅是一个PC网站...
  • DHTML帮助文档+javascript帮助文档+jquery1.8帮助文档,非常全的web前端开发文档,很实用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,431
精华内容 4,972
关键字:

javaweb前端开发

java 订阅