jQuery必会的增删改查Dom操作1(val、next、prve、nextAll、nextUntil、siblings、parent 、 parents、closest、slice

最新推荐文章于 2023-10-12 10:13:06 发布
最新推荐文章于 2023-10-12 10:13:06 发布
阅读量472 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/104933982
版权

jQuery必会的增删改查Dom操作1

取赋值相关方法：val

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <form action="" method="GET">
        <h3>选择你喜欢的明星</h3>
        <select name="star" id="">
            <option value="s">乔丹</option>
            <option value="a">詹姆斯</option>
            <option value="b">库里</option>
        </select>
        <h3>一句话简单介绍你喜欢的明星</h3>
        <input type="text" name="easy" value="cst">
        <h3></h3>
        三分准：<input type="checkbox" name="special" value="three">
        组织好：<input type="checkbox" name="special" value="org">
        突破强：<input type="checkbox" name="special" value="strong">
        <h3>具体描述该明显的技术特点</h3>
        <textarea name="des" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="login">
    </form>
    <div></div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    val 获取表单相关的元素的val值;
    注意如果.val没有指定获取的某个标签里面的value值，默认选择显示第一个；
    */
    console.log($('input[type=checkbox]').eq(1).val())
    console.log($('input[type=checkbox]').val())

    //获取from表单里面全部的name属性值和value属性值并且用&拼接起来
    console.log($('form').serialize())
    //获取from表单里面全部的name属性值和value属性值，展示形式以json对象来展示
    console.log($('form').serializeArray())

    //val 赋值,选中input的type为checkbox属性的标签，给value值加上它们的下标
    $('input[type=checkbox]').val(function (index, oldValue) {
        return oldValue + index
    })
    //val 赋值，选中特定的元素进行赋值
    $('input[type=checkbox]').eq(1).val('xyz')
    /*
    val 赋值，如果给from表单外的标签进行赋值，
        赋值的内容是不会显示到标签里面的，但是值是可以赋值的。
    */
    $('div').val('xyz');
    console.log('查看div里面的vaule值：', $('div').val())

</script>

</html>

next和prev对比看

next

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- next -->
    <button>change</button>
    <span class="demo">xyz</span>
    <p class="demo">lm</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        点击button按钮，使button按钮下面的第一个p标签改变，
        而上面的body里面的button按钮下面的第一个标签是span，
        所以点击button按钮不会有任何变化。
    */
    $('button').click(function () {
        $(this).next('p').css({ fontSize: "30px", color: "#ff0000" })
    })
</script>

</html>

prev

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- prev -->
    <span class="demo">xyz</span>
    <p class="demo">lm</p>
    <button>change</button>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        点击button按钮，使button按钮上面的第一个p标签改变
    */
    $('button').click(function () {
        $(this).prev('p').css({ fontSize: "30px", color: "#ff0000" })
    })
</script>

</html>

nextAll 和 nextUntil

nextAll

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="wrapper">
    全选：<input type="checkbox">
    banana：<input type="checkbox">
    apple：<input type="checkbox">
    orange：<input type="checkbox">
    <input type="submit" value="login">
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  $('input[type="checkbox"]').eq(0).click(function () {
    if ($(this).prop('checked')) {
      $(this).nextAll('input[type="checkbox"]').prop('checked', true);
    } else {
      $(this).nextAll('input[type="checkbox"]').prop('checked', false);
    }
  })
</script>

</html>

nextUntil

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- nextUntil -->
    <!-- 单独一个参数 -->
    <div class="wrapper">
        <h1>水果</h1>
        全选：<input type="checkbox">
        banana：<input type="checkbox">
        apple：<input type="checkbox">
        orange：<input type="checkbox">

        <h1>nba</h1>
        全选：<input type="checkbox">
        Rose：<input type="checkbox">
        Curry：<input type="checkbox">
        James：<input type="checkbox">

        <input type="button" value="submit">
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //水果和nba是两个部分，点击全选两个互不影响
    $('h1').next().click(function () {
        if ($(this).prop('checked')) {
            /*
            nextUntil('h1', 'input[type="checkbox"]'):
                第一个参数表示：到哪里为止(h1)；
                第二个参数表示：只选择中间的那些元素('input[type="checkbox"]');
                
            this当前的元素，到下一个元素h1
            */
            $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);
        } else {
            $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', false);
        }
    })
</script>

</html>

siblings

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- siblings -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        获取第二个li的全部兄弟节点，
        使之发生改变css({backgroundColor:'#0000ff',fontSize: '10px'}
    */
    $('li')
        .eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
        .siblings().css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- siblings -->
    <ul>
        <span>span1</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <span>span2</span>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <span>span3</span>

    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        获取第二个li,全部的span兄弟节点.
    */
    $('li')
        .eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
        .siblings('span').css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>

</html>

parent & parents & closest & offsetParent

parent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- parent -->
    <div class="shop" data-id="101">
        <p>basketball-nike</p>
        <button>add</button>
    </div>

    <div class="shop" data-id="102">
        <p>basketball-adidas</p>
        <button>add</button>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //获取button的父级
    $('button').click(function () {
        console.log($(this).parent()
        )
    })

</script>

</html>

parents

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- parents -->
    <div class="shop" data-id="101">
        <div>
            <p>basketball-nike</p>
            <button>add</button>
        </div>
    </div>

    <div class="shop" data-id="102">
        <div>
            <p>basketball-adidas</p>
            <button>add</button>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //获取button的所有父级（parents()不填参数的情况下）
    console.log($('button').eq(0).parents())

    //获取指定的父级(parents()填写参数)
    console.log($('button').eq(0).parents('.shop'))

</script>

</html>

closest

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- closest -->
    <div class="wrapper">
        <ul>
            <li>
                <ul data-id="101">
                    <li>nike</li>
                    <li>200$</li>
                    <li>
                        <button>add</button>
                    </li>
                </ul>
            </li>
            <li>
                <ul data-id="102">
                    <li>nike</li>
                    <li>200$</li>
                    <li>
                        <button>add</button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        closest:
            离你最近的，满足条件的父级或者多个父级(如果自己满足条件，那么会选择自己)。
    */
    console.log($('button').eq(0).closest('button'))

    //获取标签 <ul data-id="101"></ul>里面的data-id属性的值
    console.log($('button').eq(0).closest('ul').attr('data-id'))

</script>

</html>

offsetParent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        .wrapper {
            position: relative;
        }
    </style>
</head>

<body>
    <!-- offsetParent -->
    <div class="wrapper">
        <div class="box">
            <span>123</span>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
       获取有定位的父级
    */
    console.log($('span').offsetParent())

</script>

</html>

slice

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
      
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
     slice():
         左闭右开
    */
    //获取第四个li到第五个li的背景颜色变成红色
    console.log($('li').slice(3, 5).css({ backgroundColor: "#ff0000" }))

</script>

</html>
&XYZ&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript js 操作数组 增删改查的简单实现
11-22
函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this xss=removed xss=removed xss=removed> -1) { this.splice(index, 1); } }; Array.prototype.insert = fu
Jquery遍历的next()方法和prev()方法的使用
Smell_rookie的博客
05-31 6991
如果想快速查找指定元素集合中每一个元素紧邻的下一个同辈元素的元素集合，此时可以用next()方法。 $("button:last").click(function() { //找到所有class=item-2的li //然后筛选出第一个，加上蓝色的边 $('.item-1').next(':first').css('border', '1px sol...
Jquery中next()方法与prev()方法的使有和详解
WilsonMP
08-24 8403
在jQuery中，我们可以选择某个DOM元素进行获取和操作，但是有时候我们在操作某个元素的时候，也要对它相邻的的元素进行获取或是操作，那我们该如何去做呢，今天记录一个获取某个元素的相邻的上一个元素或相邻的下一个元素。 jQuery中的next()方法 next()方法，获取指定元素同辈的下一个元素 语法 $().next() jQuery中的prev()方法 prev方法：获取指定...
带头双向循环链表的实现
a778129656的博客
12-03 964
手把手教你实现一个带头双向循环链表
4.js中next()方法与prev()方法使用
最新发布
qq_44438941的博客
10-12 968
日常总结
数据结构算法---八大排序
weixin_57535054的博客
05-03 2511
数据结构八大排序详细解读！
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
php中操作memcached缓存进行增删改查数据的实现代码
12-19
核心代码： <?... //创建一个memcache对象实例 $memcache = new Memcache; if(!$memcache->connect("127.0.0.1",11211)){ ... $val = $memcache->get('key1');//查询获取值 echo $val; $memcache->rep
Jquery与Bootstrap实现后台管理页面增删改查功能示例
11-27
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面，虽然只是一个CRUD页面，但麻雀虽小五脏俱全，JS常用的功能都用到了，本例用原生的jquery与bootstrap配合使用，不考虑JS的重构性及...
jquery对dom的操作常用方法整理
12-13
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
12-11
顺带把其中用到的操作和事件介绍下。 html代码： <input type=”text” id=”address” value=”请输入邮箱地址”/> jquery代码： 代码如下: $(document).ready(function(){ $(‘#address’).focus(function()...
微信小程序云开发实现增删改查功能
11-26
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码，供大家参考，具体内容如下 首先按照微信小程序官方提示创建一个快速云开发小程序 大家可以点击此处下载源代码 实现效果如下： 在miniprogram->index...
jQuery操作DOM之获取表单控件的值
12-08
本文实例讲述了jQuery操作DOM之获取表单控件的值。分享给大家供大家参考。具体分析如下： HTML属性与DOM属性差别最大的地方，恐怕就要数表单控件的值了。比如，文本输人框的 value属性在DOM中的属性叫defaultValue，...
jquery对dom节点的操作【推荐】
01-21
1、JavaScript脚本放在哪里才好？　 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本，我们可以将脚本放在HTML的head部分中,这样可以...如：children() 、parent()、each()、text()、html()、val()、next()；
锋利的jQuery 要点归纳（二） jQuery中的DOM操作（下）
01-19
设置文本内容（替换标签中内容），text()方法可以用于XML文档 $(“selector”).val() 获取元素的值 $(“selector”).val(value) 设置元素的值，（外：defaultValue属性可获得html默认属性，P80例:if (txt_va
C语言---双向链表（详解）---数据结构
weixin_57535054的博客
02-07 6427
双向链表所需要头文件 首先重定义类型名 意义我前几篇讲过几次了，这里就不在赘述了，（顺序表，单链表的开头都有说明） 然后我们需要一个结构体 结构体包含 ： 存储数据的 a 指向一个节点的指针 next 指向上一个节点的指针 prve 双向链表实现的函数功能有 ：1.申请动态内存空间 2.初始化 3.双向链表的头，尾的插入与删除，在合法的任意位置进行插入和删除 4.释放链表，5.打印链表 1.申请动态内存空间 因为进行插入和初始化需要用到此函数 所以我们要先实现此功能 1.先申.
C++ 迭代器的next和prev
sugarbliss
12-06 8037
C++ 迭代器的next和prev 迭代器的下一个或上一个分别用next()和prev()获取。 #include &lt;string&gt; #include &lt;iostream&gt; #include &lt;iterator&gt; #include &lt;map&gt; using namespace std; int main() { map&lt;int, ...
jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()
小马总的博客
11-13 1389
作者：老默 http://www.cnblogs.com/laomo/  jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings() 这几个筛选器都是找兄弟结点的 .next(expr) - 查找紧挨着的弟弟 .nextAll(expr) - 查找所有的弟弟 .nextUntil(expr) ...
浅谈reduce（）用法
荔枝吖阿
11-16 717
一 语法 prve: 代表上一次回调的返回值，或者是初始值init cur:是当前正在处理的数组元素 index：代表索引 arr： 代表当前索引 init：代表初始值 看上去很复杂，其实现实中我们只用到prve和cur 二 案例 1.计算数组的总和 初始化值为0 ，prve先于0相加，返回值在与当前的值相加 2.求数组中的最大值 由于为传入值，所以prve值为3，cur值为5，取两个的最大值...
jquery表格动态增删改查
08-08
总之，使用jQuery可以轻松实现表格的动态增删改查操作。通过选择器可以找到特定的表格元素，然后使用各种方法来对其进行操作。这样可以大大简化开发过程，并提高开发效率。 ### 回答3： 使用jQuery可以轻松地实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值