比如我要获取倒数第二个li元素,下面就是此功能的演示。 代码如下: li>只有努力奋斗才会有美好的未来。...li> li>没有人一开始就是高手,必须要好好学习。li> li>分享互助是进步的最大源动力。...li> li>每一天都是新的要好好真心li> 上面的代码实现了我们的要求,实现的原理也非常的简单。...大家eq()的参数为0的时候就是获取第一个元素,为1的时候就是第二个元素,以此类推。 所以当参数为-1的时候理所当然就是倒数第一个,那么-2就是倒数第二个,以此类推。
console.log(xjNode.value); //0 最后打印出来为0是由于: 元素的属性有...li 元素的 value属性(property) 有特殊的作用,其值只能是数字 如果设置的值不是数字将会只反应到元素的 value属性(attribute)....兼容性注释 在 HTML 4.01 中,不赞成使用 li 元素的 value 属性;在 XHTML 1.0 Strict DTD 中,不支持 li 元素的 value 属性。...当为有序排列时可以清楚看到value的作用 部分区别 从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。...从操作方法上来看,attribute可以通过dom core规范的接口 getAttribute和setAttribute.
在我们实际的项目之中,相信有很多的朋友直接使用了以下的格式创建DOM元素 document.getElementById("...但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML....关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: 第一种正确方式: //使用Dom标准创建元素 var select = document.createElement("select...元素, 然后通过appendChild方法为添加到指定对象上....第二种方式: 使用Jquery 当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如: //jQuery内部使用document.createElement
为业务需要,DOM元素的ID被命名为“c-order.range”,执行JQuery的DOM查询时,提示如下错误 Uncaught Error: Syntax error, unrecognized expression...解决办法:document.getElementById 以前总觉得这个办法笨拙,现在越觉得此方法强大,几乎就是大杀器,没有查询不了的元素,无论你的元素ID命名多么刁钻。...var rowId = 'c-order.range', view = document.getElementById(rowId), // 将Element对象转换为JQuery对象...unrecognized expression表达式错误 alert(('[id=' + rowId + ']').length) // 将所有的id值用双引号包起来,即可进行识别 // 请注意双引号添加的位置
一、背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?...今天我就结合自己平常的使用来谈谈这些问题以及我个人的理解。...2.我们经常会使用a标签进行触发自定义事件 1 删除文章 这个例子中该DOM元素的属性有:href、id、action....那么很明显前两个是该dom元素的固有属性,最后一个是我们自己定义的属性。...、radio、select等元素的选中属性"checked"和"selected",这些属性也是dom元素的固有属性,因此使用prop方法才能正确的进行获取和设置。
不过有一个问题,就是使用 inline-block 的元素之间会存在 4-5px 的空白间隙。今天就记录一下解决这个 4-5px 的方法。...从上面的 demo 可以看出,在 inline-block 的元素之间存在一个空白间隙。...-- -->li>关于我们li> 结构3的方法采用的是 html 注释的方法,这种方法可能不太常见,不过同样能解决我们的问题。...方法二:负的 margin li { margin-right: -4px; } 这种解决方法并不完美,因为不同浏览器解析不同,加上父元素的字体大小不固定,这个“-4px”就不能解决问题。...方法三: 设置父元素字体为0 ,子元素重新设置字体。
最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。 所以我需要要一步步逼近定位到问题。...最先想到的是浏览器面板上面的,可以选中元素,看元素上面的事件绑定。 但浏览器上面看到的是结果量,也就是看到的是已经丢失了事件的元素,但我还是不知道什么时候丢失的。...估一路断点,观察、回溯调用栈(Sources面板右侧的Call Stack)。 然后问题来了。...还好,我们都是用的jQuery,用的$.on()。 而jQuery自身事件绑定,额外添加了一层事件数组。...jQuery.data(‘events’)
元素,返回包含所有的 DOM 元素的 jQuery 对象param 是 DOM 元素:将 DOM 元素对象包装成 jQuery 对象返回(this)param 是标签字符串: 创建标签 DOM 元素对象并包装为...not(selector) 删除与指定表达式匹配的元素 has(selector) 保留包含特定后代的元素,去掉那些不含有指定后代的元素。...方法 描述 remove() 从 DOM 中删除所有匹配的元素。...事件监听绑定在父元素上, 但事件发生在子元素上 事件会冒泡到父元素 但最终调用的事件回调函数的是子元素: event.target 好处: 新增的元素没有事件监听 减少监听的数量(n==>1) jQuery...="btn1">添加新的li 删除ul上的事件委托的监听器 // jQuery // 设置事件委托 $("ul").delegate
v-model="initText" :rows="5" type="textarea" placeholder="" /> 当我们给自定义组件绑定 ref,想要获取 textarea 元素时...,elemtplus 的 input textarea 元素获取方式如上,注意:获取 DOM 必须要在 onMounted 之后获取,否则获取的为 null。
它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。...(off) 语法:off(events,[selector],[fn]) 如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。...要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 "**" 。...事件对象 在DOM学习的时候我们很痛的一点就是早期的ie版本的浏览器和最新标准的浏览器的事件对象的获取及事件对象的属性直接都有些兼容问题。 事件对象获取兼容。...event.stopPropagation() 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。 4.
虽然 jQuery 对象包装了 DOM 对象但是两者不能混用,各位可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象,但是我们调用 jQuery 对象的方法,事实上底层代码还是操作的是 DOM...中包含 DOM 的个数,比如获取页面上 p 元素的个数 p> 问题 2:获取 id 为 username 元素的 value 属性值...DOM 的个数,比如获取页面上 p 元素的个数 console.log($('p').size()); // 问题 2:获取 id 为 username 元素的 value...1:获取所有 ul 下的所有 li 元素,并打印分析结果 p> 问题 2:获取 id 为 myul 下的所有子 li 元素,并打印分析结果...常用 DOM 操作的方法 1、append 方法 给元素添加子元素,且是最小的子元素。
-->jQuery jQuery: 基于js研发的封装库:可以屏蔽之前书写js代码考虑浏览器兼容性的问题。...,改方法不会删除已经存在的类,仅在原有基础上追加新的类样式 C. ...$==jQuery C. 无论页面元素的选择器,还是功能函数的前缀,都必须使用改符号 2. 链式操作 A. 在对DOM元素进行多个操作时。...产品正式发布: a) 建议删除注释 b) 减少文件大小,加快下载速度 c) 提高用户体验 DOM对象与jQuery对象: 一. DOM对象 1. ...6. val():表单元素的value值 三.互转 DOM:土鳖 jQuery:土豪 1.
元素克隆 ①. element.cloneNode() (10). 总结:核心 DOM 操作的问题 ①. 方法名普遍比较长 ②. 操作比较僵硬 ③. 方法存在浏览器兼容性 3....JQuery 提供了四类函数 (1). DOM 操作 — 重点 (2). 事件处理 (3). 动画函数 (4). AJAX 5. JQuery 的版本问题 (1)....删除已有的元素 (1). 核心 DOM ①. ul.removeChild( li ) 由父元素删除孩子 (2)....JQuery ①. $('li').remove() 删除当前选定元素 23. 替换已有元素 (1)....JQuery 中的插件函数 Plugin:插件,在现有的功能基础上添加更多的功能,扩展整体的应用。 JQuery 中的插件(即函数)分为两类: (1).
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。...目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery对DOM操作的封装让我们前端开发工作非常简便、简洁、兼容性好。...li> --> 3.3 移除样式类remvoeClass 语法:removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。...参数是字符串样式类 removeClass(str) // 从匹配的元素中删除 'selected' 类 $("p").removeClass("selected"); // 删除匹配元素的所有类 $(...// 删除最后一个元素上与前面重复的class $('li:last').removeClass(function(index, oldClass) { return $(this).prev(
概念:DOM 文档对象模型(必考),jQuery Dom应该是之前的DOM加了个jQuery的封装。...HTML-DOM:用于处理HTML文档,如document.forms CSS-DOM:用于操作CSS,如element.style.color="green" jQuery对JavaScript中的DOM...jQuery中的DOM操作 4.1 样式操作 之前的样式设置: 选择器对象.css('属性','值') 比如: $("p").css("color",'red') 增加样式: $("p").addClass...li>") //加到了ul的子元素li列表的后面; //$(".gameList").prepend("li>雨鑫战神...,没有则增加样式; 2.追加节点有4个,2个子元素街边;2个兄弟元素级别; 3.节点操作就是删除、清空、复制、替换(删改) 4.属性节点:attr() attr('name','name) 5.节点的遍历
('div').hide(); }); jQuery对象和DOM对象 用原生js获取来的对象是DOM对象,用jQuery方法获取过来的对象是jQuery对象。...jQuery 对DOM的原生方法进行了封装,jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法。...本质上是存放在元素缓存中,一旦页面刷新,之前存放的数据都将被移除。...语法1: //index 元素索引号 //domEle 是每个DOM元素对象(非jquery对象);所以要想使用jquery方法,需要将这个dom元素转换为jquery对象 $(domEle) $("div...element.remove();//删除匹配的元素(本身) element.empty();//删除匹配的元素集合中所有的子节点 element.html('');//清空匹配的元素内容,也可设置内容
来代替,相当于原生js中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素是 jQuery 对象。...jQuery 对象是经过包装的dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...:odd $(“li:odd”) 获取到的li元素中,选择索引号为奇数的元素 :even $(“li:even”) 获取到的li元素中,选择索引号为偶数的元素 2.1.4 其他选择器 语法 用法 说明...('属性名'); //更改 attr('属性名','属性值'); 4.1.3 数据缓存 data() 可以在指定的元素上存取数据,但不会修改DOM元素结构。...删除 删除元素集合中的子节点 $('ul').empty();//相当于清空ul里的内容 通过html来清空 $('ul').html(); 4.4 尺寸,位置操作 4.4.1 jQuery尺寸操作 语法
目录 第2节 JQuery选择器 JQuery_DOM操作_内容操作 JQuery_DOM操作_属性操作_通用属性操作 JQuery_DOM操作_属性操作_class&css属性操作 JQuery_DOM...JQuery对象和JS对象区别与转换 4. 选择器:筛选具有相似特征的元素(标签) 5. DOM操作 1....“one”):动态判断:如果元素对象上存在class=”one”,则将属性值one删除;如果元素对象上不存在class=”one”,则添加。...JQuery对象和JS对象区别与转换 4. 选择器:筛选具有相似特征的元素(标签) 5. DOM操作 1....class=”one”,则将属性值one删除;如果元素对象上不存在class=”one”,则添加。
mousedown") 删除多个事件 $("elem").off("mousedown mouseup") 删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁 $("elem").off...由于浏览器事件冒泡特性,可以在触发li时把这个事件往上冒泡到ul上,因为ul上绑定事件响应,所以能触发这个动作。 事件对象 怎么才知道触发的li元素是哪个一个?...DOM元素; .this和event.target都是dom对象 如果要使用jquey中的方法可以将他们转换为jquery对象。...正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件 $('#elem').trigger('click'); //在绑定on的事件元素上,通过trigger...() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡