jQuery:选择和操作DOM之外的html元素 - 腾讯云开发者社区

文章/答案/技术大牛

发布

jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。...返回类型是DOM元素数组 :first $("p:first")，选择页面上的第一个p元素 :last $("p:last")，选择页面上的最后一个p元素 :even $("tr:even")，选取页面上索引为偶数的...，注意这里#form1和:enabled之间没有空格，有空格表示选取子元素 $("#form1 :disabled");//选取id为form1的表单内所有禁用的元素常用方法 jQuery的方法只有jQuery...DOM对象和jQuery对象的相互转换 //DOM转jQuery var win=$(window);//将window转换为jQuery对象 //jQuery对象win转DOM对象 win.get[0...')设置元素文本为str html() 和text类似，不同之处是html()可以使用html样式，$('p').html('p'),p标签上显示粗体字母p val() 针对input使用

3.5K4 0

jquery 操作DOM元素(1)

.wraplnner(wrappingElement) 　　　　　　wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式，jquery对象 DOM 元素。　　　　....append(content[,content]) 　　　　　　content DOM 元素 DOM 数组，HTML字符串 jquery 对象。　　　　　　...　　　.appendTo(target) 　　　　target 一个选择符，元素，HTML 字符串，DOM 元素数组。　　　　...)) 　　　　　　　　一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的开始处　　　　　　　　$("p").prepend(document.createTextNode....prependTo(target) 　　　　target 一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

1.8K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

jquery操作DOM 元素(2)

content HTML字符串 DOM 元素元素数组对象，用来插入到集合中每个匹配元素的后面。　　....after(function) 　　　　function 返回一个 HTML字符串 DOM 元素元素数组对象，用来插入到集合中每个匹配元素的后面。...content HTML字符串 DOM 元素元素数组对象，用来插入到集合中每个匹配元素的后面。　　....insertAfter(target) 　　　　target 一个选择器，元素，HTML字符串或者对象，匹配的元素将会被插入在由参数指定的目标后面。　　....insertBefore(target) 　　　　　　target 一个选择器，元素，HTML字符串或者对象，匹配的元素将会被插入在由参数指定的目标前面。

1.6K6 0

jquery操作DOM 元素(3)

.detach() 　　从DOM 中去掉所匹配的元素。　　　　...DOM 中删除，同时删除元素上的事件。　　...，保留自身，（和兄弟元素，如果存在）再原来的位置。　　....replaceAll(target) 　　　　target 一个选择器字符串，对象，DOM元素，或者元素数组，包含哪个元素被替换。　　　　....replaceWith(newContent) 　　　　　　newContent 用来插入的内容，可能是HTML字符串，DOM元素，或者对象。

1.4K8 0

JQuery 隐藏和显示html元素

emailInvalid").hide(); $("#pwdInvalid1").hide(); $("#pwdInvalid2").hide(); //检查用户名: 长度为6到12位, 只能输入数字和英文和下划线...reg.test($passwordEle.val())) { $("#pwdInvalid1").text(" *密码的最低长度为6位, 只能输入数字和英文"); $("#pwdInvalid1")....show(); //alert("密码的长度为6位, 只能输入数字和英文"); $passwordEle[0].focus(); return false; } //确认密码必须与密码相同 var $...确认密码必须与密码相同"); $("#pwdInvalid2").show(); //alert("确认密码必须与密码相同"); } return true; }); }); jQuery...hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： $("#hide").click(function(){ $(

11.5K5 0

jQuery选择器、Dom操作、样式、事件处理

3. jquery 对象和 DOM 原生对象有什么区别？如何转化？ DOM对象：W3C标准用于操作文档的API。...同样，DOM对象也不能使用jQuery方法。 jquery提供了两种方法将一个jquery对象转换成一个dom对象，[index]和get(index)。...('html'); //dom对象 var cr= $(cr); //转换成jquery对象 ?...9.如何设置和获取表单用户输入或者选择的内容？...如何设置和获取元素属性？ val() 方法返回或设置被选元素的 value 属性，通常与 HTML 表单元素一起使用。当用于返回值时：返回第一个匹配元素的 value 属性的值。

2.6K3 0

jQuery中的DOM操作

Dom操作的分类：DOM Core，html-DOM，CSS-DOM 查找节点：查找属性节点（通过jq选择器），操作属性节点（attr（‘属性名’,’属性值’）），操作文本节点（text（））读/写...要使用标准的开闭和标签 $('p')//创建了一个id为text，内容为p的p标签返回值是一个jq对象 2.插入节点： append()://向匹配的元素的内部的结尾处追加内容...a 删除节点： remove：$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。...但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。...不占位置清空节点： empty：$(selector).empty() 从指定元素中移出所有的内容，包括子节点和内容。占位置复制节点：clone():只复制节点中的内容，不包括任何行为。

2K7 0

jQuery中的DOM操作

Dom操作的分类：DOM Core，html-DOM，CSS-DOM 查找节点：查找属性节点（通过jq选择器），操作属性节点（attr（‘属性名’,’属性值’）），操作文本节点（text（））读/...要使用标准的开闭和标签 $('p')//创建了一个id为text，内容为p的p标签返回值是一个jq对象 2.插入节点： append()://向匹配的元素的内部的结尾处追加内容...a 删除节点： remove：$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。...但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。...不占位置清空节点： empty：$(selector).empty() 从指定元素中移出所有的内容，包括子节点和内容。占位置复制节点：clone():只复制节点中的内容，不包括任何行为。

1.7K2 0

锋利的JQuery —— DOM操作

图片猛戳链接

6636 0

jquery中dom元素的attr和prop方法的理解

一、背景　　在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候，经常不知道dom元素的attr和prop方法到底有什么区别？...也是W3C里本身就包含的几个属性，换句话说是IDE中能够自动提示的属性，这些属性就被称为dom元素的固有属性，这种情况下，我建议使用prop方法。　　....那么很明显前两个是该dom元素的固有属性，最后一个是我们自己定义的属性。...a标签中的固有属性中并不包含该属性。这些属性被称为dom元素的自定义属性，这种情况下，我建议使用attr方法。此时若使用prop方法进行设置和获取该属性的值时就会返回undefined值。　　...="4">选择4 8 像上面这个例子中的checkbox、radio、select等元素的选中属性"checked"和"selected"，这些属性也是dom元素的固有属性

1.9K2 0

Jquery的属性操作和DOM操作

JQ中非常重要的部分，就是操作DOM的能力一属性操作 1 text（）：获取或设置某个文本属性 2 html() ：获取或设置某个元素属性 3 val...接受选择器的index位置 oldvalue - 可选。...二 DOM操作---节点插入 1.创建节点 $(html) 2 append() 和appendTo() :在被选元素的尾部添加内容不同：append（）能够使用函数来附加内容...删除所有子节点），绑定的事件，附加的数据都会移除 2 detach（）从DOM中删除所有匹配的元素（）与remove（）不同的是，绑定的事件，附加的数据都会被保留下来 3...4 is（）判断所有元素中是否有符合某个条件的元素，返回布尔值 5 has（）方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素演示文档</title

1.8K2 0

html标签属性（attribute）和dom元素的属性（property）

从对象来说，attribute是html文档上标签属性，而property则是对应dom元素的自身属性。...从操作方法上来看，attribute可以通过dom core规范的接口 getAttribute和setAttribute 进行获取修改，而property可以通过对象访问属性的方式 ....，　　它们按照规范在html文档上设置这样的自定义属性，并不修改dom元素的属性），而在w3c浏览器下可以正确区分他们的异同；　　2，在ie6,7,8（Q）下，通过getAttribute和setAttribute...dom元素属性property和html标签属性的对应关系，他们分别是id，dir，lang，title 　　，className。...当html特性是JS的保留字的情况下，会在特性名称　　前加上“html”，如label的label.htmlFor.在HTML解析阶段，浏览器会将html的上述标签属性绑定在相对应DOM元素的属性上，

2.6K5 0

JQuery中的Dom操作集合

但是我们很多编码过程中，如果没使用mvvm或者不适应mvvm的人，那么就属JQuery使用的最广泛了。其中，又数ajax和Dom操作中的append 最为常用。...html方法，给元素添加html代码或者清空html代码（参数为空字符串）； append向元素的末尾添加html代码； appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不一样...； after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入； before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将...html代码插入； insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入； insertBefore将JQuery封装好的元素插入到指定元素的前面...，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入； empty清空元素内部的html代码，它只是清空内部的html代码，但是标记仍然留在DOM中； remove从DOM中移除整个元素

7633 0

新手如何在 ES6 如何操作HTML DOM元素？

ES6 HTML DOM DOM代表文档对象**模型。HTML 页面在浏览器中呈现。浏览器将从网络服务器下载的页面中包含的所有元素组装到其内存中。...表单： DOM 层次结构继续向下包含表单的各个元素 DOM 类别： JavaScript 支持三种 DOM 类型，但我们仅讨论适用于 ES6 的类型。...该模型有很多方法可用于设置和获取文档属性值。旧版 DOM 的文档属性： **alinkColor：**此属性定义激活链接的颜色。...> 输出: W3C DOM: 该 DOM 遵循万维网联盟标准，其中规定： “文档对象模型是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”...* 该模型主要关注语言中立性，以便使脚本编写和样式化文档变得容易。 W3C DOM 中的文档属性： body: 标签的内容。

7722 0

jquery操作元素的位置

var offset = p.offset(); //获取到这个元素的位置　　　　　　p.html( "left: " + offset.left + ", top: " + offset.top...) 　　　　coordinates 一个包含top 和 left 属性的对象，用整数指明元素的新顶部和左边坐标。　　...包含 top 和 left 注，不支持获取隐藏元素的便宜的坐标　　　　var position = p.position(); 　　　　$("p:last").text( "left: "...+ position.left + ", top: " + position.top ); .scrollLeft() 　　获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离...$("div.demo").scrollLeft(300); .scrollTop() 　　获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。

4.4K6 0

jQuery阻止冒泡和HTML默认操作

1：jQuery是一个快捷简便的JavaScript框架，说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。...2：在当今的各个浏览器中都支持事件的冒泡，所谓的冒泡可以这样理解：条件：外层有一个DIV元素，在内层有一个P元素，他两存在这样的关系:DIV是P元素的父元素，而P是外层DIV的子元素，他们之间存在包含和被包含的关系...3：在HTML中有的元素被定义了一些默认的属性，比如说A元素，这个元素就是我们平时使用的超链接标签，这个标签的默认属性是实现页面的跳转。...4：在jQuery的每一个事件中都会有一个默认的对象作为该事件的参数(但是必须显示地被指定)，这个对象就是event对象，它包含了一些属性和方法，用于不同的场合。...，这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。

2.5K5 0

jQuery（操作DOM-内容及值的操作）

目录 val 方法 text 方法 html 方法内容及值的操作注意：对比js，js中使用的获取属性和为属性设置的方式，jquery中使用的是方法； val 方法 val() 用于获取单行文本框的值...var $obj = $("#username"); //使用jQuery选择id元素 var obj = document.getElementById("username"); //使用JavaScript...选择id元素 $obj.val();//jQuery获取文本框值的方法 obj.value; //JavaScript获取文本框值的方法 val('') 用于设置单行文本框的值 var $obj =...获取id元素 $obj.text(); //jQuery获取多行文本值 obj.innerText; //JavaScript获取多行文本值 text("内容") 用于设置多行文本的值（textarea...$obj.text("hellowWorld"); //jQuery设置多行文本的值 obj.innerText="HelloWorld"; //JavaScript设置多行文本的值 html 方法 html

5901 0

jQuery选择器、元素属性操作--jQuery基础知识点(1)

很明显前者的执行效率高于后者。 2. 在jQuery选择器定位页面元素时，无须考虑定位元素在页面中是否存在，即使不存在，浏览器也不会报错！二、jQuery选择器： 1....表单选择器：例：$("#form1 :input") 例：$("#form1 :password") 三、 jQuery元素属性操作： 1....和radio3的单选框被选中 4. toggleClass(class); //元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别 5....动态创建节点：$(html) var $div = $("jQuery学习">加油"); $("body").append($div);...remove([expr]); //把其从dom中删除，而不会保留其所占的位置 Hello $("p").empty(); //结果：Hello

9712 1

JQuery如何获取ID含有特殊字符的DOM元素

为业务需要，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值用双引号包起来，即可进行识别 // 请注意双引号添加的位置

12.7K2 0

JQuery DOM操作：Class属性的舞蹈魔法

在前端的世界中，JQuery如同一位舞者，通过灵活的舞步为我们展示了操纵HTML元素的艺术。而在这场舞蹈的精彩演出中，Class属性的操作是一项极富魅力的技艺。...在本篇博客中，我们将深入研究JQuery DOM操作中的Class属性操作，揭示这段舞蹈背后的绝妙之处。JQuery的独特韵味JQuery，这个前端开发中的名角，以其简洁而强大的语法而备受推崇。...Class属性：元素的身份标签在前端的布景中，Class属性是元素的身份标签，定义了元素的样式和行为。通过JQuery的舞台，我们可以轻松地为元素添加、移除、切换Class，实现页面样式的动态变化。...小结通过本篇博客，我们深入了解了JQuery DOM操作中的Class属性操作。Class属性的操作为我们提供了在HTML元素中添加、移除、切换类的便捷方法，使得页面样式的变化更为灵活多变。...在前端的舞台上，Class属性的操作犹如一段华丽的舞蹈，通过简洁而强大的JQuery语法，为我们展示了操纵HTML元素的绝妙技艺。

7891 0

点击加载更多

jQuery操作DOM元素

jquery 操作DOM元素(1)

jquery操作DOM 元素(2)

jquery操作DOM 元素(3)

JQuery 隐藏和显示html元素

jQuery选择器、Dom操作、样式、事件处理

jQuery中的DOM操作

jQuery中的DOM操作

锋利的JQuery —— DOM操作

jquery中dom元素的attr和prop方法的理解

Jquery的属性操作和DOM操作

html标签属性（attribute）和dom元素的属性（property）

JQuery中的Dom操作集合

新手如何在 ES6 如何操作HTML DOM元素？

jquery操作元素的位置

jQuery阻止冒泡和HTML默认操作

jQuery（操作DOM-内容及值的操作）

jQuery选择器、元素属性操作--jQuery基础知识点(1)

JQuery如何获取ID含有特殊字符的DOM元素

JQuery DOM操作：Class属性的舞蹈魔法

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐