jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒

Posted 2022-07-19 dengl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒相关的知识，希望对你有一定的参考价值。

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

一丶jQ操作标签内文本

html() 标签元素中的内容

/** 替换的内容可以使一个js对象,jq对象,文本 **/
    /* 获取值:获取选中标签元素的所有内容 ,包括标签*/
        $('ul').html()
            "
                <li>1</li>
                <li>2</li>
                <li>3</li>
            "

    /* 设置值:设置该元素的所有内容,会替换掉标签中原来的内容 */
        $('#box').html('<a>哈哈哈</a>')

text() 标签元素的文本内容

/** 替换的内容都会变成文本样式,html标签不会渲染,jsjq对象则是地址  **/
    /* 获取值:获取选中标签元素的文本内容*/
        $('ul').text()
            "
                1
                2
                3
            "

    /* 设置值:设置该元素的所有文本内容 */
        $('ul').text('替换了所有内容')
        jQuery.fn.init?[ul, prevObject: jQuery.fn.init(1)]
    
        
//PS:   
    text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

二丶jQ操作文档标签

插入标签

????????子元素可以为：stirng | element（js对象） | jquery元素

/* append 和 appendTo  : 追加到某个元素之后 */
    //父元素.append(子元素)
     $('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象


    //子元素.appendTo(父元素)
     $('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后


/* prepend 和 prependTo : 添加到某个元素之前 */

    //父元素.prepend(子元素)
     $('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象


    //子元素.prependTo(父元素)
     $('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前



/* after 和 insertAfter : 兄弟元素之后插入某个元素/内容 */
    
    //兄弟元素.after(要插入的兄弟元素)
     $('#l2').after('<li>哈哈</li>') 


    //要插入的兄弟元素.insertAfter(兄弟元素)
     $('<li>哈哈2</li>').insertAfter('#l2') 



/* before 和 insertBefore : 兄弟元素之前插入某个元素/内容 */

    //兄弟元素.before(要插入的兄弟元素)
     $('#l2').before('<li>哈哈3</li>')  

    //要插入的兄弟元素.insertBefore(兄弟元素)
     $('<li>哈哈4</li>').insertBefore('#l2')  




//PS:
    如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。

????????示例代码:??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../day49 JQ/jquery3.4.1.js"></script>
</head>
<body>
<ul>
    <li>唱</li>
    <li id="l2">跳</li>
    <li>rap</li>
</ul>
</body>
<script>
   var  li=document.createElement('li')

    // console.log($('ul').text())  // 查询所有文本内容
    // console.log($('ul').html())  // 查询所有文本内容+标签

    $('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象
    $('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后
    //
    $('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象
    $('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前

    $('#l2').after('<li>哈哈</li>')  //
    $('<li>哈哈2</li>').insertAfter('#l2')  //
    $('#l2').before('<li>哈哈3</li>')  //
    $('<li>哈哈4</li>').insertBefore('#l2')  //

</script>
</html>

删除标签

//删除节点后，事件也会删除（简言之，删除了整个标签）
    $(selector).remove();   //被删掉的对象可以做返回值

// 删除节点后，事件会保留  
    $(selector).detach();   //被删掉的对象可以做返回值

// 清空选中元素中的所有后代节点
    $(selector).empty();

????????示例代码:??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<button>按钮</button>
</body>
<script>
    $('button').click(function () 
        alert('123')
    )
</script>
</html>

修改标签

//选择器被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。

/* replacWith : 指定jq对象元素被替换成指定的 string,js对象,jq对象 */
    $(选择器).replaceWith(content)
    
/* reokaceAll : 内容(string,jq对象,js对象) 替换 指定的jq对象 */
    $(content).reokaceAll(选择器)

????????示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<ul>
    <li >一</li>
    <li >二</li>
    <li >三</li>
</ul>
</body>
<script>

    //创建一个sp对象
    var sp=document.createElement('span')
    sp.innerText='alex'

    // replaceWith
    $('li:first').replaceWith(sp);

    //replaceAll
    $(sp).replaceAll($('li:last'))
</script>
</html>

clone()克隆标签

// 克隆匹配的DOM元素 , 当 clone(true) 克隆这个标签的所有,包括事件.
    $(选择器).clone();

????????示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<button>点击</button>
</body>
<script>
    $('button').click(function () 
        // this 指的是当前的这个对象
        var new_btn= $(this).clone()
        $(new_btn).insertAfter($(this))
    )
    
    // 当 clone(true) 克隆这个标签的所有,包括事件
     $('button').click(function () 
        // this 指的是当前的 js对象
        var new_btn= $(this).clone(true)
        //insertAfter 添加到button标签之后
        $(new_btn).insertAfter($(this))
    )
</script>
</html>

三丶jQ操作属性

attr()获取/设置属性值:

/* 获取值 */
    //语法: $('选择器').attr('属性名')
        $('div').attr('id')  //获取div的id属性值



/* 设置值 */
  //设置一个值
    //语法: $('选择器').attr('属性名','属性值') 
        $('div').attr('class','box') //为div标签添加box类


  //设置多个值
    //语法: $('选择器').attr('属性名1':'属性值2','属性名2':'属性值2') 
        $('div').attr('class':'box','id':'d1') //为div标签添加box类和id

removeAttr()移除属性:

/* 移除属性 */
    //删除单个属性
        $('#box').removeAttr('name');
        $('#box').removeAttr('class');

    //删除多个属性
        $('#box').removeAttr('name class');

prop():

/* 查看属性 */
    // 语法: $('选择器').prop('属性')
        $('span').prop('title');


/* 修改属性,属性必须已经存在标签上 */
    //修改单个值
    // 语法: $(selector).prop(property,value)
        $('div').prop('id','1bsad')
    
    
    // 修改多个属性
    // 语法: $(selector).prop(property:value, property:value,...)
         $('div').prop('id':'1bsad','title':'你好啊')

// checked篇章
$('input').attr('checked')
"checked"

$('input').prop('checked')
true

$('input').prop('cheched',false)  //设置取消选中

????????综合示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<!--<div title="abc" id="123"></div>-->

<input type="radio" name="sex"  value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="1" >唱
<input type="checkbox" name="hobby" value="2" >跳
<input type="checkbox" name="hobby" value="3" >rap

</body>
<script>
     var div=$('div');

    //获得属性值
     var v1=div.attr('id')
     console.log(v1)

    //设置属性值
     div.attr('name','ab');//单个
     div.attr('name':'ab','value':'123');//多个

    // 移除属性
     div.removeAttr('id');//移除一个属性
     div.removeAttr('id title') ; // 移除多个属性

    //prop 查看属性
     console.log(div.prop('id'))

    //prop 修改属性,属性必须已经存在标签上
        // 一个值
             $('div').prop('name','1bsad')
        // 多个值
             $('div').prop('id':'1bsad','title':'你好啊')




</script>
</html>

四丶jQ操作class属性

addClass()添加类:

/* 指定选择器元素添加指定的类名 */
    $('div').addClass('box');  //添加一个

    $('div').addClass('box c2');  //添加多个

removeClass()移除类:

/* 从所有匹配的元素中删除全部或者是指定的类 */
    $('div').removeClass('box'); //移除box类
    
    $('div').removeClass('box c2'); //移除box类 和c2类

toggleClass()类的切换:

/* toggleClass() :存在就删除, 不存在就添加上 */
    $('div').toggleClass('c2');

    
    $('span').click(function()
        //动态的切换class类名为active
        $(this).toggleClass('active')
    )

????????综合示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="/javascript" src="jquery-3.3.1.js"></script>

    <style type="text/css">

        div
            width: 100px;
            height: 100px;
        
        .active 

            background-color: red;
        
        .c1
            width: 200px;
            background-color: cornflowerblue;
        
        .c2
            background-color: gray;
        

    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>

<div class=""></div>
<button>点击</button>

</body>
<script type="text/javascript">
    $('button').click(function () 
        // $('div').addClass('c1') ;  // 添加一个样式
        // $('div').addClass('c1 c2'); //添加多个样式

        // $('div').removeClass('c1')  //  移除指定样式
        // $('div').removeClass()  //  移除所有样式
        
        // 点击切换
        $('div').toggleClass('c2')
    )
</script>
</html>

五丶jQ操作表单value

val()获取值:input,textarea,select等

/* 获取值: 用于表单控件中获取值 */
    $('选择器').val()

/* 设置值: */
    $('选择器').val('新值')


//PS:
    对于选择框 : 单选 多选 下拉选择
    设置选中的值需要放在数组中 : 
        $(':radio').val([1])
        $(':radio').val([1,2,3])

????????示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 设置cheked属性表示选中当前选项 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" />睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆

    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
            <select name="timespan" id="timespan" class="Wdate"   >
                <option value="1">8:00-8:30</option>
                <option value="2" selected="">8:30-9:00</option>
                <option value="3">9:00-9:30</option>
            </select>
            <input type="text" name="" id="" value="111" />
    </form>

</body>
<script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">

        $(function()
            // 一、获取值
                //1.获取单选框被选中的value值
                console.log($('input[type=radio]:checked').val())

                //2.复选框被选中的value,获取的是第一个被选中的值
                console.log($('input[type=checkbox]:checked').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(['3','2'])


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

        )

    </script>

</html>

六丶jQ操作css样式

css(属性名,属性值):

/* 获取css的某个样式的值 */
    $('div').css('color')
    
/* 直接修改css的属性 */
    $('div').css('color','red') ;  //单个值
    $('div').css('color':'red','background-color':'lightgray') ;  //单个值

?????????示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
    <style>
        div
            width: 100px;
            height: 100px;
        
    </style>
</head>
<body>
<div></div>
<input type="text" name="a" value="123">
</body>
<script>
    // val
   var val= $('input').val();
   console.log(val)

   //css
   $('div').css('background-color','red')
    
</script>
</html>

七丶jQ操作盒子样式

?????????设置值:变得永远是content的值

内容:

?????????宽度(width)和高度(height)

/* 宽度 */
    //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
        $('选择器').width() 
    
    //设置宽度
        $('选择器').width( value ) 


/* 高度 */
    //获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
        $('选择器').height() 
    
    //设置高度
        $('选择器').height( value )

内容+padding:

?????????宽度(innerWidth)和高度(innerHeight)

/* 内部宽 */
    // 获取
        $('选择器').innerWidth();
    //设置
        $('选择器').innerWidth(value);


/* 内部高 */
    // 获取
        $('选择器').innerHeight();
    //设置
        $('选择器').innerHeight(value);

内容+padding+border:

?????????宽度(outerWidth)和高度(outerHeight)

// 外部宽
     .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
     .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽

     .outerWidth(value) //设置多个，调整的是“内容”的宽


//外部高
     .outerHeight() //第一个匹配元素：获取内容+padding+border的高
     .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高

     .outerHeight( value ) //设置多个，调整的是“内容”的高

????????简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        *
            margin: 0;
        
        div
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            padding: 10px;
            margin: 10px;
            border: 10px solid #ffd19b;
        
    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
    // 内容的宽 width
    //     $('div').width(); //获取原本宽度
    //     $('div').width(200); //设置宽度
    //内容的高 height
    //     $('div').height(); //获取原本高度
    //      $('div').height(200); //设置高度


    // 内容 + padding
        // 宽度
            // $('div').innerWidth()
        // 高度
            // $('div').innerHeight()


    // 内容+padding+border
        $('div').outerWidth()   //140
        $('div').outerWidth(true) //160
        $('div').outerHeight()
        $('div').outerHeight(true)
</script>
</html>

八丶滚动条距离属性

$(window).scrollLeft()
$(window).scrollTop()

// 水平方向
    .scrollLeft()      //获取
    .scrollLeft( value )//设置

// 垂直方向
    .scrollTop() //获取
    .scrollTop( value ) //设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div
            width: 2000px;
            height: 2000px;
        
    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<div>1</div>
</body>
<script>
    $(window).scrollLeft()
    $(window).scrollTop()
</script>
</html>

以上是关于jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 文档操作 - insertAfter() ，insertBefore() 方法

jQuery ---[jQuery操作HTML属性,CSS属性,文本内容]

jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq

JavaScript Dom 操作

HTML基本操作