jQuery ajax vue用法详解
1. 入口函数
$(function(){
})
2. 选择器
$("选择器")
$('li[id=box]')
$('li').not()
$('li:first')/$('li').first()
$('li:last')/$('li').last()
$('li:eq(-2)')/$('li').eq(-2)
选择出来元素之后的筛选
$('div').has('p');
$('div').find('p')
$('div').not('.myClass');
$('div').eq(5);
选择出来元素之后的转移
$('#box').prev();
$('#box').prevAll();
$('#box').next();
$('#box').nextAll();
$('#box').parent();
$('#box').children();
$('#box').siblings();
$('#box').find('.myClass');
激活对象：
$('this') 当有函数嵌套式，该对象不再是外层激活的对象，不能使用该方法
两个概念
JQuery对象
具备jQuery特有的方法
jQuery对象.css()
jQuery对象.addClass()
......
原生js对象
具备原生的属性和方法
原生对象.style
原生对象.className
原生对象.innerHTML
......
无论选择器有多少种方法，选择器最终的目的就是找到满足条件的元素
找到元素之后你会对这些元素干嘛？
1、设置样式
jQuery对象.css()
方式1：设置单个样式
方式2：设置多个样式
方式3：获取某个样式的值
2、设置class等属性
jQuery对象.addClass()
jQuery对象.removeClass()
。。。
3、设置开始标签和结束标签之间的内容
jQuery对象.html()
方式1：设置标签中的内容
方式2：获取标签中的内容
4、设置点击事件
。。。
3. 对元素的操作
1、操作行内样式
获取样式
$("div").css("width");
$("div").css("color");
设置样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
2、操作class属性
$("#div1").addClass("divClass2")
$("#div1").removeClass("divClass")
$("#div1").removeClass("divClass divClass2")
$("#div1").toggleClass("anotherClass")
3、点击事件
$('#btn1').click(function(){
})
4、 标签内的内容
jQuery对象.html()
jQuery对象.html("内容")
5、6、其他属性
jQuery对象.prop("src")
jQuery对象.prop("src","具体的值")
jQuery对象.prop({})
jQuery对象.val()
jQuery对象.val("具体的值")
4. 动画
jQuery动画的实现
jQuery对象.animate()
参数1
要改变的样式属性值，写成字典的形式
{"width":1000,"height":800}
参数2
动画持续的时间，单位为毫秒，一般不写单位
默认为400，也就是不传这个参数的话就是400毫秒
参数3
动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
常用
linear
swing
结合jquery插件jquery.easing.js
将jquery.easing.js的文件使用script标签写在引入jQuery的script标签下方
可选值:
linear,swing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInExpo,easeOutExpo,easeInOutExpo,easeInSine,easeOutSine,easeInOutSine,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce
参数4
动画回调函数，动画完成后执行的匿名函数
更便捷的动画实现
jQuery对象.hide()
jQuery对象.show()
jQuery对象.toggle()
jQuery对象.fadeIn()
jQuery对象.fadeOut()
jQuery对象.fadeToggle()
jQuery对象.slideUp()
jQuery对象.slideDown()
jQuery对象.slideToggle()
小技巧：防止多次点击造成动画一直持续进行
jQuery对象.stop().slideUp()
5. 正则
1、定义规则
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
可选参数
g： global，对多次匹配的结果会有影响
i： ingore case，忽略大小写，默认大小写敏感
2、使用
re.test(字符串) 匹配成功，就返回真，否则就返回假
re.exec("字符串")
var str = '12345abcde src fsfadf src';
var re1 = /(.*?) src/;
var re2 = /(.*) src/;
var ret1 = re1.exec(str)
var ret2 = re2.exec(str)
6. 事件
常用事件
click 点击事件
mouse
子元素的事件会响应自己
mouseover
mouseout
子元素的事件不会影响自己
mouseenter
mouseleave
一般使用这两种事件
简写jQuery对象.hover(匿名函数1,匿名函数2)
匿名函数1指的是mouseenter的时候的代码处理
匿名函数2指的是mouseleave的时候的代码处理
focus
监听input框获取焦点事件
让input框主动获取焦点
blur
input框失去焦点事件
change
input框内容发生改变，并且失去焦点的事件
submit
表单提交事件
onload
界面加载完成事件
也成为入口函数
事件响应
事件冒泡
概念:子级产生了事件会往外层传递
阻止事件冒泡
在事件的响应函数中return false即可
或者使用事件源参数event调用event.stopPropagation()
事件委托
给父元素绑定事件，让子元素响应
jQuery对象.delegate("子级元素选择器","事件名称",function(){})
使用场景
1、需要绑定事件的元素特别多
2、需要绑定事件的元素动态生成的
7. 操作HTML结构
操作HTML结构
html
append
appendTo
prepend
prependTo
after
insertAfter
before
insertBefore
remove
8. jQuery对象
JavaScript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
创建对象的方式
一种是通过顶级Object类来实例化一个对象
var person = new Object();
person.name = 'tom';
person.age = '25';
person.sayName = function(){
alert(this.name);
}
alert(person.age);
person.sayName();
通过对象直接量的方式创建对象
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
alert(person2.age);
person2.sayName();
9. Ajax
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步
另一种写法：
$.get("/change_data", {'code':300268},function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},function(dat){
alert(dat.name);
});
10. vue
1、基本使用
Vue本身缺少入口函数，一般放在被控制标签的下方
1.1、导入vue.js文件
1.2、在HTML中准备一个div容器，id为app
1.3、在入口函数中实例化一个Vue对象即可开始Vue的使用了
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
......
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</div>
2.开始使用Vue
一旦Vue对象托管了某一个HTML容器，那在这个容器中的子元素就可以很方便使用Vue对象中的数据和方法
在HTML中的元素使用Vue对象中定义的数据
3.插值表达式
<div id="app">
<p>{{ message }}</p>
</div>
4.插值表达式中可以进行一些基本的运算
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
5.v-bind指令
<p v-bind:class="classname">这是第一个段落</p>
6.多值class的写法
字典
<p :class="{big:isBig,red:isRed}">这是第一个段落</p>
big和red是style标签中定义的类的名字
isBig和isRed是Vue对象中的数据
数组
<p :class="[isBig?'big':'','red']">这是第二个段落</p>
7.v-if指令
<p v-if="boolnum">是否显示这一段</p> true则显示，false 不显示
8.v-show指令
<p v-show="boolnum2">是否显示这一段</p> 仅仅只是显示和隐藏
9.在HTML中，使用Vue对象中的数据做循环渲染,遍历数组
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
10.遍历对象
<ul id="v-for-object">
<li v-for="(value,key) in object">
{{ key }}-{{ value }}
</li>
</ul>
11.表单数据的绑定 v-model
v-bind没有双向绑定的功能, v-model 有双向绑定功能，即当绑定的数据在浏览器中被客户改变时，其数据也会改变
12.v-on指令，简写为@
<input type="button" value="按钮" v-on:click="fnChangeMsg">
<input type="button" value="按钮" @click="fnChangeMsg">
13.事件修饰符
prevent阻止默认事件
<a href="" @click.prevent="fnChangeMsg">标签</a>
stop阻止冒泡
<input type="button" value="按钮" @click.stop="fnChangeMsg">
14.Vue对象的生命周期
创建
beforeCreate:function(){
}
created:function(){
}
挂载
beforeMount:function(){
}
mounted:function(){
}
更新---data发生改变的时候
beforeUpdate:function(){
}
updated:function(){
}
销毁
beforeDestory:function(){}
destoryed:function(){}
15.使用Vue获取服务器的数据
axios的使用
作用：通过url获取数据，通常会和vue结合使用
特点：比jQuery更轻量
如何使用
和$.ajax({})类似
axios({
url:'xxxxx'
method:'get'
data:{ }
})
axios({}).then(function(dat){
axios({}).catch(function(error){
