学习使我快乐第十九天

最新推荐文章于 2024-06-14 14:24:42 发布

Mr_suyi

最新推荐文章于 2024-06-14 14:24:42 发布

阅读量106

点赞数

分类专栏： python HTML 文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/mr_suyi/article/details/125809424

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

Day 019

注意：使用jQuery前必须导入jQuery的库

一、jQuery对节点的操作

注：使用jQuery前必须导入jQuery的库

1.获取节点

jQuery获取节点可以直接利用$(选择器) 。
例：我创建一个p标签，想获取其，可以直接用css选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 使用jQuery前必须导入jQuery的库 -->
		<script  src="js/jquery.min.js " type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<p>我是段落1</p>
		
	</body>

	<!-- 1.获取节点：$(css选择器) -->
	<script class="c1" type="text/javascript">
	result = $('c1')
		console.log(result)
	</script>
	

	
</html>

2…创建和添加节点

使用 $ (‘html代码’) 里面直接填写html代码就可以，例如：$(‘

我是 div
’) 。
添加标签
a.节点1.append(节点2) - 在节点1中的最后添加节点2 (父子关系)。
b.节点1.prepend(节点2) - 将节点2插入在节点1中的前面 (父子关系)。
c.节点1.before(节点2) - 将节点2插入在节点1的前面（兄弟关系)。
d.节点1.after(节点2) - 在节点1的最后添加节点2 (兄弟关系)。

3.删除标签

标签.empty() - 清空指定标签
标签.remove() - 删除指定标签

二、jquery的时间绑定

1.标签.on(事件名,回调函数) - 给标签绑定指定的事件（和js中的addEventLinsenner一样）

事件名不需要on

2.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签

选择器 - 前面标签的后代标签(子标签/子标签的子标签)

三、Vue

Vue的原则：通过控制数据来控制标签。

Vue也需要导入链接，大家可以在官网找到并且含有详细教程。

1.控制标签内容：

{{vue中data的属性名}}
var 变量名 = new Vue({

el: 选择器,

data:数据对象

2.控制标签属性

v-bind:标签属性名="vue中data的属性名

3.for循环

v-for=“变量 in vue中data的容器属性名”

4.双向绑定

v-mode:vue中data的属性

例：

<!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>

Mr_suyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习使我快乐第十九天

+ 添加标签a.节点1.append(节点2) - 在节点1中的最后添加节点2 (父子关系)。b.节点1.prepend(节点2) - 将节点2插入在节点1中的前面 (父子关系)。c.节点1.before(节点2) - 将节点2插入在节点1的前面（兄弟关系)。d.节点1.after(节点2) - 在节点1的最后添加节点2 (兄弟关系)。...
复制链接

扫一扫