在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明:
首先,html属性中有两个方法,一个有参,一个无参
1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
例子:
html页面代码:<div><p>Hello</p></div>
jquery代码:$("div").html();
结果:Hello
2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码:<div></div>
jquery代码:$("div").html("<p>Nice to meet you</p>");
结果:[ <div><p> Nice to meet you</p></div> ]
其次,text属性中有两个方法,一个有参,一个无参
1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
例子:
html页面代码:<p><b>Hello</b> fine</p>
<p>Thank you!</p>
jquery代码:$("p").text();
结果:HellofineThankyou!
2.有参text(val):设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
html页面代码:<p>Test Paragraph.</p>
jquery代码:$("p").text("<b>Some</b> new text.");
结果:[ <p><b>Some</b> new text.</p> ]
最后,val()属性中也有两个方法,一个有参,一个无参。
1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
返回的是一个String、 array
例子:
html页面代码 :
<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
jquery代码:$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码:
<input type="text"/>
jquery代码:$("input").val("hello world!");
结果:hello world!
-
vue render 函数 如和创建 html 注释节点, 如何创建文本节点
2020-01-22 14:01:232.然后用 递归 循环 head ,body 的所有节点 其中包括 注释节点, 转换成 render 函数节点 (期间添加N多个自动化方法),这样就可以在vue 中渲染页面实现想要 自动化的功能 render 函数参数...最近在研究一个自动化项目, 让使用者可以直接编辑网页上得模块 (用 Vue 写的)
项目业务
1.首先 从数据库 获取 head 和 body 的innerHTML 文本
2.然后用 递归 循环 head ,body 的所有节点 其中包括 注释节点, 转换成 render 函数节点 (期间添加N多个自动化方法),这样就可以在vue 中渲染页面实现想要 自动化的功能
render 函数参数 使用方法简介 :
render 中返回一个 h函数 h(元素名,{ 元素上绑定的,事件,attrs,style,class ....等 }, [子节点 h(...), h(...), h(...) , ...... ])
import Vue from 'vue' let VNode = new Vue({ created () { // 生命周期 }, render ( h ) { // render 创建虚拟DOM 直到渲染 return h ('div', {...}, [...]) }, methods: { // 方法 }, data () { return { // 数据 } } }).$mount() export default VNode
小栗子:
// 递归所有DOM节点 生成 VNode 函数 childs (node, h) { let childNode = [] let flage = false node.childNodes.forEach(ele => { if (ele.childNodes.length > 0) { childNode.push(this.childs(ele, h)) } else { if (ele.nodeType === 1) { childNode.push(h(ele.tagName, this.setAttr(ele.attributes))) } else { if (ele.nodeType === 8) { let notes = h('', {}) notes.text = ele.nodeValue childNode.push(notes) } else { if (ele.nodeValue.replace(/\s/g, '') !== '') flage = true childNode.push(ele.nodeValue) } } } }) return h(node.tagName, this.setAttr(node.attributes, flage), childNode) }, // 还原 attributes 属性 setAttr (attr, flage) { let obj = { style: {}, attrs: {}, on: {} } if (flage) obj.attrs['contenteditable'] = true for (let key in attr) { if (attr.hasOwnProperty(key)) { if (attr[key].nodeName === 'href') { obj.attrs[attr[key].nodeName] = path.resolve(__dirname, 'static/' + (attr[key].nodeValue.split('/').pop())) } else if (attr[key].nodeName === 'src') { obj.attrs[attr[key].nodeName] = path.resolve(__dirname, 'static/images/' + (attr[key].nodeValue.split('/').pop())) } else { obj.attrs[attr[key].nodeName] = attr[key].nodeValue } } } return obj }
问题:
1. render 函数 怎么添加字符串节点
h 函数 第一个参数 必须填 标签名, 如果不填 就会渲染成 注释的空节点 <!-- -->
所以最好 在子集数组中 push 字符串 自动生成字符串节点
我也试过 在对象中 添加 innerText 属性, 虚拟节点时能看到结构, 但渲染真是DOM 后 添加innerText的元素 子级元素 就全没了h('div', {...}, ['我是字符串节点1', '我是字符串节点2'])
2. render 函数 怎么添加 注释节
let notes = h('', {}) // 首先创建一个空节点 render 会创建出一个 notes.text = '我是被注释的内容' 此时 notes 虚拟节点 最后会被渲染成 : <-- 我是被注释的内容 -->
VNode 虚拟节点属性作用 参考
children 子节点,数组,也是VNode类型。 text 当前节点的文本,一般文本节点或注释节点会有该属性。 elm 当前虚拟节点对应的真实的DOM节点。 ns 节点的namespace。 context 编译作用域。 functionalContext 函数化组件的作用域。 key 节点的key属性,用于作为节点的标识,有利于patch的优化。 componentOptions 创建组件实例时会用到的信息选项。 child 当前节点对应的组件实例。 parent 组件的占位节点。 raw 原始html。 isStatic 静态节点的标识。 isRootInsert 是否作为根节点插入,被<transition>包裹的节点,该属性的值为false。 isComment 当前节点是否是注释节点。 isCloned 当前节点是否为克隆节点。 isOnce 当前节点是否有v-once指令。
-
java-web js实现省市联动(使用元素节点,文本节点的方法) 补:jquery的再次实现
2018-07-13 17:12:54实现步骤: 第一步:确定事件(onchange)并为其绑定一个函数 第二步:创建一个二维数组用于存储省份和城市 第三步:获取用户选择的省份 ...第九步:将城市文本节点添加到option元素节点中去 第十步...实现步骤:
第一步:确定事件(onchange)并为其绑定一个函数
第二步:创建一个二维数组用于存储省份和城市
第三步:获取用户选择的省份
第四步:遍历二维数组中的省份
第五步:将遍历的省份与用户选择的省份比较
第六步:如果相同,遍历该省份下所有的城市
第七步:创建城市文本节点
第八步:创建option元素节点
第九步:将城市文本节点添加到option元素节点中去
第十步:获取第二个下拉列表,并将option元素节点添加进去
第十一步:每次操作前清空第二个下拉列表的option内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二级联动</title> <!--<script type="text/javascript"> var books=[["红楼梦","水浒传","西游记 "],["高数","大学英语","大学语文"]]; function change(){ var index=document.getElementById("main").selectedIndex; var str=""; for(var i=0;i<books[index-1].length;i++){ str += "<option>" + books[index-1][i] + "</option>"; } document.getElementById("sub").innerHTML=str; } </script>--> <script> //1.创建一个二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市"); cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市"); cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市"); cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市"); function changeCity(val) { //7.获取第二个下拉列表 var cityEle = document.getElementById("city"); //9.清空第二个下拉列表的option内容 cityEle.options.length = 0; //2.遍历二维数组中的省份 for (var i = 0; i < cities.length; i++) { //注意,比较的是角标 if (val == i) { //3.遍历用户选择的省份下的城市 for (var j = 0; j < cities[i].length; j++) { //alert(cities[i][j]); //4.创建城市的文本节点 var textNode = document.createTextNode(cities[i][j]); //5.创建option元素节点 var opEle = document.createElement("option"); //6.将城市的文本节点添加到option元素节点 opEle.appendChild(textNode); //8.将option元素节点添加到第二个下拉列表中去 cityEle.appendChild(opEle); } } } } </script> </head> <body> <select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </body> </html>
jquery的实现代码
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //2.创建二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){ //10.清除第二个下拉列表的内容 $("#city").empty(); //1.获取用户选择的省份 var val = this.value; //3.遍历二维数组中的省份 $.each(cities,function(i,n){ // *function(i,n)中i返回的是索引而n返回的是值 //4.判断用户选择的省份和遍历的省份 if(val==i){ //5.遍历该省份下的所有城市 $.each(cities[i], function(j,m) { //6.创建城市文本节点 var textNode = document.createTextNode(m); //7.创建option元素节点 var opEle = document.createElement("option"); //8.将城市文本节点添加到option元素节点中去 $(opEle).append(textNode); //9.将option元素节点追加到第二个下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }); }); </script>
-
jQuery获取文本节点之 text()/val()/html() 方法区别
2020-12-10 15:34:23下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 例子: html页面代码... -
jq输出文本_jQuery获取文本节点之 text()/val()/html() 方法区别
2021-02-01 06:54:37下面我们来举例说明:首先,html属性中有两个方法,一个有参,一个无参1....这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String例子:html页面代码:Hellojquery代码:$("div").html();结果:Hell...在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明:
首先,html属性中有两个方法,一个有参,一个无参
1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
例子:
html页面代码:
Hello
jquery代码:$("div").html();
结果:Hello
2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码:
jquery代码:$("div").html("
Nice to meet you
");结果:[
]Nice to meet you
其次,text属性中有两个方法,一个有参,一个无参
1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
例子:
html页面代码:
Hello fine
Thank you!
jquery代码:$("p").text();
结果:HellofineThankyou!
2.有参text(val):设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "" 替换成相应的HTML实体).返回一个jquery对象
html页面代码:
Test Paragraph.
jquery代码:$("p").text("Some new text.");
结果:[
Some new text.
]最后,val()属性中也有两个方法,一个有参,一个无参。
1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
返回的是一个String、 array
例子:
html页面代码 :
代码如下:
Single
Single2
Multiple
Multiple2
Multiple3
jquery代码:$("p").append(
"Single: " + $("#single").val() + "
Multiple: " + $("#multiple").val().join(", "));
结果:[
Single:SingleMultiple:Multiple, Multiple3
]2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码:
jquery代码:$("input").val("hello world!");
结果:hello world!
jquery中html()与val()的用法区别:
1). html()与val()的区别
$("#myId").html("abc");
如果myid不存在上面的代码也不会出错,只是不进行任何操作;
var data=$("#myId").html();
如果myid不存在,data为null值
var data=$("#myId").val();
如果myid不存在,data为undefined
2). jquery如何判断元素存在
jquery选择器获取element 无论element是否存在都将返回一个对象
var my_element=$("#myId");
这里无论元素"myid"是否存在,my_element始终是一个object
使用下面的方法判断"myid"元素是否存在
if(my_element.length>0)){
alert("exist");
}else{
alert("not found");
-
jQuery获取文本节点之-text()与val()方法区别
2019-10-06 06:49:34在jquery中val,text,html都能取到值,...下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1....这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<di...转载于:https://www.cnblogs.com/chencidi/archive/2010/07/28/1786698.html
-
DOM启蒙:文本节点
2018-10-27 17:35:19HTML文档中的文本表现为 Text()构造函数的示例,即文本节点。 Text从CharacterData、Node及Object继承。 2.文本对象属性与方法 属性: .data:可获取Text节点的文本值/数据 .nodeValue:可获取Text... -
jQuery获取文本节点之-text()/val()/html() 方法区别
2011-03-01 16:13:00下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1....这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 例子: html页面代码: Hello jquery代码:$("div").ht... -
DOM节点深度克隆函数cloneNode()用法实例
2020-12-12 05:59:21本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> [removed] function t(){ var nodeul = document.getElementsByTagName(... -
jQuery获取文本节点之 text()/val()/html() 方法区别 详细出处参考:...
2013-12-20 14:14:01下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 ...这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 例子: html页面代码:Hello jquery代码:$("div") -
js 递归查询所有的叶子结点_JS-递归获取当前节点全部指定类型的子节点
2021-02-01 07:00:36方法使用nodeType判断类型,在allChildNodes方法内建立递归函数将allCN封装在方法...}p中的纯文本节点p中的spanp中的em中的纯文本节点p中的em的i中的纯文本节点1p中的em的i中的spanp中的em的i中的纯文本节点2获取bod... -
节点
2018-10-19 20:52:33节点的类型: 元素节点、属性节点、文本节点 通常情况下, 操作属性节点直接通过 “元素节点.属性名” 的方式来读写属性值 而不是获取属性节点. 写 JS 代码的位置 2.1 具体位置在哪 2.2 window.onload 事件被触发的... -
XML DOM 获取节点值
2008-09-11 10:41:03nodeValue 属性用于获取节点的文本值。 getAttribute() 方法返回属性的值。 实例 下面的例子使用 XML 文件 books.xml。 函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。 获取元素的值 本例使用 ... -
Text 节点和 DocumentFragment 节点
2018-05-09 13:38:09我们通常可以使用父节点的firstChild, nextSibling等属性获取文本节点。 可以使用document.createTextNode()方法创建文本节点 浏览器提供了一个原生的Text构造函数, 它返回一个文本节点实例 // 空字符串 var ... -
使用refs获取节点_你想知道的关于 Refs 的知识都在这了
2021-01-05 01:50:23Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一... -
53-selenium 获取所有子节点下全部内容(selenium的xpath结合etree)
2020-02-02 10:54:42例如,需要获取,1年前项目发起这个文本内容。 首先,我们这个是通过selenium定位标签的,然后需要提取内容,虽然是同样是通过xpath定位的,但是提取文档时,却并不能直接使用xpath中的text()或者string()方法来... -
用ajax函数读取xml,然后解析XML.html.rar
2019-07-10 00:19:09用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点,获取id节点,获取节点文本,获取student下的email属性,构造HTML字符串,通过append... -
《关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事》
2020-11-29 21:06:19文章目录HTML DOM Element 对象HTML DOM 节点Element 对象Node Types节点类型 - 返回值HTML DOM querySelector() 方法语法参数值真实dom转换成虚拟dom思路注意点:文本节点的判断和节点文本的获取完整代码 ... -
XML DOM NODE LIST XML DOM 节点列表
2014-04-15 13:31:17节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。 实例 下面的例子使用 XML 文件 books.xml。 函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。 从第一个 元素获取文本 本例... -
python解析网页的三种方法
2019-12-16 23:58:00解析网页的两种方法1.1、使用正则表达式查找网页内容中的title内容1.2、使用Xpath解析网页1.2.1、Xpath常用表达式1.2.2、使用表达式定位head和title节点1.2.3、Xpath谓语常用的表达式1.2.4、使用谓语定位head和ul... -
DOM知识总结
2021-02-24 18:45:12获取生效的样式2.1 window.getComputedStyle()2.2 currentStyle2.3 自定义获取样式的函数DOM节点操作创建元素节点创建文本节点插入文档中删除节点 DOM 什么是DOM DOM: document object model 文档对象模 -
如何自己动手写一个jQuery的API
2020-04-25 17:46:26如何自己动手写一个jQuery的API 1.关于jQuery ...实现一个获取节点的API,并且拥有添加类名的方法,添加文本的方法,获取除自己的兄弟节点。 3.封装函数 3.1 获取节点 function(nodeOrSelector){ let nodes... -
jQuery的DOM操作
2019-02-27 10:38:37首先用工厂函数$()来创建节点(同时可以加入节点的文本内容和属性内容),再用append()把创建的节点加 到页面中去; 3.插入节点方法 append() 向匹配元素加入节点 $(A).append(B)把B加到A中 appe...
-
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
vue、react diff算法的差异
-
JavaScript 对象
-
C/C++反汇编解密
-
java进阶day2-java程序相关事项和idea安装
-
太极旗:韩国国旗-源码
-
用于全色度屏幕内容的混合色度采样率高效视频编码
-
01353-计算机安全技术-01353-复习资料.doc
-
MySQL 性能优化(思路拓展及实操)
-
react
-
@SelectProvider的运用
-
为什么要学习SpringBoot
-
MySQL 管理利器 mysql-utilities
-
socks5代理软件哪里有下载地址?
-
VMware vSphere ESXi 7 精讲/VCSA/VSAN
-
pytorch-1.7.1-py3.8_cuda11.0.221_cudnn8.0.5_0.tar.bz2
-
实现 MySQL 读写分离的利器 mysql-proxy
-
用Go语言来写区块链(一)
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
Linux基础优化与安全有哪些重点内容?