Jqury基础大汇总来啦~

jquery基础

	$("选择器").事件(function(){
		...
	})
	DOM操作
	
	属性
	获取属性：
	$("选择器").attr("属性名")
	$("选择器").prop("属性名")
	设置/新增属性：
	$("选择器").attr("属性名","属性值")
	$("选择器").prop("属性名","属性值")
	删除属性：
	$("选择器").removeAttr("属性名")
	$("选择器").removeProp("属性名","属性值")
	
	
	文本
	获取文本:
	$("选择器").html();
	$("选择器").text();
	
	设置文本：
	$("选择器").html("要设置的内容");//识别HTML语言
	$("选择器").text("要设置的内容");//将HTML当做字符串来输出
	
	删除：设置为空
	$("选择器").html("");
	$("选择器").text("");
	
	
	jquery CSS
	$("选择器").css()
	$("选择器").css("样式名","样式值")
	$("选择器").css({
		"width":"100px",
		"height":"200px",
		"background":"green",
		..........
	})
	
	addClass("类名"):添加类
	removeClass("类名"):移除类
	toggleClass("类名")：当有对应类名 移除 否则 添加
	
	获取input的值
	$("选择器").val()
	$("选择器").val("要设置的值")
	
	
	创建节点
	html字符串
	
	var $view = $(`<div class="view" >
						<div>1111</div>
						<div>222</div>
				</div>`)
	
	插入节点
	
	append()：选中元素的内部的后面添加
	prepend():选中元素的内部的前面添加
	before():选中元素的外部的前面添加
	after()：选中元素的外部的后面添加
	
	删除节点：
	$("选择器").remove()//删除 删除完后重新添加  事件不在
	$("选择器").empty()//清空
	$("选择器").detach()//删除  删除完后重新添加 事件还在
	
	复制：clone(true/false)
	true:连带我节点绑定的事件一起克隆
	false:只克隆节点html 事件不克隆
	
	！$("选择器1").find("选择器2"):选中我选择器1里面的 符合选择器2的所有元素
	$("选择器").children():选中我选择器的所有子元素
	
	
	$("选择器").parent():选中选择器的父元素
	！$("选择器1").parents("选择器2"):选中选择器1的所有祖先元素符合选择器2的要求的所有元素
	
	$("选择器").next():选中下一个元素
	
	$("选择器").prev():选中上一个元素
	
	$("选择器").eq(num):选中符合选择器条件的第num+1个元素
	
	jquery事件
	1、click()点击事件：
	
	2、focus():元素获得焦点所触发的事件
	
	3、blur():元素失去焦点触发的事件
	
	4、change():元素改变值
	
	5、select()：元素内容被选择的时候
	
	6、mouseover():鼠标指针位于元素上方时
	
	7、mouseout():鼠标指针离开元素时
	
	8、resize():调整浏览器窗口大小的时候
	
	9、scroll():滚动条滚动的时候
	
	10、hover():鼠标悬浮函数
	
	11、hover(function(){})
	12、on()方法:在被选元素以及子元素添加一个或者多个事件
	$("选择器").on(事件1,子元素,data,function(){
		
	})
	13、bind()方法：可以在被选元素绑定一个或者多个事件
	bind("事件",data,function(){
		
	})
	14、one():绑定一个只执行一次的函数

Jquery动画：

	$("选择器").动画的事件():
	
	1、显示隐藏
	$("选择器").show(time[单位是毫秒],function(){});//time可以是数字,表示时间 单位毫秒,也可以是“slow”以及"fast"
	$("选择器").hide(time,function(){});
	$("选择器").toggle(time,function(){});
	
	
	2、滑上滑下
	$("选择器").slideDown(time[单位是毫秒],function(){}):显示
	$("选择器").slideUp(time[单位是毫秒],function(){}):隐藏
	$("选择器").slideToggle(time[单位是毫秒],function(){})
	
	3、淡入淡出
	$("选择器").fadeIn(time[单位是毫秒],function(){}):淡入
	$("选择器").fadeOut(time[单位是毫秒],function(){}):淡出
	$("选择器").fadeToggle(time[单位是毫秒],function(){})
	$("选择器").fadeTo(time,opacity[透明度，取值在0-1之间],function(){})
	
	4、动画的延迟
	$("选择器").delay(speed[单位是毫秒])
	
	5、清除动画队列
	$("选择器").stop(a,b)
	a：指的是是否停止被选中的元素所有队列动画
	b:是否立即完成当前动画
	
	6、自定义动画
	$("选择器").animate()
	语法一：
	$("选择器").animate(style,time[可以使用slow,fast],easing,function(){})
	style里面的样式可以使用+=
	
	语法二：
	$("选择器").animate(style,obj)
	
	obj：{
		duration:持续时间,
		step:function(){
			//动画每一帧执行过程中不断的来执行这个函数
		},
		easing//速度曲线
	}
	
	html5 web本地存储 
	sessionStorage:浏览器关闭就清除
	
	setItem("健名","健值")
	getItem("健名")
	removeItem("健名")
	clear()
	
	localStorage:永久存在，除非主动清除
	
	localStorage：
	
	setItem("健名","健值")
	getItem("健名")
	removeItem("健名")
	clear()
	
	json
	什么是Jaso？
		json是一种轻量级的数据交换格式，它也算ECMAScript的一个子集
		优点：
		01、便于储存
		02、易于编写和阅读
		03、比其他数据交换格式更快更易使用
	
	json语法规则：
	{
		键值:"键名"
	}
	
	{
		username:"admin"
	}		
	
	===》username="admin"
	
	json对象结构
	{
		userid:0,
		username:"admin"
	}
	
	json数组结构
	
	[{
		userid:0,
		username:"admin",
		arr:[01,02,03]
	},{
		userid:1,
		username:"楚跃"
	}]
	
	键值可允许的值：
	数字（整形或者浮点型）
	字符串（双引号）
	布尔值（true/false）
	数组（方括号）
	对象（花括号）
	
	
	json 转字符串:JSON.stringify(json对象)
	字符串转json:JSON.parse(字符串)
	
	
	ajax(Jquery)
	
	
	$.ajax(obj)
	obj:
	type:"get",//请求的方式[get/post]
	url:"js/test.json",//请求的路劲
	async:true,//是否异步
	dataType:"json",
	//返回的数据类型[text(文本格式),xml(xml格式),json(json格式),jsonp(jsonp)]
	data:{}//发送的数据[一般用于post请求]
	success:function(data,status){},
	//请求成功的时候执行的方法，data[服务端响应的数据],status:服务端的状态码
	error:function(req,status,msg){}//
	请求失败的时候执行的方法,seq异步加载的核心，status:服务端的状态,msg:错误的信息
	
	
	$("选择器").load(url):可以将对应url的整个html页面放到选择器选中的元素里面