常用jquery属性--php培训九期线上班

<head>
    <meta charset="UTF-8">
    <title>常用jquery属性</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        .mydiv{background: lemonchiffon;}
        .myclass{background: #0cbadf;}
    </style>
</head>
<body>
<div>
    <h1>过滤</h1>
    <p style="background:#fff1f0;">eq(index|-index)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取</p>
    <p> first()获取第一个元素</p>
    <p>last()获取最后个元素</p>
    <p>最后一个</p>
    </div>
<button onclick="myEq()">eq操作第一个p对象</button>
<button onclick="myfi()">first()获取第一个元素</button>
<button onclick="myla()">last()获取最后一个元素</button>
<div class="mydiv1" style="display: none;">
    <h1>查找</h1>
    <p style="background: #fff1f0;">children([expr])取得所有的子元素</p>
    <p>find(expr|obj|ele)搜索所有与指定表达式匹配的元素</p>
    <p>attr设置或返回被选元素的属性值。</p>
    <p>removeAttr(name)从每一个匹配的元素中删除一个属性</p>
    <p class="myclass">addClass(class|fn)为每个匹配的元素添加指定的类名</p>
    <p  class="p1">toggleClass(class|fn[,sw])如果存在（不存在）就删除（添加）一个类。</p>
    <button onclick="mychil()">children</button>
    <button onclick="myfind()">find</button>
    <button onclick="myattr()">attr</button>
    <button onclick="myremove()">removeAttr</button>
    <button onclick="myClass()">addClass</button>
    <button onclick="myreClass()">removeClass删除全部或者指定的类</button>
    <button onclick="togg()">toggleClass</button>
</div>
<button onclick="myshow()">myshow显示隐藏的匹配元素</button>
<button onclick="myhide()">myhide隐藏显示的元素</button>
<button onclick="mytoggle()">mytoggle如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。</button>
<div class="mydiv2">
    <h1>内部插入</h1>
    <p >append向每个匹配的元素内部前面追加内容。</p>
    <p>appendTo把所有匹配的元素追加到另一个指定的元素元素集合中。</p>
</div>
<button onclick="myappend()">append</button>
<button onclick="myappendto()">appendto</button>
<div class="mydiv3">
    <h1>外部插入</h1>
    <button onclick="myafter()">after</button>
    <button onclick="mybefore()">before</button>
    <button onclick="myempty()">empty</button>
    <button onclick="myremove()">remove</button>
</div>
</body>
<script>
    // 从DOM中删除所有匹配的元素。
    //这不能删除，只能删除类
    function myremove() {
        $('p').remove("myclass");
    }
    // 删除匹配的p元素集合中所有的子节点
function myempty(){
    $('.mydiv3>p').empty();
}
    empty()
    // 在每个匹配的元素之前插入内容。
function mybefore() {
    $('.mydiv3>h1').before("<p>用before在h1前面插入的内容</p>")
}
    // after在每个匹配的元素之后插入内容
    function myafter() {
        $('.mydiv3>h1').after("<p>用after在h1后面插入的内容</p>");
    }
    // 把别一个元素追加到另一个里面交删除原位置上的
function myappendto() {
    var p1="<p>appendTo追加的内容1从后面追加</p>";
    $('.p1').appendTo('.mydiv2');
}
    // 向每个匹配的元素内部前面追加内容
    function myappend() {
        var p1=" <p>append追加的内容1从前面追加</p>"
        $('.mydiv2 ').append(p1);
    }
    // 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
    function mytoggle() {
        $('.mydiv1').toggle()
    }
    // 隐藏显示的元素
    function myhide() {
        $('.mydiv1').hide(1000);
    }
    // 显示隐藏的匹配元素
    function myshow() {
        $('.mydiv1').show(1000);
    }
    // 如果存在（不存在）就删除（添加）一个类。
    function togg() {
        $('.mydiv1 p').toggleClass('mydiv')
    }
    // removeClass删除全部或者指定的类
function myreClass() {
    $('.mydiv1 p').removeClass('myclass');
}
    // 为每个匹配的元素添加指定的类名 只是类名
function myClass() {
    $('.mydiv1 p').addClass('myclass');
}
    // emoveAttr(name)从每一个匹配的元素中删除一个属性
    function myremove() {
        $('.mydiv1 p').removeAttr('class');
        $('.mydiv1 p').removeAttr('style');
    }
    // attr设置元素的属性
    function myattr() {
        $('.mydiv1 p').attr({style:'background:#ccc;',class:'cilid2'});
    }
    // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
    function myfind() {
        var fi=$('.mydiv1').find('p');
        console.log(fi);
    }
    // children([expr])取得所有的子元素
function mychil() {
    var ch=$('div ').children().first();
    console.log(ch);
}
    // 获取最后个元素
    function myla() {
        var la=$('p').last().text();
        console.log(la);
    }
    // first()获取第一个元素
    function myfi() {
        // var fi=$('p').first().text();
        var fi=$('p').first().text();
        console.log(fi);
    }
    // 获取第N个对象，返回jQuery对象，当参数大于等于0时为正向选取
    function myEq() {
      var eq1=$('p').eq(2).text();
        console.log(eq1);;
    }
</script>
</html>
相关文章
