day 19 jquery、vue

最新推荐文章于 2024-09-24 10:50:41 发布

Feifei_peng

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量271

点赞数

分类专栏：日常作业文章标签： jquery vue.js javascript

本文链接：https://blog.csdn.net/Feifei_peng/article/details/125811413

版权

日常作业专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的三种常见弹框及其使用，包括alert、confirm和prompt。接着讲解了jQuery库的基本用法，如选择节点、创建与删除节点、内容与属性操作。此外，还详细阐述了jQuery的事件绑定方式。最后，讨论了Vue框架的核心原则，展示了如何通过数据控制标签内容、属性、循环遍历和双向绑定，并提供了创建Vue对象的示例。

摘要由CSDN通过智能技术生成

js和jquery

常用弹框

第一类弹框：只有提示信息和确定按钮的弹框

alert(提示信息)

第二类弹框：有提示信息(问题)、确定按钮以及取消按钮的弹框

返回值如果是ture表示点击的是确定，false表示点击的是取消

confirm(弹框问题)

第三类弹框：有弹框信息、输入框、确定按钮、取消按钮的弹框

返回值如果是null表示点击的取消按钮，返回值如果是输入内容，表示的点击的确定

<button onclick="mg1()">弹框1</button>
<button onclick="mg2()">弹框2</button>
<button onclick="mg3()">弹框3</button>
<script type="text/javascript">
// 第一类弹框：
function mg1(){
	alert('添加成功！')
}
// 第二类弹框：
function mg2(){
	 var result=confirm('是否需要删除文件？')
	 if(result==true){
	 // 点击确定的时候发生的事情
	 }else{
	 // 点击取消的时候发生的事情
	 }
}
// 第三类弹框：
function mg3(){
	var result=prompt('请输入你的名字：','张三')
}
</script>

jQuery的用法

jQuery是一个js库，可以让js的DOM操作变得更简单

使用前需要导入<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

用法：

1.获取节点：$(“css选择器”)

2.创建节点和添加节点：

1）创建节点：$(html代码)，可以创建任意节点，插入任意位置，利用选择器标签进行操作

2）添加节点：

节点1.append(节点2) --在节点1的最后添加节点2

节点1.prepend(节点2) --将节点2插入到节点1中的最前面

节点1.before(节点2) --将节点2放到节点1前面

节点1.after(节点2)–将节点2放到节点1后面

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

3.节点属性和节点内容

1)获取和修改标签内容

获取标签：标签.text()、标签.html()

修改标签：标签.text(新内容)、标签.html(新内容)

2）普通的属性的修改和获取

标签.attr(属性名)-获取

标签.attr(属性名,新的属性值)-修改

<body>
		<div id="div1">
			<p>我是段落1</p>
			<p class="c1">我是段落2</p>
			<a href="">我是超链接1</a>
		</div>
		<div id="div2">
			<p class="c1">我是段落3</p>
			<p>我是段落4</p>	
		</div>	
		<a href="https://www.baidu.com" id="a1">百度</a>
		<input type="" name="" id="" value="张三" />
	</body>
<script type="text/javascript">
    // 获取节点
    result=$('.c1')
	console.log(result)
	// 创建节点
	div1=$('<p>我是段落5</p>')
	// 添加节点
	$('body').append(div1) //在body标签后面添加一个div1标签
	// 删除节点
	$('#div1').remove()
	//获取、修改标签内容
	result=$('#a1').arrt('href')
	console.log(result)
	$('#a1').attr('href','hettps://www.7k7k.com')
	// value 属性
	result=$('input').val()//获取
	console.log(result)
	$('input').val('李四') //修改

jQuery的事件绑定

绑定的方法：

1.直接绑定：$(标签名).on(事件名，事件函数)

2.通过父标签给指定的子标签绑定事件

标签.on(事件名，子标签选择器，函数)

<button class="c1">按钮1</button>
<button class="c1">按钮2</button>
<button class="c1">按钮3</button>
<button class="c1">按钮4</button>
<button id="add" onclick="a1()">添加</button>

<script type="text/javascript">
number=4
function a1(){
	number++
	$('#add').before($('<button class="c1">按钮'+number+'</button>'))
		}
	// // 1.直接绑定  直接对C1标签添加点击事件
	// $('.c1').on('click',function(){
	// 	alert("起床了")
	// })
		
	// 2.通过父标签给指定的子标签绑定事件
	// 标签.on(事件名,子标签选择器,函数) 对body标签下所有c1标签添加点击事件
	$('body').on('click','.c1',function(){
		alert("起床了")
		})

Vue

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

1.控制标签内容： {{vue中的data的属性名}}

2.控制标签属性：v-bind:标签属性名=vue中data的属性名

3.for循环：v-for="变量 in vue中data的容器属性名"

4.双向绑定：v-mode:vue中的data的属性名

创建Vue对象

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