jQuery实例方法-DOM操作(三)

最新推荐文章于 2024-07-05 14:21:58 发布

清水之昶

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/wq199909/article/details/95888879

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

.val

<body>
    <form action="./" method="GET">
        <h3>选择你喜欢的明星</h3>
        <select name="star">
            <option value="s">詹姆斯</option>
            <option value="a" selected>库里</option>
            <option value="b">奥拉迪波</option>
        </select>
        <h3>一句话介绍你喜欢的明星</h3>
        <input type="text" name="easy" value='cst'>
        <h3></h3>
        三分准：<input type="checkbox" name="special" value="three">
        组织好：<input type="checkbox" name='special' value="org">
        突破性：<input type="checkbox" name='special' value='strong'>
        <h3>具体描述该明星的技术特点</h3>
        <textarea name="des" id="" cols="30" rows="10"></textarea>
        <input type="submit" value='login'>
    </form>
    <script type="text/javascript">
        // .val  获取表单相关元素的val值
        console.log( $('input[type="checkbox"]').val() ) // 'three'
        // .val  赋值
        $('input').eq(0).val('000');
        $('input[type="checkbox"]').val(function(index, oldValue){
            return oldValue + index;
        })
    </script>
</body>

.next .nextAll .nextUntil

<body>
    <h1>水果1</h1>
    全选：<input type="checkbox">
    banana: <input type="checkbox">
    apple: <input type="checkbox">
    orange: <input type="checkbox">
    <input type="submit" value='login'>
    <h1>水果2</h1>
    全选：<input type="checkbox">
    banana: <input type="checkbox">
    apple: <input type="checkbox">
    orange: <input type="checkbox">
    <input type="submit" value='login'>
    <script type="text/javascript">
        // .next()
        $('input').eq(0).next();
        
        // .nextAll()
        // $('input[type="checkbox"]').eq(0).click(function(){
        //     if($(this).prop('checked')){
        //         $(this).nextAll('input[type="checkbox"]').prop('checked', true);
        //     }else{
        //         $(this).nextAll('input[type="checkbox"]').prop('checked', false);
        //     }
        // })
        
        // .nextUntil
        $('h1').next().click(function(){
            if($(this).prop('checked')){
                $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);
            }else{
                $(this).nextUntil('h1').prop('checked', false);
            }
        })
    </script>
</body>

.sibling .parent .parents

.closest

.slice

// .sibling .parent .parents
        
console.log($('li').eq(2).siblings('li'));
console.log($('li').eq(0).parent('.box'));
console.log($('li').eq(0).parents('.box'));

// closest 找离自己最近的元素，可以找到自己
console.log($('li').eq(0).closest('li')); 

//slice
console.log($('li').slice(1,6));

.insertBefore .before

.insertAfter .after

.appendTo .append

.prepend .prependTo

.remove .detach

//.insertBefore   .before
$('.content').insertBefore('.box1');
$('.box1').before( $('.content') );
        
//.insertAfter   .after
$('.content').insertAfter('.box1');
$('.box1').after( $('.content') );
        
// .appendTo .append
$('.content').appendTo('.wrapper');
$('.wrapper').append($('.content'));
        
// .prependTo .prepend
$('.content').prependTo('.wrapper');
$('.wrapper').prepend($('.content'));
        
// .remove .detach
// 删除元素，detach删除后还可以触发事件