JQuery操作

JQuery是一个JS库，它可以让DOM操作变得更简单

在使用JQ时必须调用这个库

<script type="text/javascript" src="js/jquery.min.js">
		
</script>
//我这是下载好了 在文件调用，可以在网上下载或者运用网上某个网站也行
1.节点的获取：$(CSS选择器)
<div id="div1">
			<p>我是段落1</p>
			<p class="c1">我是段落2</p>
			<a id="input1" value="张三">我是超链接1</a>
</div>
<script type="text/javascript">
    document.getElementsByClassName('c1')[0]
	$('#div>.c1')
// 两种方法都是获取节点JQ的方法明显简便许多
</script>
2.节点的创建、增加和删除

1.创建节点： $(html代码)

p = $('<p class="c1">我是段落</p>')

2添加节点：节点1.append(节点2) 在节点1中后添加节点2
节点1.prepend(节点2) 将节点2插入到节点1中得最前面
节点1.before（节点2） 将节点2放到节点1得前面
节点1.after （节点2） 将节点2放到节点1得后面

注意:前两者节点2是节点1得子关系，后两者是同级关系

3.删除节点：$(节点).remove()

3.节点属性和节点内容

1.获取和修改标签内容
获取：标签.text()，标签.html()
修改:标签.text(新的数据）、标签html(新的数据)

和JS中是一样得，text吧数据看成全部，html会看标签并保存

2.普通属性得修改和获取

标签.attr(属性)
标签.attr(属性，新属性值)

<a href="https://www.baidu.com" id="a1">baidu</a>
$('#a1').attr('href','https://www.bilibili.com')
JQ的事件绑定
<body>
		<button id="btn1">按钮1</button>
		<button id="btn2">按钮2</button>
		<button id="btn1">按钮3</button>
</body>
	<script>
		// 1.直接绑定(对添加得不生效，就算ID属性一样，添加得依然不生效，只能绑定类似于静态页面)
		$('btn1').on('click',function(){
			alert('你好'+this.innetText)
		})
		// 优势不用遍历，1，3按钮都会加入这个点击事件

		// 2.通过父标签给指定得子标签绑定事件（对添加得生效，全局生效，只要时id属性值为btn1的都生效）
		$('body').on('click','#btn1',function(){
			alert('你好'+this.innetText)
		})
	</script>
Vue的基本用法
<!--
 Vue的原则：通过控制数据来控制标签
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<!-- 1）控制标签内容： {{vue中data的属性名}}-->
			<p>{{name}}</p>
			<button onclick="app1.name='hello world!'">修改</button>
			<p>{{age}}</p>
			<p>{{gender}}</p>
			
			<!-- 2）控制标签属性: v-bind:标签属性名="vue中data的属性名" -->
			<a v-bind:href="url">{{appName}}</a>
		</div>
		<hr>
		<div id="app2">
			<!-- 3) for循环: v-for="变量 in vue中data的容器属性名"-->
			<div v-for="x in fruits">
				<p>{{x}}</p>
				<span>×</span>
			</div>
			
			<!-- 4)双向绑定： v-mode:vue中data的属性名-->
			<p>{{addName}}</p>
			<input v-model="addName" />
			<button type="button" onclick="app2.fruits.push(app2.addName)">添加</button>
		</div>
		<!--  -->
		
		
	</body>
	
	<script type="text/javascript">
		// 1. 创建Vue对象
		app1 = new Vue({
			el:'#app1',			//确定绑定对象, 当前这个Vue能控制的只能是id为app1的标签中的所有标签
			data:{
				name:'张三',
				age:18,
				gender:'男',
				appName: '百度',
				url: 'https://www.baidu.com'
			}
		})
		
		app2 = new Vue({
			el:'#app2',
			data:{
				fruits:['苹果', '西瓜', '葡萄', '火龙果', '山竹', '榴莲'],
				addName: '123'
			}
		})
		
	</script>
</html>
// computed 合计不在data中使用，创建另一个computed：{}