Day 019
注意:使用jQuery前必须导入jQuery的库
一、jQuery对节点的操作
注:使用jQuery前必须导入jQuery的库
1.获取节点
- jQuery获取节点可以直接利用$(选择器) 。
- 例:我创建一个p标签,想获取其,可以直接用css选择器。
<!DOCTYPE html>
<html>
<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>
<p>我是段落1</p>
</body>
<!-- 1.获取节点:$(css选择器) -->
<script class="c1" type="text/javascript">
result = $('c1')
console.log(result)
</script>
</html>
2…创建和添加节点
-
使用 $ (‘html代码’) 里面直接填写html代码就可以 ,例如:$(‘
我是 div’) 。 -
添加标签
a.节点1.append(节点2) - 在节点1中的最后添加节点2 (父子关系)。
b.节点1.prepend(节点2) - 将节点2插入在节点1中的前面 (父子关系)。
c.节点1.before(节点2) - 将节点2插入在节点1的前面(兄弟关系)。
d.节点1.after(节点2) - 在节点1的最后添加节点2 (兄弟关系)。
3.删除标签
- 标签.empty() - 清空指定标签
- 标签.remove() - 删除指定标签
二、jquery的时间绑定
1.标签.on(事件名,回调函数) - 给标签绑定指定的事件(和js中的addEventLinsenner一样)
- 事件名不需要on
2.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件,传递给选择器对应的子标签
- 选择器 - 前面标签的后代标签(子标签/子标签的子标签)
三、Vue
Vue的原则:通过控制数据来控制标签 。
Vue也需要导入链接,大家可以在官网找到并且含有详细教程。
1.控制标签内容:
- {{vue中data的属性名}}
var 变量名 = new Vue({
el: 选择器,
data:数据对象
2.控制标签属性
- v-bind:标签属性名="vue中data的属性名
3.for循环
- v-for=“变量 in vue中data的容器属性名”
4.双向绑定
- v-mode:vue中data的属性
例:
<!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="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>