Author: admin

document.getElementsByClassName与document.getElementById

admin web前端 暂无评论 654 浏览

document.getElementsByClassName()与document.getElementById()，大家应该对这两个方法都非常的不能再熟悉的js方法了，就是获取DOM元素嘛，有什么难的。今天我在这两个简单的方法上面犯了错误。

我页面中有一个按钮button，把按钮的结构代码直接贴上来吧，说的不直观，直接看代码最好了。

<button type="button" class="btn" id="btn-commit">提交</button>

我要的效果是获取到这个按钮后然后给按钮绑定一个点击事件，看到这个要求，多简单啊，我就直接写代码了：

document.getElementsByClassName("btn").onclick = function(){
    console.log(333);
};

代码写完后，发现并不生效。我反复检查代码，代码没有写错，语法也没有问题。最后我就开始检查事件绑定的方法，也是没有问题。也检查不出问题，这个问题已经彻底把我给打懵了。

重新写段代码，然后通过ID获取元素并绑定事件，结果一次成功。

<button id="btn-focus" class="btn">聚焦</button>
var btnFocus = document.getElementById("btn-focus");
btnFocus.onclick = function(){
    console.log(12);
};

我把获取元素的方式由id更改为class，效果就又不行了，这下我大概找到了问题的原因了，分别打印了下：

document.getElementsByClassName("btn")和document.getElementById("btn-commit");

console.log(document.getElementsByClassName("btn"));
console.log(document.getElementById("btn-commit"));

执行结果，贴个图片吧：

从这里看到了，通过getElementsByClassName()获取到的元素是一个元素的集合，通过getElementById()获取到的元素就是一个元素，难怪我通过getElementsByClassName()绑定事件没有响应呢，这就是原因。

本来挺简单的2个方法，由于疏忽，也不能说是疏忽大意，而是原来就没有注意到这个细节吧，之前对于DOM的操作都严重的依赖于jQuery，导致一些基本功给落下了，今天酿成了苦果。还好的是发现了这个问题，这个小小的教训，希望能给自己长个记性吧。再就是不能脱离基本功去严重的依赖工具库。

…
Read more

JavaScript，jQuery 的css方法无效是怎么回事

admin web前端 暂无评论 1,456 浏览
今天遇到一个问题。
试图通过jquery，给某节点增加css属性，使其实现预期的样式表现。
但不生效。
但又用了别的方式实现。

不生效的写法:

//这种写法不生效。
 $dom.find("p.text-p").css("-webkit-line-clamp",3) ;
 //或
  $dom.find("p.text-p").css({"-webkit-line-clamp":3}) ;

 

生效了的写法：

	//此处这个3，可以是个变量。
	$dom.find("p.text-p").attr("style", "-webkit-line-clamp:" + 3);

 

注，这种情况只是css()方法对于某些特殊的css属性不生效，一般属性还是可以的。

猜测是直接改写dom结构，相当于写成了inline样式。即
<p style="xxxxxx">yyyy</p>
这样的形式。

 

…
Read more

js中如何进行字符串替换

admin web前端 暂无评论 4,577 浏览

js中进行字符串替换的方法：1、使用正则表达法，语法为【str.replace("需要替换的字符串"，"新字符串")　】；2、使用常规的替换方法，语法为【str.replace(/需要替换的字符串/g，"新字符串")】。

 

相关图文推荐：js教程

js中进行字符串替换的方法：

两种方法：正则&常规

str.replace("需要替换的字符串"，"新字符串")

str.replace(/需要替换的字符串/g，"新字符串")

比如：

1、

"yyyy-MM-dd-hh-mm-ss".replace("-","/")

结果如下：

 "yyyy/MM-dd-hh-mm-ss"

2、

"yyyy-MM-dd-hh-mm-ss".replace(/-/g,"/")

结果如下：

"yyyy/MM/dd/hh/mm/ss"

综上：

常规的替换只会替换第一次匹配的字符，正则可替换全部

 

…

Read more

【JS】fetch() 用法 取代ajax

admin web前端 暂无评论 661 浏览

文章目录

fetch 基本使用

  • Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求。
  • 目前还没有被所有浏览器支持，如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。
  • fetch api是基于promise的设计，返回的是Promise对象，它是为了取代传统xhr的不合理的写法而生的。
  • 没有fetch的时候，我们是这样获取异步资源的：
//发送一个get请求是这样的:

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest(
…
    
Read more

js实现复制功能

admin web前端 暂无评论 593 浏览

js实现复制功能

 

一、具体场景

前端有时需要实现点击按钮复制的功能，这个时候就不能让用户去手动选择内容右键复制了。

二、实现方式

1. document.execCommand

（1）具体实现

复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。这就需要借助输入框来实现对文本的选中。
具体案例：

  <button type="button" onclick="theCopy()">复制</button>
  <label style="display: block">
    <textarea id
…
Read more

jquery点击事件 无效 对于动态生成出来的内容，jquery点击事件无效的问题

admin web前端 暂无评论 561 浏览

最近前端在做一个功能，

功能的内容是点击A按钮，生成内容1，在内容1中点击B按钮，生成内容2，在内容2中点击C按钮，返回最初界面样式。

整个jquery的代码，全部使用了 .click(function(){} 层层嵌套的结构。在这种click()点击事件支撑下的动态内容生成，依然没有问题。
但是“ .click(function(){} 层层嵌套的结构”会出现一个问题，就是最后一步，返回最初界面后，再去点击A按钮，就不起作用了。…

Read more

js 判断字符串中是否包含某个字符

admin web前端 暂无评论 551 浏览

方法一(推荐使用): indexOf()

indexOf() 方法：返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

var str = "LiHeErNAN";
console.log(str.indexOf("A") != -1 );  // true

方法二:match()

match() 方法：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

var str = "abcd";
var reg = RegExp(
…
Read more