web 前端
html 内容
css 样式 标签 p1 ul li 类名 .c1 .c2 ID名 #id1 #id2 Name名
p1 ul pl下所有层的ul p1>ul p1下第一层的ul
pl + ul p1的第一个兄弟节点 p1~ul p1的所有兄弟节点
javascript 交互
获取元素 document对象的getElementById ，getElementByName ，getElementByTagName，getElemengByClassName
修改元素内容 getElementById ('id1').innerHTML innerText textContent来读写
修改元素属性 getElementById ('id1').setAttribute(name,value) 写属性 getAttribute(name) 读属性 removeAttribute 删除属性
修改元素样式 getElementById ('id1').style.background 等来修改样式 ，也可以提前设置好样式，直接为类增加样式。
getElementById ('id1').classList .add() 增加类名 remove删除类名 toggle() 切换类 item() 类集合，通过index索引，contains是否包含
jQuery 对Javascipt的一次封装，要使用直接引用本地或者在线的jQuery库即可
<meta charset="UTF-8">
<!-- 方式1：引入本地下载的jQuery -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 方式2：通过CDN(内容分发网络)引入jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
JQuery对象$(document)是对DOM对象document 的一层包装。 其中$() 来构造一个JQuery对象
获取元素 $(选择器 ) 包括基本选择器 层级选择器 过滤选择器 内容选择器 可见选择器 属性选择器 子元素选择器 表单选择器
修改元素 遍历元素 each方法
元素过滤和查找 过滤 find， parents，parent ,slibings , next ,pre 等 查找 eq fliter hasClass is has
修改元素内容 包含标签 .html 纯文本 .text var ele=$('div') ele.html='' ele.text=''
修改元素属性 $().attr(name,value)
对象一次增加多个属性，可以通过增加类来实现，$() addClass(cn) removeClass(cn) toggleClass(cn) hasClass(cn)
修改元素样式 ele.css({'width':'200px','height':'200px'});
增加元素$('<h2 align="center">test</h2>').appendTo('body') appendTo方法来提交一个JQuery对象。
元素替换 replaceWith() replaceAll()
元素删除 empty remove detach
元素复制 clone(false) clone(true)
元素操作(事件） 常用事件 表单事件 键盘事件 鼠标事件 浏览器事件
页面加载事件 $(document).ready(function(){}) 简写为$(function(){} )
事件绑定和切换 on off one trigger triggleHandler hover
元素动画效果 基本特效 滑动特效 淡入淡出
自定义动画
操作Ajax
$.ajax({
type:'POST',
url:'index.php',
data:{'name':'sgx','age':46},
success:function(msg){
document.write('欢迎你'+JSON.parse(msg).name);
console.log(msg);
}
})
index.php
<?php
echo json_encode($_POST);
VUE
VUE. js.是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。解决数据绑定问题
首先下载，引入类似于JQuery .
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
查看代码
<body>
<div id="app">
{{ a }} <!-- 双大括号数据绑定 -->
</div>
<script>
//设置数据
var data={a:1};
//创建Vue对象
var vm = new Vue({
el: '#app',
data: data,
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log(' created')
}
});
//访问数据的三种方式
data.a='hi ...sgx';
vm.a='test'
vm.$data.a='test 2'
//设置观察事件，查看变量改变前后的值
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
})
</script>
</body>
