javascript

使用js进行string和json之间转换的方法

一、string类型转换成Json对象方法

 1、Javascript支持的转换方式:eval

          eval('(' jsonstr ')');

注意:需要在json字符外包裹一对小括号,ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象,但不推荐这些方式;缺点是不安全,eval会执行json串中的表达式。

2、浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:

JSON.parse(jsonstr); //可以将json字符串转换成json对象

相反浏览器也提供了将Json对象转换成string类型的方法:

JSON.stringify(jsonstr);//可以将json对象转换成json对符串

3、jQuery插件支持的转换方式

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

4、JSON官方的转换方式

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;
可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

二、Json对象转换成String字符串方法

  上面提到的浏览器支持的转换方式JSON.stringify(str):

JSON.stringify(jsonstr);//可以将json对象转换成json对符串

JavaScript 弹出框(警告框、确认框、提示框)

JavaScript 有三种类型弹出框:警告框、确认框、提示框。

一、警告框

如果要确保信息传递给用户,通常会使用警告框。当警告框弹出时,用户将需要单击“确定”来继续

基础语句

		<script>
			//警告框
			window.alert("成功弹出警告框!"); //window.alert()方法可以不带window前缀。
			//alert("成功弹出警告框!")
		</script>

 

显示结果
在这里插入图片描述

二、确认框

如果您希望用户验证或接受某个东西,则通常使用“确认”框。当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。

基础语句

		<script>
			//确认框
			//原理:如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。
			
			window.confirm("请选择 确定 

document.getElementsByClassName与document.getElementById

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,导致一些基本功给落下了,今天酿成了苦果。还好的是发现了这个问题,这个小小的教训,希望能给自己长个记性吧。再就是不能脱离基本功去严重的依赖工具库。

js中如何进行字符串替换

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"

综上:

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

 

【JS】fetch() 用法 取代ajax

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(

js实现复制功能

js实现复制功能

 

一、具体场景

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

二、实现方式

1. document.execCommand

(1)具体实现

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

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

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

最近前端在做一个功能,

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

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

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

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

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

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

方法二:match()

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

var str = "abcd";
var reg = RegExp(