JQuery中的DOM对象操作 1.查找节点 var li = (“ul li:eq(1)”); //查找元素 $li.attr(“title”); //查找元素的属性值 2,创建和插入节点: var...10,遍历节点: $ul.children(); //获取ul的子元素,而非后代元素。 $ul.next(); //获取紧邻ul后的一个同辈元素。...11,CSS-DOM操作: ul.css({fontSize:“30px”, backgroundColor:"#aaafff"}); 或 $ul.height(“10em”); //设置ul的高度为...,返回的对象包含两个属性:top, left. var posObj = $ul.position(); var vLeft = posObj.left; var vTop = posObj.top;...//获取元素相对于最近一个position样式设置为relative或absolute的祖先节点的相对偏移。
获取到当前正在执行的事件: $('#testDive').bind('click', function(event){alert('event: ' + event.type)}); 获取所有绑定事件:
第3章 jQuery对象和DOM对象 3.1 jQuery对象和DOM对象的区别 DOM对象 用原生JavaScript获取的DOM对象 通过document.getElementById() 反馈的是元素...(DOM对象) 通过document.getElementsByTagName()获取到的是什么?...伪数组(集合),集合中的每一个对象是DOM对象 jQuery对象 jQuery对象 用$()的方式获取的对象 jQuery对象又可以叫做包装集(包装的DOM对象的集合) 区别 jQuery对象不能使用DOM...('hello'); 3.2 jQuery对象和DOM对象的相互转换 jQuery对象转换成DOM对象: jQuery对象.get(索引值); jQuery对象[索引值]...jQuery对象是包装集(集合),从集合中取数据可以使用索引的方式 DOM对象转换成jQuery对象: $(DOM对象) 只有这一种方法;
DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。 jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组)) DOM对象与jQuery对象的方法不能混用。...什么是DOM对象:用js的方式获取到的对象时DOM对象 //2. jQuery对象:用jq的方式获取到的对象时jq对象 //3. 区别与联系 //4....> jQuery里面放了Dom对象,把jQuery比作一个伪数组,就是没有数组的方法,但是有自己的方法(jQuery的方法) 总结 什么是DOM对象:用js的方式获取到的对象时DOM对象...jQuery对象:用jq的方式获取到的对象时jq对象 区别与联系 区别:js对象与jq对象的方法不能混着用 联系: DOM–> jQuery
("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。...如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例: $("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法; 上面的那段代码等同于...同样,DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。...2.jQuery对象和DOM对象的互相转换 在上面第一点说了,jquery对象和dom对象是不一样的!...这时我们可以将jquer对象转换成dom对象 jquery对象转换成 dom对象 jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。
2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。...jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象...对于jquery对象只能使用 jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...= 'none'; 1、DOM对象转jQuery对象 普通的Dom对象一般可以通过$()转换成jQuery对象。 ...2、jQuery对象转DOM对象 由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
通过js获取的DOM对象就是js对象 当浏览器支持js的dom接口(api)时,这里狭义的dom对象是以js对象的形式出现的, 也就是一个js对象。...2)jQuery对象和js对象区别 jQuery对象属于js的数组 jQuery对象是通过jQuery包装的DOM对象后产生的 jQuery对象不能使用DOM对象的方法和属性 DOM对象不能使用jQuery...$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法 等同于js中: document.getElementById("foo").innerHTML...注意: 如果获取的对象是 jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象。...举例: var $variable = jquery对象; 如果获取的是dom对象,则定义如下: var variable = dom对象
DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。...在 jQuery 中,已经将最常用的 DOM 操 作方法进行了有效封装,并且不需要考虑浏览器的兼容性,对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及,那么jQuery的DOM树,就是一个简笔画的小树...() nextUntil() prev() prevAll() prevUntil() 过滤 eq() 养成一个习惯,如果该jQuery方法可以设置元素值,那么该方法一定可以获取元素值。...DOM元素及属性操作。 1.设置(获取)元素内容。...for(vari in box){ //逐个遍历出来 alert(i+':' +box[i]); } jquery提供了一个方法$.each()他和for in一样可以遍历对象。
一、vue通过$refs获取到dom对象(获得dom对象改变里面的内容) 模板: 获取dom对象 这是一个div js: methods: { getdata: function() { //在这个方法中通过vue形式获取到div的对象,比js和jq都方便...$refs.mydiv.innerText = "修改以后的值"; } } 二、获取当前点击对象的内容 模板: <li v-for="(item,index)...0 }; }, methods: { addClass: function(index,event) { this.current = index; //<em>获取</em>点击<em>对象</em>...(this.current) } } 三、this<em>对象</em> 组件<em>对象</em> 模板: <em>获取</em>message的值 JS
对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利。 插入节点 jQuery提供了8种插入节点的方法。...(1)remove() 删除DOM中所有匹配的元素,可以传入参数来筛选要删除的元素。...=菠萝]"); //将元素中title属性不等于“菠萝”的元素删除 (2)detach() detach()也是从DOM中去掉所有匹配的元素。...需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。 如果将来再使用这个元素,相关事件和数据依然存在。...replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。 而replaceAll()和replaceWith()作用相同,只是颠倒了操作。
一、创建元素 只需要把DOM字符串传入$方法即可返回一个jQuery对象 var obj = $('Done')...DOM对象、HTML string、 jQuery对象 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的...元素的parent移除 $('.child').unwrap() 5、html([string]) 这是一个读写两用的方法,用于获取/修改元素的innerHTML **当没有传递参数的时候,返回元素的innerHTML...参数的时候,修改元素的innerHTML为参数值** 看个例子 $('div').html() $('div').html('123') 如果结果是多个进行赋值操作的时候会给每个结果都赋值 如果结果多个,获取值的时候...6、text() 和html方法类似,操作的是DOM的innerText值 ?
var li=$("ul i:eq(1)") var li_txt=li.text() alert(li_txt) 获取属性 li.attr("title") 追加节点 var ?...image.png 删除属性:removeAttr addClass removeClass 切换样式: toggleClass hasClass 获取html代码 $("p").html()...image.png 获取当前文本框的默认值 this.defaultValue radio check 如何选中 ? image.png 或者 ?...image.png 获取偏移量 .offset .position ? image.png scrollTop scrollLeft 滚动条滚动到指定位置 ?
为业务需要,DOM元素的ID被命名为“c-order.range”,执行JQuery的DOM查询时,提示如下错误 Uncaught Error: Syntax error, unrecognized expression...var rowId = 'c-order.range', view = document.getElementById(rowId), // 将Element对象转换为JQuery对象
返回的是一个类似数组对象,jquery可以通过$p[0]下标来获取对应的对象,也可以获取$p 的长度 ?...2、jquery转换为dom对象 jquery可以通过$p[0]下标来转换为对应的dom对象 ?...如果我们只是想要获取对应的子jquery对象,不想转换成dom对象,就直接用$('#p1').eq(2) 得到的还是jquery对象 ?...get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象。...get()不写参数把所有对象转为DOM对象返回 3、dom对象转换成jquery对象 dom对象转换成jquery对象,只需要加上一个#号 ?
; DOM 文档对象模型 将 HTML 文档 在内存中生成 为一个 DOM 树 ; 下图是 使用 DOM 文档对象模型 , 将 HTML 文档加载到内存中 , 生成的 DOM 树 ; 将下面的网页 ,..., 形成一个完整的树状图 ; 二、获取 DOM 元素 1、获取 DOM 元素的常用方法 获取 DOM 元素的方法 : 根据 元素 ID 获取 DOM 元素 , getElementById 函数 ;...新方法 获取 DOM 元素 ; querySelector 函数 ; querySelectorAll 函数 ; 特殊 DOM 元素获取 ; 2、根据元素 ID 获取 DOM 元素 - getElementById...函数 根据元素 ID 获取 DOM 元素 , 调用 Web APIs 中提供的 getElementById 函数即可 , 该函数是 document 对象中定义的 , 使用时 一般通过 document...HTML 元素的 ID ; element 返回值 是 获取的 DOM 元素 Element 类型对象 , 本章节参考文档 : getElementById 函数参考文档 : https://developer.mozilla.org
实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用一些别人封装好的js库来辅助我们的工作,jQuery就是这些辅助库中的一员。...的方法只有jQuery对象才可以调用,DOM对象不能调用。...DOM对象和jQuery对象的相互转换 //DOM转jQuery var win=$(window);//将window转换为jQuery对象 //jQuery对象win转DOM对象 win.get[0...]; //或 win[0]; 样式属性 说明 attr() $('#key').attr('id'),获取id属性值;$('#key').attr('name','tag'),设置name属性值为tag...最后说一点,同一个jQuery方法,可能会因为jQuery版本的不同而产生不同的效果。 版权声明 本文为作者原创,版权归作者雪飞鸿所有。
document对象(DOM)–认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。...DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。 HTML文档可以说由节点构成的集合,DOM节点有: 1....charset="utf-8"> window.onload = function(){ // 1.1 通过ID获取元素对象...document.getElementById("icon").style.color = "red"; // 1.2 通过指定名称 获取节点对象的集合 var name = document.getElementsByName...-- 2.1 通过innerHTML 获取或替换HTML的内容 语法: Object.innerHTML Object 为获取元素的对象,所以需要通过ID。
函数 , 可以获取 指定标签名称 的 若干 Element 对象集合 ; 调用 Document 的函数 , 获取的是 整个文档的 指定标签名称 的元素 ; 调用 Element 的函数 , 获取的是... 标签 , 传入 "div" 参数 ; elements 返回值 : 返回的结果是 封装有若干 Element 对象的 HTMLCollection 对象 ; 该对象中的 DOM 元素顺序是按照...DOM 树的 DOM 元素 发现顺序 进行排列的 ; HTMLCollection 对象是一个 " 伪数组 " , 有数组长度 , 也可以使用索引下标访问 , 但是没有数组的 push、pop 等数组函数...封装了多个 Element DOM 元素的 HTMLCollection 对象 ; HTMLCollection 对象是 时刻 动态改变的 , 如果 HTML 文档结构发生了改变 , HTMLCollection...对象会进行自动更新 , 如果要操作 HTMLCollection 对象 , 建议先创建副本 , 然后再进行操作 ; HTMLCollection 是个伪数组对象 , 可以 使用 数组下标的方式获取其中的
10、设置和获取HTML、文本和值示例代码 选择你喜欢的水果?...title” id=”myinput” value=”请输入内容” /> var p_html=$(“p”).html();//获取...(){//相当于js中的onfocus方法 var text=$(this).val(); if(text==”请输入内容”){ $(this).val(“”);//获取焦点之后把原来内容清空 } })...,这里只是获取子元素和后代元素无关 var $span=$(“span”).children();//获取到的内容是:你最喜欢的运动是?...var $ul=$(“ul”).children(); //获取同辈元素,span和ul是同辈元素,可用$(“span”).next()获取到ul,同样可以用$(“ul”).prev()获取到span
meta charset="utf-8"> 获取当前点击对象... /*传入参数this即可获取当前点击的对象
领取专属 10元无门槛券
手把手带您无忧上云