1.DOM操作;
1.1查找节点
<div id="dom_1">1.id选择器</div>
<script>
$('#dom_1').css('color','red');
</script>
<div class="dom_2">2.类选择器</div>
<script>
$('.dom_2').css('color','green');
</script>
<div>3.父、子、兄弟节点查找</div>
<ul class="dom_3">
<li>第1个子节点</li>
<li class="child_2">第2个子节点</li>
<li>第3个子节点</li>
</ul>
<script>
$('.dom_3').find('.child_2').css('color','red');//查找已知类名子节点
var len = $('.dom_3').children().length;
$(".dom_3 li").eq(2).css({"color":"green"});//查找已知索引子节点,索引从0开始
$('.child_2').parent().css({"font-size":"26px"});//查找父节点
$('.child_2').siblings().css('background-color','blue'); //当前元素所有的兄弟节点
$('.child_2').prev().css('background-color','blue'); //当前元素前一个兄弟节点
$('.child_2').prevAll().css('background-color','blue'); //当前元素之前所有的兄弟节点
$('.child_2').next().css('background-color','blue'); //当前元素之后第一个兄弟节点
$('.child_2').nextAll().css('background-color','blue'); //当前元素之后所有的兄弟节点
</script>
1.2删除节点
<div>4.删除节点</div>
<ul class="dom_4">
<li title="one">第1个子节点</li>
<li class="child_2" title="two">第2个子节点</li>
<li title="three">第3个子节点</li>
</ul>
<script>
var $li=$(".dom_4 li:eq(1)").remove();//删除ul节点中第2个元素节点
$(".dom_4").append($li);//把刚删除的元素节点从新添加到ul元素中去
$(".dom_4 li").remove("li[title!=three]");//将ul元素下title属性不等于"three"的li元素删除
</script>
1.3插入节点
<div>5.插入节点</div>
p:<p class="dom_5"></p>
<script>
$(".dom_5").append("<span>A</span>");
$("<span>B</span>").appendTo(".dom_5");
$(".dom_5").prepend("<span>C</span>");//前置追加
$("<span>D</span>").prependTo(".dom_5");
$(".dom_5").after("<span>E</span>");
$("<span>F</span>").insertAfter(".dom_5");
$(".dom_5").before("<span>G</span>");
$("<span>H</span>").insertBefore(".dom_5");
</script>
1.4替换节点
<div>6.替换节点</div>
<p class="dom_6">元素:<span>原来文本</span></p>
<script>
$(".dom_6 span").replaceWith("<strong>替换文本</Strong>");
</script>
//另:替换文本内容可以使用.html()和.text()方法,但是尽量少用.html()方法,会使网站容易受到XSS攻击
2.数据收集;
说明:form表单中当有button时,就算type没有设置为submit,也会把这个按钮当成提交按钮
并在点击时触发form提交事件,阻止表单默认提交可以:
<form name="enquiry-user" onsubmit="return false;"></form>
//获取单个输入框的值
var cellphone = $('.cellphone').val();
//设置input的值
$('.cellphone').val(‘123456789’);
//type=hidden
<input type="hidden" class="itemId">
//document.querySelector(html5选择器)收集数据
var form, inputArray, i, params, e;
form = document.querySelector("#enquiry-user");
inputArray = form.querySelectorAll('.field');
params = {};
for (i = 0; i < inputArray.length; i++) {
e = inputArray[i];
params[e.name] = e.value;
}
console.log(params);
//serializeArray收集数据
function form2Json(){
var arr_all = $("#myForm").serializeArray();
var json = {};
for (var i = 0; i < arr_all.length; i++) {
var item = arr_all[i];
json[item.name] = item.value;
}
return JSON.stringify(json);
}
3.数据传输(ajax、调试);
$.ajax({
url: URL,
type: "GET",
headers: {
Accept: "application/json;"
},
aynsc:true,//异步
dataType: 'json',
success: function (data) {
console.log(data);
}
});
//注:这并不是原生ajax,而是jquery封装的ajax方法
$.get("YOUR-URL", {}, callBack, "json");
//1.跨域问题
//2.调试,如何打断点,测试网站:http://web.dev.songchechina.com/
4.数据解析或加工(对象、数组);
5.数据渲染(前端模板引擎);
6.常用功能;