一. 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++;
});
});
六. forEach
、for
、$.each()
跳出循环区别比较
for 循环
-
continue
结束本次循环,继续执行循环体! -
break
结束所有循环!
forEach()
- 不能使用 continue 和 break ,可以使用
return
或return false
跳出当次循环! - 注意:使用 break 无法一次结束所有循环,可以用
for循环
作为替代,也可使用Array.every
或Array.some
。
$.each()
-
return ture
跳出当次循环! -
return false
跳出全部循环!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。