常用弹框
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>