一. 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访问单页面即可。

二. jquery ajax请求接口

// 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字符串】

三. 常见需求:为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(); // 获取的是 当前元素的 索引值
});

四. 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值可以巧妙的将两者关联。
        });
    });
})

五. 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++;
     });
 });

六. forEachfor$.each()跳出循环区别比较

for 循环

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

forEach()

  1. 不能使用 continue 和 break ,可以使用 returnreturn false 跳出当次循环!
  2. 注意:使用 break 无法一次结束所有循环,可以用for循环作为替代,也可使用 Array.everyArray.some

$.each()

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

七. 参考链接

http://jquery.cuishifeng.cn


稚于最初
5 声望0 粉丝

好听的话


引用和评论

0 条评论