首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery 常用方法

jQuery 是一个快速、简洁 JavaScript 框架,封装 JavaScript 常用功能代码,提供一种简便 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和...jQuery 选择 HTML 元素,在返回 jQuery 对象之后,就可以调用由 jQuery 提供丰富 API 来完成相应操作了 基本选择器,通过元素标签名,元素 ID,Class 来查找...= $("苹果"); 删除节点 .remove() 删除子节点 .empty(); 复制节点 .clone(); 复制元素所绑定事件 .clone(true); 元素替换为指定对象...p"); 再次元素之后添加元素 .after(); 将此元素加到(参数)后面 .insertAfter(); 在每个匹配元素之前添加元素 .before(); 将此元素加到(参数)前面 .insertBefore...(); 返回上一层操作对象 .end(); 第一个 .first(); 最后一个 .last(); 查找最近 元素 .closest(“li”); 获取当前元素所有 元素

2.6K50
您找到你想要的搜索结果了吗?
是的
没有找到

六、jQuery节点操作

('ul')// 方法2(常用)('ul').append( 外部插入 元素加到指定元素外部后面1234// 方法1li.insertAfter('ul')// 方法2(常用)('ul').after...浅复制一个元素 var li = ('li:first').clone(false) // 复制元素加入ul中 ('ul').append( 深复制123456('button'...深复制一个元素 var li = ('li:first').clone(true) // 复制元素加入ul中 ('ul').append( 深复制、浅复制区别 浅复制只会复制元素本身...深复制一个元素 var $li = $('li:first').clone(true) // 复制元素假如ul中.../删除 顶/踩 获取标签内容并转化为整型然后加1 删除 利用parents()方法,在其传入需要获取元素选择器(parents('.info')),即可获取相应元素

1.7K20

【领会要领】web前端-轻量级框架应用(jQuery基础)

("element[attribute]") 匹配包含给定属性元素 $("div[title=test]") 位置选择器 $(element:position) 匹配符合标签中相应位置元素 $(...appendTo() 所有匹配元素加到另一个指定元素集合中 注意:$(A).append(B)操作,不是B追加到A中,而是A追加到B中 prepend() 向每个匹配元素内部前置内容...prependTo() 所有匹配元素前置到另一个指定元素集合中。...注意:$(A).prepend(B)操作,不是B前置到A中,而是A前置到B中 after() 在每个匹配元素之后插入内容 insertAfter() 所有匹配元素插入另一个指定元素集合后面...注意:$(A).after(B)操作,不是B插入到A后面,而是A插入到B后面 before() 在每个匹配元素之前插入内容 insertBefore() 所有匹配元素插入另一个指定元素集合前面

2.1K20

前端(四)-jQuery

> 10乡村受情8(上)加入看单 javascript $("#play ol li").mouseover(function...方法 说明 $(A).append(B) B节点追加到A节点子节点中 $(A).appendTo(B) A节点追加到B节点子节点中 $(A).prepend(B) B节点追加到A节点子节点中...$(A).prependTo(B) A节点追加到B节点子节点中 注意:jq中已经创建好同一节点,多次执行插入,只会执行一次 var $node2 = $("上海新增本土54例...ul"));//执行 2 元素外部插入同辈节点 方法 说明 $(A).after(B) B节点追加到A节点之后 $(A).insterAfter(B) A节点追加到B节点之后 $(A).before...(B) B节点追加到A节点之前 $(A).insertBefore(B) A节点追加到B节点之前 3.4.3 删除节点 方法 说明 remove() 删除当前整个节点 empty() 清空节点内容

8.5K30

前端之jquery函数库

$('#myId') //选择id为myId网页元素 $('.myClass') // 选择class为myClass元素 $('li') //选择所有的li元素 $('#ul1 li span')...//选择id为为ul1元素所有lispan元素 $('input[name=first]') // 选择name属性等于firstinput元素 对选择集进行过滤 $('div').has(...事件冒泡作用  事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层不同级别捕获事件。...,把事件加到父级上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入元素也可以拥有相同操作。...= $('这是一个span元素'); $('#div1').append($span); ......

5.2K20

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

在本教程中,我们介绍如何使用 HTML、CSS 和 JavaScript 创建功能齐全待办事项应用程序。...每个任务包含以下元素: 用于任务标记为完成单选按钮 用于显示任务 span 元素 一个编辑按钮和一个删除按钮 使用 CSS 设计样式 我们将从主体样式开始,以确保所有元素水平居中: body {...span 元素占据宽度 60%,而按钮仅占据 20%。...任务标记为完成 要将任务标记为完成,我们将以下 CSS 类应用于单选按钮和 li 元素内容。...删除线 CSS 类添加到当前 li 元素范围 使用该findIndex()方法从数组中获取当前任务索引allTasks,然后按钮状态更新为选中。

9710

JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)

3 CRUD操作 1)append():父元素元素加到末尾,如A.append(B),将对象B添加到A内部,且在末尾; 2)prepend():父元素元素加到开头,如A.append(B)...,将对象B添加到A内部,且在开头; 3)appendTo():如A.append(B),将对象A添加到B内部,且在末尾; 4)prependTo():如A.append(B),将对象A添加到B内部...,且在开头; 5)after():添加元素元素后边,如A.after(B),将对象B添加到A后面,对象A和B是平级; 6)before():添加元素元素前边,如A.before(B),将对象B添加到...(B),将对象B添加到A前面,对象A和B是平级; 9)remove():移除元素,如对象A.remove(),将对象删除掉; 10)empty():清空元素所有后代元素,如对象A.empty(),...value="删除li,id=bj元素" id="b5"/> <ul

3.1K50

javascript事件流原理

事件是javaScript和DOM之间交互桥梁。 你若触发,我便执行——事件发生,调用它处理函数执行相应JavaScript代码给出响应。...js事件代理则是一种简单有效技巧,通过它可以把事件处理器添加到一个父级元素上,从而避免把事件处理器添加到多个子级元素上。...事件代理原理用到就是事件冒泡和目标元素,把事件处理器添加到元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理。...多个事件处理器减少到一个,因为事件处理器要驻留内存,这样就提高了性能。...如果新增其他子元素(a,span,div等),直接修改事件代理事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。

1K10

从零开始学 Web 之 移动Web(三)Zepto

Zepto js 库文件下载地址:https://github.com/madrobby/zepto ,直接下载源码文件,相应所有 js 文件就在 src 目录下。...二、手势事件封装 Zepto 移动端 touchStart,touchmove 和 touchEnd 封装成了一系列事件。 tap :触摸屏幕时触发。...show, hide, toggle, 和 fade*()方法. assets.js 实验性支持从DOM中移除image元素后清理iOS内存。...所以,每次在使用到某一个功能时候,就需要到 html 文件下添加相应 js 库文件,这样就比较繁琐,更重要是多个 js 文件会增加访问服务器次数,那么我们可不可以像 jQuery 一样,只包含一个...答案是肯定。 四、Zepto 定制 Zepto 允许多个 js 文件打包成一个 js 文件。 操作步骤: 1、安装 Nodejs 环境 2、下载 zepto.js 源码并解压好。

1.5K20

jQuery基础图文系列

jQuery选择器匹配元素 .add() 元素加到匹配元素集合中 .addSelf() 把堆栈中之前元素加到当前集合中 .children() 获取匹配元素集合中每个元素所有子元素 .closest...() 结束当前链中最近一次筛选操作,并将匹配元素集合返回到前一次状态 .eq() 匹配元素集合缩减为位于索引元素 .filter() 匹配元素集合缩减为匹配选择器或匹配函数返回值元素 ....find() 获取当前匹配元素集合中每个元素后代,由选择器进行筛选 .first() 匹配元素集合缩减为集合中 第一个元素 .has() 匹配元素集合缩减为包含特定元素后代集合 .is()....siblings() 获得匹配元素集合中所有元素同辈元素 .slice() 匹配元素集合缩减为指定范围子集 addClass() 向匹配元素添加指定类名 after() 在匹配元素之后插入内容...() 把所有匹配元素用指定内容或元素包裹起来 wrapinner() 每一个匹配元素子内容用指定内容或元素包裹起来 jQuery hide() 和 show()隐藏和显示 HTML 元素

4.5K10

【Java 进阶篇】深入理解 JavaScript DOM Node 对象

本博客深入探讨JavaScript DOM Node对象,帮助您更好地理解它作用和如何使用。 什么是DOM Node对象 在DOM中,所有的内容都是以节点形式存在。...同时,使用parentNode属性获取了父节点(元素引用。 2. 创建新节点 除了访问现有的节点,我们还可以创建新节点并将其添加到文档中。...添加和删除节点 一旦我们创建了新节点,我们可以使用以下方法将它们添加到文档中: appendChild(node):一个节点添加为另一个节点子节点,作为最后一个子节点。...,我们首先创建了一个新元素,设置了其文本内容,然后使用appendChild方法新段落添加为元素子节点。...▼ Vegetable Carrot

20810

jQuery基础系列

jQuery选择器匹配元素 .add() 元素加到匹配元素集合中 .addSelf() 把堆栈中之前元素加到当前集合中 .children() 获取匹配元素集合中每个元素所有子元素 .closest...() 结束当前链中最近一次筛选操作,并将匹配元素集合返回到前一次状态 .eq() 匹配元素集合缩减为位于索引元素 .filter() 匹配元素集合缩减为匹配选择器或匹配函数返回值元素 ....find() 获取当前匹配元素集合中每个元素后代,由选择器进行筛选 .first() 匹配元素集合缩减为集合中 第一个元素 .has() 匹配元素集合缩减为包含特定元素后代集合 .is()....siblings() 获得匹配元素集合中所有元素同辈元素 .slice() 匹配元素集合缩减为指定范围子集 addClass() 向匹配元素添加指定类名 after() 在匹配元素之后插入内容...() 把所有匹配元素用指定内容或元素包裹起来 wrapinner() 每一个匹配元素子内容用指定内容或元素包裹起来 jQuery hide() 和 show()隐藏和显示 HTML 元素

2.6K20

JQuery基础学习

介绍和概述 JQuery是一个快速、简洁JavaScript框架,是继Prototype之后又一个优秀JavaScript代码库(或JavaScript框架)。...它封装JavaScript常用功能代码,提供一种简便JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。...-> 内容 val(): 获取/设置元素value属性值 注意:在设置元素内容时,前两个方法都是直接标签一并替换掉。...class="spanone">span CRUD操作 append():父元素元素加到末尾 对象1.append(对象2):将对象2添加到对象...1元素内部,并且在末尾 prepend():父元素元素加到开头 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头 appendTo(): 对象1.appendTo(对象2

3.7K20

用纯 JavaScript 撸一个 MVC 框架

初始设置 这将是一个完全用 JavaScript程序,这意味着一切都将通过 JavaScript 处理,HTML 只包含根元素。 index.html <!...要确保输入不能为空,然后我们创建带有 id、text 并且 complete 值为 false todo。 todo 添加到模型中,然后重置输入框。...它将响应删除按钮上 click 事件。删除按钮元素是 todo li 本身,它附有相应 id。我们需要将该数据发送给正确模型方法。...// 控制器 this.view.bindEvents(this) 现在,当指定元素发生submit、click 或 change 事件时,将会调用相应 handler。...现在我们可以这些添加到视图事件侦听器中。当你在 contenteditable 元素输入时,input 事件会被触发,离开contenteditable元素时,focusout 会触发。

3.3K41

继续死磕前端

3.选择所有的 p 标签(类比标签选择器) $('p') 4.选择 id 为 mylist 元素下所有 li 标签下 span 元素(类比层级选择器) $('#mylist li span') 5...length 值为 0 时代表没选择到想要元素;为 1 则代表选择到了相应元素。 除了选择元素,还可以选择样式呢!啥都能找到,强不强?既然都能找到了,重新赋值也必须到位!...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层不同级别捕获事件。...,把事件加到父级上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入元素也可以拥有相同操作。...,从后面放入元素 4、 before() 和 insertBefore():在现存元素外部,从前面放入元素 删除标签 $('#div1').remove(); 3.4 对象 JavaScript 对象

2.8K10
领券