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() - 删除指定标签
-
-
属性修改
-
普通属性的获取和修改 - 除了innerHTML(html), innerText(text)以及value(val)
-
标签.attr(属性名) - 获取指定的属性值
-
标签.attr(属性名, 值) - 修改/添加属性
//标签内容属性
// 双标签.html()
// 双标签.text()
// 单标签.val()
//注意:上面的函数不传参就是获取值,传参就是修改值 -
-
class属性 - HTML中一个标签可以有多个class值,多个值用空格隔开
-
标签.addClass(class值) - 给标签添加class值
-
标签.removeClass(class值) - 移除标签中指定的class值
-
-
样式属性
-
获取属性值
标签.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>