jquery 处理 stream 数据

转载

mob64ca140530fb 2025-05-22 17:34:34

文章标签 jquery 处理 stream 数据 jquery css html 文章分类 jQuery 前端开发

一、jquery属性操作

1.属性

获取或者设置属性的值,jquery 里面可以进行一堆操作

attr removeAttr
attr 设置或返回被选元素的属性值
removeAttr 从每一个匹配的元素中删除一个属性

<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#ipt").attr("value"));
    $("#ipt").attr("value", "456");
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据

回调函数写法

<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt").attr("value", function (index, val) {
        console.log(index, val);
        return val * val;
    });
    console.log($(".info").attr("value"));
</script>
</body>

jquery 处理 stream 数据_css_02

removeAttr

<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt").attr("value", function (index, val) {
        console.log(index, val);
        return val * val;
    });
    console.log($(".info").attr("value"));
    $("#ipt").removeAttr("value");
</script>
</body>

jquery 处理 stream 数据_css_03

prop removeProp
prop 获取在匹配的元素集中的第一个元素的属性值
removeProp 用来删除由.prop()方法设置的属性集

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#ipt1").prop("value"));
    $("#ipt1").prop("value","abc");
</script>
</body>

jquery 处理 stream 数据_jquery_04

回调函数写法

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").prop("value",function (index,val){
        console.log(index,val);
        return val+"m";
    });
</script>
</body>

jquery 处理 stream 数据_html_05

removeProp

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").prop("value",function (index,val){
        console.log(index,val);
        return val+"m";
    });
    $("#ipt1").removeProp("value");
</script>
</body>

jquery 处理 stream 数据_html_06

自定义属性
Attr添加

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").attr("data-index",0);
    console.log($("#ipt1").attr("data-index"));
</script>
</body>

jquery 处理 stream 数据_jquery_07

Attr移除

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").attr("data-index",0);
    console.log($("#ipt1").attr("data-index"));
    $("#ipt1").removeAttr("data-index");
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_08

prop添加

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").prop("data-page",1);
    console.log($("#ipt1").prop("data-page"));
</script>
</body>

jquery 处理 stream 数据_css_09

prop移除

<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#ipt1").prop("data-page",1);
    console.log($("#ipt1").prop("data-page"));
    $("#ipt1").removeProp("data-page");
    console.log($("#ipt1").prop("data-page"));
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_10

回调函数写法

<body>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#fbtn").click(function (){
        $(".ckbox").each(function (index){
            console.log(!undefined);
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</body>

jquery 处理 stream 数据_jquery_11

jquery 处理 stream 数据_jquery_12

2.css类

addClass removeClass
addClass 为每个匹配的元素添加指定的类名
removeClass 从所有匹配的元素中删除全部或者指定的类

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="box  block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".block").addClass("box1 user");
    $(".block").removeClass("user");
</script>
</body>

jquery 处理 stream 数据_html_13

jquery 处理 stream 数据_html_14

toggleClass
如果存在就删除，不存在就添加一个类

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box  block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".block").toggleClass("box");
    $(".block").toggleClass("box");
</script>
</body>

移除box类

jquery 处理 stream 数据_jquery 处理 stream 数据_15

添加box类

jquery 处理 stream 数据_jquery 处理 stream 数据_16

回调函数写法

<body>
<div class="box  block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".block").addClass(function (index,elec){
        return "data";
    })；
    $(".block").removeClass(function (index,elec){
        console.log(index,elec);
        return "data";
    });
</script>
</body>

添加data类

jquery 处理 stream 数据_html_17

移除data类

jquery 处理 stream 数据_jquery_18

先判断函数中是否存在user类，false存在，移除user类

</head>
<body>
<div class="box  block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".block").toggleClass(function (index,elec){
        console.log(index,elec);
        return "user";
    },false);
</script>
</body>

jquery 处理 stream 数据_html_19

先判断函数中是否存在user类，ture不存在，添加user类

<body>
<div class="box  block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".block").toggleClass(function (index,elec){
        console.log(index,elec);
        return "user";
    },true);
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_20

3. html代码/文本/值

文本操作

html() 获取或者设置元素的内容值
text() 获取或者设置元素的文本值

<body>
<div class="content"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".content").html("<span>123</span>");
    $(".content").text("<span>123</span>");

    console.log($(".content").html());
    console.log($(".content").text());

    $(".content").html(function (index,val){
        console.log(index,val);
        return "不知道"
    });
    $(".content").text(function (index,val){
        console.log(index,val);
        return "text"
    });

</script>
</body>

jquery 处理 stream 数据_jquery_21

值操作
val() 获取或者设置元素value

<body>
<input type="text" id="list"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#list").val("。。。。");
    console.log($("#list").val());
    $("#list").val(function (index,val){
        console.log(index,val);
        return "换值";
    });
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_22

<body>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".hobby").val(["a","","c"]);
    //$(".hobby").eq(0).val(["a"]);
</script>
</body>

jquery 处理 stream 数据_html_23

jquery 处理 stream 数据_css_24

二、css操作

1. css

css() 获取或设置元素的css
jquery 里面可以进行链式操作连点

第一种写法

<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#box").css("width","200px").css("height","200px").css("border","1px solid #000");
</script>
</body>

jquery 处理 stream 数据_css_25

第二种写法

<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000",
        backgroundColor:"red"
    });
 console.log($("#box").css("border"));
</script>
</body>

jquery 处理 stream 数据_css_26

2. 位置

offset 相对适口的偏移

<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000"
    });
    console.log($("#box").offset());
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_27

position 相对父元素的偏移父元素相对定位

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            position: relative;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000"
    });
    console.log($("#box").position());
</script>
</body>

jquery 处理 stream 数据_jquery_28

scrollTop 获取或设置元素的上滑距
scrollLeft 获取或设置元素的左滑距

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .block{
            width: 500px;
            height: 500px;
            background-color: #51cfff;
        }
    </style>
</head>
<body>
<div class="list">
    <div class="block"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".list").scrollTop());
    $(".list").scrollTop(100);
    console.log($(".list").scrollLeft());
    $(".list").scrollLeft(100);
</script>
</body>

jquery 处理 stream 数据_css_29

3. 尺寸

width height

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".list").width(100);
    console.log($(".list").width());
    $(".list").height(100);
    console.log($(".list").height());
</script>
</body>

jquery 处理 stream 数据_html_30

innerHeight innerWidth
获取第一个匹配元素内部区域高度,宽度（包括补白、不包括边框）

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".list").innerHeight());
    console.log($(".list").innerWidth());
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_31

outerWidth outerHeight
获取第一个匹配元素外部高度，宽度（默认包括补白和边框）
设置为ture时，计算边距在内

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".list").outerWidth(true));
    console.log($(".list").outerHeight());
</script>
</body>

jquery 处理 stream 数据_css_32

三、筛选

1. 过滤

eq
获取当前链式操作中第N个jquery对象，返回jquery对象。

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").eq(0));
    console.log($("ul>li").eq(-1));//注意：倒着找  从-1开始
</script>
</body>

当参数大于等于0时为正向选取，0代表第一个

jquery 处理 stream 数据_html_33

当参数为负数时为反向选取，-1为倒数第一个

jquery 处理 stream 数据_css_34

first last
first 获取第一个元素
last 获取最后一个元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").first());
    console.log($("ul>li").last());
</script>
</body>

first

jquery 处理 stream 数据_jquery 处理 stream 数据_35

last

jquery 处理 stream 数据_jquery 处理 stream 数据_36

hasClass is
hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true
is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
在函数， this指的是当前的DOM元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").hasClass("li4"));
    console.log($("ul>li").is(".li4"));
</script>
</body>

jquery 处理 stream 数据_jquery_37

写成回调函数

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("ul>li").each(function (index) {
        if ($(this).hasClass("li4")) {
            console.log($(this));
        }
    });
    $("ul>li").each(function (index) {
        if ($(this).is(".li4")) {
            console.log($(this));
        }
    });
</script>
</body>

jquery 处理 stream 数据_css_38

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").is(function (index) {
        if ($(this).hasClass("li4")) {
            return true;
        }
    }));
</script>
</body>

jquery 处理 stream 数据_html_39

filter
filter 筛选出与指定表达式匹配的元素集合

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").filter(".li4"));
    console.log($("ul>li").filter(function (index) {
        if ($(this).is(".li4")) {
            return $(this);
        }
    }));
</script>
</body>

jquery 处理 stream 数据_css_40

map 将一组元素转换成其他数组

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li"));
    console.log($("ul>li").map(function (index, obj) {
        //obj  是原生的js对象
        ;
        return $(obj).text();
    }));
</script>
</body>

jquery 处理 stream 数据_css_41

has not
has 保留包含特定后代的元素，去掉那些不含有指定后代的元素
not 从匹配元素的集合中删除与指定表达式匹配的元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").has(".sp"));
    console.log($("ul>li").not(".li4"));
    console.log($("ul>li").not($("ul>li").has(".sp")));
    console.log($("ul>li").not(function (index, obj) {
        if ($(obj).is(".li4")) {
            return obj;
        }
    }));
</script>
</body>

has

jquery 处理 stream 数据_css_42

not

jquery 处理 stream 数据_jquery_43

slice
slice 选取一个匹配的子集

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").slice(0, 2));//取小不取大
</script>
</body>

jquery 处理 stream 数据_html_44

2. 查找

children

children() 不带参获取元素的所有子集

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul>li").children());
    console.log($("ul>li").children(".sps"));
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_45

parent parents
parent 取得一个包含着所有匹配元素的唯一父元素的元素集合
parents 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("li:first").parent());
    console.log($("li:first").parents("body"));
</script>
</body>

jquery 处理 stream 数据_css_46

find
find 搜索所有与指定表达式匹配的元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul").find(".li4"));
</script>
</body>

jquery 处理 stream 数据_html_47

next nextAll nextUntil
next 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll 查找当前元素之后所有的同辈元素
nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
next

nextAll

nextUntil
prev prevAll
prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll 查找当前元素之前所有的同辈元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li4").prev());
    console.log($(".li4").prevAll());
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_48

prevAll

jquery 处理 stream 数据_html_49

offsetParent
offsetParent 返回第一个匹配元素用于定位的父节点

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li4").offsetParent());
</script>
</body>

jquery 处理 stream 数据_html_50

siblings
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li4").siblings());
    console.log($(".li4").siblings(".li6"));
</script>
</body>

jquery 处理 stream 数据_html_51

add
add 把与表达式匹配的元素添加到jQuery对象中

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li6").add($(".li3")));
    console.log($(".li6").add("<span>123</span>"));
</script>
</body>

jquery 处理 stream 数据_css_52

addBack
addBack 添加堆栈中元素集合到当前集合

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li6").nextAll().addBack("li"));
</script>
</body>

jquery 处理 stream 数据_html_53

contents
contents 查找匹配元素内部所有的子节点

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li6").contents('.sp1'));
</script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_54

end
end 回到最近的一个"破坏性"操作之前

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            position: fixed;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".li6").find(".sp1").end());
</script>
</body>

jquery 处理 stream 数据_html_55

四、文档处理

1.内部插入

content：要追加到目标中的内容
function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接收两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值

append(content|fn)
append 追加到内容之后

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
        var span=$("<span>追加</span>")
        $(".box").append("<span>123</span>");
        $(".box").append(span);
        $(".box").append(function(index,html){
            console.log(index,html);
            return 456;
        });
    </script>
</body>

jquery 处理 stream 数据_jquery_56

appendTo(content)
appendTo 追加到内容之后

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
        var span=$("<span>追加</span>")
        span.appendTo($(".box"));
        $("<span>123</span>").appendTo($(".box"));
    </script>
</body>

jquery 处理 stream 数据_jquery_57

prepend(content|fn)
prepend 追加到内容之前

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
        var span=$("<span>追加</span>");
        $(".box").prepend("<span>111</span>");
        $(".box").prepend(span);
        $(".box").prepend(function(index,html){
        console.log(index,html);
        return 222;
        });
    </script>
</body>

jquery 处理 stream 数据_jquery_58

prependTo(content)
prependTo 追加到内容之前

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
        var span=$("<span>追加</span>");
        span.prependTo($(".box"));
        $("<span>222</span>").prependTo($(".box"));
    </script>
</body>

jquery 处理 stream 数据_jquery_59

2.外部插入

after(content|fn) before(content|fn)
fn 只有一个参数
after 追加到内容之后
before 追加到内容之前

<body>
<div class="box">外部插入</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加之后</span>");
var span1=$("<span>追加之前</span>");
$(".box").after(span);
$(".box").after("<span>123</span>");
$(".box").after(function(index,html){
    console.log(index,html) //html  undefined
    return 456;
});

$(".box").before(span1);
$(".box").before("<span>M</span>");
$(".box").before(function(index,html){
    console.log(index,html)
    return 123;
});
</script>
</body>

insertAfter(content) insertBefore(content)
insertAfter 把一个元素追加到元素集合之后
insertBefore 把一个元素追加到元素集合之前

<body>
    <div class="box">插入</div>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        var span1 = $("<span>追加之后</span>");
        var span2 = $("<span>追加之前</span>");
        span1.insertAfter($(".box"));
        $("<span>123</span>").insertAfter($(".box"));
        span2.insertBefore($(".box"));
        $("<span>456</span>").insertBefore($(".box"));
    </script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_60

3.包裹

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

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").wrap("<div></div>");
    </script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_61

unwrap
unwrap:移除元素的父元素

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").wrap("<div></div>");
        $(".btn").unwrap();
    </script>
</body>

jquery 处理 stream 数据_css_62

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

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").wrapAll("<div></div>");
    </script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_63

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

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").wrapInner("<span></span>");
    </script>
</body>

jquery 处理 stream 数据_css_64

4.替换

replaceWith(content|fn) replaceAll(selector)

replaceWith:将所有匹配的元素替换成指定的HTML或DOM元素

replaceAll:用匹配的元素替换掉所有 selector匹配到的元素

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").replaceWith("<span class='txt'>按钮</span>");
        $("<h3>h3</h3>").replaceAll($(".txt"));
    </script>
</body>

jquery 处理 stream 数据_html_65

jquery 处理 stream 数据_jquery 处理 stream 数据_66

5.删除

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

<body>
    <div class="box">内部插入</div>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        var span = $("<span>追加</span>");
        $(".box").append("<span>123</span>");
        $(".box").append(span);
        $(".box").append(function (index, html) {
            console.log(index, html);
            return 456;
        });

        $(".box").empty();
    </script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_67

remove
remove:从DOM中删除所有匹配的元素

<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").eq(2).remove();
        $(".btn").eq(2).addClass("btn1");

        $(".btn").remove(".btn1");
    </script>
</body>

jquery 处理 stream 数据_html_68

jquery 处理 stream 数据_jquery 处理 stream 数据_69

detach
detach:从DOM中删除所有匹配的元素

<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").eq(1).detach();
        console.log($(".btn"));
    </script>
</body>

jquery 处理 stream 数据_jquery 处理 stream 数据_70

6.复制

clone([Even[,deepEven]])
clone:克隆匹配的DOM元素并且选中这些克隆的副本
默认值是false，事件处理函数不会被复制
true,事件处理函数会被克隆

<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(".btn").eq(1).click(function(){
            console.log(1);
        });
        $(".btn").eq(1).clone(true).appendTo($("body"));//clone()
    </script>
</body>

7.this相互转化

$(this)转化成this
$(this)[0];
this转化成$(this)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：如何在我的应用程序里窗口化运行另一个android应用程序

下一篇：电脑bios电池没电了怎么启动

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯