jquery文件内容排版 jquery文档操作

转载

mob64ca140234eb 2023-09-24 17:52:46

文章标签 jquery文件内容排版 jQuery js html ide 文章分类 jQuery 前端开发

前言

一、文本操作

先来看html文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容操作</title>
</head>
<body>
    <div id="i1">
        内容1
        <a id="i2">
            内容2
        </a>
    </div>

    <div>
        <input id="i3" type="text" >
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js"  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="  crossorigin="anonymous"></script>

</body>
</html>

1.获取文本内容 $().text()

$("#i1").text()

结果：

2.设置文本内容 $().text(需要设置的内容)

$("#i2").text('新的内容')
$("#i2").text()

结果：

'新的内容'

3.获取文本内容 $().html()

$("#i1").html()

结果：

"
        内容1
        <a id="i2">新的内容</a>
    "

4.设置文本内容 $().html(需要设置的内容)

$("#i1").html('<div>dasdsa</div>')
$("#i1").html()

结果：

"<div>dasdsa</div>"

注：text()和html()的区别：

在获取文本内容的时候，text()只是获取到标签内的内容，而html()则是连标签也会获取到；
在设置文本内容的时候，text()只是将文本完全设置在需要设置的地方，而html()则会解析其中的标签元素。

对于input系列，有专门的文本操作方法：

5.input系列获取文本内容 $().val()

$('#i3').val()

结果：

""

6.input系列设置文本内容 $().val(需要设置的内容)

$('input[id="i3"]').val("dasd")

二、样式操作

先来看一个模拟开关灯效果的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟开灯关灯效果</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关">
    <div class="c1 hide">
        adsadsd
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js"  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="  crossorigin="anonymous"></script>
    <script>
        $('#i1').click(function () {
            // if ($('.c1').hasClass('hide')){
            //     $('.c1').removeClass('hide');
            // }
            // else{
            //     $('.c1').addClass('hide');
            // }
            $('.c1').toggleClass('hide');   //这一句就相当于上面那一大串代码
        })
    </script>
</body>
</html>

主要有三个方法：addClass(),removeClass(),toggleClass()

addClass()：添加样式；
removeClass()：移除样式；
toggleClass()：相当于代码中注释掉的功能。注释掉的功能：判断是否含有hide这个样式，如果有则移除，如果没有则添加。

三、属性操作

$(’#i1’).attr() # 专门用来做自定义属性
attr()：传一个值时获取属性的值，传两个参数是设置一个属性，如果这个属性有，则覆盖原来的属性
$(’#i1’).removeAttr() # 删除属性
$(’#i1’).prop() # 专门为checkbox和radio做操作的
$(’#i1’).prop(‘checked’; # 获取checked属性的值
$(’#i1’).prop(‘checked’,true); # 选中
$(’#i1’).prop(‘checked’,false); # 取消选中

来看一个TAB菜单切换的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TAB菜单切换</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div style="width: 700px; margin: 0 auto">
        <div class="menu">
            <div class="menu-item active" a="1">菜单1</div>
            <div class="menu-item" a="2">菜单2</div>
            <div class="menu-item" a="2">菜单3</div>
        </div>
        <div class="content">
            <div b="1">内容1</div>
            <div class="hide" b="2">内容2</div>
            <div class="hide" b="3">内容3</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="  crossorigin="anonymous"></script>
    <script>
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            // var target = $(this).attr('a');
            // $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');

            //用索引来做
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

四、文档操作

append() 往后面添加
prepend() 往前面添加
after() 最外面的下面添加
before() 最外面的上面添加
remove() 删除
empty() 只删除内容，不删除索引
clone() 克隆

来看一个简单的文档操作的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
</head>
<body>
    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">
    <input id="a2" type="button" value="删除">
    <input id="a3" type="button" value="复制">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="https://code.jquery.com/jquery-1.12.4.js"  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="  crossorigin="anonymous"></script>
    <script>
        $("#a1").click(function () {
            var v = $("#t1").val();
            var temp = "<li>"+v+"</li>";
            $("#u1").append(temp);
        });
        
        $("#a2").click(function () {
            var index = $('#t1').val();
            $('#u1 li').eq(index).remove();
            // $('#u1 li').eq(index).empty();
        });
        $("#a3").click(function () {
            var index = $('#t1').val();
            var v = $('#u1 li').eq(index).clone();
            $("#u1").append(v);
        })
    </script>
</body>
</html>