代码改变世界

js使用的一些实用技巧

2017-02-28 19:20  小诩  阅读(253)  评论(0编辑  收藏  举报
1、jquery中页面定时调用ajax方法
function SetContinueSend(param1,param2, func){
    func.call(null,param1,param2)
}
function add(param1,param2){
    var ssssss = document.getElementById("testTime");
    ssssss.innerHTML = param1+":"+param2;
}
setInterval("SetContinueSend(new Date().getMinutes(),new Date().getSeconds(), add)",5000);
2、绑定回车事件
$("#addSourceSubmitId").keydown(function (event) {
            if (event.keyCode == "13") {
                addSourceMonitor(0);
//                $(this).parent().parent().hide();
            }
});
3、处理后台返回对象
var str = {"ss":"xxx","dd":"yyy"};
var obj = eval("(" + str + ")");
alert(obj.ss);
4、jquery和dom对象的转换
var obj = document.getElementById("kid").value;
var $obj = $("#kid").val();

$obj = $(obj);
obj = $obj[0];
obj = $obj.get(0);
 
<scs>
function init(){
  alert("aaa");
}
function init(obj){
  alert("bbb" + "---" + arguments[2]);
}
init(1,2,3,4);
 
$("div").children("a").hide.prev("span").click(function(){
  $(this).nextAll().show().parent().siblings().find("a").hide();
});
prev() 获得相邻的前一个元素 (children后面会获得一组元素)
nextAll() 相当于 A后面的 ~ B(all标签)
siblings() 获取下面的全部兄弟元素,相当于 A ~ B(all标签)
7、html5中jQuery规定的属性写法
<input id="kid" data-options="" data-cnblogs-contact="" />
$("#kid").data("cnblogsContact");获取属性的值
8、跑马灯
$(function(){
  var newDiv = $("<div></div>").appendTo($("body"));
  newDiv.prop("id","divId");
  
  newDiv.html("<a href=''>未满18岁慎进</a>");

  newDiv.css({
    "border":"1px solid #999",
    "width":"100px",
    "height":"100px",
    "text-align":"center",// 水平居中
    "line-height":"100px",// 垂直居中
    "position":"relative"// 相对定位可以让元素改变在页面中的位置(left,top)
  });
  
  (document.)setInterval(changPosition(),10);

  var i = 0;
  var hFlag = 1;
  var wFlag = 1;

  fucntion changPosition(){
    // offset(100,100);能设置div的位置   offset().top获得了位置x坐标
    $("divId").offset(function(){
      var h = $(this).offset().top;
      var w = $(this).offset().left;
      if(( h + $(this).height() + 10 >= $(window).height() && hFlag == 1 ) || ( w <= 0 && hFlag == -1 )){
        hFlag *= -1;
      }
      if(( w + $(this).width() + 10 >= $(window).width() && wFlag == 1 )) || ( w <= 0 && wFlag == -1 )){
        wFlag *= -1;
      }
      return {
        top:$(this).offset().left + wFlag * 3,
        left:$(this).offset().top + hFlag * 3
      }
    });
  }
})
9、css和js中设置属性的不同
//js
span.css({
    "border":"1px solid #999",
    "width":"100px",
    "height":"100px",
    "text-align":"center",
    "line-height":"100px",
    "position":"relative"});
});

/*css*/
span{
    border:1px solid #999;
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    position:relative;
}
10、阻止href发送超链接请求:<a href="javascript:void(0)"></a>
11、ajax(w3c/xml/xmlDom/xmlHttpRequest)
function sendAjax(){
    //1、引擎
    var xmlHttp = new XMLHttpRequest();
    //2、回调
    xmlHttp .onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                alert(xmlHttp.responseText);
            }
        }
    }
    //3、连接
    xmlHttp.open("post",url);
    //设置请求头
    xmlHttp.setRequestHeader("content-type","application/www...");//来自<form enctype="">
    //4、发送
    xmlHttp.send("key=value&key2...");
}

12、