jQuery
jQuery:别人写好的js文件 *********jquery中所有东西都是函数: jQuery的放啊发 名称:first获取名称的第一个元素 名称:last获取名称的最后一个元素
* $(document).ready-文档就绪函数(当文档加载时生效)
widow.onload只能运行最后一块代码,并且只有当浏览器内所有元素都解析完
jQuery就绪函数可运行多次,并且在浏览器document对象解析完后就可以使用
* $("选择器") 随意选:敢想啥选择器就有选择器
$(this) 把当前对象转化为jQuery对象
* 事件($(选择器).click())
* *$("html标签结构")创建了一个标签 在选择器内部插入 :后:.appendTo($("选择器")) 前.prependTo() 在选择器后插入 .insertAfter() .insertBefore()
替换元素:替换一个 被替换的元素.replaceWith() 替换所有 .replaceAll(被替换的元素)
元素 .append .prepend .after .before .empty()清空容器内所有元素 .remove删除自己
.html()的 相当于innerHtml .Text 相当于innerText .val() 想当于.value-还可以操作单选框,下拉菜单,复选框的选择状态 .prop(key,value)-相当于setAttribute/getAttribute可以获取,设置属性(key,value) 或状态(状态key,true/false) 状态key:checked,selected
.addclass(样式 样式) .removeclass(样式 样式) .toggleclass(样式 样式)
.hide(duration,funtion) 隐藏 .show() 显示 .toggle()隐藏和显示
.fadein() 淡入 .fadeout淡出 fadetoggle 淡入和淡出 fadeto透明度
.slideUp 拉上去 .slideDown 拉下来 slideToggle
.each(函数) 函数(index,item){} item是文档对象(js对象) index(每个元素的索引)
VUE(JS库)
语法跟java类似,也是要new实例的———vue的语法使用vue的变量不需要使用{{}}
-
Vue是一个工程化的东西,必须要抓到一个容器,浏览器解析后不会显示Vue语法,会解析成HTML源码—底层是操纵的css和js所以和他们兼容很好
{{取data的值}} -----插值表达式(不能取html元素) 依赖于网络环境传输(慢的话会看见它-可能会有插值闪烁)
属性v-text="取data的值" 相当于innerText
v-Html="取data的值" 相当于innerHtml
v-show="取data的值-Boolean" 操作document元素的css的display展示样式
v-if="取data的值-Boolean" 操作底层dom元素(HTML元素)
v-bind:(也可以写单:
冒号) 绑定HTml原生属性到我们的vue属性,然后就可已取值,也可以设置通过修改vue对象的变量的值来改变HTML元素的属性
v-for="(value,key,index) in data中的值" 单对象(key和value)多对象(user) in user,但是顺序不变 类似于JSTL表达式的使用
v-model(data中的值)双向绑定
到我们的表单中的数据:双向绑定:data的值变了,表单中的数据就变了,表单中的数据变了 data也变了 单选框(下拉菜单)要给data默认值,才能实现checked 复选框的data一点更要定义成数组才能存储多个value
v-on:(事件)(也可以写@事件) @click="" -
new Vue({——————里面都是是json格式的() key:value 一个el元素就是一个作用域,不同的作用域的东西不能互相访问到
el:"选择器" ----只能抓第一个元素*******
data:{"数据"}----- {}对象 []数组 字符串 数字
methods{方法}--- 方法(){---this---代表当前vue实例} 添加事件@click="函数"
components{组件-key:value}
}) -
事件
修饰
符
@事件.stop=函数——阻止事件冒泡
@事件.prevent=函数——组织标签默认行为,执行函数 a便签-跳转 submit便签-提交
@事件.once ——只触发一次函数,然后执行标签默认行为
@事件.enter——当敲回车键
的时候 在form便签中添加,进行数据合法验证 -
vue组件:可以在html结构中写<组件名></组件名>使用 内容:template:html代码—必须要有容器(html容器,有且只有一个最外层根容器) 所有使用 data(){ return{}} props:属性需要挂载(需要挂载vue实例的属性) methods方法
全局组件:Vue.component(组件名,{内容}):
局部组件(vue实例使用的话需要被挂载):let 组件名={内容/组件id}
内容 let组件名={ template:id
}
- vue路由(vue实例使用的话需要被挂载):路由需要引入js,但是要在引入vue.js下面引入
new VueRouter({
routes:[{path:"路由路径",component:"组件",children:[{path:"路由路径",component:"组件",children:[]}........]},........一般还要再路径中配置一个根路径path:“/”设置默认显示哪个模板]
})
vue路由展示模板内容
vue路由链接注册/登录 相当于a标签
ajax步骤
1.检查是否挂载xmlhttprequest-创建对象
2.链接地址xhr.open("GET","https://api.xdclass.net/pub/api/v1/web/index_card") (get也可以换成post,post用于传递账号密码等重要数据)
3.对象.send发送数据
4.判断是否返回成功,成功的话可以打印出JSON字符串
axios.get('请求网址,返回response对象') .then(function (response对象) {
对请求到response中数据的操作------返回数据的方法必须是response.getwriter.write往回写
})
.catch(function (error) { // 失败时抛出异常
console.log(error);
});
回调函数的使用
匿名函数:this指向当前函数的调用者 fution(){}匿名函数
箭头函数:this还是之前的this 不会识别为funtion()