jQuery实例方法 - DOM操作2

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量144 收藏
点赞数
分类专栏： 小白 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yzhoun/article/details/107274217
版权

jQuery实例方法 - DOM操作

  • 取赋值相关方法:
    val()
    可以传函数
<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="zhou">
        <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>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        console.log($('input[type="checkbox"]').eq(0).val());
        //输出three
       console.log($('input[type="checkbox"]').val(function(index, oldValue){
            return oldValue + index;
        }))
    </script>
</body>
  • 获取表单value值
    serialize()
  • 获取表单value值，打包成ajax形式
    serializeArray()

基于jQuery对象查改删增相关方法

  1. next()
  2. prev()
  3. prevAll()
  4. nextAll()
  5. prevUntil()
  6. nextUntil()
  7. siblings()
  8. parent()
  9. parents()
  10. offsetParent()
  11. closest()
  12. slice()
  13. insertBefore()
  14. before()
  15. insertAfter()
  16. After()
  17. appendTo()
  18. append()
  19. prependTo()
  20. prepend()
  21. remove()
  22. detach()
  23. $
  24. wrap()
  25. wrapInner()
  26. wrapAll()
  27. unWrap()

next()

  • 获取前面元素的下一个兄弟元素,可以穿参数，如果下一个是p就执行后面的代码如果不是就不执行。
 <button>change</button>
   <span class="dome">duyi-cst</span>
   <p class="dome">duyi-cst</p>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       
  
       $('button').click(function(){
           $(this).next('p').css({fontSize : '20px', color: 'red'});
       })
   </script>

prev()

  • 获取上一个兄弟节点
 <span class="dome">duyi-cst</span>
   <p class="dome">duyi-cst</p>
<button>change</button> 
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       
  
       $('button').click(function(){
           $(this).prev().css({fontSize : '20px', color: 'red'});
       })
   </script>

prevAll()

  • 选择上一组兄弟节点

nextAll()

  • 选择下一组兄弟节点
  <div class="wapper">
       全选: <input type="checkbox">
       banner: <input type="checkbox">
       apple: <input type="checkbox">
       orange: <input type="checkbox">
       <input type="submit" value="login">
   </div>
   <script src="./js/jquery-1.8.3.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)
           }
       })

prevUntil()

  • 选择当前元素的上面的所有元素，可以传两个参数，第一个是选中的元素，第二个参数是结束

nextUntil()

  • 选择当前元素的下面的所有元素，可以传两个参数，第一个是选中的元素，第二个参数是结束
<div class="wapper">
       <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">
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       $('input[type="checkbox"]').eq(0).click(function(){
           if($(this).prop('checked')){
               $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true)
           }else{
               $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false)
           }
       })

   </script>

siblings()

  • 选择所有兄弟节点,可以传参数，只选择当前参数的元素
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
   </ul>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       $('li').siblings().css({color:'red'})
   </script>

parent()

  • 返回上一级的父级元素,传参数选择父级以上的参数元素
<div class="shop" data-id='101'>
       <p>aaaa</p>
       <button>add</button>
   </div>
   <div class="shop" data-id='102'>
       <p>aaaa</p>
       <button>add</button>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       $('button').click(function(){
           console.log($(this).parent());
       })
   </script>

parents()

  • 返回上N级的父级元素,参数输入类名
    <div class="shop" data-id='101'>
        <div>
       <p>aaaa</p>
       <button>add</button>
       </div>
   </div>
   <div class="shop" data-id='102'>
       <div>
       <p>aaaa</p>
       <button>add</button>
       </div>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       console.log($('button').parents('.shop'))
   </script>

offsetParent()

  • 找离他最近有定位的父级

<div style="position:relative;" class="wapper">
       <div class="box">
           <span>123</span>
       </div>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       console.log($('span').offsetParent())
   </script>

closest()

  • 离最近满足条件的父级
  <div class="wapper">
       <ul>
           <li>
               <ul data-id="101">
                   <li>sadasd</li>
                   <li>asdasd</li>
                   <li>
                       <button>add</button>
                   </li>
               </ul>
           </li>
           <li>
               <ul data-id="102">
                   <li>fdsf</li>
                   <li>dsfsd</li>
                   <li>
                       <button>add</button>
                   </li>
               </ul>
           </li>
       </ul>
        <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       console.log($('button').eq(0).closest('ul'));
   </script>

slice()

  • 截取元素
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
   </ul>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       console.log($('li').slice(1,6));
       </script>

insertBefore

  • 将元素插入在什么元素之前

before

  • 写入参数方式不同，传入的参数在前面，需要放入$对象

insertAfter

  • 将元素插入在什么元素之后

After

  • 写入参数方式不同，传入的参数在钱面，需要放入$对象

appendTo

  • 将元素插入到选择的元素最后

append()

  • 写入参数方式不同，传入的参数在后面，需要放入$对象

prependTo()

  • 将元素插入到选择的元素最前

prepend()

  • 写入参数方式不同，传入的参数在后面，需要放入$对象

remove()

  • 删除当前的元素，包括事件

detach()

  • 删除当前的元素，但是不删除事件

$()

  • 创建DOM $(<div></div>’)

wrap()

  • 给当前元素创建一个父级标签,可以放函数
 <div class="dome"></div></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('.dome').wrap('<div class='wrapper'></div>')
        </script>

wrapInner()

  • 为当前元素创建一个子元素包裹里面的所有元素
<div class="dome">
        <span></span>
        <span></span>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('.dome').wrapInner('<div></div>')
        </script>
  1. wrapAll()
  • 给当前的一堆元素包裹起来
<div class="dome">
       <span></span>
       <span></span>
   </div>
   <div class="dome">
       <span></span>
       <span></span>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script>
       $('.dome').wrapAll('<div></div>')
       </script>
  1. unWrap()
  • 将选中元素的父级删除掉
九依
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[jQuery]：jQuery的DOM元素操作方法
我只是个程序员。
09-27 1827
jQuery的DOM操作：创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查，只不过在原生JS基础上进行封装和增加了许多方法，所以能够更方便的操作DOM。 获取元素节点        jQuery获取DOM元素是使用选择器，至于选择器的使用这里就不介绍了，请戳jQuery选择器总结。 如果有时候为了提高运行效率，可以先用原生JS
jQuery整理笔记四----jQuery操作DOM
曹海成的专栏
04-19 3163
一、使用jQuery创建节点
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1043
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery-DOM操作进阶（Demo案例详解）
辰兮要努力
05-07 1640
文章目录一、 序言二、添加子节点三、 插入子节点（在容器的最前面添加子节点）四、插入节点五、移除节点 使用jQuery提供的函数完成节点的操作 一、 序言 给你我写这篇文章的调试代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit...
三、jQuery 中的 DOM 操作（超详细）
weixin_44009656的博客
05-04 6795
本文详细讲解了 jQuery 中的 DOM 操作。走过路过不要错过丫
jQuery 的 DOM 操作-上
业精于勤，荒于嬉
06-13 630
元素, 可以使用 $("") 或 $("1. 说明：在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 2. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法,window.onload = function(){} 3. 在 jQuery 中使用$(document).ready() 方法
jQuery性能优化--循环时的DOM操作
小石头
08-12 3253
jQuery性能优化--循环时的DOM操作
jQuery 参考手册 - DOM 元素方法
zxygww的专栏
06-23 417
http://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.asp jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素。 .index() 返回指定元素相对于其他指定元素的 index 位置。 .siz
jquery(遍历-dom节点)
愿世界和平
05-21 1021
dom元素的父元素向上遍历dom树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil()================== jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 元素的的直接父元素： 实例
四、jQuery中的DOM操作
m0_61684063的博客
04-14 1309
四、jQuery中的DOM操作
jQuery中DOM常见操作实例小结
10-16
1. **操作方法：** - `css(property, value|fn)`：此方法用于设置或返回样式属性。如果提供值，则设置；如果提供函数，则返回处理后的值。 - `height([value])`：获取或设置匹配元素的高度。 - `width([value])`...
jQuery DOM操作小结与实例
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...
jQuery DOM操作实例
01-19
网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法属性的详解，看看加深下印象。 例子虽丑...
jQuery中DOM树操作之使用反向插入方法实例分析
11-26
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下： 使用反向插入方法 这里我们先把创建的内容插人到元素前面，然后再把同一个元素插人到文档 中的另一个位置。通常，当在...
一个简单的轮播图代码
Yzhoun的博客
07-01 2729
#轮播图dome <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=
利用monment库做一个日历表
Yzhoun的博客
08-17 579
布局没啥好说的基本上就是简单的结构布局，里面的内容都是通过js生成的 然后是css样式表 都是用css2来做的，这个布局可以用css3弹性盒子来做，目前还没掌握css3所以就用的传统布局 不过样式布局都好说主要是里面的js代码的实现过程......
Bootstrap class快捷笔记
Yzhoun的博客
09-07 549
添加h标签字体样式h1h2h3h4h5 h标签的副标签 更大的标题display-1display-2display-3display-4 引言lead 突出显示 返回顶部 em 倾斜文本 strong 加粗文本 缩写 相当于提示文本 initialism 字体小一点 返回顶部无特效列表list-unstyled 无特效列表list-inline 让里面的li变为inline-blocklist-inline-item 需要给li加上才行 3.x版本不需要在li上面加list-i
我的jQuery第六天 trigger的一些原理 and hover
Yzhoun的博客
07-12 352
jQuery方法 trigger() 主动的去触发一些事件,可以去触发系统的一些事件 自定义事件 <div class="demo"> </div> <script src="./js/jquery-1.8.3.min.js"></script> <script> $('.demo').on('click', function(e , a, b, c, d){ console.log
深入数组方法与应用,筛选条件
Yzhoun的博客
06-25 348
算是一个dome功能，实现之后的样式是这样的 类似于选项卡，当点击all展示所有的卡片 当点击Female的时候会展示所有男性的卡片 反之点击女性也是一样的 并且还有条件筛选，当点击输入九的时候会展示所有字符当中含有九的男性 该dome运动的一些方法有： forEach，数组遍历方法 Filter,数组筛选方法 for in 循环，遍历对象方法 indexOf,判断当前值是包含有里面的值 getAttribute 读取元素属性的值 JS设计模式思想（人懵的） 以下是初级代码实现该功能 <!DOCT
jQuery AJAX方法与DOM操作详解
"这篇文档主要总结了jQuery中的常见AJAX方法，同时也涵盖了DOM操作的相关函数，包括添加、删除样式和属性，以及元素内容的增删改查等。这些方法在前端开发中非常实用，能够帮助开发者高效地进行页面动态更新和数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值