码迷，mamicode.com
首页 > Web开发 > 详细

JQuery基础学习总结

时间：2016-09-12 20:42:34      阅读：171      评论：0      收藏：0      [点我收藏+]

标签：

JQuery基础学习总结

简单总结下JQuery：

一：事件

1.change事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <select id="s">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <div></div>
<script type="text/javascript">
    $(function () {
        $("#s").change(function(){
            $("div").html("您选择的是:"+$(this).val())
        })
    });
</script>

</body>
</html>
change

2.hover事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
    sda
</div>
<script type="text/javascript">
    $(function () {
        $("div").hover(
                function(){
                    $(this).addClass("red")
                },
                function(){
                    $(this).removeClass("red")
                }
        )
    });
</script>

</body>
</html>
hover

3.toggleClass事件：实现点击鼠标样式切换，可以和hover比较

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
    sdaasdas
</div>
<script type="text/javascript">
    $(function () {
            $("div").click(function(){
                $("div").toggleClass("red");
            })
    });
</script>

</body>
</html>
toggleClass

4.one事件：一次性事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div >cao</div>
<script type="text/javascript">
    $(function () {
        var n = 20;
        $("div").one("click",function(){
            n++;
            $(this).css("font-size",n+"px");
        })

    });
</script>

</body>
</html>
one

5. click事件：鼠标单击事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="test">
   点击触发
</div>
<script type="text/javascript">
    $(function(){
        $("#test").click(function(e){
//            alert(e.target.innerHTML);
            alert(e.target.id);
        })
    });
</script>

</body>
</html>
click

6.dblclick事件：鼠标双击事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>点我</div>    <p>我变颜色</p>
<script type="text/javascript">
    $(function () {
        $("div").dblclick(function(){
            $("p").css("color","red")
        })
    });
</script>
</body>
</html>
dblclick

7.siblings事件：选择除了自己以外的兄弟元素

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
    <ul>
        <li class="l1">草莓</li>
        <li class="l2">香蕉</li>
        <li class="l3">橘子</li>
        <li class="l4">苹果</li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
        $(".l1").siblings().css("border", "1px red solid");
    });
</script>

</body>
</html>
siblings

8.next事件：选择自己的相邻元素

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
    <ul>
        <li class="l1">草莓</li>
        <li class="l2">香蕉</li>
        <li class="l3">橘子</li>
        <li class="l4">苹果</li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
        $(".l1").next().css("border", "1px red solid");
    });
</script>

</body>
</html>
next

9.内容添加事件：包括append;appendTo;after;before

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种方法</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
    <span id="sp">曹</span>
</div>
<p id="p">曹泰</p>
</body>
<script type="text/javascript">
    var $h = "<div>我是添加的</div>";
    $("body").append($h);  //不能直接写便签名字，或者类名，把$h添加到body元素之后
    $("#p").appendTo("span"); //可以直接写便签名字，或者类名，把p元素添加到span元素之后

    $("#sp").after("<a href=‘‘>曹之后添加</a>"); //在元素之后添加
    $("#sp").before("<a href=‘‘>曹之前添加</a>"); //在元素之前添加

    $("body").append($("#p").clone()); //克隆
</script>
</html>
内容添加

10.删除事件：remove;empty

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
    </style>
</head>
<body>

    <span class="s">我是曹泰</span>
    <span class="s1">我是曹泰1</span>

</body>
<script type="text/javascript">
//    $("span").remove();  //移除span标签
//    $("span").empty();  //移除span标签
//   $("span").remove(".s"); // 移除span标签中的s
   $(".s1").empty("span");// .s1标签的内容
</script>
</html>
删除

11.bind,unbind事件：绑定,解绑事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript">

    $(function () {
//        $("div").bind("click dblclick",function(){
//            $(this).css("color","red");
//        })
        $("div").bind({
            click:function(){
                $(this).css("color","red");
            },
            dblclick:function(){
                $(this).css("background-color","blue");
            }
        });
        $("input").bind("click",function(){
            $("div").unbind();
        })
    });
</script>

</body>
</html>
bind,unbind

12.on,off事件：绑定，解绑事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript">

    $(function () {
        $("div").on({
            click:function(){
                $(this).css("color","red");
            },
            dblclick:function(){
                $(this).css("background-color","blue");
            }
        });
        $("input").on("click",function(){
            $("div").off();
        })
    });
</script>

</body>
</html>
on,off

13.show,hide事件：显示隐藏事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<!--分别对显示和隐藏绑定-->
    <img src="../../样式练习/images/2.png">
    <input type="button" class="show" value="显示" disabled/>
    <input type="button" class="hide" value="隐藏"/>

<!--只绑定一个button-->
    <!--<img src="../../样式练习/images/2.png">-->
    <!--<input type="button" class="hide" value="隐藏"/>-->

</body>
<script type="text/javascript">
    $(function(){
        //分别对显示和隐藏绑定
        $(".show").bind("click",function(){
            $("img").show(1000,function(){
                $(".show").attr("disabled",true);
                $(".hide").attr("disabled",false);
            });
        });
        $(".hide").bind("click",function(){
            $("img").hide(1000,function(){
                $(".hide").attr("disabled",true);
                $(".show").attr("disabled",false);
            });
        });

        //只绑定一个button
//        $(".hide").bind("click",function(){
//            $("img").toggle(1000,function(){
//                $(".hide").val()=="隐藏" ? $(".hide").val("显示"): $(".hide").val("隐藏");
//            })
//        })


    })
</script>
</html>
show,hide

14.mousemove事件：鼠标移动事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            border: 0;
        }
        div{
            border: 1px solid salmon;
        }
    </style>
       <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="n1">
    <p>鼠标在此区域移动触发mousemove</p>
    <span class="s1">移动的X位置</span>
    <span class="s2">移动的Y位置</span>
</div>
<script type="text/javascript">

    $(function () {
        $("#n1").mousemove(function(e){
            $(".s1").html("移动的X位置:"+e.pageX);
            $(".s2").html("移动的Y位置:"+e.pageY);
        })

    });
</script>

</body>
</html>
mousemove

15.mouseenter,mouseleave事件:鼠标移入移出

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouseover/mouseout</title>
    <style type="text/css">
        .main{width:150px;height: 50px;line-height:50px;text-align:center;background-color:#8C0000;color:#fff;position:relative}
        .list{width:148px;height: 200px;color:#f00;border:1px solid red;position: absolute;top:50px;display:none}
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="main">
    标题
    <div class="list">
        下拉列表
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $(".main").mouseenter(function () {
            $(".list").css("display","block");
        }).mouseleave(function () {
            $(".list").css("display","none");
        });
    });
</script>
</body>
</html>
mouseenter,mouseleave

 

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouseover与mouseenter</title>
    <style type="text/css">
        div{width:350px;height:150px;padding:5px;margin:5px;border:1px solid #ccc;}
        p{height: 50px;border:1px solid red;margin:30px;}
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <div class="aa">
        <p>鼠标离开此区域触发mouseover事件</p>
        <span>冒泡事件触发次数</span>
    </div>
    <div class="bb">
        <p>鼠标离开此区域触发mouseenter事件</p>
        <span>冒泡事件触发次数</span>
    </div>
</body>
<script type="text/javascript">
    $(function(){
        var i=0;
        $(".aa").mouseover(function(){
            $(".aa span").html("mouseover事件触发的次数："+(++i));
        });
        var n=0;
        $(".bb").mouseenter(function(){
            $(".bb span").html("mouseover事件触发的次数："+(++n));
        })
    });
</script>
</html>
mouseover冒泡

16.focus,blur事件：聚焦,失焦

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点/失焦</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <from>
        <div></div>
        <input type="text" value="">
    </from>
</body>
<script type="text/javascript">
    $(function () {
       $("input").focus(function(){
           $("div").html("请您输入您的姓名");
       }).blur(function(){
           if($(this).val().length==0){
                $("div").html("您的名称不能为空");
           }
       });
    });
</script>
</html>
focus,blur

 

二：方法

1.arrt方法：获取指定属性名的属性值

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种方法</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <a href="http://127.0.0.1" id="a1">点我就ok</a>
    <div>我要取得地方是:<span id="tip"></span></div>
</body>
<script type="text/javascript">
    $("#a1").removeAttr("href");
    var $url=$("#a1").attr("href");
    $("#tip").html($url);

        //    js方法
//    var a = document.getElementById("a1");
//    alert(a.getAttribute("href"));

</script>
</html>
attr

 例子：表单选择器

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" rel="stylesheet">
        .red {
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="f">
    <input type="text"/>
    <select id="i" multiple="multiple">
        <option id="o" value="曹泰">选1</option>
        <option selected="selected">选2</option>
        <option >选3</option>
        <option >选4</option>
        <option selected="selected">选5</option>
    </select>
    男<input type="radio" name="sex"/>
    女<input type="radio" name="sex"/>
    <br/>
    A<input type="checkbox"/>
    B<input type="checkbox"/>
    C<input type="checkbox"/>
    D<input type="checkbox"/>
</form>
<br/>
<div>asc</div>
</body>
<script type="text/javascript">
    $(function () {
        $("#f :input").addClass("red");
        $("#f input:text").addClass("red");
//        $("#f :text").addClass("red");
        $("#f :radio").attr("disabled", "true");

        $("#f :checkbox").attr("checked", "checked");
        $("#f :checkbox").attr("disabled", "true");

        $("#i :selected").html("你被选中了");
        alert($("#i #o").val());
        $("div").html("<b>你被选中了</b>");

    });
</script>
</html>
表单练习

2.替换方法：replaceWith;replaceAll;warp:warpInner

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换方法</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
    </style>
</head>
<body>

    <span class="s">我是曹</span>
    <span class="s">我是曹</span>

</body>
<script type="text/javascript">
//    $(".s").replaceWith("<div class=‘red‘>想你了</div>");//span添加了div便签，div包裹span

    var $h ="<div class=‘red‘>你好</div>";
    $($h).replaceAll(".s"); //替换所有的span标签

//    $(".s").wrap("<p class=‘red‘>aa</p>");  //span添加了p便签，p包裹span
//    $(".s").wrapInner("<i></i>"); //span添加了i便签，span包裹i

</script>
</html>
替换方法

 3.遍历：children,parent,parents,find

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
    <ul>
        <li>草莓<span>我的最爱</span></li>
        <li>香蕉</li>
        <li class="l3">橘子</li>
        <li><span>苹果</span></li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
//        $("ul li").each(function(i){
//            if(i==1){
//                $(this).css("color","red");
//            }
//        });

//        $("ul").children().css("color", "red");     //查找下一辈 （向下找）
//        $("ul").children("span").css("color", "red");     //查找下一辈，不能实现查找span （向下找）
//        $(".l3").parent().css("border", "1px solid  red");     //查找父亲（向上找）

//        $("li").find("span").css("color", "red");  //查找下辈所有的 （向下找）
//        $(".l3").parents().css("border", "1px solid  red");     //查找所有祖辈 （向上找）
//        $(".l3").parents(".d").css("border", "1px solid  red");     //查找祖辈到d （向上找）
        
    });
</script>

</body>
</html>
遍历

 

三：选择器

选择器：

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        //        $(document).ready(function(){
        //                    $("p").html("hello");
        //        }
        //        )
        //        $(function () {
        //                    $("p").html("元素选择器");
        //                }
        //        );
        //        $(function () {
        //                    $("#id").html("id选择器");
        //                }
        //        );
        //        $(function () {
        //                    $(".ul").html("类选择器");
        //                }
        //        );
        //        $(function () {
        //            $("p a").html("祖孙选择器");
        //        });
        //        $(function () {
        //            $(".div1,.div2").html("div");
        //        });

        $(function () {
//            $("div>p").html("hello");          //  div的直系亲属

//              $("span+p").html("hello");      //  span下面的p标签
        $("p~span").css(‘color‘,‘red‘)
        })
    </script>
</head>
<body>
<!-------------------------------------------------------------------->

<!--<p>-->
<!--<p>-->
<!--<p>-->


<!-------------------------------------------------------------------->

<!--<div id="id"></div>-->
<!--<ul class="ul">-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--</ul>-->


<!-------------------------------------------------------------------->

<!--<p><a></a></p>-->

<!--<div class="div1"></div>-->
<!--<div class="div2"></div>-->

<!-------------------------------------------------------------------->

<!--<div>-->
    <!--<p>ad</p>-->
    <!--<span> <p>ad</p></span>-->
<!--</div>-->
<!--<p>ads</p>-->

<!--<p>asd</p>-->

<!-------------------------------------------------------------------->

<!--<div>-->
<!--<span>曹</span>-->
<!--<p></p>-->
<!--<p>曹</p>-->
<!--<p>曹</p>-->
<!--</div>-->

<!-------------------------------------------------------------------->

<p>阿三djasdj；lkj</p>
<span>adssdada</span>
<span>adssdada</span>
<a><span></span></a>

</body>
</html>
选择器
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <ul>
        <li title="我是曹泰">asdsda</li>
        <li title="曹泰是我">asdddd</li>
        <li title="曹泰">asdddd</li>
    </ul>
    <script type="text/javascript">
        $(function(){
            $("li[title = ‘曹泰‘]").css("color","red");
//            $("li[title != ‘我是‘]").css("color","blue");
//            $("li[title *= ‘曹泰‘]").css("font-weight","bold");
        });
    </script>
</body>
</html>
属性选择器

过滤选择器：

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        //        $(function(){
        //            $("ul li:first").html("1");
        //            $("ul li:first").css("color","red");
        //

            //        n从0开始
        //            $("ul li:eq(1)").html("2");
        //            $("ul li:eq(2)").html("3");
        //
        //            $("ul li:last").html("4");
        //            $("ul li:last").css("color","red");
        //        });

        //        $(function(){
        ////            含有曹泰的li变为红色
        //            $("li:contains(‘曹泰‘)").css(‘color‘,"red");
        //        })

        //        $(function () {
        ////            含有a的p变为红色
        //            $("p:has(‘span‘)").css(‘color‘, "red");
        //        });
//
//        $(function () {
//            var $s=$("p:hidden").html();
//            $("div").html($s);
//        });
//        $(function () {
//            var $s=$("p:hidden").html();
//            $("div").html($s);
//        });

        $(function () {
            var $s=$("p:visible").html();
            $("div").html($s);
        });
    </script>
</head>
<body>
<!--<ul>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--</ul>-->
<br/>
<!--<ul class="ul1">-->
<!--<li>曹泰阿斯顿撒旦</li>-->
<!--<li>帅阿斯</li>-->
<!--<li>曹泰爱神的箭</li>-->
<!--</ul>-->
<br/>
<!--<p>as<span>a阿斯顿</span></p>-->
<br/>
<!--<div></div>-->
<!--<p style="display: none">隐藏</p>-->
<br/>
<p>我是</p>
<div></div>
</body>
</html>
过滤选择器1
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("li:first-child").css("color","red");
            $("li:last-child").css("color","red");
            $("li:nth-child(2)").css(("background-color"),("green"));
//            就是指的第二个,n从1开始
        });
    </script>
<body>
</head>
    <ul>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
    </ul>
    <ul>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
        <li>曹泰</li>
    </ul>
</body>
</html>
过滤选择器2

 

JQuery基础学习总结

标签：

原文地址：http://www.cnblogs.com/caozong/p/5859752.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！