资讯专栏INFORMATION COLUMN

【EASYDOM系列教程】之定位页面元素

NotFound / 3154人阅读

摘要:对象提供了属性和方法实现定位页面元素功能,这也是的标准规范中对象的主要应用之一。是返回值,表示定位元素的集合,是一个集合。定位匹配选择器的第一个元素。方法定位页面元素所返回的集合就是静态集合。

Document 对象提供了属性和方法实现定位页面元素功能,这也是 DOM 的标准规范中 Document 对象的主要应用之一。

定位页面元素方法

目前 Document 对象提供实现定位页面元素的方法具有如下几种:

getElementById()方法:通过页面元素的 id 属性值定位元素。

getElementsByName()方法:通过页面元素的 name 属性值定位元素。

getElementsByTagName()方法:通过页面元素的元素名定位元素。

getElementsByClassName()方法:通过页面元素的 class 属性值定位元素。

querySelector()方法:通过 CSS 选择器定位第一个匹配的元素。

querySelectorAll()方法:通过 CSS 选择器定位所有匹配的元素。

接下来,我们就一一进行学习。

通过元素的 ID 属性值定位元素

HTML 页面元素的 id 属性的特点是唯一、不可重复的,所以通过这种方式定位的 HTML 页面元素也是唯一的。

其语法格式如下:

element = document.getElementById(id);

在上述语法中,id 是参数,表示所要定位元素的 id 属性值,是一个大小写敏感的字符串。element 是返回值,表示定位的元素,是一个 Element 对象。

值得注意的是: 如果 HTML 页面中不存在具有该 id 属性值的元素,则返回 null。

下面是使用 getElementById() 方法的示例代码:

var btn = document.getElementById("btn");
// 获取定位元素的 class 属性值
var className = btn.className;
// 添加 animate 动画样式
className += " animate";
// 将新的 class 属性值设置
btn.className = className;

上述代码通过 getElementById() 方法定位 HTML 页面中 id 属性值为 btn 的元素,并为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: getElementById()方法完整示例代码

通过元素的 name 属性值定位元素

其语法格式如下:

elements = document.getElementsByName(name);

在上述语法中,name 是参数,表示所要定位元素的 name 属性值,是一个大小写敏感的字符串。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。

下面是使用 getElementsByName() 方法的示例代码:

var elems = document.getElementsByName("btn");
// 循环遍历所有元素
for (var i=0; i

上述代码通过 getElementsByName() 方法定位 HTML 页面中 name 属性值为 btn 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: getElementsByName()方法完整示例代码

通过元素的元素名定位元素

其语法格式如下:

elements = document.getElementsByTagName(name);

在上述语法中,name 是参数,表示所要定位元素的元素名,符号”*”表示所有元素。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。

下面是使用 getElementsByTagName() 方法的示例代码:

var elems = document.getElementsByTagName("button");
// 循环遍历所有元素
for (var i=0; i

上述代码通过 getElementsByTagName() 方法定位 HTML 页面中元素名为 button 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: getElementsByTagName()方法完整示例代码

通过元素的 class 属性值定位元素

其语法格式如下:

elements = document.getElementsByClassName(names);

在上述语法中,names 是参数,表示所要定位元素的 class 属性值列表,class 名称通过空格分隔。

值得注意的是: names 参数可以是一个样式属性名称,也可以是多个样式属性名称。

elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。

下面是使用 getElementsByClassName() 方法的示例代码:

var elems = document.getElementsByClassName("btn");
// 循环遍历所有元素
for (var i=0; i

上述代码通过 getElementsByClassName() 方法定位 HTML 页面中 class 属性值为 btn 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: getElementsByClassName()方法完整示例代码

兼容 IE 8 及之前版本的浏览器

getElementsByClassName() 方法只支持 IE 9 版本及之后版本的浏览器。也就是说,该方法并不支持 IE 8 及之前版本的浏览器。

下图是不同浏览器的不同版本对 getElementsByClassName() 方法的支持情况:

由于国内的生产环境中,依旧存在使用 IE 8 及之前版本浏览器的情况。所以,我们需要自定义 getElementsByClassName() 方法解决浏览器的兼容问题。

function getElementsByClassName(element, names) {

}

上述自定义兼容方法接受两个参数,element 参数表示调用 getElementsByClassName() 方法的对象(目前为 Document 对象),names 参数表示所要定位元素的 class 属性值列表。

function getElementsByClassName(element, names) {
    // 检测 getElementsByClassName() 是否可用
    if (element.getElementsByClassName) {
        // 优先使用 W3C 规范
        return element.getElementsByClassName(names);
    }else {
        // 人为解决 IE 8 之前版本不兼容问题

    }
}

这里我们要优先使用 W3C 规范的方法。所以,需要先判断当前浏览器环境是否存在 getElementsByClassName() 方法。

如果存在,就使用原本的 getElementsByClassName() 方法。如果不存在,就使用自定义代码来实现。

function getElementsByClassName(element, names) {
    // 检测 getElementsByClassName() 是否可用
    if (element.getElementsByClassName) {
        // 优先使用 W3C 规范
        return element.getElementsByClassName(names);
    }else {
        // 人为解决 IE 8 之前版本不兼容问题
        
        // 获取所有后代元素节点
        var elements = element.getElementsByTagName("*");
        // 定义空数组
        var result = [];
        var element, classNameStr, flag;
        // 将样式名称改为数组类型
        names = names.split(" ");
        // 循环遍历所有元素节点
        for (var i=0; element = elements[i]; i++) {
              // 获取每个元素节点的样式名称
            classNameStr = " " + element.className + " ";
            // 开启开关
            flag = true; 
            // 循环遍历所有的样式名称
            for (var j=0, name; name = names[j]; j++) {
                // 判断当前元素节点的样式名称中是否包含指定的样式名称
                if (classNameStr.indexOf(" " + name + " ") == -1){
                    // 如果不包含,则关闭开关,并且结束循环
                    flag = false;
                    break;
                }
            } 
            // 判断当前元素节点是否包含指定样式名称
            if (flag) {
                // 如果包含,则将当前元素节点添加到数组中
                result.push(element);
            }
        } 
        // 返回数组(所有包含指定样式名称的元素节点)
        return result;
    }
}
通过 CSS 选择器定位元素

CSS 中的选择器可以很便利地定位 HTML 页面元素,DOM 的标准规范中也提供类似的方法。

querySelector(): 定位匹配选择器的第一个元素。

querySelectorAll(): 定位匹配选择器的所有元素。

querySelector() 方法

其语法格式如下:

element = document.querySelector(selectors);

在上述语法中,selectors 是参数,表示选择器,可以包含一个或多个 CSS 选择器,多个则以逗号分隔。element 是返回值,表示定位元素的集合,匹配的第一个元素。

下面是使用 querySelector() 方法的示例代码:

var btn = document.querySelector(’#btn");
// 获取定位元素的 class 属性值
var className = btn.className;
// 添加 animate 动画样式
className += " animate";
// 将新的 class 属性值设置
btn.className = className;

上述代码通过 querySelector() 方法定位 HTML 页面中 id 属性值为 btn 的元素,并为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: querySelector()方法完整示例代码

querySelectorAll() 方法

其语法格式如下:

elements = document.querySelectorAll(selectors);

在上述语法中,selectors 是参数,表示选择器,可以包含一个或多个 CSS 选择器,多个则以逗号分隔。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。

下面是使用 querySelectorAll() 方法的示例代码:

var elems = document.querySelectorAll("button");
// 循环遍历所有元素
for (var i=0; i

上述代码通过 querySelectorAll() 方法定位 HTML 页面中元素名为 button 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。

完整示例代码请点击右边的链接: querySelectorAll()方法完整示例代码

节点集合 NodeList

NodeList 是一组元素节点的集合,每个节点具有相应的索引值(从 0 开始的数字,类似于数组)。

元素节点在 NodeList 集合中存储的顺序与它们在 HTML 页面中的顺序保持一致。

NodeList 的属性 length 表示 NodeList 对象中包含的节点个数。方法 item(index) 表示返回 NodeList 对象中指定索引的节点。如果索引值越界,则返回 null。

NodeList 集合分为两种: 动态 NodeList 和静态 NodeList。

动态的 NodeList 集合

所谓动态的 NodeList 集合,就是如果文档中的节点树发生变化,则已经存在的 NodeList 对象也可能会变化。

以下几种定位 HTML 页面元素的方法返回的都是动态的 NodeList 集合。

getElementsByName()方法:通过页面元素的 name 属性值定位元素。

getElementsByTagName()方法:通过页面元素的元素名定位元素。

getElementsByClassName()方法:通过页面元素的 class 属性值定位元素。

我们可以通过以下示例代码,体验动态 NodeList 集合的特点:

var elems = document.getElementsByTagName("button");
console.log(elems.length);// 输出 3

// 添加一个新的button按钮
var btn = document.createElement("button");
btn.setAttribute("class","button");
var text = document.createTextNode("New Button");
btn.appendChild(text);

var div = document.getElementsByClassName("button-group")[0];
div.appendChild(btn);

console.log(elems.length);// 输出 4

上述代码通过 getElementsByTagName() 方法定位 HTML 页面中所有的 button 元素,测试打印 button 元素的个数是 3 个。

然后,我们创建一个新的 button 元素,并且将其添加到 HTML 页面中,再测试打印 button 元素的个数是 4 个。

值得注意的是: 我们在第二次测试打印 button 元素的个数时,并没有重新定位 HTML 页面中的 button 元素。

完整示例代码请点击右边的链接: 动态 NodeList 集合完整示例代码

静态 NodeList 集合

所谓静态 NodeList 集合,就是对文档对象模型的任何改动都不会影响集合的内容。

querySelectorAll() 方法定位 HTML 页面元素所返回的 NodeList 集合就是静态 NodeList 集合。

我们可以通过以下示例代码,体验静态 NodeList 集合的特点:

var elems = document.querySelectorAll("button");
console.log(elems.length);// 输出 3

// 添加一个新的button按钮
var btn = document.createElement("button");
btn.setAttribute("class","button");
var text = document.createTextNode("New Button");
btn.appendChild(text);

var div = document.getElementsByClassName("button-group")[0];
div.appendChild(btn);

console.log(elems.length);// 输出 3

上述代码通过 querySelectorAll() 方法定位 HTML 页面中所有的 button 元素,测试打印 button 元素的个数是 3 个。

然后,我们创建一个新的 button 元素,并且将其添加到 HTML 页面中,再测试打印 button 元素的个数依旧是 3 个。

完整示例代码请点击右边的链接: 静态 NodeList 集合完整示例代码

定位页面元素属性

Document 对象也提供了一些属性,来定位 HTML 页面中一些比较特殊的元素。

documentElement:获取 HTML 页面中的 元素。

head:获取 HTML 页面中的 元素。

title:获取 HTML 页面中的 </b> 元素。</p></p> <p><p>body:获取 HTML 页面中的 <b><body></b> 元素。</p></p> <p><p>links:获取 HTML 页面中的所有 <b><a></b> 元素。</p></p> <p><p>images:获取 HTML 页面中的所有 <b><img></b> 元素。</p></p> <p>我们可以定义一个包含以上元素的 HTML 页面,然后通过以下示例代码进行测试:</p> <pre>console.log(document.documentElement); console.log(document.head); console.log(document.body); console.log(document.title); console.log(document.links); console.log(document.images);</pre> <p>本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。</p> <p>本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVSpaA?w=922&h=302");</script></p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="系列之" href="https://www.ucloud.cn/yun/tag/xiliezhi/">系列之</a> <a style="width:120px;" title="系列之二" href="https://www.ucloud.cn/yun/tag/xiliezhier/">系列之二</a> <a style="width:120px;" title="架构之坑系列" href="https://www.ucloud.cn/yun/tag/jiagouzhikengxilie/">架构之坑系列</a> <a style="width:120px;" title="元素定位" href="https://www.ucloud.cn/yun/tag/yuansudingwei/">元素定位</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/84063.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/84062.html">上一篇:js面向对象基础</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/84064.html">下一篇:Navigation Timing获取页面加载各个阶段所需时间</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/87330.html"><b>【<em>EASYDOM</em><em>系列</em><em>教程</em>】<em>之</em><em>定位</em><em>页面</em><em>元素</em></b></a></h2> <p class="ellipsis2 good">摘要:对象提供了属性和方法实现定位页面元素功能。定位匹配选择器的第一个元素。是返回值,表示定位元素的集合,是一个集合。下面是使用方法的示例代码循环遍历所有元素上述代码通过方法定位页面中元素名为的元素,并遍历所有得到的元素,为其元素的属性添加样式。 Element 对象提供了属性和方法实现定位页面元素功能。该对象与 Document 对象提供的属性和方法实现定位页面元素功能的区别在于,Docu...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1030.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001030.jpg" alt=""><span class="layui-hide64">MartinDai</span></a> <time datetime="">2019-08-21 12:00</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/83914.html"><b>【<em>EASYDOM</em><em>系列</em><em>教程</em>】<em>之</em>DOM 树结构</b></a></h2> <p class="ellipsis2 good">摘要:简单来说,节点作为树结构中的连接点,最终构成了完整的树结构。节点树结构通过节点概念,我们可以将原本的树结构改成节点树结构进行表示。节点之间的关系中的表示模型,也可以用来表示节点树结构中节点之间的关系。值得注意的是和元素并不是兄弟关系。 DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构。 例如下面这段代...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1017.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001017.jpg" alt=""><span class="layui-hide64">nemo</span></a> <time datetime="">2019-08-20 17:50</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/91737.html"><b>【<em>EASYDOM</em><em>系列</em><em>教程</em>】<em>之</em>获取内联样式</b></a></h2> <p class="ellipsis2 good">摘要:回顾什么是内联样式所谓内联样式,就是通过页面元素的属性为当前元素定义样式。对象提供的属性和方法可以帮助我们获取样式的具体内容。遍历对象由于对象具有属性,返回该对象的属性的数量。方法通过获取的样式属性名,这种方式也可以通过方式进行替换。 回顾什么是内联样式 所谓内联样式,就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。 以下代码示例,就是通过 style 属...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1087.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001087.jpg" alt=""><span class="layui-hide64">xiaodao</span></a> <time datetime="">2019-08-22 11:05</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/87186.html"><b>【<em>EASYDOM</em><em>系列</em><em>教程</em>】索引</b></a></h2> <p class="ellipsis2 good">摘要:系列教程是一套免费开源,任何人都可以免费学习分享,甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始,我们先来了解是什么的作用,以及浏览器的支持是怎么样的。 《EASYDOM》系列教程是一套免费、开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。 本文是这套系列教程的索引(也就是目录): 第一回 DOM 介绍 在最开始,我...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-306.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000306.jpg" alt=""><span class="layui-hide64">yanwei</span></a> <time datetime="">2019-08-21 11:51</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/87129.html"><b>【<em>EASYDOM</em><em>系列</em><em>教程</em>】<em>之</em>Document 对象介绍</b></a></h2> <p class="ellipsis2 good">摘要:对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一,而对象又是继承于对象。 Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象提供了访问和更新 HTML 页面内容的属性和方法。 Document 对象的作用 Document 对象作为 DOM 访问和...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1499.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/14/small_000001499.jpg" alt=""><span class="layui-hide64">JiaXinYi</span></a> <time datetime="">2019-08-21 11:48</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1509.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001509.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1509.html" rel="nofollow">NotFound</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1509)" id="attenttouser_1509" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1509.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123768.html">SpringCloud升级之路2020.0.x版-36. 验证断路器正确性</a></h3> <p>阅读 3468<span>·</span>2021-11-18 10:07</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122867.html">SpartanHost:高性能AMD Ryzen 3950X处理器的KVM VPS补货,1核/512</a></h3> <p>阅读 1540<span>·</span>2021-11-04 16:08</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122822.html">GigsGigsCloud:马来西亚VPS,1核500M内存/15G SSD/30M带宽,$6.8/</a></h3> <p>阅读 1481<span>·</span>2021-11-02 14:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122054.html">SpartanHost西雅图E5系列VPS补货,10Gbps端口,NVMe硬盘,月付8折</a></h3> <p>阅读 1067<span>·</span>2021-10-09 09:59</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119583.html">LetBox:$38.5/年/2核/2GB内存/30GB NVMe+256GB空间/10TB流量/1</a></h3> <p>阅读 815<span>·</span>2021-09-08 10:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119395.html">如何抓取http请求/拦截器用法</a></h3> <p>阅读 1019<span>·</span>2021-09-07 09:59</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117597.html">快杰云主机 SSH登录缓慢的排查和解决</a></h3> <p>阅读 933<span>·</span>2019-12-27 11:56</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117503.html">第三天</a></h3> <p>阅读 925<span>·</span>2019-08-30 15:56</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6> <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>