js常用和AJAX

JS项目常用

  1. 判断数据类型
    typeof(s) 字符串:"string",数字:"number";

  2. 找指定的子标签
    单个:$(order).find("i");
    多个:$(order).find("i").each (function(i,data) ....);

  3. 遍历指定class 元素
    $(".capital-order").each(function(i, data) {...}

  4. DOM获取value和name
    data.value data.name

  5. jquery获取value和name
    $().val() ;$().attr("name")

  6. jquery中attr和prop的区别
    对应DOM中attribute()和properties() attr获取的是原始的值,prop是结果,比如checked、selected、disabled attr获取到的是里面的值,而prop是true或者false

  7. 设置标签属性的值
    $().attr("key","value");

  8. 修改css的值
    $("").css("key","value");
    dom.style.${css名称}

  9. 获取/设置标签内容
    $("").html("");$("").text()
    dom.innerHTML dom.innerText

  10. 四舍五入
    Number(数值).toFixed(2)

  11. 转int
    parseInt(s)

  12. 跳转页面
    window.location.href=url;

  13. 追加
    append(text);

  14. 找出其他同类元素,除了自己
    $("").siblings()

  15. 把from里的有name标签的封装成对象
    $("form表单").serialize()

  16. 判断标签是否存在某个class
    $(i).hasClass("c-red")

  17. 隐藏光标,设置字体为红色
    text-shadow:0 0 0 red;color:transparent;

  18. 触发按钮事件
    $("#close").trigger("click");

  19. 显示/隐藏切换
    jq:$("p").hide(); $("p").show();
    js:ui.style.display="none"; ui.style.display="";
    其他:ui.style.visibility= "visible/hidden";

  20. 查询父标签
    $('#items1').closest('.parent1');
    $('#items1').parents('.parent1');

  21. 点击事件
    $("#strategy").trigger("click");

  22. 添加/删除class
    $("#").addClass();
    $("#").removeClass();

  23. AJAX

js原生方式:

  1. 创建XMLHttpRequest对象

    1
    2
    3
    4
    5
    if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    req = new XMLHttpRequest();
    }
  2. 与服务器建立连

    1
    2
    3
    4
    //method:get|post url:服务器相对或绝对路径  asynch:true|false 默认为true;
    req.open("post", "user",true);
    //Post提交方式需要设置Request头部信息
    req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. 发送请求

    1
    req.send("name=" + name + "&pwd=" + pwd);
  4. 设置回调函数

    1
    2
    3
    4
    5
    6
    //readyState 0未初始化 1正在加载 2已加载 3交互中 4响应完成  
    req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
    var text = req.responseText;
    }
    }

JQuery方式

方式1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
type:"get", //请求类型get/post
url:"goods", //待载入页面的URL地址
data:{"uId":v}, //待发送 Key/value 参数。
dataType:"json", //数据类型
error:function(data){
alert("出现错误"+data);
},
success:function(data,status){
//alert("调用成功");
},
beforeSend:function(req){
//alert("发送之前");
}

});

方式2:

1
2
3
4
5
6
7
$.get(url, [data], [callback], [type]);
//$.post()同上
//url:待载入页面的URL地址
//data:待发送 Key/value 参数。
//callback:载入成功时回调函数。
//timeout:超时时间
//type:返回内容格式,xml, html, script, json, text, _default。

方式3:

1
2
3
$.getJSON(url).done(function(data){
alert('请求成功!json数据:'+data);
});
lightquant wechat
欢迎您订阅灯塔量化公众号!