首页 > 代码库 > jQuery常用方法以及demo

jQuery常用方法以及demo

2024-08-31 22:50:53   216人阅读

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script src="http://www.mamicode.com/jquery-1.12.2.js"></script>
</head>
<body>
<div id="dv">
    <div>123</div>
</div>

<script>
    //   empty(); empty 给所选的元素清空所有后代 （给div的所以子集添加一个innerHTML=空字符串）
    //  $(‘#dv‘).empty();


    // append(); 把append后面的东西放到$()对象里面
    //$(‘#dv‘).append(‘<p>465</p>‘)  //结果 123 456


    //appendTo(): 把appendTo后面的东西放到$()对象里面  可以简即 吐到什么什么里面
    // $(‘<p>456</p>‘).appendTo(‘#dv‘);//结果 123 456和append结构一样

</script>

<div id="dv1">
    <div>123</div>
</div>
<span>span1</span>
<span class="sp">span2</span>
<script>
    // next():     获取指定元素的下一个兄弟元素
    //    var temp=$(‘#dv1‘).next();
    //    console.log(temp);


    // nextAll() : 获取指定元素的下面所以兄弟元素
    //    var temp=$(‘#dv1‘).nextAll();
    //    console.log(temp);


    // prev() : 获取指定元素的前一个兄弟元素
    //   var temp= $(‘.sp‘).prev();
    //    console.log(temp);


    //    prevAll():获取指定元素的前面所以兄弟元素
    //    var temp = $(‘.sp‘).prevAll();
    //    console.log(temp);


    // before() 方法在被选元素前面插入内容（作为兄弟关系）
    //    $(‘.sp‘).before(‘<p>ppp</p>‘);


</script>


<div class="dv2">a</div>
<div class="dv2">b</div>
<div class="dv2">c</div>
<div class="dv2">d</div>
<div class="dv2">e</div>

<script>

    // each用法 ： 要遍历的元素如果放在each前面的话那么遍历只有一个参数回调函数
    //    $(‘.dv2‘).each(function(i,v){
    //        $(v).click(function(){
    //            alert(i);
    //        });
    //    });


    //   each用法：如果直接是$.each那么后边有两个参数， 第一个是要遍历的元素  第二个是回调函数
    //   $.each($(‘.dv2‘),function(i,v){
    //       $(this).click(function(){
    //           alert(i)
    //       })
    //   })


    //    on的用法: on用于绑定事件
    $(‘.dv2‘).on(‘click‘, function () {
        alert(‘我被点击了‘);
    })
</script>


<script>

    //    addclass()    向一个元素添加一个类
    //    $("p:first").addClass("intro");        向第一个 p 元素添加一个类
    //
    //    removeClass()    从一个元素里移除一个类
    //    $("p:first").removeClass("intro");
    //
    //    toggleclass()  切换class有移除没有添加　　　toggle开关的意思
    //    $("div").toggleClass("main");

</script>

</body>
</html>

jQuery常用方法以及demo


联系
我们