jQuery DOM操作

标签属性操作

attr()  //getAttrbute() setAttrbute() 路径的相对地址
removeAttr() //removeAttibute()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./xiaohua.jpg" alt="" >
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //attr
        //获取值
        console.log($('img').attr('src')); //./xiaohua.jpg
        //设置值
        $('img').attr('alt','美女'); //./xiaohua.jpg

         //设置多个标签属性值
         $('img').attr({
             'aaa':'美女',
             'bbbb':'个哈哈哈'
         });

         //移除 removeAttr()
        setTimeout(()=>{
            //移除单个属性
           // $('img').removeAttr('alt');
           //移除多个属性
            $('img').removeAttr('alt aaa bbbb');
        },3000)

    })
</script>
</body>
</html>

注意: 不要使用attr()或者prop()来设置类名

对象属性操作

prop()  //oDiv.id  
removeProp()  //oDiv.id = ''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<img src="./xiaohua.jpg" alt=""  class="box">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {

        //获取值
        console.log($('img').prop('src'));
        $('img').prop('aaaa','美女');
        $('img').prop({
            'bbb':'哈哈',
            'aa':'嘿嘿'
        });
        //移除 removeProp() 删除一个属性
        $('img').removeProp('aa');
        $('img').removeProp('bbb');

        console.log($('img'));
        setTimeout(()=>{
        },3000)
    })
</script>
</body>
</html>

类的操作

addClass() //添加类
removeClass() //移除
toggleClass() //添加|移除

$(function () {
    var isHide = true;
    $('button').click(function () {
        if (isHide){
            $('.box').addClass('active aa vbbb addad');
            isHide = false;
        }else{
            $('.box').removeClass('active aa vbbb');
            isHide = true;
        }
        // $('.box').toggleClass('active');
    })
})

值的操作

//如果不传参数 表示获取值
//如果传参数,表示设置值
text();// innerText 设置文本的内容
html(); //innerHTML 即设置文本又设置标签
val(); //value

$(function () {
    var isHide = true;
    $('#show').click(function () {

        if (isHide) {
            $('.box').addClass('active aa vbbb addad');
            isHide = false;
            //获取文本的值
            console.log($(this).text());
            //只设置文本
            var name = 'alex2333'
            $(this).text('隐藏');
            $('.box').html(`<ul>
                            <li id="" class="ac"><a href="">哈哈哈</a></li>
                            <li>${name}</li>
                          </ul>`)
        } else {
            $('.box').removeClass('active aa vbbb');
            isHide = true;
            $(this).text('显示');
        }
    })

    $('#del').mouseenter(function () {
        $('.box').html('');
    })
    //获取值
    console.log( $('input[type=text]').val());
    //设置值
    $('input[type=text]').val('alex');
    console.log( $('input[type=text]').val());
})

样式属性操作

//如果有一个参数,参数是字符串表示获取值,参数是对象,表示设置多个值
//如果有两个参数,表示设置值
$(selector).css();

操作input中value的值

下拉列表

<select name="timespan" id="timespan" class="Wdate"  multiple="multiple" >
    <option value ='1' selected>alex</option>
    <option value = '2' selected="">wusir</option>
    <option value = '3'>wulaoban</option>
</select>

$(function () {

    // 一、获取值
    //1.获取单选框被选中的value值
    console.log($('input[type=radio]:checked').val())
    //
    // //2.复选框被选中的value,获取的是第一个被选中的值
    console.log($('input[type=checkbox]:checked').eq(1).val())


    // //3.下拉列表被选中的值
    //
    var obj = $("#timespan option:selected");
    // // 获取被选中的值
    var time = obj.val();
    console.log(time);
    // // 获取文本
    var time_text = obj.text();
    console.log("val:" + time + " text" + time_text);

    //4.获取文本框的value值
    console.log($("input[type=text]").val());//获取文本框中的值

    // 二.设置值
    //1.设置单选按钮和多选按钮被选中项
    $('input[type=radio]').val(['112']);
    $('input[type=checkbox]').val(['a', 'b']);


    //2.设置下拉列表框的选中值，必须使用select
    /*因为option只能设置单个值，当给select标签设置multiple。
    那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
    */

    $('select').val(['2','3'])
    $('select').val([ "Multiple2", "Multiple3" ]);
    $('select').val([ "alex", "wulaoban" ]);

    // 3.设置文本框的value值
    $('input[type=text]').val('试试就试试')

    $('#fruit').val('苹果');
    $('#fruit').val(['苹果','哈哈哈']);
})

总结:
1.如果option中的属性有value,优先使用value设置
$('#timespan').val(['1','3']);//选中1 和3选项
2.如果没有value,那么使用标签的文本内容设置
$('#timespan').val(['alex','wulaobnan']) //选中1 和 3 选项

文档的操作

文档追加

html 内容

<input type="text">
<button id="append">后置追加</button>
<button id="prepend">前置追加</button>
<button id="after">兄弟追加后</button>
<button id="replace">替换</button>
<button id="del">删除</button>
<button id="detach">删除2</button>
<button id="empty">清空</button>
<ul class="comment">
    <li id="item">alex</li>
    <li><a href="#">sb</a></li>
    <li><a href="#">sb2</a></li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        ....
    }
</script>

后置追加

$('.comment').append(`<li>${content}</li>`);
//追加js对象
var li = document.createElement('li');
li.innerText = 'wusir';
$('.comment').append(li);

// 后置追加
$('#append').click(function (){
    let content = $('input[type=text]').val();
    if (!content) { return; }
    $('.comment').append(`<li>${content}</li>`);
    //清空
    $('input[type=text]').val('')
})

// 循环追加
$.each(data_list, function (index, item) {
    console.log(index, item)
})

前置追加

$('.comment').prepend(`<li>${content}</li>`);
$(`<li>${content}</li>`).prependTo('.comment');
$('<li>话说</li>').appendTo('.comment').click(function () {
    alert($(this).html())
})

兄弟追加后追加

$('#item').after(`<li>${content}</li>`);
$(`<li>${content}</li>`).insertAfter('#item');

兄弟追加前追加

目标兄弟.before(要插入的兄弟)
要插入的兄弟.inertBefore(目标兄弟)

替换

$('#replace').click(function () {
    $('.comment li a').replaceWith('1');
})

删除

//remove() 删除 表示整个标签都删除(事件也删除)
$('#del').click(function () {
    // $('ul').remove();
    var jbtn =   $(this).remove();
    $('.comment #item').append(jbtn)
})

//删除标签 事件不删除
$('#detach').click(function () {
    var jbtn =   $(this).detach();
    $('.comment #item').append(jbtn)
})

//清空父级元素的子内容
$('#empty').click(function () {
    $('.comment').empty();
    $('.comment').html('');
    $('.comment').text('');
})

posted @ 2019-05-01 18:57 拐弯阅读(853) 评论(0) 编辑收藏举报

刷新页面返回顶部

拐弯

jQuery DOM操作

jQuery DOM操作

标签属性操作

对象属性操作

类的操作

值的操作

样式属性操作

操作input中value的值

文档的操作

文档追加

公告