jQuery,ajax,vue用法详解

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'); // 选择包含p元素的div元素
		$('div').find('p')  // 选择div中的p标签
		$('div').not('.myClass'); //选择class不等于myClass的div元素
		$('div').eq(5); //选择第6个div元素
	选择出来元素之后的转移
		$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
		$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
		$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
		$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
		$('#box').parent(); //选择id是box的元素的父元素
		$('#box').children(); //选择id是box的元素的所有子元素
		$('#box').siblings(); //选择id是box的元素的同级元素
		$('#box').find('.myClass'); //选择id是box的元素内的class等于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") //为id为div1的对象追加样式divClass2
		$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
		$("#div1").removeClass("divClass divClass2") //移除多个样式
		$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
	3、点击事件
		$('#btn1').click(function(){

    		// 内部的this指的是原生对象

    		// 使用jquery对象用 $(this)

		})
	4、 标签内的内容
		jQuery对象.html()
		jQuery对象.html("内容")
	56、其他属性
		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 设置请求失败后的回调函数
7async 设置是否异步,默认值是'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>  // 'classname'为vue中定义的值
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(){
            //不能使用data中的数据和method中的方法
        }
		created:function(){
            //能使用data中的数据和method中的方法  获取服务器数据的时机应该也在这里执行
        }	
	挂载
		beforeMount:function(){
			//获取dom元素中的值  旧
		}
		mounted:function(){
            //获取dom元素中的值  旧
            //通过插件操作dom
        }
			
	更新---data发生改变的时候
		beforeUpdate:function(){
			// data的数据肯定发生了改变
			// 但是界面中并没有更新
		}

			
		updated:function(){
			// data的数据肯定发生了改变
			// 但是界面已经更新
		}

	销毁
    	beforeDestory:function(){}
		destoryed:function(){}
15.使用Vue获取服务器的数据
	axios的使用
	作用:通过url获取数据,通常会和vue结合使用
	特点:比jQuery更轻量
	如何使用
		和$.ajax({})类似
        axios({
         	url:'xxxxx'
			method:'get'
            data:{	}
        })

	axios({}).then(function(dat){ //dat是返回的字典数据 })
	axios({}).catch(function(error){ //error是返回的异常 })

你可能感兴趣的:(前端,jQuery,ajax,vue,用法详解)