首页
学习
活动
专区
圈层
工具
发布

jQuery学习笔记之DOM操作、事件绑定(2)

(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 删除节点 remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素...empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。 复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本....removeAttr(“属性名”): 删除指定元素的指定属性 样式操作 获取 class 和设置 class :class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用...追加样式:addClass() 移除样式:removeClass() — 从匹配的元素中删除全部或指定的 class 切换样式:toggleClass() — 控制样式上的重复切换...遍历节点 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

2.1K10

Web前端JQuery面试题(二)

通过JavaScript方法获取页面元素的对象,就是DOM对象。 var txt = document.getElementById("text").value; 3.请问什么是jquery对象?...通过jquery自身的方法获取页面元素的对象,就是jquery对象。...) 获取包含给定文本的元素 :empty 获取所有不包含子元素或文本的空元素 如: :has(selector) 获取含所选择器的所有元素 :parent 获取含有子元素或文本的元素...切换样式 toggleClass(class) 如果有该类class就删除,如果没有就添加 进行方法间的切换效果 删除类 removeClass(class); 创建节点元素,动态创建页面元素...复制节点 clone()复制元素本身和clone(true)复制元素和所有功能 $(this).clone().appendTo("span"); 和 $(this).clone(true).apendTo

2.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JQuery快速入门

    :contains(text) 选取含有文本内容的为text的元素 :empty 选取不包含子元素或者文本的空元素 :has(selector) 选取含有选择器所匹配元素的元素 :parent 选取含有子元素或者文本的元素...删除节点:$('ul li:eq(1)').remove(); 清空结点,即清空结点中的内容(子节点) $('ul li:eq(1)').empty(); 复制结点 $('#xionger').click...:$('p').removeAttr('title'); 样式操作 获取样式:var p_style = $('p').attr('class'); 设置样式:$('p').attr('class',...对于jQuery中的事件来说,其均使用事件冒泡机制,而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时,其中一个嵌套在另一个中,如果均绑定了click事件,那么触发内层元素的click事件时,会同时触发外部的click事件。

    3.5K100

    jQuery(一)

    / 不过目前处于不更新的状态,不推荐使用内部的插件,因为很可能没有作者维护了。...即,可以通过这种方式完成通过Jquery方法操作元素,而不使用原生DOM的方法。...jQuery将会使用同一个方法既当getter又做setter,而不是定义一对方法,如果传入一个新值给方法,则它将设置此值。 用做setter时,这些方法会给jquery对象中的每个元素设置值。...'); //给p的父元素为h1的元素添加两个类 $('h1').addClass((n) => { return "section" + n; }); // 其中n表示当前遍历到的索引值 // 删除css...((n) => { return "section" + n }); // 通过函数删除 $('p').removeClass(); //删除所有的自定义类 // 切换css类,即第一次执行显示,第二次执行消失

    2.9K40

    JQuery常用命令

    JQuery 1.x:比较大、功能偏弱、兼容老 IE (2). JQuery 2.x:比较小、功能强大、不兼容老 IE (3)....),而attr('data-xx')读取/修改的 HTML 元素字面 20....JQuery 中的函数第三部分:动画函数 — 隐藏和显示动画 隐藏和显示函数通过使用定时器修改目标元素的 width / height / opcaity 三个样式的值来实现动画 (1). $(..)....JQuery 中的函数第三部分:动画函数 — 折叠展开/收起动画 折叠展开/收起动画函数通过使用定时器修改目标元素的height 一个样式的值来实现动画: (1). $(..).slideUp( )...JQuery 中的函数第三部分:动画函数 — 淡入/淡出动画 淡入/淡出动画函数通过使用定时器修改目标元素的 opacity 一个样式的值来实现动画: (1). $(..).fadeIn( )

    7.5K10

    JQuery第二节

    jQuery操作样式 css操作 功能:设置或者修改样式,操作的是style属性。...prependTo //before //after 【案例:城市选择案例.html】 清空节点与删除节点 empty:清空指定节点的所有元素,自身保留(清理门户) $(“div”).empty();...//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码) $(“div”).html(“”);//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。...remove:相比于empty,自身也删除(自杀) $(“div”).remove(); 克隆节点 作用:复制匹配的元素 // 复制$(selector)所匹配到的元素(深度复制) //cloneNode...(true) // 返回值为复制的新元素,和原来的元素没有任何关系了。

    1.6K20

    jQuery DOM操作

    b>你好我想说: 删除节点 jQuery提供了三种删除节点的方法,即remove()、detach()、empty()。...(1)remove() 删除DOM中所有匹配的元素,可以传入参数来筛选要删除的元素。...需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。 如果将来再使用这个元素,相关事件和数据依然存在。...$("ul").empty(); 复制节点 可以使用clone()方法来复制节点。如果在clone方法中传人参数true,表示复制元素的同时也复制元素中绑定的事件。...replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。 而replaceAll()和replaceWith()作用相同,只是颠倒了操作。

    2.6K60

    vue封装jquery修改自身以及兄弟元素的方法「建议收藏」

    在项目中我们经常有,点击某一个元素让其自身样式发生变化,同时其兄弟元素改变的需求,最简单的就是通过Jquery来操作,但是如果需求多的话,那么我们就可以对这个方法进行封装,然后再引入使用。...源码: 我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js,复制代码粘贴到我们的项目文件中。...'@/common/jquery.js' //声明对象 let change={ //对象中的方法(name就是对应的class类名,index为当前点击元素的索引) go(name, index...= "#fff" // 设置同等级兄弟元素的样式 $($(a)[0]).siblings().css('background-color', "#fff") $($(a)[0]).siblings()...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    81820

    JavaWeb04-jQuery(Java真正的全栈开发)

    UI版本:集成了UI组件 mobile版本:针对移动端开发 qunit版本:用于js测试的 jquery官网 http://jquery.com/ 我们接触到的版本 3.导入jQuery 通过script...获得jQuery对象,底层使用数组进行维护的,可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数:数组的下标,可以省略。如果省略下标获得dom 数组。... :animated 动画 :focus 焦点 4.内容过滤 :contains(text) 是否包含指定的内容 :empty 是否为空,不包含子元素、不包含文本 :has(选择器),当前元素,...(单选框和多选框) :selected 选中的元素(下拉选) 四.属性和样式 属性,类class,html代码/文本/值,css,位置,尺寸 1.属性 attr(name) 通过属性名获得属性值。...4.替换 A.replaceWith(B) 使用B替换掉A A.replaceAll(B) 使用A替换掉所有的B 5.删除 empty() 清空标签体内容,删除所有子元素 remove() 将指定对象移除

    3K90

    jQuery文档对象模型DOM的实际应用

    removeClass(class) 给元素删除一个class removeClass('class1 class2 class3')给元素删除多个class toggleClass(class...) 如果元素没有当前class那么添加,如果有那么删除 选项卡demo '); //包裹多个元素 $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM 不推荐使用,会崩溃 $('div').wrap(document.createElement...4.节点操作 $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中 注:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为...而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。 $('div').remove(); //直接删除 div 元素 remove()方法可以接收一个参数,过滤需要删除的元素。

    1.5K30

    jQuery基础

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。...:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的...用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性 注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug...empty()// 删除匹配的元素集合中所有的子节点。

    2.6K120

    jQuery文档对象模型DOM的实际应用

    removeClass(class) 给元素删除一个class removeClass('class1 class2 class3')给元素删除多个class toggleClass(class...) 如果元素没有当前class那么添加,如果有那么删除 选项卡demo '); //包裹多个元素 $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM 不推荐使用,会崩溃 $('div').wrap(document.createElement...4.节点操作 $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中 注:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为...而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。 $('div').remove(); //直接删除 div 元素 remove()方法可以接收一个参数,过滤需要删除的元素。

    24900

    jQuery 常用方法

    jQuery 选择的 HTML 元素,在返回 jQuery 对象之后,就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器,通过元素标签名,元素 ID,Class 来查找...")选取所有 和 class 为 item 的 标签的元素 层次选择器,适合于通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素,总结如下:...") 选取所有不可见元素 常用方法 CSS 样式 $("#id").css(‘backgroundColor’, 'blue’); CSS 样式 .css({‘color’:'red’, 'width....remove() 删除子节点 .empty(); 复制节点 .clone(); 复制元素所绑定的事件 .clone(true); 将元素替换为指定的对象 .replaceWith("元素 .filter(); 向每个匹配元素追加内容 .append(); 把所有匹配元素追加到另一个指定的元素元素集合中 .appendTo(); 在被选元素的开头插入指定内容 .prepend(

    3.4K50

    好久不用 jQuery, 来复习一下

    1.2.1 基本选择器   基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class 和标签名等来查找 DOM 元素。...属性值 removeClass() 删除class属性值 toggleClass() 切换class属性,有则删除,无则添加 css() 修改 css 样式 1.3.3 CRUD 操作 说明 append...在 HTML 文档里,为一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”。...而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。...要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。

    6.2K40

    JQuery最全常用方法指南

    b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式...- 1 jQuery.unique(array) 删除数组中的所有重复元素,返回整理后的数组 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及...集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。...,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。...var settings = $.extend({}, defaults, options); //合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。

    13.2K31

    前端架构师之01_JQuery

    2.5 元素样式 元素样式操作是指获取或设置元素的style属性。 在jQuery中,可以很方便的设置元素的样式、位置、尺寸等属性。 例如,通过css()方法可以设置背景色。...语法 作用 说明 addClass(class) 追加样式 为每个匹配的元素追加指定的类名 removeClass(class) 移除样式 从所有匹配的元素中删除全部或者指定的类 toggleClass...(class) 切换样式 判断指定类是否存在,存在则删除,不存在则添加 hasClass(class) 判断样式 判断元素是否具有class样式 addClass()和removeClass()方法经常一起使用来切换元素的样式...从DOM中删除所有匹配的元素(保留所有绑定的事件、附加的数据等) empty()方法仅能删除匹配元素的文本内容,而元素节点依然存在。...3.4 节点复制 语法 说明 clone([false]) 复制匹配的元素并且选中这些复制的副本,默认参数为false clone(true) 参数设置为true时,复制元素的所有事件处理 开发中若在复制元素节点时

    3.1K00
    领券