博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Javascript] 前端随笔
阅读量:4648 次
发布时间:2019-06-09

本文共 3607 字,大约阅读时间需要 12 分钟。

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

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());
}

参考连接:

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]")

参考:

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

参考:

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

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

参考:

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 -->

 

参考连接:

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

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

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

转载于:https://www.cnblogs.com/garinzhang/p/js_html_css_notes.html

你可能感兴趣的文章
[NOI2005]聪聪与可可(期望dp)
查看>>
POJ 3723
查看>>
springmvc3.2+spring+hibernate4全注解方式整合(一)
查看>>
Elgg网站迁移指南
查看>>
installshield 注册dll
查看>>
Sublime Text 3 及Package Control 安装(附上一个3103可用的Key)
查看>>
Get MAC address using POSIX APIs
查看>>
基于uFUN开发板的心率计(一)DMA方式获取传感器数据
查看>>
【dp】船
查看>>
oracle, group by, having, where
查看>>
⑥python模块初识、pyc和PyCodeObject
查看>>
Kibana:分析及可视化日志文件
查看>>
nodejs pm2使用
查看>>
cocos2d-x 3.10 PageView BUG
查看>>
装饰器的基本使用:用户登录
查看>>
CSS选择器总结
查看>>
mysql中sql语句
查看>>
head/tail实现
查看>>
sql语句的各种模糊查询语句
查看>>
vlc 学习网
查看>>