jquery学习总结（详细，遇到的问题，解决方案）

Jquery总结

1. Jquery介绍

        jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。 jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，现在由Dave Methvin率领团队进行开发。如今， jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery 。【摘自百度百科】

下载地址
http://jquery.com/

源码地址

https://github.com/jquery/jquery

可以通过 git clone git://github.com/jquery/jquery.git 来获取源码。
jQuery

1.1 原生javascript 与 jquery 加载时的区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片）才能执行	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个，以下代码无法正确执行：window.onload =function({alert(“test1”);}window.onload = function(){alert(“test2”);}结果只会输出"test2"	能同时编写多个
简化写法	无	$(document).ready(function());可以简写成$(function(){});

2. 初始jquery

//加载事件
$(function(){})
$(document).ready(function(){})

//工厂函数   将DOM转换为JQuery    selector 获取元素    sction JQuery提供方法
$(selector).sction();		

//元素添加Class类选择器样式
$("li").addClass();
//移除Class样式
$("li").removeClass();
//添加和移除 组合事件
$("li").toggleClass();

//获取当前并选中的选择器
$(this)

//添加样式css()
$("li").css("属性","属性值");
$("li").css({"属性1":"属性值1","属性2":"属性值2","属性3":"属性值3"});

//显示   参数 动画总时间
$("li").show(1000);
//隐藏
$("li").hide(1000);

//获取子元素集合
$("li").children()
//获取下一个同级元素
$("li").next()

DOM转换JQuery   JQuery命名一般用$开头
var text = document.getElementById("txtName");
var $txt = $(text);
JQuery转换DOM
//方式一
var $txt = $(text);
var txtName = $txt[0];
//方式二
var $txt = $(text);
var txtName = $txt.get(0);

3. JQuery选择器

//基本选择器
$("h2")			 标签选择器
$(".class")		 类选择器
$("#id")		 Id选择器
$("h1,h2,h3")	 并集选择器
$("*")			 全局选择器	

//层次选择器
$("#menu span")		后代选择器
$("#menu>span")		子选择器
$("h2+dl")		    相邻元素选择器(h2之后的同辈的第一个dl元素)
$("h2~dl")			同辈元素选择器(h2之后的所有的同辈dl元素)
sibling()			获取所有同辈元素上下都可以查找

//属性选择器
$("[href]")			选择包含href属性的元素
$("[href='#']")		选择href属性值为“#”的元素
$("[href!='#']")	选择href属性值不为"#"的元素
$("[href^="ww"]")	选择href属性值以ww开的的元素
$("[href$='.com']")	选择href属性值以.com结尾的元素
$("[href="txt"]")	选择href属性值包含txt的元素


//基本过滤器
:first				获取第一个元素
:last				获取最后一个元素
:not(selector)		 选取去除所有与给定选择器匹配的元素
:even				选取索引是偶数的所有元素(index从0开始)
:odd				选取索引是奇数的所有元素(index从0开始)
:eq(index)			选取索引等于index的元素(index从0开始)
:gt(index)			选取索引大于index的元素(index从0开始)
:lt(index)			选取所以小于index的元素(index从0开始)
:header 			选取索引小于index的元素(index从0开始)
:focus				选取当前获取焦点的元素
:animated			选取所有动画元素
//可见性过滤器
:visible			获取所有可见的元素
:hidden				获取所有隐藏的元素

4. 事件和动画

	//判断是否拥有类样式
$("ul").hasClass("boxs");
//组合使用  （无需判断，隐士迭代）
$("ul").toggleClass("boxs");


//获取小图片路径-----attr()--相当于js中的setAttribute和getAttribute
//attr("键","值")---设置属性值   attr("键")--获取属性值
$(this).attr("src");
$(this).attr("src","123.png");
//获取下标
index()

//鼠标事件
click()				鼠标单击事件
mouseover()			鼠标移入事件
mouseout()			鼠标移出事件
mouseenter()		鼠标进入事件(做二级菜单)
mouseleave()		鼠标离开事件(做二级菜单)
keydown()			按下键盘时
keyup()				释放按键时
keypress()			产生可打印的字符
focus()				获取焦点事件
blur()				失去焦点事件
submit()			提交事件
//复合事件
hover()				经过，离开联合事件
toggle()			连续点击事件

//绑定事件  (弊端:不能给未来元素添加原有的事件)
//绑定一个事件
var one;
var two;
$("h3").bind("mouseover",function(){})
//绑定多个事件
bind({
    mouseover:one=function(){},
    mouseout:two=function(){}
})
//移除事件
$("h3").unbind("click",one);


//动画

//下拉
slideDown(时间,回调函数)
//上移
slideUp(时间,回调函数)
//组合事件 下拉上移切换
slideToggle(时间)

//淡入
fadeIn(时间,回调函数)
//淡出
fadeOut(时间,回调函数)

//显示
show(时间,回调函数)
//隐藏
hide(时间,回调函数)
//组合
toggle(时间)

//animate动画
.animate({CSS属性:值},时间,回调函数)

5. 使用Jquery操作DOM

//设置CSS样式
css("键":"值");			 //设置一个
css({"键":"值","键":"值"})	//设置多个
css("键");				 //获取CSS样式
//追加类样式
addClass();
//移除类样式
removeClass();		
//样式切换  替代了追加和移除样式
toggleClass();
//查看是否存在类样式
hasClass();

//设置获取文本值
html()				获取值  (获取标签和值   不解析标签)
text()				获取值	（获取标签中的值 解析标签）
html(content)		 设置值 （设置标签中的值  解析标签）
text(content)		 设置值  (设置标签中的值  不解析标签)
//设置具有value属性的值
val()				获取
val("content")	  	 设置

//节点操作
//查找节点	利用选择器查找
$("contain:last")
//创建节点  选择器  DOM元素 HTML代码
$(selector),$(element),$(html)

//插入节点
$("ul").append("<li>1<li>")			向ul里面追加li标签 添加到最后行
$("ul").prepend("<li>1</li>")		向ul里面追加li标签 添加到第一行
$("<li>1</li>").appendTo("ul")		向ul里面追加li标签 添加到第一行
$("<li>1</li>").prependTo("ul")		向ul里面追加li标签 添加到第一行

$("ul").after("<li>1<li>")			在ul外部上面追加li标签
$("ul").before("<li>1</li>")		在ul外部下面追加li标签
$("<li>1<li>").insertAfter("ul")	 在ul外部上面追加li标签
$("<li>1</li>").insertBefore("ul")	 在ul外部下面追加li标签

//删除节点
remove()							将内容和结构全部删除
empty()								只是将内容清空,结构保留

//替换节点
$("ul li:eq(0)").replaceWith("<li>123</li>")
$("<li>123</li>").replaceAll("ul li:eq(0)")

//复制对象
$(this).clone(true).appendTo(".gameList);		//未来元素也具备功能
$(this).clone(false).appendTo(".gameList);		//未来元素也不具备功能

//属性操作 ** 重要
$(selector).attr(name);				//获取值
$(selector).attr(name,value);		 //设置一个值
$(selector).attr({name:val,naem:val});//设置多个值
$(selector).attr(name)				//删除属性

on--可以给未来元素绑定事件(单击，悬浮等)
bind--只能给页面原有的元素绑定事件，不能给未来元素绑定事件
//给未来元素绑定事件  事件  元素  方法
 $(document).on("click",".del",function(){
	$(this).parent().remove();
})

//节点遍历
.lenght()			获取长度
.index()			获取下标

//获取子级元素
.children()			遍历子元素
.find(element)		获取所有子元素

//获取同级元素
.next()				遍历同辈元素  获取下一个元素
.prev()				遍历同辈元素  获取上一个元素
.siblings()			遍历同辈元素  获取相邻兄弟

//获取父级元素
.parent([selector]) 	获取父元素
.parents([selector])  	获取祖先元素

//each() 遍历元素
//方式一
$("ul").children("li").each(function(){
    console.log($(this).html());
})
//方式二   i--索引,相当于每一个li标签的下标
		  e--当前元素,相当于每一个li标签
$("ul").children("li").each(function(i,e){
    console.log("下标----"+i+"---值--"+$(e).html());
});
$.each($(".box"),function(){
    
})

//end() 结束链式操作
first()----第一个元素
last() ----最后一个元素
end()  ----结束链式操作
 $("li").first().css("background","red").end().last().css("background","pink");

//CSS-DOM操作
css()				设置或返回css样式
height([value])		 设置或返回匹配元素的高度
width([value])		 设置或返回匹配元素的宽度
position()			 返回第一个匹配元素相对于父元素的位置
offset([value])		 返回以像素为单位的top和left坐标，必须时可见元素
offsetParent()		 返回最近的以定位祖先元素
scrollLeft([position])设置或返回滚动条的左偏移量
scrollTop([position]) 设置或返回滚动条的顶部偏移量

6. 表单验证

/.../			代表一个模式的开始和结束
^				表示字符串的开始
$				表示字符串的结束
\s				任意空白字符
\S				任意非空白字符
\d				匹配一个数字字符,等价于[0~9]
\D				除了数字之外的任何字符,等价于[^0~9]
\w				匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]
\W				任何非单字字符，等价于[^a-zA-Z0-9_]
.				除了换行符之外的任意字符
{n}				匹配前一项n次
{n,}			匹配前一项n次,或者多次
{n,m}			匹配前一项至少n次，但是不能超过m次
*				匹配前一项0次或多次 等价于{0,}
+				匹配前一项1次或多次,等价于{1,}
?				匹配前一项0次或1次,也就是说前一项是可选的，等价于{0,1}

//方法
rg.test("123")			检测是否规范

//禁用输入空自动展示数据
autocomplete="off" 

7. 本地存储

7.1 本地存储介绍

本地存储
	1.数据存储在用户浏览器中
	2.设置、读取方便、甚至页面刷新不丢失数据
	3.容量较大，sessionStorate约5M、localStorage约20M
	4.只能存储字符串，可以将对象JSON.stringify()编码后存储

1.window.sessionStorage 对话存储
	1.生命周期为关闭浏览器窗口
	2.在同一个窗口(页面)下数据可以共享
	3.以键值对的形式存储使用

sessionStorage.setItem(key,value)		 本地存储
sessionStorage.getItem(key)				获取数据
sessionStorage.removeItem(key)			 删除数据
sessionStorage.clear()				    删除所有数据

2.window.localStorage 本地存储
	1.生命周期永久生效，除非手动删除 否则关闭页面也h会存在
	2.可以在多窗口(页面)共享(同一浏览器可以共享)
	3.以键值对的形式存储s使用
localStorage.setItem(key,value);		本地存储
localStorage.getItem(key)				获取数据
localStorage.removeItem(key)			删除数据
localStorage.clear()				    删除所有数据

7.2 json实现本地存储

//把数组添加到本地存储中:因为本地存储只能存储字符串,不能存储数组, 对象,所以需要把数组转换成JSON格式的字符串
var str = JSON.stringify(array);		 	 //把数组转换成字符串
var arr = JSON.parse(str)					//转换回原来的模式



var todolist = [{
	title:"今天学习玩本地存储",
	done: false
},{
	title:"我今天学JQuery",
	done: false
}];
//1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringfiy()
localStorage.setItem("todo",JSON.stringify(todolist));
var data = localStorage.getItem("todo");
//2.获取本地存储的数据,我们需要把里面的字符串数据转换为 对象格式 JSON.parse();
data = JSON.parse(data);


splice(从哪个位置删除,删除几个)				删除数组中的某些元素

8. 获取固有属性和自定义属性

prop()					获取在匹配的元素集中的第一个元素的属性值。
attr() 					检索 HTML 属性，attr()代替。
removeProp() 			移除属性。

选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked")

禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
  disabled: true
});

禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

9. 事件处理on

//(1)on可以绑定1个或者多个事件处理程序
$("div").on({
    mouseover : function(){},
    mouseout : function(){},
    click : function(){}
});
//事件相同
$("div").on("mouseover mouseout",function(){
    $(this).toggleClass("current");
})

//(2)可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){
    alert("hello world");
})

//(3)动态创建的元素，click()没有办法绑定事件，on()可以给未来动态s生成的元素绑定事件
$("div").on("click","p",function(){
    alert("我可以动态生成的元素绑定事件");
});
$("div").append($("<p>我是动态创建的p</p>"))
$(document).on("click","div p",function(){
    alert("我可以动态生成的元素绑定事件");
});

//(4)事件对象,event可以判断用户按下的是那个键
$("ul").on("click","li",function(event){
    e.keyCode()===13;
})

//(5)事件解绑 off
$("div").off();				这个是解绑了div身上的所有事件
$("div").off("click","li");  这个是解绑了div身上的点击事件

//(6)one()但是它只能触发事件一次
$("p").one("click",function(){
    alert(11);
})

10. 自动触发事件trigger()

element.click()			 //第一种简写形式
element.trigger("type")	 //第二种自动触发模式
$("p").on("click", function () {
 	alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

//自动触发事件
//1.元素 事件()
$("div").click();

//2.元素.trigger("click");  会触发元素的默认行为
$("input").trigger("focus");

//3.元素.triggerHandler("事件"); 就是不会触发元素的默认行为
//$("div").triggerHandler("click");
$("input").on("focus",function(){
 $(this).val("你好吗");
})
$("input").triggerHandler("focus");


//阻止冒泡
 $("div").on("click",function(event){
 	//console.log(event);
 	console.log("点击了div");
 	event.stopPropagation();
 })

11. 项目中遇到的问题解决

11.1 对象拷贝

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
语法：$.extend([deep], target, object1, [objectN]) 
$.extend(true,new,odd);

1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

11.2 $符号冲突

 $(function(){
     function $(els){
    	 return document.querySelector(els);
     }
     console.log($("div"));
     //1.如果$符号冲突,我们就可以使用Jquery
     jQuery.each();
     //2.让Jquery释放对$符控制权限 让用户自己决定
     var suibian = jQuery.noConflict();
     console.log(suibian("span"));
     suibian.each();
 })

11.3 插件库

JQuery插件库	 http://www.jq22.com/ 
JQuery库		  http://www.htmleaf.com/ 
	
图片懒加载		https://www.jq22.com/jquery-info11629
全屏滚动
 				gitHub： https://github.com/alvarotrigo/fullPage.js
 			中文翻译网站： http://www.dowebok.com/demo/2014/77/

11.4 解决动画重复问题

jQuery(document).ready(function($) {
	$(".main>li").hover(function() {
		$(this).children("ul").slideDown();
	}, function() {
		$(this).children("ul").stop(true,false).slideUp();
	});                                             
});
stop([clearQuery],[jumpToEnd]]);
clearQuery:如果设置成true，则清空队列,可以立刻结束动画
jumpToEnd:如果设置成tur,则完成列队,可以立刻完成动画,可选,默认是false

11.5 一行显示

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

11.6 多行显示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

11.7 点击空白处，失去所选区域焦点事件

$(document).mouseup(function(e) {
	var _con = $('.country-code'); // 设置目标区域
	if (!_con.is(e.target) && _con.has(e.target).length === 0) {
		$(".country-code").slideUp();
	}
});