day41_jQuery学习笔记_02

jQuery 学习回顾

jQuery 的语法:
    $("选择器")
    $(dom对象)
    $("<a>点我啊</a></br>").replaceAll("p");

jQuery 的选择器:
    基本:#id、element、.class、s1,s2,... 、*
    层级:A B、A>B、A+B、A~B
    基本过滤::first、:last、:eq(index)、:gt(index)、:lt(index)、:even、:odd、:header、:animated、:focus
    内容过滤::contains(text)、:empty、:parent、:has(selector)
    可见过滤::visible、:hidden
    属性:[attr]、[attr=val]、[attr!=val]、[attr^=val]、[attr$=val]、[attr*=val]、[attr=val][][]
    子元素::nth-child(index)、:first-child、:last-child、:only-child
    表单过滤::input、:text、:password、:radio、:checkbox、:file、:submit、:reset、:image、:button、:hidden
    表单对象属性过滤::enabled、:disabled、:checked、:selected

jQuery 的属性和CSS:
    属性:attr()、removeAttr()
    CSS类:addClass()、removeClass()、toggleClass()
    HTML代码/文本/值:val()与val(...)、html()与html(...)、text()与text(...)

    CSS:css(name, value)、css(name)、css(prop)
    位置:offset()与offset(...)  格式:{"top":100, "left":100}
        scrollTop()与scrollTop(...)、scrollLeft()与scrollLeft(...)
    尺寸:width()与width(...)、height()与height(...)

jQuery 的文档处理:
    内部插入:append()、prepend()、appendTo()、prependTo()
    外部插入:after()、before()、insertAfter()、insertBefore()
    删除:empty()、remove()、detach() --> 绑定数据:data()与data(...)
    复制:clone(true)
    替换:replaceWith()、replaceAll()
    包裹:wrap()、wrapAll()、wrapInner()、unWrap()

jQuery 的文档处理的小案例

示例代码如下: 1.左右select选择.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Insert title here</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // 左边
                $("#left1").click(function() {
                    // 选中多个,只过第一个
                    $("#leftSelectId>option:selected:first").removeAttr("selected").appendTo("#rightSelectId");
                });
                $("#left2").click(function() {
                    // 选中几个,就过几个
                    $("#leftSelectId>option:selected").removeAttr("selected").appendTo("#rightSelectId"); // :selected 选择(指的是 下拉列表 select 标签中的 option 标签)
                });
                $("#left3").click(function() {
                    // 选中或者没选中,都过去
                    // $("#leftSelectId option").removeAttr("selected").appendTo("#rightSelectId"); // A B 获得A元素内部所有的B的后代元素。(爷孙)
                    $("#leftSelectId>option").removeAttr("selected").appendTo("#rightSelectId"); // A>B 获得A元素内部所有的B的子元素。(父子)
                });

                // 右边
                $("input:eq(3)").click(function() {
                    // 选中多个,只过第一个
                    $("#rightSelectId>option:selected:first").removeAttr("selected").appendTo("#leftSelectId");
                });
                $("input:eq(4)").click(function() {
                    // 选中几个,就过几个
                    $("#rightSelectId>option:selected").removeAttr("selected").appendTo("#leftSelectId"); // :selected 选择(指的是 下拉列表 select 标签中的 option 标签)
                });
                $("input:eq(5)").click(function() {
                    // 选中或者没选中,都过去
                    // $("#leftSelectId option").removeAttr("selected").appendTo("#leftSelectId"); // A B 获得A元素内部所有的B的后代元素。(爷孙)
                    $("#rightSelectId>option").removeAttr("selected").appendTo("#leftSelectId"); // A>B 获得A元素内部所有的B的子元素。(父子)
                });
            });
        </script>

        <style type="text/css">
            .textClass {
                background-color: #ff0000;
            }
        </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="leftSelectId" style="width:100px" multiple="multiple" size="10">
                    <option>刘备</option>
                    <option>关羽</option>
                    <option>张飞</option>
                    <option>诸葛亮</option>
                </select>
            </td>

            <td>
                <input id="left1" type="button" value=">" style="width:50px"/><br/>
                <input id="left2" type="button" value=">>" style="width:50px"/><br/>
                <input id="left3" type="button" value=">>>" style="width:50px"/><br/>
                <input type="button" value="<" style="width:50px"/><br/>
                <input type="button" value="<<" style="width:50px"/><br/>
                <input type="button" value="<<<" style="width:50px"/><br/>
            </td>

            <td>
                <select id="rightSelectId"  style="width:100px" multiple="multiple" size="10">
                </select>
            </td>
        </tr>
    </table>    
</body>
</html>

示例动图如下:

六、jQuery 的筛选

综述如下:

jQuery 的选择器可以的完成功能,jQuery 的筛选则提供功能相同的函数。
例如:
    选择器  :first
    筛选    first()
二者对比:
例如:
    $("div:first")      直接获得第一个div,永远只能操作第一个div
    $("div").first()    先获得所有的div,然后从所有的div中筛选出第一个,可以操作第一个div,也可以操作所有div

6.1、过滤

详解如下:

eq(index|-index)    类似 :eq()
    index:正数,从头开始获得指定索引的元素。这个元素的位置是从0算起。即:0表示开始第一个
    -index:负数,从尾开始获得指定索引的元素。从集合中的最后一个元素开始倒数。即:-1表示最后一个
first()             第一个   类似 :first
last()              最后一个 类似 :last

is()                判断,返回的是布尔值
hasClass(class)     判断是否是指定class。<xxx class="my">  等价于 is("." + class)。返回的是布尔值

filter()            筛选出与指定表达式匹配的元素集合,从A、B、C中筛选出A、B来
not()               将指定内容删除,从A、B、C中删除A、B
-------------------------------------------------------
has()               是否有子元素
slice(start, end)   截取元素,[2,4) => 2,3 包前不包后
map(callback)       将jQuery对象 拆分成 jQuery对象数组,不怎么使用

示例代码如下: 01-过滤.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>01-筛选-过滤.html</title>

    <!-- 引入jQuery -->
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="./script/assist.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            // <input type="button" value="选择索引值等于3的div元素" id="btn1"/>
            $("#btn1").click(function() {
                $("div").eq(3).css("background-color", "#ff0");
                // $("div").eq(-1).css("background-color", "#ff0").show(1000);
            });
            // <input type="button" value="选择第一个div元素" id="btn2"/>
            $("#btn2").click(function() {
                $("div").first().css("background-color", "#f0f");
            });
            // <input type="button" value="选择最后一个div元素" id="btn3"/>
            $("#btn3").click(function() {
                $("div").last().css("background-color", "#f0f").show(1000);
            });

            // <input type="button" value="id=one的div,class是否是one" id="btn4"/>
            $("#btn4").click(function() {
                alert($("div#one").hasClass("one")); // true
            });

            // <input type="button" value="选择class为none的所有div" id="btn5"/>
            $("#btn5").click(function() {
                // $("div.none").css("background-color", "#0ff").show(1000);
                $("div").filter(".none").css("background-color", "#0ff").show(1000);
            });
            // <input type="button" value="class为hide的div,下一个兄弟是否是span" id="btn6"/>
            $("#btn6").click(function() {
                alert($("div.hide").next().is("span")); // true
            });
            // <input type="button" value="选择所有div中含有div的" id="btn7"/>
            $("#btn7").click(function() {
                $("div").has("div").css("background-color", "#00f");
            });
            // <input type="button" value="选择class为one的div,子元素中没有title属性的div" id="btn8"/> 
            // 换句话说:选择class为one的div,然后把有title属性的div过滤掉
            $("#btn8").click(function() {
                // 练习一:
                // 选择class为one的div,子元素中没有title属性的div
                $("div.one").not("[title]").css("background-color", "#0f0");

                // 练习二:
                // 选择class为one的div,子元素中没有title属性的  父div
                // $("div.one").children().not("[title]").parent().css("background-color", "#0f0");

                // 练习三:
                // 选择class为one的div,子元素中都没有title属性的  父div
                // 先把 “子元素中都有title属性的  父div” 过滤出来
                // var $aa = $("div.one").children().filter("[title]").parent();
                // 再将上面的过滤出来的东西删掉
                // $("div.one").not($aa).css("background-color", "#0f0");
            });
            // <input type="button" value="选择索引号为3, 4的div" id="btn9"/> // [3, 4) 只有索引3
            $("#btn9").click(function() {
                $("div").slice(3, 4).css("background-color", "#f00");
            });    
        });
    </script>
</head>
<body>
    <h3>筛选-过滤</h3>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/>
    <label for="isreset">点击下列按钮时先自动重置页面</label>
    <br/>
    <br/>

    <!-- 控制按钮 -->       
    <input type="button" value="选择索引值等于3的div元素" id="btn1"/>
    <input type="button" value="选择第一个div元素" id="btn2"/>
    <input type="button" value="选择最后一个div元素" id="btn3"/>
    <input type="button" value="选择id=one的div,class是否是one" id="btn4"/>
    <input type="button" value="选择class为none的所有div" id="btn5"/>
    <input type="button" value="class为hide的div,下一个兄弟是否是span" id="btn6"/>
    <input type="button" value="选择所有div中含有div的" id="btn7"/>
    <input type="button" value="选择class为one的div,子元素中没有title属性的div" id="btn8"/>
    <input type="button" value="选择索引号为3,4的div" id="btn9"/>

    <br/>
    <br/>

    <!--文本隐藏域-->
    <input type="hidden" value="hidden_1"/> 
    <input type="hidden" value="hidden_2"/> 
    <input type="hidden" value="hidden_3"/>
    <input type="hidden" value="hidden_4"/>

    <!-- 测试的元素 -->
    <div class="one" id="one">
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>

    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>

    <div class="one">
        class为one
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>

    <div style="display:none;" class="none">style的display为"none"的div</div>

    <div class="hide">class为"hide"的div</div> 

    <span id="mover">正在执行动画的span元素</span>
</body>
</html>

示例动图如下:

6.2、查找

详解如下:

例如:
    <A>
        <B>
            <C></C>
            <D></D>
            <E></E>
            <F></F>
        </B>
    </A>
-------------------------------------------------------
B.children([...])   获得所有的子元素。CDEF
A.find(D)           从指定的区域查询指定元素。D

D.next()            获得下一个兄弟。E
D.nextAll()         获得后面的所有兄弟。EF

E.prev()            获得上一个兄弟。D(prev = previous)
E.prevAll()         获得前面的所有兄弟。CD

E.siblings()        获得所有兄弟。CDF(siblings:兄弟姐妹)

E.parent()          获得父元素(不含自己)。B
E.parents()         获得所有的父元素(不含自己)。AB
E.closest(A)        向上获得指定的父元素(含自己),如果获得到了,就返回一个对象;如果没有获得到,就返回空的jQuery对象。
-------------------------------------------------------
C.nextUntil(E)      获得后面所有兄弟,直到指定条件位置为止。DE
F.prevUntil(D)      获得前面所有兄弟,直到指定条件位置为止。DE
-------------------------------------------------------
closest和parents的主要区别是:
    1、前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
    2、前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
    3、前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。 

示例代码如下: 02-查找.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>02-查找.html</title>

    <!-- 引入jQuery --> 
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="./script/assist.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />   
    <script type="text/javascript">
        $(document).ready(function() {
            // <input type="button" value="选择 id=two 的所有的子元素" id="btn1"/>
            $("#btn1").click(function() {
                $("#two").children().css("background-color", "#ff0");
                // $("#two").children("[title='test']").css("background-color", "#ff0");
            });
            // <input type="button" value="选择 id=two 的子元素title=test 的元素 " id="btn2"/>
            $("#btn2").click(function() {
                $("#two").children("[title='test']").css("background-color", "#ff0");
            });
            // <input type="button" value="选择 id=two 的下一个兄弟" id="btn3"/>
            $("#btn3").click(function() {
                $("#two").next().css("background-color", "#f0f");
            });
            // <input type="button" value="选择 id=two 的后面的所有兄弟" id="btn4"/>
            $("#btn4").click(function() {
                $("#two").nextAll().css("background-color", "#0ff").show(1000);
            });
            // <input type="button" value="选择 id=two 的上一个兄弟" id="btn5"/>
            $("#btn5").click(function() {
                $("#two").prev().css("background-color", "#00f").show(1000);
            });
            // <input type="button" value="选择 id=two 的前面的所有兄弟" id="btn6"/>
            $("#btn6").click(function() {
                $("#two").prevAll().css("background-color", "#0f0").show(1000);
            });
            // <input type="button" value="选择 id=two 的所有兄弟" id="btn7"/>
            $("#btn7").click(function() {
                $("#two").siblings().css("background-color", "#f0f").show(1000);
            });
            // <input type="button" value="选择 id=two 的父元素" id="btn8"/>
            $("#btn8").click(function() {
                $("#two").parent().css("background-color", "#ff0");
            });
            // <input type="button" value="选择 title='tesst' 的父元素body元素" id="btn9"/>
            $("#btn9").click(function() {
                $("div[title='tesst']").closest("body").css("background-color", "#000");
            });            
        });
    </script>
</head>
......

示例动图如下:

6.3、串联

详解如下:

作用:将多条语句,改成一条。(得瑟代码)

A.add(B)    将A和B组合成一个对象 。类似:$("A, B")
andSelf()   将之前的对象添加到操作的集合中
    A.children().andSelf()  
       A   A的孩子    A的孩子和A
end()       回到最近的一个"破坏性"操作之前
    A.children().children().end() .end()  
    A   A的孩子    A的孙子   A的孩子  A
-------------------------------------------------------
contents()  获得所有的子节点(子节点包括:子元素 和 文本)

示例代码如下: 03-串联.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>03-串联.html</title>
    <!-- 引入jQuery --> 
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="./script/assist.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>   
    <script type="text/javascript">
          $(document).ready(function() {
            // <input type="button" value="选择 id=one和two 的div" id="btn1"/>
            $("#btn1").click(function() {
                $("#one").add('#two').css("background-color", "#ff0");
            });            
            // <input type="button" value="选择id=one 的所有的孩子,以及one自己" id="btn2"/>
            $("#btn2").click(function() {
                $("#one").children().andSelf().css("background-color", "#f0f");
                // $("#one").children().add("#one").css("background-color", "#f0f");
            });    
            // <input type="button" value="选择id=one 的所有的孩子,设置颜色为红色,设置one自己为黄色" id="btn3"/>
            $("#btn3").click(function() {
                $("#one").children().css("background-color", "#f00").end().css("background-color", "#ff0");
                // $("#one").children().css("background-color", "#f00").parent().css("background-color", "#ff0");
                // $("#one").css("background-color", "#ff0").children().css("background-color", "#f00");
            });    
            // <input type="button" value="打印id=two 的子节点个数" id="btn4"/>  
            $("#btn4").click(function() {
                alert($("#two").contents().size());
                // alert($("#two").contents().length);
            });                
        });
    </script>
</head>
......

示例动图如下:

6.4、筛选案例

示例代码如下: 2.QQ用户分组.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>筛选案例-QQ用户分组</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 1、所有的分组的列表项默认都是隐藏的
            // 2、分组<span>可以点击,控制其列表项的显示与隐藏
            // 3、当前分组的列表项显示时,其他分组的列表项要隐藏
            $("div").children("a").hide().prev("span").click(function() {
                // $(this).nextAll("a").show().parent().siblings("div").find("a").hide();
                $(this).nextAll("a").toggle().parent().siblings("div").find("a").hide();
            });
        });
    </script>

    <style type="text/css">
        div * {
            display: block;
            width: 200px;
        }
        div span {
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div>
        <span>追求中</span>
        <a>志明</a>
        <a>春娇</a>
    </div>
    <div>
        <span>已交往</span>
        <a>明郎</a>
        <a>娇儿</a>
    </div>
    <div>
        <span>分手了</span>
        <a>张志明</a>
        <a>余春娇</a>
    </div>
</body>
</html>

示例动图如下:

七、jQuery 的事件

7.1、常见事件总结

示例代码如下: 1.常见事件.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>01-常见事件.html</title>
    <style type="text/css">
    #e02 {
        border: 1px solid #000000;
        height: 200px;
        width: 200px;
    }
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#e01").blur(function() {
                $("#textMsg").html("文本框失去焦点事件:blur");
            }).focus(function() {
                $("#textMsg").html("文本框获得焦点事件:focus,");
            }).keydown(function() {
                $("#textMsg").append("键盘按下事件:keydown,");
            }).keypress(function(event) {
                $("#textMsg").append("键盘按事件:keypress,");
            }).keyup(function() {
                $("#textMsg").append("键盘弹起事件:keyup,");
            }).select(function(event) {
                // 只支持谷歌
                var sub = $(this).val().substring(event.target.selectionStart, event.target.selectionEnd);
                $("#textMsg").html("文本框内容被选中事件:select," + sub);
            });

            var i = 0;
            $("#e02").mouseover(function() {
                $("#divMsg").html("鼠标移入事件:mouseover");
            }).mousemove(function() {
                // $("#divMsg").html("鼠标移动事件:mousemove , " + i++);
            }).mouseout(function() {
                $("#divMsg").html("鼠标移出事件:mouseout");
            }).mousedown(function() {
                $("#divMsg").html("鼠标按下事件:mousedown");
            }).mouseup(function() {
                $("#divMsg").html("鼠标弹起事件:mouseup");
            });

            $("#e03").click(function() {
                $("#buttonMsg").html("鼠标单击事件:click");
            }).dblclick(function() {
                $("#buttonMsg").html("鼠标双击事件:dblclick");
            });
        });
    </script>
</head>
<body>
    <input id="e01" type="text"/>
    <span id="textMsg"></span>
    <br/>
    <hr/>

    <div id="e02"></div>
    <span id="divMsg"></span>
    <br/>
    <hr/>

    <input id="e03" type="button" value="可以点击"/>
    <span id="buttonMsg"></span>
    <br/>
</body>
</html>

示例动图如下:

下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:

focusin 和 focusout
    focusin     获得焦点。js中是:focus
        focusin事件跟focus事件区别在于:它可以在父元素上检测子元素获取焦点的情况。
    focusout    失去焦点。js中是:blur
        focusout事件跟blur事件区别在于:它可以在父元素上检测子元素失去焦点的情况。

mouseenter 和 mouseleave
    mouseenter  鼠标移入。js中是:mouseover
        与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

    mouseleave  鼠标移出。js中是:mouseout
        与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

示例代码如下: 2.focus和focusin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>02-focus和focusin的区别.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 示例:在js中,focus函数,父元素【不能检测】到子元素是否获得焦点
//          $("#outerDiv").focus(function() {
//          alert("outer");
//          });

            // 示例:在jQuery中,focusin函数, 父元素【可以检测】到子元素获得焦点
            $("#outerDiv").focusin(function() {
                alert("outer");
            });
        });
    </script>
</head>
<body>
    <div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
        <div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
    </div>

    <br/>
    <span id="showSpan"></span>
</body>
</html>

示例代码如下: 3.mouseover和mouseenter.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>3-mouseover和mouseenter的区别.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var i= 0;
            // js代码,当鼠标在父元素和子元素之间穿越时,将会触发父元素的事件
//          $("#outerDiv").mouseover(function() {
//              $("#showSpan").html(i++);
//          });

            // jQuery代码,当鼠标在父元素和子元素之间穿越时,将不会触发父元素的事件
            $("#outerDiv").mouseenter(function() {
                $("#showSpan").html(i++);
            });
        });
    </script>
</head>
......

示例动图如下:

7.2、页面载入(加载)

详解如下: 方式1:使用标准api

    $(document).ready(function() {
    });
    等效于
    jQuery(document).ready(function() {
    });

方式1原因图解:

方式2:简化版

    $(function() {
    });
    等效于
    jQuery(function() {
    });

方式2原因图解:

示例代码如下: 4.ready.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>4-ready.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // jQuery代码的页面加载可以使用多次
        // 因为在jQuery中是队列形式存在的,一个一个的执行
        $(function() {
            alert("O(∩_∩)O哈哈~");
        });

        $(function() {
            alert("O(∩_∩)O哈哈~O(∩_∩)O哈哈~");
        });

        // javaScript代码的页面加载只执行一次,后面的页面加载会覆盖前面的页面加载
        // 因为在js中是先解析完,再加载
        window.onload = function () {
            alert("(*^▽^*)");
        }
        window.onload = function () {
            alert("(*^▽^*)(*^▽^*)");
        }
    </script>
</head>
<body>

</body>
</html>

7.3、事件绑定

7.3.1、事件处理

详解如下:

bind(type, fn)          给当前对象绑定一个事件。例如:A.bind("click", function() {...});    类似:A.click(function() {...});
unbind(type)            解绑bind所绑定的事件

one(type, fn)           给当前对象绑定一次事件。
-------------------------------------------------------
on(events, fn)          提供绑定事件处理程序所需的所有功能。即完成3个方法的功能:.bind()、.delegate()、和 .live()
off(events)             解绑

trigger(type)           在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。例如:A.trigger("submit");    类似:A.submit();
triggerHandler(type)    在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作,也不会产生事件冒泡。

示例代码如下: 5.事件处理.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>5-事件处理.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            // <input id="h01" type="button" value="1、只能点击一次,之后再点击失效"/>
            $("#h01").one("click", function() {
                alert("你只能爱我一个人!");
            });

            // <input id="h02" type="button" value="2、可以点击多次"/>
            // jQuery 事件的别名,格式:事件.别名
            $("#h02").bind("click.a", function() {
                alert("你还爱着谁?");
            });
            $("#h02").bind("click.b", function() {
                alert("你到底还爱着谁??");
            });
            // <input id="h03" type="button" value="3、解绑2中指定的事件"/> 
            $("#h03").click(function() {
                $("#h02").unbind("click.a"); // 使用jQuery事件的别名解绑想解绑的,因为jQuery事件默认是全解绑
            });

            // <input type="button" value="4、添加一个按钮,样式为myClass,且拥有相同的事件(觉醒血脉)" class="myClass"/>
            $(".myClass").live("click", function() {
                $("body").append("<input type='button' class='myClass' value='血脉觉醒了'/>")
            });

            // <input id="h05" type="button" value="5、解绑4(灭掉血脉)"/>
            $("#h05").click(function() {
                $(".myClass").die("click");
            });
        });
    </script>
</head>
<body>
    <input id="h01" type="button" value="1、只能点击一次,之后再点击失效"/> 
    <input id="h02" type="button" value="2、可以点击多次"/> 
    <input id="h03" type="button" value="3、解绑2中指定的事件"/> 
    <input type="button" value="4、添加一个按钮,样式为myClass,且拥有相同的事件(觉醒血脉)" class="myClass"/> 
    <input id="h05" type="button" value="5、解绑4(灭掉血脉)"/> 
</body>
</html>

示例动图如下:

7.3.2、事件委派

详解如下:

live(type, fn)      绑定事件,之后我们动态添加同样的成员,也具有相同的事件。
die(type)           解绑事件

示例代码如下:   同上7.3.1中的代码 示例动图如下:   同上7.3.1中的动图

7.3.3、事件切换

详解如下:

hover(over, out)
    鼠标的移入和移出,以前的写法:A.mouseover(fn).mouseout(fn);
    简化版:A.hover(fn, fn);
toggle(fn, fn, fn, ...);    执行click事件,每点击一次执行一个fn

示例代码如下: 6.事件切换.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>6-事件切换.html</title>
    <style type="text/css">
        #e02{
            border: 1px solid #000000;
              height: 200px;
             width: 200px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#e01").toggle(function() {
                alert("O(∩_∩)O哈哈~");
            }, function() {
                alert("(*^▽^*)嘿嘿-");
            });

            $("#e02").hover(function() {
                $("#divMsg").html("over");
            }, function() {
                $("#divMsg").html("out");
            });
        });
    </script>
</head>
<body>
    <input id="e01" type="button" value="点我啊"/><span id="textMsg"></span><br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span><br/>
</body>
</html>

示例动图如下:

7.4、事件案例

示例代码如下: 1.文字提示.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>1-文字提示.html</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

<style type="text/css">
body {
    margin: 0;
    padding: 40px;
    background: #fff;
    font: 80% Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 180%;
}

p {
    clear: both;
    margin: 0;
    padding: .5em 0;
}
/* tooltip */
#tooltip {
    position: absolute;
    border: 1px solid #333;
    background: #f7f5d1;
    padding: 1px;
    color: #333;
    display: none;
}
</style>

    <script type="text/javascript">
        $(function() {
            // 将自定义的提示,替换成自带的提示
            $(".mytooltip").mouseover(function(event) {
                // 1、先创建一个div,自定义的提示
                var $new = $("<div id='tooltip'></div>");

                // 获取当前对象绑定的数据
                var title = $(this).data("mytitle");
                if (!title) { // 第一次没有数据,就获取自带的提示       
                    // 2、获得自带的提示
                    title = $(this).attr("title");
                    // 将自带的提示移除
                    $(this).removeAttr("title");
                    // 绑定数据(绑定自带的提示)
                    $(this).data("mytitle", title);    
                }

                // 2、获得自带的提示
                // var title = $(this).attr("title");

                // 将自带的提示移除
                // $(this).removeAttr("title");

                // 3、设置提示
                $new.html(title);

                // 追加前,先定个位
                $new.offset({"top" : event.pageY - 20, "left" : event.pageX + 5});

                // 4、将定位后的新的div追加到body内部的后面,并显示自己
                $new.appendTo("body").show();

            }).mouseout(function() { // 鼠标移出删除
                $("#tooltip").remove();
            }).mousemove(function(event) { // 鼠标移动跟随
                $("#tooltip").offset({"top" : event.pageY - 20, "left" : event.pageX + 5});
            });
        });
    </script>
</head>
<body>
    <p>
        <a href="#" class="mytooltip" title="这是我的超链接提示1">提示1</a>
    </p>
    <p>
        <a href="#" class="mytooltip" title="这是我的超链接提示2">提示2</a>
    </p>
    <!-- <div id="tooltip">xxxx</div> -->
</body>
</html>

示例动图如下:

2.图片提示(扩展).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>2-图片提示(扩展).html</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

<style type="text/css">
body {
    margin: 0;
    padding: 40px;
    background: #fff;
    font: 80% Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 180%;
}

img {
    border: none;
}

ul, li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    float: left;
    display: inline;
    margin-right: 10px;
    border: 1px solid #AAAAAA;
}

/* tooltip */
#tooltip {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 2px;
    display: none;
    color: #fff;
}
</style>

    <script type="text/javascript">
        $(function() {
            var x = 10;
            var y = 20;
            var href;

            $("a[class=tooltip]").mouseover(function(e) {
                // 1、获取对应标签的自带提示
                // var title = $("a[class=tooltip]").attr("title");
                // this代表的是DOM对象(页面中的元素)
                href = this.href;

                // 删除自带提示
                this.href = "";

                // 2、创建标签用于自定义提示
                var $div = $("<div id='tooltip'><img src='" + href + "'></img></div>");

                // 3、将自定义提示的标签,添加到body标签下
                $("body").append($div);

                // 4、如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
                $("#tooltip").css({
                    "top" : e.pageY + y + "px",
                    "left" : e.pageX + x + "px"
                }).show(1000);

            }).mouseout(function() {
                this.href = href;
                $("#tooltip").remove();
            }).mousemove(function(e) {
                $("#tooltip").css({
                    "top" : e.pageY + y + "px",
                    "left" : e.pageX + x + "px"
                });
            });
        });
    </script>
</head>
<body>
    <h3>有效果:</h3>
    <ul>
        <li>
            <a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">
                <img src="images/apple_1.jpg" alt="苹果 iPod"/>
            </a>
        </li>
        <li>
            <a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">
                <img src="images/apple_2.jpg" alt="苹果 iPod nano"/>
            </a>
        </li>
        <li>
            <a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">
                <img src="images/apple_3.jpg" alt="苹果 iPhone"/>
            </a>
        </li>
        <li>
            <a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
                <img src="images/apple_4.jpg" alt="苹果 Mac"/>
            </a>
        </li>
    </ul>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <h3>无效果:</h3>
    <ul>
        <li>
            <a href="images/apple_1_bigger.jpg" title="苹果 iPod">
                <img src="images/apple_1.jpg" alt="苹果 iPod"/>
            </a>
        </li>
        <li>
            <a href="images/apple_2_bigger.jpg" title="苹果 iPod nano">
                <img src="images/apple_2.jpg" alt="苹果 iPod nano"/>
            </a>
        </li>
        <li>
            <a href="images/apple_3_bigger.jpg" title="苹果 iPhone">
                <img src="images/apple_3.jpg" alt="苹果 iPhone"/>
            </a>
        </li>
        <li>
            <a href="images/apple_4_bigger.jpg" title="苹果 Mac">
                <img src="images/apple_4.jpg" alt="苹果 Mac"/>
            </a>
        </li>
    </ul>
</body>
</html>

示例动图如下:

八、jQuery 的效果|动画

8.1、基本效果|动画

详解如下:

作用:通过改变元素  高度和宽度  进行显示或隐藏

show(speed, fn)     显示
    参数1:speed 速度。显示的时间,单位:毫秒。也有固定的字符串:("slow", "normal", or "fast")
    参数2:fn 回调函数。动画效果完成之后的回调函数。
hide(speed, fn)     隐藏
toggle(speed, fn)   切换

8.2、滑动效果|动画

详解如下:

通过改变元素  高度  进行显示或隐藏

slideDown(speed, fn)    显示
slideUp(speed, fn)      隐藏
slideToggle(speed, fn)  切换

8.3、淡入淡出效果|动画

详解如下:

通过改变元素  透明度  进行显示或隐藏

fadeIn(speed, fn)       显示
fadeOut(speed, fn)      隐藏
fadeToggle(speed, fn)   切换
fadeTo(speed, opacity, fn)      指定透明度
    参数2:opacity 透明度,一个0至1之间表示透明度的数字

8.4、效果|动画案例

示例代码如下: 效果案例.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>效果|动画案例.html</title>
<style type="text/css">
div {
    border: 1px solid #000;
    width: 110px;
    height: 100px;
}
</style>
    <!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#b1").click(function() {
                $("#b1Div").toggle("1000");
            });
            $("#b2").click(function() {
                $("#b2Div").slideToggle("slow");
            });
            $("#b3").click(function() {
                $("#b3Div").fadeToggle(2000, function() {
                    alert("淡入/淡出效果完成了");
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="b1" value="显示/隐藏 b1Div"/>
    <div id="b1Div"></div>
    <br/>
    <br/>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div>
    <br/>
    <br/>
    <input type="button" id="b3" value="淡出/淡入b3Div"/>
    <div id="b3Div" style="background-color: red;"></div>
</body>
</html>

示例动图如下:

九、jQuery 的ajax【掌握】

  • 以前学习的ajax:异步请求,浏览器地址栏不改变,而页面进行局部的刷新。
  • ajax 流程分析图如下:
  • ajax环境搭建:
    • 01、新建首页页面
    • 02、给按钮绑定事件
    • 03、编写servlet
    • 04、未完待续……
  • jQuery 的ajax

详解如下:

第一层:$.ajax(...)                     最底层的ajax请求,编写最复杂,完成功能最全的。
第二层:load()、$.get()、$.post()       开发中常用3个,$符号开头的叫全局函数,不是$开头的是普通函数,普通函数必须使用jQuery对象才能获得
第三层:$.getJSON()、$.getScript()      高级开发中用的
    $.getJSON()     可以完成js的“跨域”请求。
                    域名:域名+端口+项目,js默认不能跨域请求的(即在A服务器上写了一个程序,在另B服务器上拿不到A服务器的数据)。
                    面试中会问到的:有没有解决js中的跨域问题?
    $.getScript()   动态加载js文件。
                    之前使用标签 <script src="">加载页面时,会一并加载很多js文件,有的js文件我们暂时用不到,导致程序不够优化。
  • 回调函数的参数,一共有三个参数,第一个参数是最重要的
  • 使用JQuery的工具类,解析json
  • jQuery.parseJSON(json)

9.1、load() 【3】 

示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax示例</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            // 给按钮绑定事件
            $("input").click(function() {
                // alert("a");
                // 1.1、确定请求路径
                var url = "/day41_02_jQuery/SendDataServlet";
                // 1.2、确定请求参数,采用json
                var params = {"username":"杰克", "password":"1234"};

                /* 1、load() 普通函数 ,$符号开头的叫全局函数,不是$开头的是普通函数,普通函数必须使用jQuery对象才能获得
                 * * 格式:load(url, [data], [callback])        []中括号表示该项可以省略
                 *      参数1:url,请求路径
                 *      参数2:data,请求参数
                 *      参数3:callback,回调函数
                 *
                 * * 如果没有请求参数,则发送的GET请求
                 * * 如果有请求参数,则发送的POST请求。该POST请求不会出现中文乱码
                 * * 回调函数的参数,一共有三个参数,第一个参数是最重要的,掌握参数1即可
                 *      参数1:data,表示服务器响应的数据。
                 *      load() 该函数永远获得的数据是字符串,如果需要使用该数据,必须将字符串 手动转换成 json对象。
                 */
                 $(this).load(url, params, function() {
                    // load() 该函数永远获得的数据是字符串,如果需要使用该数据,必须将字符串 手动转换成 json对象。
                    var jsonData = eval("(" + data + ")");
                    alert(jsonData.message);
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="发送ajax"/>
</body>
</html>

9.2、$get() 【2】 

示例代码如下:

......
    <script type="text/javascript">
        $(function() {
            // 给按钮绑定事件
            $("input").click(function() {
                // alert("a");
                // 1.1、确定请求路径
                var url = "/day41_02_jQuery/SendDataServlet";
                // 1.2、确定请求参数,采用json
                var params = {"username":"杰克", "password":"1234"};

                /* 2、$.get() 全局函数,作用是:发送get请求
                 * * 格式:jQuery.get(url, [data], [callback], [type])      []中括号表示该项可以省略
                 *      参数1:url,请求路径
                 *      参数2:data,请求参数
                 *      参数3:callback,回调函数
                 *      参数4:type,返回的内容格式:xml, html, script, json, text, _default
                 *
                 * * GET请求不适合发送中文数据,因为请求的存在中文乱码
                 *      所以必须手动解码   new String(username.getBytes("ISO-8859-1"), "UTF-8");
                 *
                 * * 对于响应的数据,如果服务端使用的是:application/json;charset=UTF-8 ,那么jQuery会自动将字符串数据 转换成json对象。
                 * * 对于响应的数据,如果服务端使用的是:text/html;charset=UTF-8 ,那么回调函数获得的是字符串数据,需要手动进行转换。太麻烦,我们可以使用参数4
                 *      如果使用“参数4”,设置"json",则jQuery会将字符串数据 转换成 json对象。
                 */
                $.get(url, params, function(data) {
                    alert(data);
                }, "json");
            });
        });
    </script>
......

9.3、$post() 【1】 

示例代码如下:

......
    <script type="text/javascript">
        $(function() {
            // 给按钮绑定事件
            $("input").click(function() {
                // alert("a");
                // 1.1、确定请求路径
                var url = "/day41_02_jQuery/SendDataServlet";
                // 1.2、确定请求参数,采用json
                var params = {"username":"杰克", "password":"1234"};

                /* 3、$.post() 全局函数,作用:发送post请求
                 * * 格式:jQuery.post(url, [data], [callback], [type])
                 *   同上
                 */
                $.post(url, params, function(data) {
                    alert(data);
                }, "json");
            });
        });
    </script>
......

9.4、$ajax() 【4】 

示例代码如下:

......
    <script type="text/javascript">
        $(function() {
            // 给按钮绑定事件
            $("input").click(function() {
                // alert("a");
                // 1.1、确定请求路径
                var url = "/day41_02_jQuery/SendDataServlet";
                // 1.2、确定请求参数,采用json
                var params = {"username":"杰克", "password":"1234"};

                 /* 4、$.ajax()    底层功能是最强大的,有的公司使用,可以做出更炫的效果
                 * * 格式:jQuery.ajax(url,[settings])
                 * * 常用格式:jQuery.ajax([settings])
                 *      参数settings:设置所有的参数
                 *          url:发送请求的地址
                 *          data:发送到服务器的数据,即请求参数
                 *          type:请求方式 ("POST" 或 "GET")
                 *
                 *          success:请求成功的回调函数,success(data, textStatus, jqXHR)
                 *          error:请求失败时调用此函数
                 *
                 *          dataType:预期服务器返回的数据类型
                 *              "xml": 返回 XML 文档,可用 jQuery 处理。
                 *              "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
                 *              "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。
                 *                  注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
                 *              "json": 返回 JSON 数据 。
                 *              "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
                 *              "text": 返回纯文本字符串
                 */

                $.ajax({
                    "url":url,
                    "data":params,
                    "type":"POST",
                    "success":function(data) {
                        alert(data);
                    },
                    "error":function() {
                        alert("服务器繁忙,请稍后重试");
                    },
                    "dataType":"json",
                });
            });
        });
    </script>
......

9.5、其他--表单序列化

详解如下:

serialize()     将表单中所有选中项拼凑成一个字符串
                类似get请求参数,例如:username=jack&password=1234&gender=man&......

如下图所示:

详解如下:

serializeArray()    将表单中所有选中项拼凑一个json数组

返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。 如下图所示: 01

02

示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // alert($("form").serialize());
            alert($("form").serializeArray());
        }); 
    </script>

    <style type="text/css">
        .textClass {
            background-color: #ff0000;
        }
    </style>
</head>
......

十、jQuery 的其他

10.1、事件冒泡

event.stopPropagation() 示例代码如下: 3.事件冒泡.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>3.事件冒泡.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 事件冒泡:子元素的事件执行时,会一并触发父元素相同的事件,我们要阻止事件冒泡
            $("#outerDiv").click(function() {
                alert("outerDiv");
            });
            $("#innerDiv").click(function(event) {
                alert("innerDiv");
                // 方式1:使用return
                // return false; // 默认是true
                // 方式2:通过Event 对象提供的函数 event.stopPropagation() 阻止传播行为
                event.stopPropagation();
            });
        });
    </script>
</head>
<body>
    <div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
        <div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
    </div>

    <br/>
    <span id="showSpan"></span>
</body>
</html>

10.2、浏览器默认动作|行为

event.preventDefault(); 示例代码如下: 4.浏览器的默认动作.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>4.浏览器的默认动作.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // a标签的默认行为href链接,我们想要阻止它 
            $("a").click(function(event) {
                alert("欢迎来到黑泽明军的博客");
                // 方式1:
                return false;
                // 方式2:
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
    <a href="https://www.cnblogs.com/chenmingjun">点我啊</a>
</body>
</html>

十一、ajax案例

11.1、动态加载1

示例代码如下: 动态加载1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax案例-动态加载1.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 鼠标往下移,内容就不断的加载
        $(document).ready(function() {
            var num = 1;
            // 1、先创建10个dv
            for (var i = 0; i < 10; i++) {
                createDiv();
            }

            // 创建div的函数
            function createDiv() {
                var $div = $("<div class='createDiv'/>");
                $div.html(num ++);
                $("body").append($div);
            }

            // 2、给浏览器添加滚动事件
            $(window).scroll(function() {
                // 2.1、滚过的高度
                var wt = $(this).scrollTop();
                // 2.1、整个文档的高度
                var dh = $(document).height();
                // 2.1、窗口的高度
                var wh = $(this).height();

                // 3、当接近底部时,添加新的div
                if (wt + wh + 100 > dh) {
                    createDiv();
                    // 发送ajax去填充数据
                    // ......
                }

                // 显示数据
                $("#showDiv").html("wt:" + wt + ", dh:" + dh + ", wh:" + wh);
            });
        });
    </script>
    <style>
        .createDiv {
            border: 1px solid #999;
            width: 400px;
            height: 100px;
            margin: 5px;
            font-size: 50px;
        }
        #showDiv {
            border: 1px solid #999;
            width: 500px;
            height: 30px;
            position: fixed;
            bottom: 0;
            right: 100px;       
        }
    </style>
</head>
<body>
    <div id="showDiv"></div>
</body>
</html>

示例动图如下:

11.2、动态加载2

示例代码如下: 动态加载2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax案例-抽奖信息显示.html</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 1、先创建10个dv
            for (var i = 0; i < 5; i++) {
                createDiv();
            }

            // 创建div的函数
            function createDiv() {
                var $div = $("<div class='createDiv'/>");
                $div.html(i+1);
                $("body").append($div);
            }

            // 定时器
            setInterval(showDiv, 100);

            function showDiv() {
                // 第一个div隐藏
                $("div:first").slideUp(1000, function() {
                // 把自己追加到最后
                $(this).appendTo("body").slideDown(1000);
                });
            }
        });
    </script>
    <style>
        .createDiv {
            border: 1px solid #999;
            width: 400px;
            height: 100px;
            margin: 5px;
            font-size: 50px;
        }
    </style>
</head>
<body>

</body>
</html>

示例动图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Lambda

【第一季】Vue2.0内部指令

学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

2069
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

47714
来自专栏前端说吧

vue - 父组件数据变化控制子组件类名切换

先说当时的思路和实现 核心是父子组件传值和v-bind指令动态绑定class实现

1331
来自专栏从零开始学自动化测试

Selenium2+python自动化73-定位的坑:class属性有空格

前言 有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message: The given s...

3874
来自专栏hightopo

扩展HT for Web之HTML5表格组件的Renderer和Editor

3013
来自专栏HT

扩展HT for Web之HTML5表格组件的Renderer和Editor

在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:...

3457
来自专栏练小习的专栏

绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

2006
来自专栏吾爱乐享

php学习之html小结1

1153
来自专栏木子昭的博客

模拟Vue数据的双向绑定

Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向...

3555
来自专栏程序员互动联盟

【专业技术】还有人在用Qt开发app嘛?

编者按: 这个世界不缺工程师,但是缺大师。如果在Qt里写个app,传统做法,需要熟悉API,熟悉C++,熟悉Qt本身的实现,同时还要熟悉编程环境。 现在出现了一...

6187

扫码关注云+社区

领取腾讯云代金券