jQuery学习总结

1.根据class标签获取jquery对象点击跳转跳转团队页面

<li class="team">
	<img src="../img/team.png"/>
	<span class="name">团队成员</span>
</li>

$(".team").tap(function(){
	window.location.href="teamMember.html"
})

2.五种添加元素方法

append() - 在被选元素的结尾插入内容
html()- 匹配添加的内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.find方法找到指定的option。eq(i)是下标为i的标签

<select id="selectedRank" autocomplete="off"  name="" value="6">
	<option value="6" id="sixOption" selected="selected">全国总代</option>
	<option value="5" id="fiveOption">省级代理</option>
	<option value="4" id="fousOption">市级代理</option>
	<option value="3" id="threeotOption">县级代理</option>
</select>
for (var i=0;i<4;i++) {
	optionArr.push($("#selectedRank").find("option").eq(i))
}

4.替换指定属性或者样式

<div data-id="0"  class="fiveOption"></div>
//替换属性
$(".fiveOption").attr("data-id","1")

//替换或添加样式
$(".fiveOption").css("width","100px")

//添加class
$(".fiveOption").addClass("currentBtn");
.currentBtn{
     background-color:red;
}

//移除class
<div data-id="0"  class="fiveOption"></div>
$(".fiveOption").removeClass("currentBtn")

5.替换文本 （num为变量）

<span id="orderNumber">代理(0)</span>
$("#orderNumber").text("代理("+num+")")

6.$ajax请求

$.ajax({
	type:"get",//GET和POST请求
	url:HTTP+httpStr,//请求的路径
	data：{conNo:JSON.parse(userInfo).CON_NO,},//请求的参数
	async:true,//同异步请求
	success:function(data){//成功后返回的参数
	console.log(data)
	if(data.result==0){
	//do something 	
	}
});

7.找到兄弟对象

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
$('li.third-item').siblings().css('background-color', 'red');

8.显示与隐藏方法

<div  class="demo">显示与隐藏</div>
$(".demo").hide()//隐藏
$(".demo").show()//显示

$(".demo").css('display','none');//隐藏
$(".demo").css('display','block');//显示

$(".demo").css('visibility','hidden');//元素隐藏
$(".demo").css('visibility','visible');//元素显示

9.匿名点击事件

<div class="myGotoAddress">点击</div>
$(".myGotoAddress").tap(function(){
	//do something()
})

10.具名点击事件 addListItem

<div class="myGotoAddress">点击</div>
$(".myGotoAddress").on("tap",".addListItem",function(e){
	//do something()
})

11.循环的数据动态渲染

<div class="listItem"></div>
for (var i=0;i<data.data.length;i++) {
	if(i>2){
	break;
}
str+='<div class="addListItem">'+
	'<div class="addressDetailed">'+
		'<span><span class="consigneeName">'+data.data[i].RECIPIENTS+' </span><span class="consignee phone">'+data.data[i].MOBILE		+'</span></span>'+
		'<span class="addressInfo">'+data.data[i].PROVINCE+" "+data.data[i].CITY+" "+data.data[i].DISTRICT+" "+data.data[i].ADDRESS+'</span>'+
	'</div>'+
'</div>'
}
 $(".listItem").html(str);

12.使用jQuery模板引擎的循环数据动态渲染

<script src="D:\赵啸林\art-template模板引擎使用(1)\art-template模板引擎使用\template.4.12.1.js"></script>
<script type="text/html" id="list_tmp">
//模板引擎的循环和if判断
	{{each list arr i}}
		<div class="date">{{arr.date}}</div>
		<div>{{arr.msg}}</div>
		<br> 
		{{if meta}}
			<div>早上好</div>
		{{else}}
			<div>下午好</div>
		</if>
	{{/each}}
</script>
<script type="text/javascript">
	var list = [{
		msg: '今天也很nice',
		date: '2019-11-17 19:21'，
		meta:true
	}, {
		msg: '吃饭了吗？',
		date: '2020-05-30 13:14'
	}, {
		msg: '没有吃饭',
		date: '2021-03-15 10:11'
	}, {
		msg: '记得吃饭',
		date: '2021-03-16 16:00'
	}, {
		msg: '那就煮饭',
		date: '2021-03-17 08:29'
	}, {
		msg: '没米了',
		date: '2021-03-17 08:30'
	}, {
		msg: '吃空气吧',
		date: '2021-03-17 08:35'
	}, {
		msg: '没有饭了',
		date: '2021-03-18 09:05'
	}, {
		msg: '完了呀',
		date: '2021-03-18 09:55'
	}];
	//渲染列表数据
	$('#list').html(template('list_tmp', {
		list: list
	}));
</script>