美文网首页
03-JQuery事件

03-JQuery事件

作者: D丝学编程 | 来源:发表于2021-04-25 09:37 被阅读0次

一、页面载入事件

页面载入事件的四种写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面载入事件:ready()</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            //写法一
//          $(document).ready(function(){
//              $("#mytitle").html("页面加载完成");
//          })
            //写法二
            $(function(){
                $("#mytitle").html("页面加载完成");
            })
            //写法三
//          jQuery(document).ready(function(){
//              $("#mytitle").html("页面加载完成");
//          })
            //写法四
//          jQuery(function(){
//              $("#mytitle").html("页面加载完成");
//          })
        </script>
    </head>
    <body>
        <h1 id="mytitle"></h1>
    </body>
</html>

二、鼠标常用事件

click：当鼠标点击元素的时候，会发生click事件。

mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseout：当鼠标指针从元素上移开时，发生 mouseout 事件。

hover：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的

第二个函数。

mouseover和mouseout事件结合实现高亮导航菜单：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标事件</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #head{ width: 100%; height: 70px; background-color:darkgray;}
            #head ul{ list-style-type: none;}
            #head ul li{ float: left; text-align: center; height: 70px; line-height: 70px;}
            #head ul li a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; color: white; height: 70px; line-height: 70px;
            display: block;}
            .select{ background-color: gray; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //鼠标移动上去的时候
                $("#head ul li").mouseover(function(){
                    $(this).addClass("select");
                })
                //鼠标离开的时候
                $("#head ul li").mouseout(function(){
                    $(this).removeClass("select");
                })
            })
        </script>
    </head>
    <body>
        <div id="head">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">KTV</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">生活服务</a></li>
          </ul>
        </div>  
    </body>
</html>

hover事件实现高亮导航菜单：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hover事件</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #head{ width: 100%; height: 70px; background-color:darkgray;}
            #head ul{ list-style-type: none;}
            #head ul li{ float: left; text-align: center; height: 70px; line-height: 70px;}
            #head ul li a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; color: white; height: 70px; line-height: 70px;
            display: block;}
            .select{ background-color: gray; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //调用jQuery中的hover()方法可以使元素在鼠标移入与鼠标移出的事件中进行切换
                $("#head ul li").hover
                (
                    function()  //鼠标移入
                    {
                        $(this).addClass("select");
                    },
                    function()  //鼠标移出
                    {
                        $(this).removeClass("select");
                    }               
                )
            })
        </script>
    </head>
    <body>
        <div id="head">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">KTV</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">生活服务</a></li>
          </ul>
        </div>  
    </body>
</html>

三、绑定事件

绑定事件基本写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定事件介绍</title>   
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#bt1").click(function(){
                    alert("我被点击了!");
                })
                
                //Jquery3之后不推荐使用
                // $("#bt1").bind("click",function(){
                //  alert("我被点击了!");
                // })
                
                //Jquery低版本使用的是live,高版本中使用on(on的效率明显提高)         
                // $("#bt1").on("click",function(){
                //  alert("我被点击了!");
                // })
                
                <!--one()方法的功能是为所选择的元素绑定一个仅触发一次的处理函数-->
                // $("#bt1").one("click",function(){
                //  alert("我被点击了,只能响应一次!");
                // })       
            })
        </script>
    </head>
    <body>
        <input id="bt1" type="button" value="点击我"  />
    </body>
</html>

使用on绑定事件：解决无法响应Jquery新添加元素的事件设置的问题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用on绑定事件详解</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //第一个按钮可以响应，第二个按钮不能响应
                // $("input").click(function(){
                //  alert("我被点击了!");
                // })
                //第一个按钮可以响应，第二个按钮不能响应
                // $("input").on("click",function(){
                //  alert("我被点击了!");
                // })
                //第一个按钮可以响应，第二个按钮也可以响应
                //此方式支持Jquery新添加元素的事件设置
                $("body").on("click","input",function(){
                    alert("我被点击了!");
                })                  
                $("body").append("<input type=\"button\" value=\"点击我\"  />");
            })
        </script>
    </head>
    <body>
        <input type="button" value="点击我"  />        
    </body>
</html>

深入理解各绑定事件方式的区别：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>深入理解各绑定事件方式的区别</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //不能响应Jquery新增元素的事件响应
                $("#divTest1 :button").click(function () {
                    $(this).after(" <input type='button' value='新按钮' />");
                }); 
                //bind和直接click效果一样
                $("#divTest2 :button").bind("click", function () {
                    $(this).after(" <input type='button' value='新按钮' />");
                });
                //事件仅触发一次
                $("#divTest3 :button").one("click", function () {
                    $(this).after(" <input type='button' value='新按钮' />");
                });
                //不能响应Jquery新增元素的事件响应
                $("#divTest4 :button").on("click", function () {
                    $(this).after(" <input type='button' value='新按钮' />");
                });
                //可以响应Jquery新增元素的事件响应
                $("#divTest5").on("click","input:button", function () {
                    $(this).after(" <input type='button' value='新按钮' />");
                });
                //jquery1.9以下版本支持,新版本换成了on
                //$("#divTest6 :button").live("click", function () {
                //$(this).after(" <input type='button' value='新按钮' />");
                //});       
            })
        </script>   
    </head>
    <body>
        <div id="divTest1">
            <input type="button" value="点我这里click" />
        </div>
        <br />
        <div id="divTest2">
            <input type="button" value="点我这里bind" />
        </div>
        <br />
        <div id="divTest3">
            <input type="button" value="点我这里one" />
        </div>
        <br />
        <div id="divTest4">
            <input type="button" value="点我这里on(1)" />
        </div>
        <br />
        <div id="divTest5">
            <input type="button" value="点我这里on(2)" />
        </div>
        <br />      
        <div id="divTest6">
            <input type="button" value="点我这里live" />
        </div>
        <br />

    </body>
</html>

使用trigger实现在匹配的元素上主动触发事件：

<!--jQuery对象.trigger(type);
其中参数type为触发事件的类型。trigger()方法的功能是在所选择的元素上触发指定类型的事件。-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>trigger()</title>
        <style type="text/css">
            #foot{ width: 900px; margin: 0px auto; }
            #myTable{ width: 900px; margin: 0px auto; 
             border-collapse: collapse;}
            #myTable th,#myTable td{border:solid 1px green;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#selAll").click(function(){
                    //建议值为true或者false的属性(checked,selected,enabled)等使用prop
                    //建议HTML标签中已经写上去的属性用attr,没有写上去的使用prop
                    var $isChecked = $(this).prop("checked");
                    $("input[name=stuItem]").prop("checked",$isChecked);
                })
                $("#myASelAll").click(function(){
                    $("#selAll").trigger("click");
                })
            })
        </script>
        
    </head>
    <body>
        <table cellspacing="1" id="myTable">
            <tr>
                <th width="20"><input type="checkbox" id="selAll" /></th>
                <th width="200">姓名</th>
                <th width="200">性别</th>
                <th width="200">专业</th>
                <th width="200">爱好</th>
            </tr>
            <tr>
                <td><input type="checkbox" id="" name="stuItem" /></td>
                <td>刘备</td>
                <td>男</td>
                <td>软件开发</td>
                <td>抽烟</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="stuItem" /></td>
                <td>关羽</td>
                <td>男</td>
                <td>国际贸易</td>
                <td>喝酒</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="stuItem" /></td>
                <td>张飞</td>
                <td>男</td>
                <td>园林设计</td>
                <td>烫头发</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="stuItem" /></td>
                <td>赵云</td>
                <td>男</td>
                <td>平面设计</td>
                <td>抽烟</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="stuItem" /></td>
                <td>黄忠</td>
                <td>男</td>
                <td>影视制作</td>
                <td>玩游戏</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="stuItem" /></td>
                <td>小乔</td>
                <td>女</td>
                <td>高级护理</td>
                <td>唱歌</td>
            </tr>
        </table>
        <div id="foot"><a id="myASelAll" href="javascript:void(0);">全选</a></div>
    </body>
</html>

四、事件的冒泡现象

以下代码会弹出三个对话框，分别为1，2，3 ；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件机制-冒泡现象</title>
        <style type="text/css">
            html,body{ height:100%;}
            #content{ height: 40px; border: solid 2px red;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                var $count = 0;
                $("body,#content,#myButton").click(function(){
                    $count++;
                    alert($count + ",点击的是:" + $(this).attr("id"));
                })
            })
        </script>
    </head>
    <body>
        <div id="content">
            <input id="myButton" type="button" value="获取点击次数" />
        </div>
    </body>
</html>

解决冒泡现象：在事件函数代码最后 return false;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件机制-冒泡现象</title>
        <style type="text/css">
            html,body{ height:100%;}
            #content{ height: 40px; border: solid 2px red;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                var $count = 0;
                $("body,#content,#myButton").click(function(){
                    $count++;
                    alert($count + ",点击的是:" + $(this).attr("id"));
                    return false;
                })
            })
        </script>
    </head>
    <body>
        <div id="content">
            <input id="myButton" type="button" value="获取点击次数" />
        </div>
    </body>
</html>

五、Jquery表单验证

邮箱验证：(focus和blur事件)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证邮箱</title>
        <style type="text/css">
            .errInfo{color: red; font-size: 12px;}
            .errInfo img{ vertical-align:middle;}
            #myDiv{ width: 500px; height: 30px; line-height: 30px; }
            #myDiv input{ color:gray;}
            .divFocus{ background-color: antiquewhite;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#myTxt").focus(function(){
                    $(this).parent("div").addClass("divFocus");
                })
                $("#myTxt").blur(function(){
                    $(this).parent("div").removeClass("divFocus");
                    var $emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
                    if(!$emailReg.test($(this).val()))
                    {
                        $("#mySpan").css("color","red");
                        $("#mySpan").html("<img src='img/li_err.gif'> 邮箱地址输入错误!");
                    }
                    else
                    {
                        $("#mySpan").css("color","green");
                        $("#mySpan").html("<img src='img/li_ok.gif'> 正确!");                     
                    }
                })
            })
        </script>       
    </head>
    <body>
        <div id="myDiv">
            邮箱:<input type="text" id="myTxt" placeholder="例如:example@qq.com" />
            <span id="mySpan" class="errInfo">邮箱地址必填</span>
        </div>
    </body>
</html>

用户注册表单验证：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单验证</title>
        <style type="text/css">
            .errInfo{color: red; font-size: 12px;}
            .errInfo img{ vertical-align:middle;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
        $(function(){
            var $result = true;  //假设所有输入都符合条件
            //检查用户名
            $("#txtAccount").blur(function(){
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 用户名不能为空!");
                    $result = false;
                }
                else if($(this).val().length < 6 || $(this).val().length > 12)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 用户名长度必须在6-12位之间!");
                    $result = false;                    
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查密码
            $("#txtPwd").blur(function(){
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 密码不能为空!");
                    $result = false;
                }
                else if($(this).val().length < 6 || $(this).val().length > 12)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 密码长度必须在6-12位之间!");
                    $result = false;                    
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查密码确认
            $("#txtPwdOk").blur(function(){
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 密码确认不能为空!");
                    $result = false;
                }
                else if($(this).val() != $("#txtPwd").val())
                {
                    $(this).next().html("<img src='img/li_err.gif'> 两次输入密码不一致!");
                    $result = false;                    
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查邮箱
            $("#txtMail").blur(function(){
                var exp = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 邮箱不能不能为空!");
                    $result = false;
                }
                else if(exp.test($(this).val()) == false)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 邮箱格式不正确!");
                    $result = false;                    
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查电话
            $("#txtPhone").blur(function(){
                var exp = /^(13|15|18)\d{9}$/;
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 电话不能不能为空!");
                    $result = false;
                }
                else if(exp.test($(this).val()) == false)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 电话格式不正确!");
                    $result = false;                    
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查性别
            $("input[name=sex]").blur(function(){
                var objs = $("input[name=sex]:checked");
                if(objs.length == 0)
                {
                    $(this).parent().find("span").html("<img src='img/li_err.gif'> 请选择性别!");
                    $result = false;
                }
                else
                {
                    $(this).parent().find("span").html("<img src='img/li_ok.gif'>");                    
                }
            })
            
            //检查专业
            $("#selProfessional").blur(function(){
                if($(this).val().length == 0)
                {
                    $(this).next().html("<img src='img/li_err.gif'> 请选择专业!");
                    $result = false;
                }
                else
                {
                    $(this).next().html("<img src='img/li_ok.gif'>");
                }
            })
            
            //检查爱好
            $("input[name=hobby]").blur(function(){
                var objs = $("input[name=hobby]:checked");
                if(objs.length < 3)
                {
                    $(this).parent().find("span").html("<img src='img/li_err.gif'> 爱好至少选择三项!");
                    $result = false;
                }
                else
                {
                    $(this).parent().find("span").html("<img src='img/li_ok.gif'>");                    
                }
            })
            
            //注册表单提交
            $("#myForm").submit(function(){
                $result = true;
                $("#txtAccount").trigger("blur");
                $("#txtPwd").trigger("blur");
                $("#txtPwdOk").trigger("blur");
                $("#txtMail").trigger("blur");
                $("#txtPhone").trigger("blur");
                $("input[name=sex]").trigger("blur");
                $("#selProfessional").trigger("blur");
                $("input[name=hobby]").trigger("blur");
                return $result;
            })          
                
        })
        </script>
    </head>
    <body>
        <form id="myForm" action="Demo08_OK.html">
        <table width="1000" align="center">
            <caption>用户注册</caption>
            <tr>
                <td width="300" align="right" height="30">用户名:</td>
                <td width="700"><input type="text" id="txtAccount" name="txtAccount">
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">密码:</td>
                <td width="700"><input type="password" id="txtPwd" name="txtPwd">
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">密码确认:</td>
                <td width="700"><input type="password" id="txtPwdOk" name="txtPwdOk">
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">邮箱:</td>
                <td width="700"><input type="text" id="txtMail" name="txtMail">
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">联系电话:</td>
                <td width="700"><input type="text" id="txtPhone" name="txtPhone">
                    <span class="errInfo"></span>
                </td>
            </tr>           
            <tr>
                <td width="300" align="right" height="30">性别:</td>
                <td width="700">
                    <input type="radio" name="sex" id="rdBoy" value="男">男
                    <input type="radio" name="sex" id="rdGirl" value="女">女  
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">专业:</td>
                <td width="700">
                    <select id="selProfessional" name="selProfessional">
                        <option value="">--请选择--</option>
                        <option value="软件开发">软件开发</option>
                        <option value="电子商务">电子商务</option>
                        <option value="国际贸易">国际贸易</option>
                        <option value="工商管理">工商管理</option>
                        <option value="高级护理">高级护理</option>
                    </select>
                    <span class="errInfo"></span>
                </td>
            </tr>           
            <tr>
                <td width="300" align="right" height="30">爱好:</td>
                <td width="700" >
                    <input type="checkbox" name="hobby" value="抽烟" />抽烟
                    <input type="checkbox" name="hobby" value="喝酒" />喝酒
                    <input type="checkbox" name="hobby" value="打游戏" />打游戏
                    <input type="checkbox" name="hobby" value="烫头发" />烫头发
                    <input type="checkbox" name="hobby" value="足球" />足球
                    <input type="checkbox" name="hobby" value="篮球" />篮球
                    <span class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">自我介绍:</td>
                <td width="700">
                    <textarea id="mySelf" rows="10" cols="60" name="mySelf"></textarea>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">&nbsp;</td>
                <td width="700">
                    <input type="submit" value="注册" />
                    <input type="reset" value="取消" />
                </td>
            </tr>
        </table>
        </form>
    </body>
</html>

六、实现样式切换的导航菜单

css.css：

*{margin: 0px; padding: 0px;}
#head ul{ list-style-type: none;}
#head{ width: 100%; height: 70px;}

#head #menu{width: 80%; float: left;}
#head #skin{ width: 20%; float: left; text-align: right;}
#head li{ float: left;}
#head #menu ul li{ text-align: center; height: 70px; line-height: 70px;}
#head #menu ul li a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; height: 70px; line-height: 70px;
            display: block;}        
#head #skin ul{ margin-top: 25px;  float: right;}           
#skin li{ width: 15px; height: 15px; margin-right: 5px;
background-image: url(../img/theme.gif);}

#skin1{ background-position: 0px 0px;}
#skin2{ background-position: -20px 0px;}
#skin3{ background-position: -40px 0px;}
#skin4{ background-position: -60px 0px;}
#skin5{ background-position: -80px 0px;}
#skin6{ background-position: -100px 0px;}

#skin1.selected{ background-position: 0px -15px;}
#skin2.selected{ background-position: -20px -15px;}
#skin3.selected{ background-position: -40px -15px;}
#skin4.selected{ background-position: -60px -15px;}
#skin5.selected{ background-position: -80px -15px;}
#skin6.selected{ background-position: -100px -15px;}

skin1.css：

#head{background-color:darkgray;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color: gray; font-weight: bold;}

skin2.css：

#head{background-color:green;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color:greenyellow; font-weight: bold;}

skin3.css：

#head{background-color:goldenrod;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color:gold; font-weight: bold;}

skin4.css：

#head{background-color:darkblue;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color:blue; font-weight: bold;}

skin5.css：

#head{background-color:indianred;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color:hotpink; font-weight: bold;}

skin6.css：

#head{background-color:purple;}
#head #menu ul li a{color: white; }
#head #menu li.select{ background-color:darkorchid; font-weight: bold;}

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切换样式表实现样式切换</title>
        <link rel="stylesheet" href="css/css.css" />
        <link rel="stylesheet" href="css/skin1.css" id="skinFile" />
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //鼠标移动上去的时候
                $("#head ul li").mouseover(function(){
                    $(this).addClass("select");
                })
                //鼠标离开的时候
                $("#head ul li").mouseout(function(){
                    $(this).removeClass("select");
                })
                $("#skin li").click(function(){
                    $(this).siblings().removeClass("selected");
                    $(this).addClass("selected");
                    $("#skinFile").attr("href","css/" + $(this).attr("id") + ".css");
                })
            })
        </script>
    </head>
    <body>
        <div id="head">
            <div id="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">旅游</a></li>
                    <li><a href="#">酒店</a></li>
                    <li><a href="#">电影</a></li>
                    <li><a href="#">KTV</a></li>
                    <li><a href="#">时尚</a></li>
                    <li><a href="#">生活服务</a></li>
                </ul>               
            </div>
            <div id="skin">
                <ul>
                    <li id="skin1" title="灰色" class="selected"></li>
                    <li id="skin2" title="紫色"></li>
                    <li id="skin3" title="红色"></li>
                    <li id="skin4" title="天蓝色"></li>
                    <li id="skin5" title="橙色"></li>
                    <li id="skin6" title="淡绿色"></li>
                </ul>               
            </div>
        </div>  
    </body>
</html>

相关文章

  • 03-JQuery事件

    一、页面载入事件 页面载入事件的四种写法： 二、鼠标常用事件 click：当鼠标点击元素的时候，会发生click事...

  • 03-jQuery事件相关

    事件绑定与解绑 jQuery中有两种绑定事件方式eventName(fn);编码效率略高/部分事件jQuery没有...

  • 前端-03-jquery

    1.概述 元素选择样式操作兼容问题批量控制节点操作 整体感知 2.选择元素 3. CSS函数 4.animate ...

  • JavaScript事件01——事件流

    大纲：概念（事件、事件流）事件流模型（事件冒泡、事件捕获、DOM事件流） 一、概念： 1、事件：事件就是用户或浏览...

  • 事件对象，事件监听，事件冒泡，事件代理

    一、事件对象 二、冒泡事件：（事件从子元素往父级元素向上触发事件）处理兼容问题：主流浏览器：e.stopPropa...

  • 事件总结

    DOM事件主要内容 事件流 事件注册 事件对象 事件分类 事件代理 什么是DOM事件? 事件是某个行为或者触发，比...

  • Javascript事件系统

    本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意：本文不会深...

  • Javascript事件-事件冒泡，事件捕获，事件监听和事件委托

    事件处理机制 （一）DOM事件流 DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML...

  • 【事件】事件流

    1、JavaScript和HTML之间的交互通过事件实现的。2、事件流描述的是从页面中接收事件的顺序。3、IE 和...

  • 【事件】事件对象

    触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的额信息。（包括导致事件的元...

网友评论

      本文标题：03-JQuery事件

      本文链接：https://www.haomeiwen.com/subject/gqkzkltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|03-JQuery事件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！