jQuery 学习笔记

最新推荐文章于 2024-01-20 21:49:50 发布

HHG_

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量197

点赞数 1

分类专栏： JQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_28811731/article/details/82719081

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// jQuery的三个步骤
    1.引入jQuery文件
    2.入口与函数
    3.功能实现


//1.1jquery 函数入口标准1
$(document).ready(function(){
...
});

//1.2jquery 函数入口标准2
$(function(){
...
});


//2.注册事件
$("#btn").click(function(){
...
});

//3. show
$("#div").show();

jquery对象与Dom对象 的区别

jq对象就是jq方式获取的对象：$("btn1");

Dom对象(JS对象)就是jq方式获取的对象: var btn1 = document.getElementById("btn1");

1.隔行变色

<script>
    $(function () {
      //  $("ul li:even").css("background","red");      //奇数行变色1357
        $("ul li:odd").css("background","red");         //偶数行变色2468
    });
</script>

2.jQuery 基本选择器

 $(function(){
       //1.id 选择器  $("#id")
    $("#four").css("background","red");

        //2.类选择器   $(".class")
    $(".green").css("background","green");

        //3.标签选择器 $("标签名")
    $("li").css("background","pink");

        //4.并集选择器
    $("#four,.green").css("background","red");
        //5.交集选择器
   $("li.green").css("background","red");

    });

3.层级选择器

<script>
$(function(){
    $("#father>p").css("background","red");//子选择器
    $("#father p").css("background","red");//后代选择器
    });

$("li>a");//子选择器
$("li a");//后代选择器
$("li.a");//交集选择器
$("li,a");//并集选择器
    
</script>

4.过滤选择器

<script>
    $(function () {
            $("ul li:even").css("background","red");     
            $("ul li:odd").css("background","red");  
             $("li:eq(2)").css("background","red");  //eq 下标过滤选择器
       
    });
</script>

5.筛选选择器 (.children)

筛选选择器:是方法
<script>
    $(function(){
        $("#uu>li").mouseover(function(){
            //alert("aaa");
            $(this).children("ul").show();   // children
        });
        $("#uu>li").mouseout(function(){
            $(this).children("ul").hide();
        });
    });
</script>

6.属性操作

<script>
    $(function(){
        $("img").attr({
            alt:"alt改法二",
            title:"错错错"
        });

 $("img").attr("alt","alt改法一");
    });
</script>

7.attr与prop的使用

<script>
   $(function(){
       //attr: 使用一次就会失效
       $("input").eq(0).click(function(){
           $("#ck").attr("checked",true);
       });

       $("input").eq(1).click(function(){
           $("#ck").attr("checked",false);
       });

       //prop: 是对于使用Boolean值得属性设置
       $("input").eq(3).click(function(){
          // alert("eq2");
           $("#ck").prop("checked",true);
       });

       $("input").eq(4).click(function(){
           $("#ck").prop("checked",false);
       });
       });
</script>

8.全选案例

<body>

<input type="checkbox" name="" id="" class="hhg">全选
<div id="all">
<input type="checkbox" name="" id="">1
<input type="checkbox" name="" id="">2
<input type="checkbox" name="" id="">3
<input type="checkbox" name="" id="">4
<input type="checkbox" name="" id="">5
<input type="checkbox" name="" id="">6
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        //--全选按钮
        $(".hhg").click(function(){
            alert("操作了全选按钮");
            $("#all input").prop("checked",$(this).prop("checked"));
        });

//一个个选中直至全选中
        $("#all input").click(function(){
     var $c=     $("#all input").length; //输出一共多少checkbox
        //  alert($c);

        //输出一共选中了几个checkbox
      var $cd=  $("#all input:checked").length;
      //  alert($cd);
if ($c == $cd){
    $("input:eq(0)").prop("checked",true);
}else{
    $("input:eq(0)").prop("checked",false);
}
        });
    });
</script>
</body>

9.三组基本动画

<body>
//三组基本动画
/*
1.显示 隐藏
2.滑入 滑出
3.淡入 淡出
*/
<br>
<input type="button" value="显示show">
<input type="button" value="隐藏hide">

<input type="button" value="滑入slideDown">
<input type="button" value="滑出slideUp">

<input type="button" value="淡入fadeIn">
<input type="button" value="淡出fadeOut">

<div style="width: 200px;height: 200px;background-color: red;display: none;"></div>



<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
    //显示
    $("input:eq(0)").click(function(){
       // $("div").show();
        $("div").show(1000);
    });
//隐藏
    $("input:eq(1)").click(function(){
       // $("div").hide();
        $("div").hide(1000);
    });

    //滑入
    $("input:eq(2)").click(function(){
        $("div").slideDown();
    });
    //滑出
    $("input:eq(3)").click(function(){
        $("div").slideUp();
    });

    //淡入
    $("input:eq(4)").click(function(){
       $("div").fadeIn();
    });
    //淡出
    $("input:eq(5)").click(function(){
        $("div").fadeOut();
    });



});

</script>
</body>

10.轮播图手动

<body>
<div style="width: 790px;height:340px;margin: 0 auto; background-color: red;">
    <ul>
        <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/6.jpg" alt=""></a></li>
    </ul>
</div>
<input type="button" value="下一张">
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
    var i=0;
    $("input").click(function(){
        i++;
        $("li").eq(i).fadeIn().siblings("li").fadeOut();

        var $li=$("li").length;
        if (i== $li){
            i=0;
        }
    });
});
</script>
</body>

11.自定义动画☆

<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div style="width: 200px;height: 200px;background-color: red;" id="div1"></div>

<script src="jquery-1.12.4.js"></script>
<script>
    $(function() {
        $("input").eq(0).click(function(){
            //4个参数;   位置设置  动作时长  动作曲线 回调函数  
             $("#div1").animate({left:500},2000,swing,function(){
                 alert("animate起作用了");
             });
        });
    });


</script>

</body>

12.stop的使用

<body>
<div>1</div>
<br>
<div>2</div>

<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
    $("div").mouseover(function(){
        $(this).stop().slideUp();
    });
$("div").mouseout(function(){
    $(this).stop().slideDown();
});

});

</script>
</body>

13.创建于添加节点

<body>
<div id="box" style="width: 400px;height: 400px;background-color: red;">
    <!--<a href="https://www.baidu.com" target="_blank">点我带你去百度</a>-->

</div>



<script src="jquery-1.12.4.js"></script>
<script>
    $(function(){
     // js
/*var a = document.createElement("a");//1.创建a 标签
var box = document.getElementById("box");
box.appendChild(a);
        a.setAttribute("href","https://www.baidu.com");
        a.setAttribute("target","_blank");
       a.innerHTML="点我带你去百度";*/

//jQuery
$("#box").append('<a href="https://www.baidu.com" target="_blank">点我带你去百度</a>');


var $li=$('<br><a href="https://www.baidu.com" target="_blank">点我带你去百度2</a>')
        $("div").append($li);
        $("div").prepend($li);
        $("li").appendTo($div);

        $("div").after($li);
        $("div").before($li);

        //append    添加到最后面 √
        //prepend   添加到最前面
        //appendTo  添加到某节点的下面 √
        //prependTo 添加到某节点的前面

        //after    添加到后面
        //before    添加到前面

    });

</script>
</body>

14.清空与删除与克隆节点

<body>
<div style="width: 200px;height: 200px;background-color: red;">
    <p>1111</p>
    <p>2222</p>
</div>
<p>333</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
   // $("div").html("");   //容易导致内存泄漏

 //   $("div").empty();//清空内容 包含事件

 //   $("div").remove();//删除节点

    $("p:eq(2)").click(function(){
        alert("我是P 3");

    });
    // true:深度克隆(包含事件)  false(不包含事件);
    $("p:eq(2)").clone(true).appendTo($("div"));

});
</script>
</body>

15.widht height scrollTop scrollLeft offset position 方法