jQuery,ajax,vue用法详解

最新推荐文章于 2024-05-16 02:23:50 发布

wigger

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： jQuery ajax vue 用法详解

本文链接：https://blog.csdn.net/wigger/article/details/92699512

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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("内容")
	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>  // '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是返回的异常 })

wigger

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
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) ...
复制链接

扫一扫

专栏目录