zoukankan      html  css  js  c++  java
  • [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: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), 即弹出框,引用以下

    <link href="/css/bootstrap.css" rel="stylesheet">

    <script src="/js/jquery-2.1.3.min.js" type="text/javascript"></script>

    <script src="/js/bootstrap.js" type="text/javascript"></script>

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

       data-target="#myModal">

       开始演示模态框

    </button>

     

    <!-- 模态框(Modal) -->

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

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

       <div class="modal-dialog">

          <div class="modal-content">

             <div class="modal-header">

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

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

                      &times;

                </button>

                <h4 class="modal-title" id="myModalLabel">

                   模态框(Modal)标题

                </h4>

             </div>

             <div class="modal-body">

                在这里添加一些文本

             </div>

             <div class="modal-footer">

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

                   data-dismiss="modal">关闭

                </button>

                <button type="button" class="btn btn-primary">

                   提交更改

                </button>

             </div>

          </div><!-- /.modal-content -->

    </div><!-- /.modal -->

     

    参考连接: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

  • 相关阅读:
    《算法导论》读书笔记(五)
    《算法导论》读书笔记(四)
    《算法导论》读书笔记(三)
    《算法导论》读书笔记(二)
    《算法导论》读书笔记(一)
    Posix消息队列
    管道和FIFO
    linux内核数据结构之kfifo
    linux内核数据结构之链表
    Mybatis XML 映射配置文件 -- 熟悉配置
  • 原文地址:https://www.cnblogs.com/garinzhang/p/js_html_css_notes.html
Copyright © 2011-2022 走看看