一、背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候，经常不知道dom元素的attr和prop方法到底有什么区别？...="btn">百度主页 在上面这个例子中，href、target、class、id这些dom属性，是a元素本身就具有的。...也是W3C里本身就包含的几个属性，换句话说是IDE中能够自动提示的属性，这些属性就被称为dom元素的固有属性，这种情况下，我建议使用prop方法。 ....那么很明显前两个是该dom元素的固有属性，最后一个是我们自己定义的属性。...a标签中的固有属性中并不包含该属性。这些属性被称为dom元素的自定义属性，这种情况下，我建议使用attr方法。此时若使用prop方法进行设置和获取该属性的值时就会返回undefined值。
中包含 DOM 的个数，比如获取页面上 p 元素的个数 p> 问题 2：获取 id 为 username 元素的 value 属性值...注意：是匹配之后的元素，不包含该元素在内，并且 siblings 匹配的是和 prev 同辈的元素，其后辈元 素不被匹配。...元素后的 input 元素，并打印分析结果 p> 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果...console.log($('label ~ input')); // 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果 console.log...($('label + input')); }); script> 八、过滤选择器 1、定义 过滤选择器：通过特定的过滤规则来筛选所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同
W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点注释是...图 2-12 节点树 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 节点元素均可被修改，也可以被创建或删除。 节点树中的节点彼此拥有层级关系。...在 CSS 中是使用了 CSS 选择器来定位节点的，例如上例中有个 div 节点的 id 为 container，那么我们就可以用 CSS 选择器表示为 #container，# 开头代表选择 id，其后紧跟...另外如果我们想选择 class 为 wrapper 的节点，便可以使用 .wrapper，. 开头代表选择 class，其后紧跟 class 的名称。...:focus input:focus 选择获得焦点的 input 节点。 :first-letter p:first-letter 选择每个 p 节点的首字母。
这些由 getElementById() 得到的具体对象 就是图中最右一列对象，它们 其实就是 DOM 将具体的每个 HTML标签/元素 封装之后的 一个个HTMLElement 子对象。 ...注意 只有使用内联样式，即直接把CSS写在HTML元素的style属性中 才能通过上面所说的方法获取...然后，这里想抛出个引子：其实JQuery中的 .width() 得到的并不是真正的 CSS 中的 width，想了解看这里。...返回元素的命名空间 URI No 1 9 Yes nextSibling 返回元素之后紧跟的节点 5 1 9 Yes nodeName 返回节点的名称，依据其类型。...No Yes tagName 返回元素的名称 5 1 9 Yes textContent 设置或返回元素及其后代的文本内容 No 1 No Yes text 返回节点及其后代的文本 (IE-only
二、jQuery对象和DOM对象 2.1、DOM对象 使用JavaScript中的DOM API操作获得的元素对象叫DOM对象。...在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 ? 获得DOM对象的示例： <!...//方法二 //获得文档中id为bar的DOM对象，将DOM包装成一个jQuery对象，调用jQuery方法html修改元素HTML jQuery("#bar").html...//从jQuery对象中获得下标为1的DOM元素，并调用DOM属性 $p.get(1).innerHTML="bar DOM"; DOM对象； $只是jQuery的别名形式； 每一个jQuery对象都是一个DOM对象的集合 三、常用选择器 通过jQuery中的选择器实际上取得的是HTML中的DOM元素。
对象 通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象 $('div')[2] //获取第三个dom对象 $('div').get(2)...如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。...) 获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数 $('.child').parents('.container') ?...7、.children([selector]) 获得匹配元素集合中每个元素的子元素，选择器选择性筛选 ?...11、.is(selector), is(function(index)), is(dom/jqObj) 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数
DON元素的子元素 .parents() 用来获取DOM元素的所有父元素 .parent() 用来获取DOM元素第一层元素 .siblings() 用来获取DOM元素的所有同级元素 .first() 用来获取指定...DOM对象的第一个元素 .last() 用来获取指定DOM对象的最后一个元素 .next() 用来匹配DOM对象紧跟着的下一个同级元素 .nextAll() 用来匹配给定的DOM对象的所有同级元素 .nextUntil...() 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止 .prev() 用来匹配给定DOM对象紧跟着的上一个同级元素 .prevAll() 用来匹配给定的DOM对象之前的所有同级元素....prevUntil() 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止 .each() 用来遍历数组及其类似结果 .eq() 用来在元素或者数组中的特定索引处获取DOM元素...类似于Jquery中nth:child() 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持。
+ next 选择所有指定元素后紧跟着的元素，如：$(‘label + input’) prev ~ siblings 选择与指定元素之后有相同父级的同级选择器，如：$(‘#prev ~ div’)...独立文件中使用 jQuery 函数 如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。...获得内容 – text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() – 设置或返回所选元素的文本内容 html() – 设置或返回所选元素的内容...下面的例子演示如何获得链接中 href 属性的值： jQuery 选择器匹配的 DOM 元素的数量 toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素 pushStack() 将一个DOM元素集合加入到jQuery
$("div").find(".test") // find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。...$(".test").nextAll() //获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。...$("div").prevAll() //获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。...$(".test").parents() //获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。...$(".test").parentUntil() //获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。 jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...标签的src属性导入即可 二.jQuery基本操作 1.获得jQuery对象 语法：$(选择器或者DOM对象) 或 jQuery(选择器或者DOM对象) $ == jQuery 的值 alert($obj.val()); 2.DOM对象和jQuery对象之间的转换 注意:jQuery对象使用jquery的api（方法、函数）。...获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。...语法：$("A B") --> A标签中 所有的B标签 所有孩子元素 语法：$("A > B") --> A标签中 所有的子标签中B标签。
jQuery环境配置： jQuery不需要安装，把下载的jquery.js放到网站的一个公共的位置，想要在某个页面中用jQuery时，只需要在相关的HTML文档中引入该类库文件的位置即可。...在页面中引入jQuery，在编写的页面代码中标签内引入jQuery库后，就可以使用jQuery库了，下面是第一个jQuery程序： 其后面的元素显示出来，同时将它的父辈元素的同辈元素内部的子元素都去掉一个名为 * current的class，并且将紧邻它们后面的元素都隐藏。...需要强调的是，在jQuery库中， $符号就是jQuery的一个简写形式，例如 (“#foo”)和jQuery(“#foo”)是等价的。...$("#foo").html(); //这段代码等价于： document.getElmentById("foo").innerHTML; 在jQuery对象中无法使用DOM对象的任何方法，同样ＤＯＭ对象也不能使用
.parents() // 用来获取DOM元素第一层元素 .parent() // 用来获取DOM元素的所有同级元素 .siblings() // 用来获取指定DOM对象的第一个元素 .first...() // 用来获取指定DOM对象的最后一个元素 .last() // 用来匹配DOM对象紧跟着的下一个同级元素 .next() // 用来匹配给定的DOM对象的所有同级元素 .nextAll...() // 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止 .nextUntil() // 用来匹配给定DOM对象紧跟着的上一个同级元素 .prev() // 用来匹配给定的...each() // 用来在元素或者数组中的特定索引处获取DOM元素。...类似于Jquery中nth:child() .eq() Cypress 常见操作 访问某个 link //访问百度 cy.visit('httpf://www.baidu.com) 获取当前页面
是浏览器自带对象，dom 对象只能调用dom 里面的属性和方法， 不能调用jQuery 对象里面的属性和方法 jQuery对象：jquery 对象是通过jQuery 包装页面上面的元素或者dom 而产生的一个新的....map() 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。 .next() 获得匹配元素集合中每个元素紧邻的同辈元素。....not() 从匹配元素集合中删除元素。 .offsetParent() 获得用于定位的第一个父元素。 .parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。....parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 .parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。....prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 .prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
此笔记只是作为本人学习JQuery的随手笔记,稍微做了一下整理,希望对新人有参考价值。...1、属性： 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class=”btn” //$(“input”).attr(“class”,”btn”); ...、值：获得第一个匹配元素的当前值 //取的某一按钮的值 //alert($(“#Button1”).val()); 4、Html代码：取得第一个匹配元素的...jQuery 对象的‘length’ 属性一致 //button的个数 //alert($(“input:submit”).size()+” and “...+$(“input:submit”).length); 10、 取得所有匹配的 DOM 元素集合 //alert($(“input”).get().reverse()
及jQuery对象只能使用自己的函数 DOM对象转换成jQuery对象，语法：jQuery(dom对象) jQuery对象转换成DOM对象，语法：$username[index] //1 原生javascript... //实际开发中，我们习惯将标签编写在标签体内， //整个页面的解析时从上网下的，此时将不能获得input>对象...A B ，获得A元素内部的所有的B元素。（祖孙）--后代 A > B ，获得A元素下面的所有B子元素。...（父子） A + B ，获得A元素同级下一个B元素（兄弟） A ~ B， 获得A元素之后的所有B元素（兄弟） 1.4.3 基本过滤选择器 ?...:animated 获得动画的 :focus 获得焦点 1.4.4 属性选择器 ? [属性名] 获得有属性名的元素。
jQuery( )函数是jQuery的核心函数，主要用来获得页面元素，jQuery的核心功能都基于该函数实现。...获取每一个选择器所匹配的元素 示例3.2是jQuery基本选择器的具体应用，其中还牵涉到平时最常用的三个函数： val( )：用来获得元素value属性的值 html( )：用来获得元素标签内的所有信息...我们在前面的课程中已经学习了DOM，它是通过文档对象模型以面向对象的方式来操纵HTML元素。通常使用document对象的相关方法来获取HTML元素，这时获得的是DOM对象，例如下面的代码。...document.getElementById("btn")获得的是DOM对象，它不能调用jQuery中的html()和val()方法； DOM对象和jQuery对象不能混用，但是这两者之间却可以相互转换...实现树形菜单 训练技能点 jQuery库的使用 jQuery基本选择器 jQuery对象转换 需求说明 仿照下图所示界面，用jQuery获得元素，然后转换成DOM对象并实现树形菜单效果
Cheerio 从jQuery库中去除了所有 DOM不一致性和浏览器尴尬的部分，揭示了它真正优雅的API。 **ϟ 闪电般的块:**Cheerio 工作在一个非常简单，一致的DOM模型之上。...在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null，则移除这个属性。你也可以传递一对键值，或者一个函数。...####Traversing .find(selector) 获得一个在匹配的元素中由选择器滤过的后代。...，通过测试这个元素和DOM层级关系上的祖先元素，获得第一个匹配的元素 $('.orange').closest() // => [] $('.orange').closest('.apple') //...如果使用函数方法，这个函数在被选择的元素中执行，所以this指向的手势当前元素。
, [callback] ) 载入远程 HTML 文件代码并插入至 DOM 中，其中： url (String) ：请求的HTML页的URL地址。...jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...complete: function(){ // Handle the complete event } // ... }); 全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面...如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 success Function 请求成功后回调函数。...其后的 AJAX 请求不再设置任何选项参数。
Jquery最大的特点是方便对DOM的封装。什么是DOM？DOM就是操作html文件的树结构的方法，我们看图片。 ...通过这个对象的相关方法就能很方便地直接操作html文件。 在Jquery中，DOM变得更加简单。 选择器 要操作html文档，就用到选择器。 ...$("div#exm")就是选择的id=exm的元素，对该元素执行方法html()，html方法就是读取或修改中的内容。...这就是focus事件，它表示某个控件获得焦点。看看代码，用到了一个选择器$(":text")，它表示所有type=text的input元素。当该元素获得焦点后，执行了val方法。...对于做web前端的同学来说希望有帮助。
AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs...-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素...，选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点 css() - 获取匹配元素集合中的第一个元素的样式属性的值...data()-在匹配元素上存储任意相关数据 detach()-从DOM中去掉所有匹配的元素 empty()-从DOM中移除集合中匹配元素的所有子节点 eq()-减少匹配元素的集合为指定的索引的哪一个元素...()-获取匹配的元素集中第一个元素的属性（property）值 ready()-当DOM准备就绪时，指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
