【前端学习】Day-19 js常用弹框、JQuery、Vue

ChenAi140

于 2022-07-15 17:54:03 发布

阅读量566

点赞数

分类专栏：前端学习文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/ChenAi_140/article/details/125809842

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的三种基本弹框用法，包括alert、confirm和prompt，并展示了如何在HTML中使用JavaScript进行事件绑定。接着，讲解了jQuery库的基础用法，如选择节点、创建和删除节点、修改属性和内容以及事件绑定。最后，概述了Vue框架的使用，包括数据绑定、条件语句、循环结构和事件监听。文章通过实例代码加深了读者对这些技术的理解。

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

文章目录

1. js中的常用弹框

第一类弹框：只有提示信息和确定按钮的弹框
alert(提示信息) - 弹出提示信息(带确定按钮)
第二类弹框：有提示信息、确定按钮和取消按钮的弹框
confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true
第三类弹框：有提示信息、输入框、确定按钮和取消按钮的弹框
prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框; 点取消，返回值是null;点确定返回值是输入框中输入的内容

<!DOCTYPE HTML>
<html lang="zh_CN">
<!-- 
a.  alert(提示信息) - 弹出提示信息(带确定按钮)

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

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

<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>

<body>
    <button onclick="message1()">弹框1</button>
    <button onclick="message2()">弹框2</button>
    <button onclick="message3()">弹框3</button>
</body>

</html>

<script>
    // 1. 第一类弹框：只有提示信息和确定按钮的弹框
    function message1() {
        alert('添加成功！')
    }

    // 2. 第二类弹框：有提示信息、确定按钮和取消按钮的弹框
    // 返回值为true或false
    function message2(){
         var result = confirm('是否要删除这个数据？')
        //  console.log(result)
         if (result==true){
            // xxx
         }else{
            // xxx
         }
    }

    // 3. 第三类弹框：有提示信息、输入框、确定按钮和取消按钮的弹框
    // 返回值为null或者用户输入的内容
    function message3(){
        var result = prompt('请输入你的名字：', '张三')
        console.log(result)
    }
</script>

2. JQuery的基本用法和事件绑定

2.1 基本用法

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

使用jQuery前先导入jQuery库

获取节点

$(选择器)
- console.log($(‘#div2>a’)) //和后代选择器效果一样
- console.log($(‘p + a’)) //获取紧跟着p标签的a标签
- console.log($(‘#p1~*’)) //获取和id是p1的标签的后面的所有同级标签
- console.log($(‘div:first’)) //第一个div标签
- console.log($(‘p:last’)) //最后一个p标签
- console.log($(‘div *:first-child’)) //找到所有div标签中的第一个子标签
创建标签
- $(‘HTML标签语法’) ,例如：$(‘<div style=“color: red”>我是div</div>’)
添加标签
- 父标签.append(子标签) - 在父标签的最后添加子标签
- 父标签.prepend(子标签) - 在父标签的最前面添加子标签
- 标签.before()
- 标签.after()
删除标签
- 标签.empty() - 清空指定标签
- 标签.remove() - 删除指定标签
属性修改
1. 普通属性的获取和修改 - 除了innerHTML(html), innerText(text)以及value(val)
  - 标签.attr(属性名) - 获取指定的属性值
  - 标签.attr(属性名, 值) - 修改/添加属性
  //标签内容属性
  // 双标签.html()
  // 双标签.text()
  // 单标签.val()
  //注意：上面的函数不传参就是获取值，传参就是修改值
2. class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
  - 标签.addClass(class值) - 给标签添加class值
  - 标签.removeClass(class值) - 移除标签中指定的class值
3. 样式属性
  - 获取属性值
    标签.css(样式属性名) - 获取样式属性值
  - 修改和添加
    标签.css(样式属性名, 值) - 修改属性值
    标签.css({属性名:值, 属性名2:值2…}) - 同时设置多个属性

<!DOCTYPE HTML>
<html lang="zh_CN">
<!-- 
jQuery是一个js库，它可以让js的DOM操作变得更简单
 -->
<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 id="div1">
        <p>段落1</p>
        <p>段落2</p>
        <a href="">超链接</a>
    </div>
    <div id="div2">
        <p class="c1">段落3</p>
        <p>段落4</p>   
    </div>
    <a id="a1" href="https://www.baidu.com">百度</a>
    <input type="text">
    <div id="div3">盒子3</div>
</body>
    
</html>

<!-- 1. 获取节点：$(css选择器) -->
<script>
    
    document.getElementsByClassName('c1')[0]
    e = $('.c1')
    console.log(e)
</script>

<!-- 2. 创建、添加和删除节点 -->
<script>
    // 1) 创建节点
    p = $('<p class="c1">段落5</p>')
    fruit = $('<div class="c2"><p>苹果</p><span>x</span></div>')

    // 2) 添加节点
    // 节点.append(节点2) - 在节点1的最后添加节点2(父子)
    $('body').append(p)
    $('body').append(fruit)
    // 节点1.prepend(节点2) - 在节点1的最前面插入节点2(父子)
    $('body').prepend(p)
    // 节点1.before(节点2) - (兄弟)
    $('#div2').before($('<img src="../file/img/car.png">'))
    // 节点1.after(节点2) - (兄弟)
    // 3) 删除节点
    $('#div3').remove()
</script>

<!-- 3. 节点属性和节点内容 -->
<script>
    // 修改标签内容
    $('#a1').text('京东')
    $('#a1').html('<span>爱奇艺</span>')
    // 修改普通属性
    $('#a1').attr('href', 'https://www.jd.com')
    // 修改value属性
    i = $('input').val()
    console.log(i)
</script>

2.2 事件绑定

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

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

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

<!DOCTYPE HTML>
<html lang="zh_CN">
    
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- 使用jQuery前先导入jQuery库 -->
    <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
    
<body>
    <button id="btn1" class="c1">按钮1</button>
    <button id="btn2" class="c1">按钮2</button>
    <button id="btn3" class="c1">按钮3</button>
    <button id="btn4" class="c1">按钮4</button>
    <button id="btn">按钮</button>
    <hr>
    <button id="add" onclick="addbtn()">添加</button>
</body>
    
</html>
<script>
    num = 4
    function addbtn(){
        num += 1
        $('#btn').before($('<button id="'+num+'" class="c1">按钮'+num+'</button>'))
    }

    // 1. 直接绑定
    // $('.c1').on('click', function(){
    //     alert('你好!'+this.innerText)
    // })

    // 2. 通过父标签给指定的子标签绑定事件
    $('body').on('click', '.c1',function(){
        alert('你好!'+this.innerText)
    })
</script>

3. Vue

用法：
var 变量名 = new Vue({
el: 选择器,
data:数据对象,
methods:方法对象，
computed:计算属性
})

设置标签内容: {{Vue属性}}
设置标签属性值: v-bind:属性=‘Vue属性名’
if语句：v-if=‘Vue属性名’
循环结构：v-for=‘变量 in 数组属性’
绑定事件：v-on:事件名=‘函数名’
v-model可是实现 C的内容和属性双向绑定

<!DOCTYPE html>
<!--
 Vue的原则：通过控制数据来控制标签
 -->
<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>

<!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="box1">
			<div v-for="goods in goodsList">
				<img v-bind:src="goods.image" >
				<p>{{goods.name}}</p>
				<p>{{goods.price}}</p>
				<button type="button" v-on:click="goods.count++">+</button>
				<input v-bind:value="goods.count" />
				<button type="button" v-on:click="goods.count--">-</button>
				<p>{{goods.price * goods.count}}</p>
				<button type="button">删除</button>
				<hr >
			</div>
			<span>合计:</span><span>{{totalPrice}}</span>
		</div>
		
		<script type="text/javascript">
			var app1 = new Vue({
				el: '#box1',
				data:{
					goodsList:[
						{
							image:"img/a1.jpg", 
							name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
							price:138,
							count:1,
						},
						{
							image:"img/a2.jpg", 
							name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
							price:198,
							count:1,
						},
						{
							image:"img/a3.jpg", 
							name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
							price:200,
							count:1,
						}
					]
				},
				computed:{
					totalPrice: function(){
						var result = 0
						for(index=0;index<this.goodsList.length;index++){
							var x = this.goodsList[index]
							result += x.price * x.count
						}
						return result
					}
				}
			})
		</script>
	</body>
</html>