Jquery相关

1. Jquery 相关文档

• http://jquery.cuishifeng.cn

2. http-serve的安装和使用

http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs。在单个html页面以file://...文件地址路径运行时，当ajax请求接口出现跨域问题时候，可以使用http-server，提供服务去运行，类似于angular。

• 安装：直接通过 npm i http-serve -g 进行全局安装。
• 运行：进入项目路径，通过 http-serve -P http://10.110.25.140:8080 架起后端服务，( 备注：此处请求地址为后端服务)
• 访问：直接通过本地地址http://10.110.25.168:8080或者http://127.0.0.1:8080访问单页面即可。

3. jquery ajax请求接口demo

// ajax GET 请求demo
$.ajax({ 
    url: url_get,
    type: "get",
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    success: function (res) {
        console.log(res);
    },
    error:function(err){
        console.log(err)
    }
})

// ajax POST 请求demo
$.ajax({ 
    url: url_post,
    type: "POST",
    headers: {
        'Content-Type': 'application/json'  // 表示：传入参数的格式
    },
    dataType: "json",   // 表示：返回的格式是json！
    data: JSON.stringify({   // 根据传入参数限定的格式，把一个json对象转化为json字符串!
        agent: "123456789"
    }),
    success: function (rs) {
        console.log(rs)
    },
    error:function(err){
        console.log(err)
    }
});

// JSON.parse()【将一个json字符串转化成json对象】  
// JSON.stringify()【将一个json对象转化成json字符串】

4. 常见需求：为click 元素增加点击样式以及逻辑

<div class="changeMode">
    <div class="m-list-title">拼接画面</div>
</div>
<div class="changeMode">
    <div class="m-list-title">公证人</div>
</div>

$('.changeMode').bind('click', function () {
    $(this).addClass('click-border');
    $(this).siblings().removeClass('click-border');    // $("给定元素").siblings() 筛选出给定元素的所有同胞元素（除过本身）
    const ModeIndex = $(this).index(); // 获取的是 当前元素的 索引值
});

5. jquery siblings()用法与实例

• ("给定元素").siblings(".selected") 筛选给定的同胞同类元素（不包括给定元素本身）

// 选项卡 【点击当前选项卡，增加选中样式，展示内容，隐藏其他选项卡内容以及样式】
<ul id="menu">
    <li class="tabFocus">家居</li>
    <li>电器</li>
    <li>二手</li>
</ul>
<ul id="content">
    <li class="conFocus">我是家居的内容</li>
    <li>欢迎您来到电器城</li>
    <li>二手市场，产品丰富多彩</li>
</ul>

$(function() {
    $("#menu li").each(function(index) { //带参数遍历各个选项卡
        $(this).click(function() { //注册每个选卡的单击事件
            $("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
            $(this).addClass("tabFocus"); //增加当前选中项的样式
            //显示选项卡对应的内容并隐藏未被选中的内容
            $("#content li:eq(" + index + ")").show().siblings().hide();
            //#menu与#content在html层没有嵌套关联，但因为其ul序列相同，用index值可以巧妙的将两者关联。
        });
    });
})

6. jquery循环操作对象数组元素

<div id="div1">
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>

• 错误方式：不能用[ ]方式取jquery对象数组！纯js代码获取的DOM对象数组，可以用[ ]的方式获取数组元素。

 $(function() {
     var div_span = $("#div1 span");
     for( var i = 0; i < div_span.length; i++ ) {
         div_span.[i].html(i);
     }
 })

• 正确方式一： jquery的eq()方法

 for( var i = 0; i < div_span.length; i++ ) {
     div_span.eq(i).html(i);
 }

• 正确方式二： jquery的each()方法

$(function() {
     var div_span = $("#div1 span");
     var i = 0;
     div_span.each( function(){   // each() 遍历，$(this)获取的是jquery对象，直接用this ，获取的是dom元素。
         $(this).html(i);
         i++;
     });
 });

7. forEach、for、$.each()跳出循环区别比较

• for 循环

1. continue 结束本次循环，继续执行循环体！
2. break 结束所有循环！

• forEach()

1. 不能使用 continue 和 break ，可以使用 return 或 return false 跳出当次循环！
2. 注意：使用 break 无法一次结束所有循环，可以用for循环作为替代，也可使用 Array.every 或 Array.some。

• $.each()

1. return ture 跳出当次循环！
2. return false 跳出全部循环！