jquery学习笔记
2016-05-11 17:30
501 查看
1、jquery对象与DOM对象的区别与互换
利用jquery选择器选择出来的对象就是jquery对象
利用getElementsTagName或者getElementById获取的元素是Dom对象
Jquery对象只能使用jquery封装的方法，例如html(),attr(),css()...
DOM对象只能使用js方法，如checked
Jquery——>DOM
var str=$(“.class”)[0]
DOM——>jquery
var str=document.getElementById(“id”);
var $str=$str;
2、解决jquery与其他库的冲突
（1）让出$, jQuery.noConflict();
（2）创建一个快捷方式 var zch=jQuery.noConflict();
3、$(“.name”)获取的永远是对象，要判断一个对象是否存在下面的方法是不对的
If($(“.name”)){
//do something
}
应该通过获取对象的长度来判断：
If($(“.name”).length > 0){
//do something
}
或者转化为DOM对象
If($(“.name”)[0]){
//do something
}
4、js获取标签内部的标签时其实获取的是一个数组，要获取其中的一个应该以数组的方式获取
var
checkBtnNum=document.getElementById("check_btn_num");
var checkFont=checkBtnNum.getElementsByTagName("font")[0];
5、jquery选择器分为：
基本选择器：id，class，element，*，选择器组
层次选择器：$(“.divspan”), $(“.div > span”), $(“.div + next”), $(“.div ~ div”)[选取div之后的所有]
next()与nextAll()方法的使用
过滤选择器：
(1)基本过滤选择器：
:first, :last, :not(“.name”), :even, :odd, eq(index), :lt(index), :gt(index),:header, :animated, :focus
【index从0开始】
(2)内容过滤：:contain(text), :empty, :has, :parent
(3)可见性过滤：:hidden, :visiable
(4)属性过滤：[],[=],[!=],[^=],[$=],[*=],[|=],[~=],[][][]
(5)子元素过滤: :nth-child(index), :first-child, :last-child, :only-child
【index从1开始】
(6)表单对象属性过滤：:enable, :disable, :checked, :selected
表单选择器：
：表单类型。。。
6、jquery的转义字符是\\，js的转义字符是\
$("#a\\[\\]").css("color","red");
var jsId=document.getElementById("a\[\]")
基本选择器中的:first :last
和过滤选择器-子元素选择器中:first-child :last-child的区别
前者是获取一个元素，后者是获取一个集合
举例：
<ul class=”list”>
<li>Test1<li>
<li>aaaaa<li>
<li>bbbbb<li>
</ul>
<ul class=”list”>
<li>Test2<li>
<li>ccccc<li>
<li>ddddd<li>
</ul>
$(".list li:first").css("color","red");只有值为Text1变红
$(".listli:first-child").css("color","red");test1和test2都变红
filter()与find()的区别
filter()是针对选择器本身进行的过滤.$(“div”).filter(“.tt”)等价于$(“div.tt”)
find()是针对子元素进行的过滤. $(“div”).find(“.tt”)等价于$(“div .tt”)
:has(seletor)：作用于自身，$(“div:has(p)”)—包含p标签的所有div
.has()：作用于自身，貌似和:has()没啥区别
.filter()：作用于自身，选取的结果是符合条件的自身元素
.find()：作用于后代，选取的结果是后代元素
:contains(text)：作用于自身，选取符合匹配文本条件的元素集合
.hasClass()：判断，返回布尔值
.is()：判断，返回布尔值
DOM是文档对象模型，是一种与浏览器、语言和平台无关的接口，利用它可以轻松获取页面中的元素。文档对象分为
DOM CORE：核心DOM，定义了一套标准的针对任何结构化文档的对象，包括HTML、XML和XHTML。
HTML DOM
CSS DOM
append()和appendTo()的区别
append()可以追加元素和字符串，appendTo()只能向选定的目标元素中追加自定义元素和移动页面上现有的元素。
<p>2222</p>
<div class="menu">111</div>
<script type="text/javascript">
$(function(){
$(“<b>自定义的元素</b>”) .appendTo('div');//把b标签追加到div内部后面
$('p').appendTo('div');//把“<p>2222</p>”移动到div内部后面，如果目标选择器有多个会移动之后再进行复制
});
</script>
删除元素节点的三个方法区别
remove([expr]) detach([expr]) empty()
1、
remove和detach删除当前元素，empty清空子节点和文本
2、
remove和detach都可以恢复删除掉的数据，但是detach可以恢复删除元素绑定的事件和数据
<div class="menu">
11
</div>
<br><br>
<buttonid="back">back</button>
<br><br>
<scripttype="text/javascript">
$(function(){
$('.menu').hover(function(){
$(this).text('Google+');
});
//var x=$('.menu').detach();
varx=$('.menu').remove();
$('#back').click(function(event){
$('body').append(x);
});
});
</script>
val()方法不仅可以设置元素的值，同时也可以获取元素的值，还可以使select，checkbox和radio相应的选项被选中。
<input type=” radio” value=”radio1”>
<input type=” radio” value=”radio2”>
$(‘:radio’).val([‘radio1’,’radio2’])
另一种方法：
$(‘:radio’).attr(‘checked’,true);
HTML中P标签内不可包含DIV标签
DTD中规定了块级元素是不能放在P里; P标签内包含块元素时，它会先结束自己。
各属性释义
screenX与Y【全兼容】：是鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了。
clientX与Y【全兼容】：是鼠标相对于浏览器视口（滚动条之外的部分忽略掉）的坐标；
offsetX与Y【firefox不支持】：是鼠标相对于当前所指向对象的坐标，鼠标此时指向按钮，则offsetX是相对于这个按钮；
layerX与Y【firfox中必须要定位，ie78不支持】：是标准浏览器出的新属性，IE9也支持。他可以用来代替offsetX与Y.但是，他的定义为：相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性（即非static）。
获取元素的位置将两者结合起来：
var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
pageX与Y【IE7、8不支持】：是鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的；
兼容性总结：
1，firefox不支持offsetX,offsetY与x,y属性，但完全可以用layerX代替他们；
2，ie中的x,y相当于firefox&chrome中的layerX与layerY；
3，ie7,8的document的边界与浏览器窗口的边界有2px的距离，所以在窗口最大化时screenX最小都有2px；
4，ie9中的layerX与Y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，不要在IE9中使用layerX.
兼容性总结：
标准浏览器中可以用position与event.layerX配合来实现event.offsetX属性；
IE7，8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。
所以，IE中的x,y或者offsetX,offsetY可以去掉一个了。
预览效果：http://jo2.org/javascript-get-mouse-coordinates/
总结：
ScreenXY与clientXY没有问题
offsetXY和layerXY(需要定位)结合使用
pageXYIE78不支持，计算公式：PageY=clientY+scrollTop-clientTop;
window.onload=zch;与window.onload
window.onload也相当于一个触发事件，如果函数加了括号那就直接先执行函数，再加载body。而不加括号，则相当于将一个函数当作变量赋值到window.onload上，并不立即加载。
<script>
window.onload = doIt();
function doIt() {
var oDiv = document.getElementById("div1");
alert (oDiv);
}
<div id="div1"></div>
</script>结果为null
<script>
window.onload = doIt;
function doIt() {
var oDiv = document.getElementById("div1");
alert (oDiv);
}
</script>
<div id="div1"></div>
结果为[object HTMLDivElement]
以上代码都在heade之间
加载DOM
$(document).ready(function(){
})
简写形式：
$(function(){
})
事件绑定：bind，on
$(‘div’).on(‘click’,function(){
})
$(‘div’).unbind(‘click’);
合成事件：
hover()和toggle()——toggle方法1.9版本已经不支持了
事件冒泡：
由内到外依次触发
阻止方法：event.stopPropogation()
阻止标签默认行为：event.preventdefault()
阻止冒泡也可以改写为 return false;
事件捕获与冒泡正好相反，jquery不支持，需要些原生js
事件的属性有：
event.target——触发事件的元素，this是注册事件的元素
比如：
$(‘li’).click(function(event){
var el1=event.target.nodeName;//显示为b
var el2=this.nodeName;//显示为li
})
event.target与this是js dom对象，转换为jquery对象要这么写：$(event.target)、$(this)
event.relatedTarget
event.pageX和event.PageY
event.which
event.metaKey
移除事件
bind()——unbind()
on()——off()
delegate()——undelegate()
绑定事件时可以添加事件命名空间，删除的时候直接删除命名空间即可，比较方便。
示例：
$(‘ele’).bind(‘click.zch’,function({})
$(‘ele’).bind(‘dbclick.zch’,function({})
$(‘ele’).bind(‘mouseover.zch’,function({})
$(‘button’).click(function(){
$(‘ele’).unbind(‘.zch’)
})
模拟操作
trigger(),可以出发自定义的方法
动画
show()
hide()
fadeIn()
fadeOut()
停止动画：stop(clearQueue，goEnd)
判断动画是否在执行中
$(element).is(‘:animated’){}
自定义方法animate
多次触发除了用stop()函数清空动画队列之外还可以这么写：
$(element).animate({left:’+=50px’},{queue:false,duration:1000},function(){
//do something
})
表单中的checked和selected最好用prop()方法来获取，返回值为布尔值。
Trigger(‘blur’)可以触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，单单想元素起作用可以使用triggerHandler(‘blur’)方法
三元运算：
$(this)[hasClassOn?'removeClass':'addClass']('on');
方便记忆：这不是jquery的三元运算，是js的三元运算，js中的属性都能使用[]来表示，方法也不例外，
如果理解： Object = {"name":"Hello"};
Object.name = Object["name"]
下面的就容易理解了：
$(this)[hasSelected?"removeClass":"addClass"]("selected");
等同于
$(this)["removeClass"]("selected") 或者 $(this)["addClass"]("selected")
其实也就是
$(this).removeClass("selected"); 或者 $(this).addClass("selected");
jQuery插件
插件分为三种：
1、
封装对象方法的插件
2、
封装全局函数的插件
3、选择器插件
理解第一种和第二种需要分清楚$.fn.extend()和$.extend()的区别
jQuery.fn.extend是用来给jQuery封装的对象添加功能的，而jQuery.extend是用于给jQuery对象本身添加功能的。
下面是两个插件代码：
对象方法插件($.fn.extend())这样使用：$(‘.name’).showTagName()
其他注意事项：
1、闭包：
;(function($){
Var def = $.extend({
Name:””,
url:””
},def)
$.fn.myFunction= function(def){
return this.each(function(){
Var x = def.name;
Console.log(x);
})
};
})(jQuery);
2、通过this.each()遍历对象
提高jquery的性能
（1） 尽量使用id选择器和标签选择器（因为直接调用本地方法）
（2） 缓存对象（如果某个选择器使用频繁最好复制给变量储存在缓存中，当然链式操作也可以）
（3） 循环语句中应该减少对于DOM的操作（比如将一个有100个数字的数组添加到ul中，最好先用循环创建100个li，然后再追加到ul中，这样就只有一个dom操作，如下程序）
（4） 循环数组尽量使用for循环
（5） 事件代理—给100li添加点击事件不如给父级ul添加点击事件，通过判断点击的元素进行处理，即获取e.target。jquery有on()方法
$(‘ul’).on(“click”,”li”,function(e){
$(this).css("color",'red');
})
（6） 将数组追加到元素中可以使用join()方法
（7） 尽量使用原生的js方法
利用jquery选择器选择出来的对象就是jquery对象
利用getElementsTagName或者getElementById获取的元素是Dom对象
Jquery对象只能使用jquery封装的方法，例如html(),attr(),css()...
DOM对象只能使用js方法，如checked
Jquery——>DOM
var str=$(“.class”)[0]
DOM——>jquery
var str=document.getElementById(“id”);
var $str=$str;
2、解决jquery与其他库的冲突
（1）让出$, jQuery.noConflict();
（2）创建一个快捷方式 var zch=jQuery.noConflict();
3、$(“.name”)获取的永远是对象，要判断一个对象是否存在下面的方法是不对的
If($(“.name”)){
//do something
}
应该通过获取对象的长度来判断：
If($(“.name”).length > 0){
//do something
}
或者转化为DOM对象
If($(“.name”)[0]){
//do something
}
4、js获取标签内部的标签时其实获取的是一个数组，要获取其中的一个应该以数组的方式获取
var
checkBtnNum=document.getElementById("check_btn_num");
var checkFont=checkBtnNum.getElementsByTagName("font")[0];
5、jquery选择器分为：
基本选择器：id，class，element，*，选择器组
层次选择器：$(“.divspan”), $(“.div > span”), $(“.div + next”), $(“.div ~ div”)[选取div之后的所有]
next()与nextAll()方法的使用
过滤选择器：
(1)基本过滤选择器：
:first, :last, :not(“.name”), :even, :odd, eq(index), :lt(index), :gt(index),:header, :animated, :focus
【index从0开始】
(2)内容过滤：:contain(text), :empty, :has, :parent
(3)可见性过滤：:hidden, :visiable
(4)属性过滤：[],[=],[!=],[^=],[$=],[*=],[|=],[~=],[][][]
(5)子元素过滤: :nth-child(index), :first-child, :last-child, :only-child
【index从1开始】
(6)表单对象属性过滤：:enable, :disable, :checked, :selected
表单选择器：
：表单类型。。。
6、jquery的转义字符是\\，js的转义字符是\
$("#a\\[\\]").css("color","red");
var jsId=document.getElementById("a\[\]")
基本选择器中的:first :last
和过滤选择器-子元素选择器中:first-child :last-child的区别
前者是获取一个元素，后者是获取一个集合
举例：
<ul class=”list”>
<li>Test1<li>
<li>aaaaa<li>
<li>bbbbb<li>
</ul>
<ul class=”list”>
<li>Test2<li>
<li>ccccc<li>
<li>ddddd<li>
</ul>
$(".list li:first").css("color","red");只有值为Text1变红
$(".listli:first-child").css("color","red");test1和test2都变红
filter()与find()的区别
filter()是针对选择器本身进行的过滤.$(“div”).filter(“.tt”)等价于$(“div.tt”)
find()是针对子元素进行的过滤. $(“div”).find(“.tt”)等价于$(“div .tt”)
:has(seletor)：作用于自身，$(“div:has(p)”)—包含p标签的所有div
.has()：作用于自身，貌似和:has()没啥区别
.filter()：作用于自身，选取的结果是符合条件的自身元素
.find()：作用于后代，选取的结果是后代元素
:contains(text)：作用于自身，选取符合匹配文本条件的元素集合
.hasClass()：判断，返回布尔值
.is()：判断，返回布尔值
DOM是文档对象模型，是一种与浏览器、语言和平台无关的接口，利用它可以轻松获取页面中的元素。文档对象分为
DOM CORE：核心DOM，定义了一套标准的针对任何结构化文档的对象，包括HTML、XML和XHTML。
HTML DOM
CSS DOM
append()和appendTo()的区别
append()可以追加元素和字符串，appendTo()只能向选定的目标元素中追加自定义元素和移动页面上现有的元素。
<p>2222</p>
<div class="menu">111</div>
<script type="text/javascript">
$(function(){
$(“<b>自定义的元素</b>”) .appendTo('div');//把b标签追加到div内部后面
$('p').appendTo('div');//把“<p>2222</p>”移动到div内部后面，如果目标选择器有多个会移动之后再进行复制
});
</script>
删除元素节点的三个方法区别
remove([expr]) detach([expr]) empty()
1、
remove和detach删除当前元素，empty清空子节点和文本
2、
remove和detach都可以恢复删除掉的数据，但是detach可以恢复删除元素绑定的事件和数据
<div class="menu">
11
</div>
<br><br>
<buttonid="back">back</button>
<br><br>
<scripttype="text/javascript">
$(function(){
$('.menu').hover(function(){
$(this).text('Google+');
});
//var x=$('.menu').detach();
varx=$('.menu').remove();
$('#back').click(function(event){
$('body').append(x);
});
});
</script>
val()方法不仅可以设置元素的值，同时也可以获取元素的值，还可以使select，checkbox和radio相应的选项被选中。
<input type=” radio” value=”radio1”>
<input type=” radio” value=”radio2”>
$(‘:radio’).val([‘radio1’,’radio2’])
另一种方法：
$(‘:radio’).attr(‘checked’,true);
HTML中P标签内不可包含DIV标签
DTD中规定了块级元素是不能放在P里; P标签内包含块元素时，它会先结束自己。
各属性释义
screenX与Y【全兼容】：是鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了。
clientX与Y【全兼容】：是鼠标相对于浏览器视口（滚动条之外的部分忽略掉）的坐标；
offsetX与Y【firefox不支持】：是鼠标相对于当前所指向对象的坐标，鼠标此时指向按钮，则offsetX是相对于这个按钮；
layerX与Y【firfox中必须要定位，ie78不支持】：是标准浏览器出的新属性，IE9也支持。他可以用来代替offsetX与Y.但是，他的定义为：相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性（即非static）。
获取元素的位置将两者结合起来：
var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
pageX与Y【IE7、8不支持】：是鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的；
兼容性总结：
1，firefox不支持offsetX,offsetY与x,y属性，但完全可以用layerX代替他们；
2，ie中的x,y相当于firefox&chrome中的layerX与layerY；
3，ie7,8的document的边界与浏览器窗口的边界有2px的距离，所以在窗口最大化时screenX最小都有2px；
4，ie9中的layerX与Y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，不要在IE9中使用layerX.
兼容性总结：
标准浏览器中可以用position与event.layerX配合来实现event.offsetX属性；
IE7，8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。
所以，IE中的x,y或者offsetX,offsetY可以去掉一个了。
预览效果：http://jo2.org/javascript-get-mouse-coordinates/
总结：
ScreenXY与clientXY没有问题
offsetXY和layerXY(需要定位)结合使用
pageXYIE78不支持，计算公式：PageY=clientY+scrollTop-clientTop;
window.onload=zch;与window.onload
window.onload也相当于一个触发事件，如果函数加了括号那就直接先执行函数，再加载body。而不加括号，则相当于将一个函数当作变量赋值到window.onload上，并不立即加载。
<script>
window.onload = doIt();
function doIt() {
var oDiv = document.getElementById("div1");
alert (oDiv);
}
<div id="div1"></div>
</script>结果为null
<script>
window.onload = doIt;
function doIt() {
var oDiv = document.getElementById("div1");
alert (oDiv);
}
</script>
<div id="div1"></div>
结果为[object HTMLDivElement]
以上代码都在heade之间
加载DOM
$(document).ready(function(){
})
简写形式：
$(function(){
})
事件绑定：bind，on
$(‘div’).on(‘click’,function(){
})
$(‘div’).unbind(‘click’);
合成事件：
hover()和toggle()——toggle方法1.9版本已经不支持了
事件冒泡：
由内到外依次触发
阻止方法：event.stopPropogation()
阻止标签默认行为：event.preventdefault()
阻止冒泡也可以改写为 return false;
事件捕获与冒泡正好相反，jquery不支持，需要些原生js
事件的属性有：
event.target——触发事件的元素，this是注册事件的元素
比如：
$(‘li’).click(function(event){
var el1=event.target.nodeName;//显示为b
var el2=this.nodeName;//显示为li
})
event.target与this是js dom对象，转换为jquery对象要这么写：$(event.target)、$(this)
event.relatedTarget
event.pageX和event.PageY
event.which
event.metaKey
移除事件
bind()——unbind()
on()——off()
delegate()——undelegate()
绑定事件时可以添加事件命名空间，删除的时候直接删除命名空间即可，比较方便。
示例：
$(‘ele’).bind(‘click.zch’,function({})
$(‘ele’).bind(‘dbclick.zch’,function({})
$(‘ele’).bind(‘mouseover.zch’,function({})
$(‘button’).click(function(){
$(‘ele’).unbind(‘.zch’)
})
模拟操作
trigger(),可以出发自定义的方法
动画
show()
hide()
fadeIn()
fadeOut()
停止动画：stop(clearQueue，goEnd)
判断动画是否在执行中
$(element).is(‘:animated’){}
自定义方法animate
多次触发除了用stop()函数清空动画队列之外还可以这么写：
$(element).animate({left:’+=50px’},{queue:false,duration:1000},function(){
//do something
})
表单中的checked和selected最好用prop()方法来获取，返回值为布尔值。
Trigger(‘blur’)可以触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，单单想元素起作用可以使用triggerHandler(‘blur’)方法
三元运算：
$(this)[hasClassOn?'removeClass':'addClass']('on');
方便记忆：这不是jquery的三元运算，是js的三元运算，js中的属性都能使用[]来表示，方法也不例外，
如果理解： Object = {"name":"Hello"};
Object.name = Object["name"]
下面的就容易理解了：
$(this)[hasSelected?"removeClass":"addClass"]("selected");
等同于
$(this)["removeClass"]("selected") 或者 $(this)["addClass"]("selected")
其实也就是
$(this).removeClass("selected"); 或者 $(this).addClass("selected");
jQuery插件
插件分为三种：
1、
封装对象方法的插件
2、
封装全局函数的插件
3、选择器插件
理解第一种和第二种需要分清楚$.fn.extend()和$.extend()的区别
jQuery.fn.extend是用来给jQuery封装的对象添加功能的，而jQuery.extend是用于给jQuery对象本身添加功能的。
下面是两个插件代码：
$.fn.extend({
showTagName:function(){
var str="";
for(var c=0; c<=this.length-1; c++){
str += c + " : " + this[c].tagName + "\n";
}
alert(str);
}
});$.extend({
max:function(a,b){
return a>b ? a:b;
}
});对象方法插件($.fn.extend())这样使用：$(‘.name’).showTagName()
全局函数插件($.extend())这样使用：$.max(13,5)
其他注意事项：
1、闭包：
;(function($){
Var def = $.extend({
Name:””,
url:””
},def)
$.fn.myFunction= function(def){
return this.each(function(){
Var x = def.name;
Console.log(x);
})
};
})(jQuery);
2、通过this.each()遍历对象
提高jquery的性能
（1） 尽量使用id选择器和标签选择器（因为直接调用本地方法）
（2） 缓存对象（如果某个选择器使用频繁最好复制给变量储存在缓存中，当然链式操作也可以）
（3） 循环语句中应该减少对于DOM的操作（比如将一个有100个数字的数组添加到ul中，最好先用循环创建100个li，然后再追加到ul中，这样就只有一个dom操作，如下程序）
（4） 循环数组尽量使用for循环
（5） 事件代理—给100li添加点击事件不如给父级ul添加点击事件，通过判断点击的元素进行处理，即获取e.target。jquery有on()方法
$(‘ul’).on(“click”,”li”,function(e){
$(this).css("color",'red');
})
（6） 将数组追加到元素中可以使用join()方法
（7） 尽量使用原生的js方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery DataTables的简单实现
- Jquery常用功能总结
- JQuery中，html()、text()、val()区分
- 必看的 jQuery性能优化的38个建议
- jquery与原生js比较
- jQuery validate 无法校验 kindeditor 非空
- jquery的click事件失效
- jQuery 中的事件冒泡和阻止默认行为
- jQuery插件开发
- jQuery 之 $.get、$.post、$.getJSON、$.ajax
- jquery获取和改变值
- 一些常用的jQuery插件
- Jquery AutoComplete的使用方法实例
- JQuery validate插件验证用户注册信息
- jQuery validate验证插件使用详解
- jquery之empty()与remove()区别
- JQuery的jquery.min.js与jquery.js
- jquery的on()方法控制还未创建的节点
- js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
- Jquery插件仿百度搜索关键字自动匹配功能