`

JQuery获取当前元素的上下元素 向Table 添加行

 
阅读更多

 

$(this).next('select').val();

$(this).prev('select').val();

next获取当前点击元素的下一个元素

prev获取当前点击元素的上一个元素

 

jQuery.parent(expr)           //找父元素

jQuery.parents(expr)          //找到所有祖先元素,不限于父元素

jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙

jQuery.contents()            //查找下面的所有内容,包括节点和文本。

jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll()             //查找所有之前的兄弟节点

jQuery.next()                //查找下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll()             //查找所有之后的兄弟节点

jQuery.siblings()            //查找兄弟节点,不分前后

jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样,jQuery.filter(expr)是从初始的

                          jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集中

                          筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如:

                          $("p").find("span")是从元素开始找,等于$("p span")

 

所谓内部插入,就是把内容直接插入到指定的元素内部。

1. append()

append()方法与DOM 的appendChild()方法功能类似,都是在元素内部增加子元素或文本。例如,append()方法将把 HTML 源代码插入到 div 元素内部,但是插入内部不会覆盖该元素已经存在的内容,且它会自动位于原内容的末尾。

        与DOM 中appendChild()方法不同的是:jQuery 中的append()方法能够同时为jQuery 对象中多个元素增加内容,所增加的内容不需要先定义成节点,可以直接把它作为字符串插入到元素内。

另外,jQuery 还定义了一个反操作的方法——appendTo(content),它可以把所有匹配的元素追加到另一个指定的元素集合中。

2. prepend()

        prepend()方法与 append()方法作用相同,都是把指定内容插入到 jQuery 对象元素中,但是prepend()方法能够把插入的内容放置在最前面,而不是放置在最末尾。

        与 appendTo()方法相对应的是 prependTo(),该方法能够把所有匹配的元素前置到另一个指定的元素集合中。

append()、appendTo()、prepend()和prependTo()是相互联系,且操作紧密的四个方法,它们都能够实现内部插入,只是操作的方向和位置略有不同。

Note :他们所需要的参数也是一样的。

              append()和prepend() 需要: jQuery对象,也可接受html代码,和DOM对象

              appendTo()和prependTo() 需要:选择器,也可以是jQuery对象集合,也可是DOM对象。但调用此方法的必然是JQuery对象

 

所谓外部插入,就 是把内容插入到指定jQUery对象相邻元素内。

与 内部插入操作基本类似,外部插入也包含四种方法。

after(content):在每个匹配的元素之后插入内容。
before(content):在每个匹配的元素之前插入内容。
insertAfter(content):把所有匹配的元素插入到另一个指定的元素或元素集合的后面。
insertBefore(content):把所有匹配的元素插入到另一个指定的元素或元素集合的前面。

例如,在下面示例中使用after()方法把 p 元素插入到div元素的后面,相当于颠倒两个元素的排列顺序。// 移动元素

 

 

分享到:
评论

相关推荐

    jquery table 上下行移动互换

    // 获取当前行的前一行 if ($prevRow.length > 0) { // 如果有前一行 $prevRow.insertBefore($thisRow); // 将前一行插入到当前行之前 } }); // 针对每个下移按钮 $('.moveDown').click(function() { var ...

    jQuery实现table上移下移和置顶

    本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...

    jquery 实现上下移动元素排序无刷新

    本教程将探讨如何利用jQuery实现元素上下移动的排序功能,且在用户操作过程中无需页面刷新,提供流畅的用户体验。同时,我们还将讨论如何通过Ajax技术同步更新后台数据库中的排序信息。 ### 1. jQuery基本概念 ...

    jquery实现上下移动

    在本场景中,我们可能需要获取当前选中的行: ```javascript var selectedRow = $('tr.active'); // 假设tr有.active类表示选中 ``` 四、改变元素顺序 在jQuery中,可以使用`.prev()`和`.next()`方法来获取元素的...

    jquery做的table行上下移动,排序, 用户名验证,js读取xml

    本文将深入探讨jQuery如何实现表格(table)行的上下移动、排序功能,以及用户名验证和JavaScript读取XML的技术细节。 一、jQuery实现表格行上下移动 在网页中,表格常常用于展示结构化数据。jQuery可以通过获取...

    方向键盘控制table内的input标签焦点

    2. **选中table内的所有input**:使用jQuery的选择器选取表格内的所有`<input>`元素,并为它们添加初始的焦点事件处理。 ```javascript $(document).ready(function() { var inputs = $('table input'); inputs....

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...

    jQuery实现table中的tr上下移动并保持序号不变的实例代码

    在本文中,我们将深入探讨如何使用jQuery来实现表格(table)中tr元素的上下移动功能,同时保持表内的序号不变。这个实例适用于那些需要动态调整数据顺序的Web应用程序,例如,用户可以通过点击按钮轻松地调整列表项...

    table支持键盘上下键

    2. **获取当前焦点**:当`keydown`事件触发时,需要获取当前被聚焦的表格单元格(td),这可以通过`document.activeElement`或`document.querySelector(':focus')`实现。 3. **判断按键方向**:通过比较键盘事件的`...

    js表格无缝滚动效果

    5. **模拟无缝滚动**:在判断到表格滚动到底部后,不是立即加载新的数据,而是先保存当前表格的DOM结构,然后移除表格的所有子元素,接着将之前保存的DOM结构重新插入表格,最后添加新的数据。这样,用户会感觉表格...

    able_select行选中

    6. 交互优化:为了提供更好的用户体验,可以添加键盘导航功能,让用户能够通过上下键来切换选中行,或者使用Ctrl/Cmd键进行多选。 7. 数据操作:选中的行通常会触发一些业务逻辑,如删除、编辑或导出所选数据。这...

    Java学习阶段的前端知识整理

    - DOM操作包括获取元素(`getElementById`, `getElementsByClassName`, `getElementsByTagName` 等)、添加/删除/修改元素内容。 - jQuery 是一个流行的JavaScript库,简化了DOM操作,如 `$()` 用于选择元素,`.each...

    超漂亮的JS日历控件

    这涉及到获取当前日期,然后根据月份和年份计算出当月的第一天是星期几,以及该月有多少天。 2. **渲染日历**:根据计算结果,生成相应的DOM结构。每个日期项应有合适的类名,以便应用样式和进行事件绑定。例如,...

    JS+input日历控件

    - **显示当前月份**:JS中可以使用`new Date()`获取当前日期,然后通过`getFullYear()`和`getMonth()`获取年份和月份,注意月份是从0开始的。 - **计算日历行数**:根据月份和年份计算出该月有多少天,考虑闰年的...

    JS 工具 资源

    10. **Coda-Slider**:Coda-Slider是一个强大的jQuery滑动门插件,提供平滑的滑动效果和上下翻页控制,适用于内容丰富的网页设计。 11. **Ingrid**:Ingrid是一个jQuery插件,用于增强表格的行为,包括排序、分页、...

    jq checkbox 的全选并ajax传参的实例

    在处理“上下架”功能时,`$('#form').on('click','.up,.down')`监听了带有`.up`和`.down`类的元素的点击事件。这些元素可能代表上架和下架的操作。当用户点击这些按钮时,首先获取当前选中的复选框的值,然后通过...

    js前台分页显示后端JAVA数据响应

    前端分页主要是通过JavaScript在用户界面上模拟分页效果,根据每页的数据量和当前页码,向服务器发送请求获取对应的数据,然后动态渲染到网页上。这通常涉及到两个关键步骤:一是计算总页数,二是根据用户操作(如...

Global site tag (gtag.js) - Google Analytics