学习python的第十九天

最新推荐文章于 2024-09-08 22:38:01 发布

lx_59_59

最新推荐文章于 2024-09-08 22:38:01 发布

阅读量56

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_57257042/article/details/125879599

版权

本文详细介绍了JavaScript中的三种常见弹框：alert、confirm和prompt的使用，以及jQuery的基本操作，包括创建、添加和删除节点，修改节点内容和属性。此外，还探讨了Vue的基本原理，展示了如何通过控制数据来控制DOM，包括文本内容的控制、属性的绑定、循环遍历和双向绑定。

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

常用弹框

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

alert(提示信息) - 弹出提示信息(带确定按钮)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <button type="button" onclick="message1()">弹框1</button>
	</body>
</html>
<script>
    function message1(){
        alert('添加成功！')
    }
</script>

2. 第二类弹框：有提示信息(问题)，确定按钮和取消按钮。

confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button" onclick="message2()">弹框2</button>
	</body>
</html>
<script>
	function message2(){
        var result = confirm('是否删除这个数据')
        if (result == true) {
            // 确定时做的事情
        } else{
            // 取消时做的事情
        }
    }
</script>

3. 第三类弹框：有提示信息、输入框、确定按钮。

prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框; 点取消，返回值是null;点确定返回值是输入框中输入的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button" onclick="message3()">弹框3</button>
	</body>
</html>
<script>
    function message3(){
        var result = prompt('请输入你的名字：','张三')
        console.log(result)
    }
</script>

jQuery的用法

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

步骤：

1. 导入jQuery的库。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <script src = "js/jQuery.min.js" type="text/javascript"></script>
	</head>
	<body>
        <div id="div1">
            <p>我是段落一</p>
            <p class="c1">我是段落二</p>
            <a href="">我是超链接1</a>
        </div>
        <div id="div2">
            <p class="c1">我是段落三</p>
            <p>我是段落四</p>
            <a href="https://www.baidu.com" id="a1"></a>
        </div>
	</body>
</html>

2. 创建和添加新节点。

创建节点;$(html代码)。

p1 = $('<p class="c1">我是段落五</p>')
div1 = $('<div class="c2"><p>苹果</p><span>×</span></div>')

添加节点。
- 节点1.append(节点2) – 在节点1中的后面添加节点2。
```
$('body').append(div1)
```
- 节点1.prepend(节点2) – 在节点2插入到节点1中的最前面。
```
$('body').prepend(p1)
```
- 节点1.before(节点2) – 将节点2放到节点1的前面。
```
$('#div2').before($('<img src="img/car.png">'))
```
- 节点1.after(节点2) – 将节点2放到节点1的后面。
```
$('#div2').after($('<img src="img/car.png">'))
```
删除节点:节点.remove()
```
$('#div1').remove()
```

3. 节点属性和节点内容。

获取和修改标签内容。

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

result = $('#a1').text()
console.log(result)

修改：标签.text(新的数据)

result = $('#a1').html('<span>京东</span>')
console.log(result)

普通属性的获取和修改。

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

result = $('#a1').attr('href')
console.log(result)

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

result = $('#a1').attr('href','https://www.baidu.com')
console.log(result)

value属性。

result = $('input').val()
console.log(result)
$('input').val('李四')

jQuery的事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <button class="c1">按钮1</button>
		<button class="c1">按钮2</button>
		<button class="c1">按钮3</button>
		<button class="c1">按钮4</button>
		<button id="add" onclick="addBtns()">添加</button>
	</body>
</html>
<script>
    number = 4
    function addBtns(){
        number++
        $('#add').before($('<button class="c1">按钮'+number+'</button>'))
    }
</script>

1. 直接绑定

$('.c1').on('click',function(){
    alert('你好！'+this.innerText)
})

2. 间接绑定

$('body').on('click','.c1',function(){
    alert('你好！'+this.innerText)
})

Vue的基本用法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<!-- 1)控制标签内容： {{Vue中data的属性名}} -->
		    <p>{{message}}</p>
			<button onclick="app1.message = 'hello world!'">修改</button>
			<p>{{name}}</p>
			<p>{{age}}</p>
			<p>{{gender}}</p>
			
			<!-- 控制标签属性:v-bind:标签属性名 = "Vue中data的属性名"-->
			<a v-bind:href="url">{{appName}}</a>		
		</div>
		<div id="app2">
			<!-- 3）for循环:v-for="变量 in Vue中data的容器属性名" -->
			<div v-for="x in fruits">
				<p>{{x}}</p>
				<span>×</span>
			</div>
			<!-- 4）双向绑定：v-model:Vue中的属性名 -->
			<input type="text" 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:{
				message:'你好!',
				name:'张三',
				age:'18',
				gender:'男',
				appName:'百度',
				url:'https://www.baidu.com'
			}
		})
		app2 = new Vue({
			el:'#app2',
			data:{
				fruits:['苹果','香蕉','西瓜','荔枝'],
				addName:''
			}
		})
		app1.gender = '女'
	</script>
</html>