WEB基础之：jQuery操作

jQuery操作

1. 属性操作

示例

<body>
    <input type="checkbox" name="checkbox" value="checkbox1" checked="checked">
    <img src="images/paperplane.png" alt="img" />
    <p></p>
    <script src="jquery-3.5.1.js"></script>
</body>

  • attr(name|properties|key,value|fn): 设置或返回被选元素的属性值。

    • $('img').attr('src');

  • removeAttr(name): 从每一个匹配的元素中删除一个属性。

    • $('img').removeAttr('src');

  • prop(name|properties|key,value|fn): 获取在匹配的元素集中的第一个元素的属性值。针对的是checked\selected\disabled。

    • // 查看标签是否有checked属性
$("input[type='checkbox']").prop("checked");

// 通过设置属性的方式来设置是否选中
$("input[type='checkbox']").prop("checked", false);

  • removeProp(name): 用来删除由.prop()方法设置的属性集。

    • var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

2. 类操作

示例

<style>
    .c1 {color: red;}
    .c2 {color: #2459a2;}
</style>
     
<body>
    <p class="c1">test paragraph</p>
    <script src="jquery-3.5.1.js"></script>
</body>

  • addClass(class|fn): 为每个匹配的元素添加指定的类名。

    • $('.c1').addClass('c2');

  • removeClass([class|fn]): 从所有匹配的元素中删除全部或者指定的类。

    • $('.c1').removeClass('c2');

  • toggleClass(class|fn[,sw]): 从所有匹配的元素中判定如果有就移除，如果没有就添加。

    • $('.c1').toggleClass('c2');

  • hasClass(class): 检查当前的元素是否含有某个特定的类，如果有，则返回true。

    • $('.c1').hasClass('c2');

3. HTML/文本/值

示例

<body>
    <p class="c1">test paragraph</p>
    <input type="button" value="Btn">
    <script src="jquery-3.5.1.js"></script>
</body>

  • html([val|fn]): 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果。

    • $('p').html('<strong>Hellow World!</strong>');
// Hellow World!

  • text([val|fn]): 设置所有匹配文本元素的内容，不识别标签，将标签作为文本插入进去。

    • $('p').text('<strong>Hellow World!</strong>');
// <strong>Hellow World!</strong>

  • val([val|fn|arr]): 获得匹配表单元素的当前值。

    • $('input').val();
$('input').val('<strong>Hellow World!</strong>');
// 显示名称为 <strong>Hellow World!</strong> 的按钮

设置值
	$('[name="ip"]').val(['1.1.1.1']);
	$('[name="ip"]').val('1.1.1.1')		//所有标签的值都变成了'1.1.1.1';
	$('[name="host"]').val(['user1','user2'])

	// 单选select
    $('#host').val('user1');	    // option value='user1'

	// 多选select
    $('#group').val(['group1','group2'])

4. CSS操作

示例

<body>
    <p class="c1">test paragraph</p>
    <input type="button" value="Btn">
    <script src="jquery-3.5.1.js"></script>
</body>

  • css(name|pro|[,val|fn]): 访问匹配元素的样式属性。

    • $('input').css({'color': "red"});

// JS绑定点击事件
$('.c1')[0].onclick = function () {
    this.style.backgroundColor = 'green';
}
// jQuery绑定点击事件
$('.c1').click(function () {
    $(this).css('background-color','green');
})

4.1 位置

  • offset([coordinates]): 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

    • $("p").offset({ top: 10, left: 10 });

  • position(): 获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

    • $("p").position();

  • scrollTop([val]): 获取匹配元素相对滚动条顶部的偏移。对可见和隐藏元素均有效。

  • scrollLeft([val]): 获取匹配元素相对滚动条左侧的偏移。

  • 返回顶部的方法：

      1. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        .c1 {
            background-color: lightcoral;
            width: 100px;
            height: 100px;
        }
        .c2 {
            background-color: #add8e6;
            width: 100px;
            height: 500px;
        }
        .c3 {
            background-color: lightsalmon;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            position: fixed;
            bottom: 20px;
            left: 8px;
        }
        .hide { display: none; }
    </style>
</head>
<body>
    <p id="top">Top</p>
    <div class="c1"></div>
    <div class="c2"></div>
    <!--使用 a 标签返回顶部-->
    <div class="c3">Move Top</div>
    <script src="jquery-3.5.1.js"></script>
    <script>
        // 打印当前滚动条顶部偏移量
        $(window).scroll(function () {
            console.log($(window).scrollTop());
            if ($(window).scrollTop() < 100) {
                $('.c3').addClass('hide');
            } else {
                $('.c3').removeClass('hide');
            }
        });
		// 使用scrollTop()设置滚动条顶部偏移量为0，返回顶部。
        $('.c3').click(function () {
           $(window).scrollTop('0');
        });
    </script>
</body>
</html>

4.2 尺寸

示例

    <style>
        .c1 {
            background-color: lightcoral;
            width: 100px;
            height: 100px;
            margin: 10px 20px;
            border: 4px lightblue solid;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <script src="jquery-3.5.1.js"></script>
</body>

  • height([val|fn]): 取得匹配元素计算的 window 和 document 的高度值px(content 高度)

    • $('.c1').height();		// 100

  • width([val|fn]): 取得匹配元素计算的 window 和 document 的宽度值px(content 宽度)

    • $('.c1').width();		// 100

  • innerHeight(): 获取第一个匹配元素内部区域高度（content高度+padding高度）。

    • $('.c1').innerHeight();		// 120

  • innerWidth(): 获取第一个匹配元素内部区域宽度（content宽度+padding宽度）。

    • $('.c1').innerWidth();		// 140

  • outerHeight([options]): 获取第一个匹配元素外部高度（content高度+padding高度 + border高度）。

    • $('.c1').outerHeight();		// 128

  • outerWidth([options]): 获取第一个匹配元素外部宽度（content宽度+padding宽度+ border宽度）。

    • $('.c1').outerWidth();		// 148

5. 文档操作

5.1 内部插入

  • append(content|fn): 向每个匹配的元素内部追加内容。

    • $('p').append("<b>append text.</b>")		// 添加的HTML标签不会被解释

  • appendTo(content): 把所有匹配的元素追加到另一个指定的元素元素集合中。

    • $("p").appendTo("div");
// 增加多个属性
$("p").appendTo("div").addClass('c1').addClass('c2');		// <div><p class="c1 c2">Hello <strong>World!!!</strong></p></div>
$("p").appendTo("div").addClass('c1').end().addClass('c2');		//jQuery 1.3.2中,未测试

  • prepend(content): 向每个匹配的元素内部前置内容。

    • $('p').prepend('<em>type:</em>');		// 添加的HTML标签会被解释

  • prependTo(content): 把所有匹配的元素前置到另一个、指定的元素元素集合中。

    • $('div').prependTo('p');    	// <p>Hello <strong>World!!!</strong></p>

5.2 外部插入

示例

<body>
    <p>Hello <strong>World!!!</strong></p>
    <div></div>
<script src="jquery-3.5.1.js"></script>
</body>

  • after(content|fn): 在每个匹配的元素之后插入内容。

    • $("p").after("<b>after text.</b>");		// 添加的HTML标签会被解释

  • before(content|fn): 在每个匹配的元素之前插入内容。

    • $("p").before("<b>after text.</b>");		// 添加的HTML标签会被解释

  • insertAfter(content): 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

    • $("p").insertAfter("div");

  • insertBefore(content): 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

    • $("div").insertBefore("p");

5.3 包裹

示例

<body>
    <p>Hello <strong>World!!!</strong></p>
    <div></div>
<script src="jquery-3.5.1.js"></script>
</body>

  • wrap(html|element|fn): 把所有匹配的元素用其他元素的结构化标记包裹起来。

    • $('p').wrap("<div class='c1'></div>");

  • unwrap(): 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

    • $('p').unwrap();

  • wrapAll(html|ele): 将所有匹配的元素用单个元素包裹起来

    • $('p').wrapAll("<div class='c1'></div>");

  • wrapInner(htm|element|fnl): 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

    • $("p").wrapInner("<em></em>");

5.4 替换

示例

<body>
    <p>Hello <strong>World!!!</strong></p>
<script src="jquery-3.5.1.js"></script>
</body>

  • replaceWith(content|fn): 将所有匹配的元素替换成指定的HTML或DOM元素。

    • $('strong').replaceWith("<b>Hey</b>");

  • replaceAll(selector): 用匹配的元素替换掉所有 selector匹配到的元素。

    • $("<b>Hey</b>").replaceAll('strong');

5.5 删除

  • empty(): 删除匹配的元素集合中所有的子节点。

    • $('strong').empty();

  • remove([expr]): 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

    • $('strong').remove();

  • detach([expr]): 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

    • $('strong').detach();

5.6 复制

  • clone([Even[,deepEven]]): 克隆匹配的DOM元素并且选中这些克隆的副本。Even布尔值（true 或者 false）指示事件处理函数是否会被复制; [deepEven]布尔值指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

    • <body>
    <button class="btn">Hello</button>
<script src="jquery-3.5.1.js"></script>
<script>
    $('.btn').click(function () {
        const cloneBtn = $(this).clone(true);
        $(this).after(cloneBtn);
    });
</script>
</body>
posted @ 2021-02-28 17:01  f_carey  阅读(9)  评论(0)  编辑  收藏  举报  来源