[Javascript] 前端随笔

做一个小功能时使用到的一点技术点记录下来：

1.在js中使用定时器：

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

方法

实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：

showTime();
function showTime()
{
var today = new Date();
alert( " The time is: " + today.toString());
setTimeout( " showTime() " , 5000 ); // 每隔5秒调用 showTime()，但是可以在函数中间中断
}

一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间。

setInterval( " showTime() " , 5000 ); // 每隔5秒执行showTime()
function showTime()
{
var today = new Date();
alert( " The time is: " + today.toString());
}

参考连接：http://jun1986.iteye.com/blog/1025965

setTimeout实现页面加载后一段时间内执行某一方法：

    myInterval();
    function myInterval() {
        if($("#loadFinishedFlag").val() != "success") {
            setTimeout(myInterval, 500);
        } else {
            executePerSecond(0);
        }
    }

    function executePerSecond(executeSqlNumber) {
        var length = $("[id^='projectSqlResult']").length;
        if(executeSqlNumber < length) {
            var result = $("[id^='projectSqlResult']")[executeSqlNumber];
            var projectId = $(result).attr("id").split("_")[1];
            var sqlId = $(result).attr("id").split("_")[2];
            $(result).text("SQL正在执行中,请稍等……");
            executeSqlByAjax(projectId, sqlId);
            executeSqlNumber++;
            setTimeout(function () {
                executePerSecond(executeSqlNumber);
            }, parseInt($("#executeSqlInterval").val()) * 1000);
        }
    }

执行带参数的setTimeout，setTimeout(function() {method(params);}, 1000)

2.在js中取得字符串后转json的两种方式：

-转换方式需要加(): testJson = eval("(" + testJson + ")");

-使用jquery.parseJSON()方法

3.ajax调用：

$.ajax({

type:"post", //请求方式

url:"./test", //发送请求地址

data:{ //发送给数据库的数据

username:$("#username").val(),

content:$("#content").val()

//请求成功后的回调函数有两个参数

success:function(data,textStatus){

$("#resText").html(data);

}

});

4.jquery select option操作：

$("#selectID option:last")

$("#selectID option[index=1]")

$("#selectID option[value=4]")

$("#selectID option[text=5]")

参考：http://www.cnblogs.com/gengaixue/archive/2011/07/28/2119040.html

5.在某个元素里面添加子元素，比如<div>abc...这里添加</div>，使用$(element).append(subElement)，元素之前添加$(element).before, 开头：$(element).prepend, 结尾$(element).after

参考：http://www.cnblogs.com/william-lin/archive/2012/08/12/2635402.html

6.取某个元素的值使用$(element).val()，取/设值元素属性值$(element).attr("name", value)，

7.JQ模糊选择器：$("[id^='abc']")找id以abc开头的，

参考：http://blog.163.com/09zzy@126/blog/static/711976652012411102034165/

8.readonly, disabled属性设置：$().attr("readonly", "readonly"), $().attr("disabled", "disabled")

9.bootstrap模态框的使用(Modal), 即弹出框，引用以下

<button class="btn btn-primary btn-lg" data-toggle="modal"

data-target="#myModal">

开始演示模态框

</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel" aria-hidden="true">

<button type="button" class="close"

data-dismiss="modal" aria-hidden="true">

</button>

模态框（Modal）标题

</h4>

</div>

在这里添加一些文本

</div>

<button type="button" class="btn btn-default"

data-dismiss="modal">关闭

</button>

提交更改

</button>

</div>

</div>

</div>

参考连接：http://outofmemory.cn/bootstrap/tutorial/bootstrap-modal-plugin.html

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

10.删除数据：delete，使用where条件，删除所有、使用truncate删除所有

11.对某个元素的子元素查的：$(element).find("label")，查找element下面的label子元素

12.ajax提供数据时遇到中文乱码：在客户端使用encordURI("文字")，在服务器端使用URLDecoder.decode("文字", "UTF-8")，使用ajax请求时提交数据可能默认使用的UTF-8