jquery学习总结（详细，遇到的问题，解决方案）
文章目录
- Jquery总结
-
- 1. Jquery介绍
-
- 1.1 原生javascript 与 jquery 加载时的区别
- 2. 初始jquery
- 3. JQuery选择器
- 4. 事件和动画
- 5. 使用Jquery操作DOM
- 6. 表单验证
- 7. 本地存储
-
- 7.1 本地存储介绍
- 7.2 json实现本地存储
- 8. 获取固有属性和自定义属性
- 9. 事件处理on
- 10. 自动触发事件trigger()
- 11. 项目中遇到的问题解决
-
- 11.1 对象拷贝
- 11.2 $符号冲突
- 11.3 插件库
- 11.4 解决动画重复问题
- 11.5 一行显示
- 11.6 多行显示
- 11.7 点击空白处，失去所选区域焦点事件
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" | 能同时编写多个 |
| 简化写法 | 无 | ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) ; 可 以 简 写 成 (document).ready(function(){});可以简写成 (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("1 " ) 向ul里面追加li标签 添加到最后行
$("ul").prepend("1 ") 向ul里面追加li标签 添加到第一行
$("1 ").appendTo("ul") 向ul里面追加li标签 添加到第一行
$("1 ").prependTo("ul") 向ul里面追加li标签 添加到第一行
$("ul").after("1 " ) 在ul外部上面追加li标签
$("ul").before("1 ") 在ul外部下面追加li标签
$("1 " ).insertAfter("ul") 在ul外部上面追加li标签
$("1 ").insertBefore("ul") 在ul外部下面追加li标签
//删除节点
remove() 将内容和结构全部删除
empty() 只是将内容清空,结构保留
//替换节点
$("ul li:eq(0)").replaceWith("123 ")
$("123 ").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
"))
$(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();
}
});