分类 Javascript 下的文章

添加二维数组

var tArray = new Array();  //先声明一维
for(var k=0;k<i;k++){    //一维长度为i,i为变量,可以根据实际情况改变

tArray[k]=new Array(); //声明二维,每一个一维数组里面的一个元素都是一个数组;

for(var j=0;j<p;j++){ //一维数组里面每个元素数组可以包含的数量p,p也是一个变量;

tArray[k][j]=""; //这里将变量初始化,我这边统一初始化为空,后面在用所需的值覆盖里面的值
}
}

JavaScript decodeURI() 函数

定义和用法

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

 decodeURI() 对编码后的 URI 进行解码


实例

在本例中,我们将使用 decodeURI() 对一个编码后的 URI 进行解码:


<script type="text/javascript">

var test1="http://www.endige.net/你好/"

document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

</script>



输出:


http://www.endige.net/%E4%BD%A0%E5%A5%BD/

http://www.endige.net/你好/

vue.js将unix时间戳转换为自定义时间格式

本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式

模板语法(filter)



var vm = new Vue({
    el: '#app',
    data: {
        data:data,
    },
    filters:{
        time: function (value) {//value为13位的时间戳
           // function add0(m) {
            //    return m < 10 ? '0' + m : m
           // }
            //var time = new Date(parseInt(value*1000));
            //var y = time.getFullYear();
           // var m = time.getMonth() + 1;
            //var d = time.getDate();
        var date = new Date(parseInt(value*1000));
        var Y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate(),
        H = date.getHours(),
        i = date.getMinutes(),
        s = date.getSeconds();
        if (m &lt; 10) {
        m = '0' + m;
        }
        if (d &lt; 10) {
        d = '0' + d;
        }
        if (H &lt; 10) {
        H = '0' + H;
        }
        if (i &lt; 10) {
        i = '0' + i;
        }
        if (s &lt; 10) {
        s = '0' + s;
        }
         var t = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s; //获取时间格式 2017-01-03 10:13:48
        //var t = Y + '-' + m + '-' + d;    //获取时间格式 2017-01-03
        return t;

        //return y + '.' + add0(m) + '.' + add0(d);
    }
},

})


<!-- html代码 -->
<!-- 在需要转换格式的位置使用名为time的vue.js filter -->
<td>{{tab2.fb1 | time}}</td>


jquery ajax 的几种写法

第一种:

 $.ajax({
        type:"GET",
        url:"php.php",
        data:{php:"100",name:"jquery"},
        success:function(data,str){
        $("div#asd").html(data);
        }
    });

第二种写法:

jQuery.get(url,data,callback,type)
jQuery.post(url,data,callback,type)

参数:
    url 待载入页面的url地址
    data 待发送KEY/VALUE 参数
    callback 载入成功时回调函数
    type 返回格式内容XML HTML SCRIPT JSON TEXT _DEFAULT

类似下面模式
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: txt});

第三种最简单写法:

jQuery (selector).load(url,data,callback)
$(document).ready(function(){
  $(“button").click(function(){
  $('Div').load(‘php100.php‘,{name:’123’},function(){});
  });
});

js中const,var,let区别

1.const定义的变量不可以修改,而且必须初始化。

const b = 2;//正确
 // const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出 
2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

var a = 1;
// var a;//不会报错
 console.log('函数外var定义a:' + a);//可以输出a=1
 function change(){
 a = 4;
 console.log('函数内var定义a:' + a);//可以输出a=4
 } 
 change();
 console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

Vue.js 入门教程

什么是 Vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。

Vue.js 安装

独立版本

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

创建第一个 Vue 应用

接下来我们创建第一个 Vue 应用。

View 层 - HTML 代码如下:

<div id="app">
  {{ message }}
</div>

Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后):

new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

- 阅读剩余部分 -

Javascript实现前端单页面路由的方法

WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁。同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。


前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。



HTML

页面中有一个导航菜单ul,和一个div#result用来显示结果,当点击导航菜单时,#result中会显示不同的结果内容。

<ul>  
    <li><a href="#/">首页</a></li>  
    <li><a href="#/product">产品</a></li>  
    <li><a href="#/server">服务</a></li>  
</ul> 
<div id="result"></div>
<script src="./router.js"></script>

JAVASCRIPT

说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。

function Router(){ 
    this.routes = {}; 
    this.curUrl = ''; 
this.route = function(path, callback){ 
    this.routes[path] = callback || function(){}; 
}; 

this.refresh = function(){ 
    this.curUrl = location.hash.slice(1) || '/'; 
    this.routes[this.curUrl](); 
}; 

this.init = function(){ 
    window.addEventListener('load', this.refresh.bind(this), false); 
    window.addEventListener('hashchange', this.refresh.bind(this), false); 
} 

}

上面代码中路由系统Router对象实现,主要提供三个方法:

init 监听浏览器 url hash 更新事件。

route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新。

refresh 执行当前url对应的回调函数,更新页面。

Router调用方式如下:点击触发 url 的 hash 改变,并对应地更新内容,运行后你会发现每次点击菜单时,#result中会变换背景色和内容。

var R = new Router(); 
R.init(); 
var res = document.getElementById('result'); 

R.route('/', function() {
res.style.background = 'blue';
res.innerHTML = '这是首页';
});
R.route('/product', function() {
res.style.background = 'orange';
res.innerHTML = '这是产品页';
});
R.route('/server', function() {
res.style.background = 'black';
res.innerHTML = '这是服务页';
});

以上为一个前端路由的简单实现,实际应用中,应该对hash进行正则匹配处理,以满足大量url的应用,同时增加ajax异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。


URL中“#” “?” &“”号的作用

1. #

    10年9月,twitter改版。一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username
这是主流网站第一次将"#"大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。


一、#的涵义
#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。
为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print">。

- 阅读剩余部分 -