js一些常用的方法。

  • A+
所属分类:菜鸟听课

获取cookie:

 

  var cookies = document.cookie;
  var cookiesArray = cookies.split(';'); 

 

注意:如果后端设置了http only的话,有些cookie是无法通过这个方法获取到的。


通过jquery 请求json:

   $.getJSON(para).done(function(data){
        });

说明:para为所请求的uri,done里面的callback 使用来处理返回的data的。


通过js插入html元素:

    document.getElementById('showcases').value = "";
    
    var node = document.createElement('div'); 
    
    node.innerHTML = '<p id = "test" >test</p>';//add inner html to the html node

    node.setAttribute('id',product.nodeName);//set attribute to the html node
    
    $(node).addClass("team-member four columns");//add class attribute(s) to the html node
    $(node).css({"width":"200px","border-radiu": "3px","box-shadow": "0 1px 3px","margin": "0 22px 22px 0"}); //add style attribute to the html node(inline)
    document.getElementById('showcases').appendChild(node); 


js中for的用法

for (statement 1; statement 2; statement 3)
  {
  the code block to be executed
  }

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

例子:

for(var i=0;var<limit;i++)


js中for/in的用法:

例子:

var txt="";
var person={fname:"John",lname:"Doe",age:25}; 
for (var x in person)
  {
  txt=txt + person[x];
  }


js获取当前url的parameter:

function getUrlParam(name)
{
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

    var r = window.location.search.substr(1).match(reg);  //匹配目标参数

    if (r!=null) return unescape(r[2]); return null; //返回参数值


JS中判断JSON数据是否存在某字段的方法:

1.  !("key" in obj)

2.  obj.hasOwnProperty("key")


jquery 获取DOM子元素的方法:

 $("#test").children("p.testclass"); //get the "p" element(s) which class attribute is "testclass" and which parent id is "test" 

 

event.preventDefault()

description:If this method is called, the default action of the event will not be triggered.


一些正则表达式:

/^\d+(?=\.{0,1}\d+$|$)/

判断是否为正数。

/^(0|[1-9][0-9]*)$/

判断是否为正整数。


js 跨浏览器event handle 

说明:非IE内核的浏览器都会将event 传给 处理的方法,如果是IE的浏览器的话  需要通过window 对象读取。

function eventTest(nsEvent) {
  var theEvent = nsEvent ? nsEvent : window.event;//get event
  var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
  alert(locString);
}

停止事件冒泡(Stop Event Bubbling)

  方法:

 

function stopEvent(evnt) {
   if (evnt.stopPropagation) {
     evnt.stopPropagation();
   } else {
     evnt.cancelBubble = true;
   }
}

document.getElementById("first").onmousedown=function(evnt) {
  var theEvent = evnt ? evnt : window.event;
  alert("first element event");
  stopEvent(theEvent);
}

DOM Level Event Model(事件绑定)

object.addEventListener(event,eventFunction,boolean);//non-ie browser.无需清理内存。

event: the event such as "click","load",etc.

eventFuntion: the event handler funtion you wanna register .

boolean: if the value is true the event listener is treated as a bubble-up event,or it will be treated as an event-capturing model.

在IE中类似的方法为:

attachEvent(event,eventHandler)

跨浏览器的代码为:

window.onload = setup;
window.onunload = cleanup;

function setup(evnt) {
    var evtObject = document.getElementById("clickme");
    
    //检查对象模型
    if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
    else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
    else if (evtObject.onclick) evtObject.onclick=clickMe;    
}

/*清理
在 IE中,需要跟踪 window的 unload事件,然后调用 detachEvent方法清理,释放相应的内存
而 addEventListener方法使用的内存是无需清理的。
*/
function cleanup() {
    var evtObject = document.getElementById("clickme");
    if (evtObject.detachEvent) evtObject.detachEvent("onclick", clickMe);
}

function clickMe() {
    alert("clickMe");
}

 


可复用的夸浏览器事件注册方法:

function catchEvent(eventObj, event, eventHandler) {
   if (eventObj.addEventListener) {
       eventObj.addEventListener(event, eventHandler,false);
   } else if (eventObj.attachEvent) {
       event = "on" + event;
       eventObj.attachEvent(event, eventHandler);
   }
}
  • 我的微博
  • 这是微博的扫一扫
  • weinxin
  • 微信公众
  • 微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:53   其中:访客  53   博主  0

    • avatar RAW9426 7

      签到成功!签到时间:今日的下午6:52:54,每日打卡,生活更精彩哦!

      • avatar 液捕轮畏雍镁蟹捅即儋稻司克刀茸蟹刀雌 9

        签到成功!签到时间:今日的上午9:49:53,每日打卡,生活更精彩哦!

        • avatar 阑衣脱宦餐钢徒釉陌糖栽岸攀煽陶温淤簇 9

          签到成功!签到时间:今日的下午11:35:41,每日打卡,生活更精彩哦!