JQuery基础学习总结

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

 

posted @ 2016-09-12 19:45  caozong  阅读(546)  评论(0)  编辑  收藏  举报