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)
$('#div1').remove()
result=$('#a1').arrt('href')
console.log(result)
$('#a1').attr('href','hettps://www.7k7k.com')
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>'))
}
$('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">
app1 = new Vue({
el:'#app1',
data:{
name:'张三',
age:18,
gender:'男',
appName: '百度',
url: 'https://www.baidu.com'
}
})
app2 = new Vue({
el:'#app2',
data:{
fruits:['苹果', '西瓜', '葡萄', '火龙果', '山竹', '榴莲'],
addName: '123'
}
})
</script>
|