写得少做得多——jQuery
<!--
总结1:
1、初识
jQuery是一个js文件,下载后引用即可使用。
jQuery压缩包,有两个文件,压缩与未压缩的。未压缩在写代码时用的,当发布时用压缩的js文件。
jQuery的顶级对象:
我们知道DOM的顶级对象是document,BOM的顶级对象是window,而jQuery的顶级对象是$。
且它们之间存在window.document.$这样的关系。
jQuery入口函数的写法
第一种:$(douement).ready(function(){
});
第二种(推荐):$(function(){
})
还有...
入口函数加载的区别:
原生与jQuery会等页面DOM对象加载完成,但jQuery入口函数不会等待页面的图片的加载。
解决jQuery的$符号冲突问题:
释放$的使用权:var yy=$.noConflict();//用yy代替了$,其它不变。
2、核心函数--$()
使用:
1、接收函数--入口函数
2、接收字符串,作为选择器或生成DOM对象(如果字符串内是html代码)
3、接收DOM--包装为jquery对象
扩展:jQuery对象的本质是一个伪数组。验证:输出$("<选择器>"),(如果有0~length-1的属性,并且有length属性就是一个伪数组)
3、(回顾JS)静态方法与实例方法
function AClass(){
}
静态方法:
直接添加在类中,AClass.staticMethod=function (){} //用函数名调用AClass.staticMethod();
实例方法:
添加在类的原型中,AClass.prototype.instanceMethod=function (){};//用类的实例调用 new AClass().instanceMethod();
4、jQuery的静态方法
遍历的方法each与map
说明:jQuery的each与map方法既可以遍历数组与字典,特别字典——伪数组,可以它有一个length属性,可以像数组一样进行遍历。两者遍历方法不同的是map可以接收其返回值来返回一个新数组,且两者回调函数参数位置颠倒。
伪数组是一个字典,具有正确的index:value,..与length:Num属性,遍历方法会根据length来检查index:value如果在此长度内有不合法的就会判断为字典,而不是伪数组。($.isArray(v)静态方法 可判断是否是一个真数组,即真数组与伪数组间的判断) 使用:
var vei={0:2,1:2,2:3,3:4,length:3};
//单纯的遍历用each
$.each(vei,function (index,value){
});
=====================================
//想通过处理遍历数组并返回新数组用map
var reArr=
$.map(vei,function(value, index){
return value;
});
元素的大小:
使用及说明:
width()或height()获取的是元素实际大小。
innerWidth()或innerHeight()包括内边距
outerWidth()或outerHeight()包括边框//若传入true参数,包括外边距
jQery常用的几个静态方法
(1)holdReady(boolean);//是jQuery入口函数的开关。在jQuery入口函数前传入true暂停jQery,false是恢复。
(2)val();//获取value属性值。特别地,应用在select中,子标签option的value值就是select的value值。
(3)index();//获取在兄弟元素中对应的索引值
(4)trim(str);//返回str去除两边空格的字符串。
5、使用WS编写代码的两个技能
生成死代码:打开设置搜索live左边加号添加一个Live Template,记得设置应用的“场景”。
默认打开的浏览器:在Keymap下搜索default openn这项,为其添加一个快捷键即可(可在设置中直接搜索)。
6、jQuery选择器
选择器:
默认已会的:
普通选择器:id、class、标签选择器
常用复合选择器:标签+类选择器
多条件选择器:$("div,p,h2");
层级选择器:“x p”与“x>p”,前者是后代的,后者是子代的。
特定选择器:
索引选择器:$("ul>li:eq(4)"):索引为4的。如果"大于4"的(多个):gt(4),"小于4"的(多个):lt(4)。
##奇偶选择器:$("ul>li:even")偶,$("ul>li:odd")奇;
首尾选择器:$('li:last')最后面的; first最前面的。
属性选择器:$(".comment>li[index=1]")。// [index^=1][index$=1][index*=1]
##显示与隐藏选择器::hidden获取display=none的元素,:visible"获取可见元素//补充:display(隐藏)与visibility(隐形)
排除选择器:not('#beng_3'),''内是选择器,排除选择器内的。
查找:
关系选择器:
父对象:parent("li")//括号内是父类的特征
兄弟:
next() //下一位兄弟,nextAll()下面的全部兄弟元素
prev() //上一位兄弟,prevAll()上面的全部兄弟元素
siblings("li") //选择全部li兄弟元素。
子元素:children(".menu_head")//选择class="menu_head"的子对象。
下寻选择器:$("p").find("#live") //find参数是一个选择器,向下查找。
表单子属性选中选择器:
下拉列表select[name=?]>option[value?]:(multiple="multiple" 加入该属性可多选)选择器":selected" 匹配所有选中的option元素 (使用示例:$("select option:selected") ) 。
复选框(input:checkbox && name相同)或单选按钮(input:radio && name相同才是一组单选组)[方圆选框]:":checked" 匹配所有选中的被选中元素 (使用示例:$("input:checked") )
7、属性与属性节点:
介绍:任何对象都有属性,但只有DOM对象才有属性节点,因为DOM对象存在attributes属性,里面的属性就是属性节点。
jQuery:
prop:用于操作对象的属性(id,class,name...)。
查增:<jQuery对象>.prop(..);//一个参数查找,二个参数设置。
删除:<jQuery对象>.removeProp(..);//只有一个参数,想删除多个只需用空格隔开。
attr:操作方法同上。用于操作属性节点,也可以操作属性,但特别的属性如checked等属性,attr得到的是undefined。这个是我们不想看到的。这时我们需要用prop来代替。
8、jQuery操作样式
通过添加类单元
addClass("class1 class2");//添加类名[可链式]
removeClass("class2");//删除类名,什么都不写,移除目标的所有class单元
toggleClass("class1");//有删除,没有添加
hasClass(<检测的类名单元>); //查看有没有此类名
通过css属性:
<jquery对象>.css("width","100px").css(..)..;//单链单参数为读取
批量设置:<jquery对象>.css({//介意使用
width:"100px", //如果”值“改为函数,可以得到两个函数参数,顺序是index与现在的属性的大小,而index是选择器中自己所在的索引
backgroundColor:"red"
});
9、操作文本值属性
<jQuery对象>.html(v);//赋入值就设置,没有就获取
<jQuery对象>.text(v);//同上
<jQuery对象>.val(v);//同上,且可获取/设置文本框的value属性值。
总结2:
1、位置
点击的点位置
clientX、clientY: 点击位置距离当前可视区域的x,y坐标[已验证]
pageX、pageY :对于整个页面来说,包括了被卷去的body部分的长度
相对距离:在定位的基础上,即子元素跟最近定位的祖先元素的距离。
获取:position();//输出是与最近定位元素的距离(自身的定位量属性){top:"",left:""}
设置:jquery不支持这种方式进行设置,可以通过设置其css设置。
## 另外offsetParent可以获取最近的祖先定位元素
绝对距离:该元素在窗口边框的距离。[已验证:并不是相对含有定位的父元素的值]
获取:offset().left;
设置:offset({
left:300,
top:200
});
滚动条:首先对目标设置overflow,变成滚动状态,然后用下面的方法获取滚动条的滚动距离,如果有值则设置(设置式滚动)
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
垂直:$("#scroll").scrollTop()+$("#scroll").height() > $("#scroll")[0].scrollHeight
水平:$("#scroll").scrollLeft()+$("#scroll").width() > $("#scroll")[0].scrollWidth
事件:如果是页面滚动条,要给window绑定事件
$(window).scroll(function(){
//水平/垂直滑动会触发
});
2、几个重要的css属性
元素的隐藏与隐形:
隐藏:display:none/bolck
隐形:visibility:hidden/visible
#扩展:通过为父元素添加class,使子元素指定样式生效。(内部用到父元素的class)。
$("li").mousemove(function (){
$(this).addClass("c1");
});
3、链式编程
条件:在jquery中,大部分都是返回jQuery对象的,链式编程就是把jquery方法且返回jquery对象的方法连在一直。
常用方法:
end():如果返回的是jquery对象但已不是头部的对象(断链),我们可以用此方法返回到最近的一个"破坏性"操作之前。
4、动画
(1)显示与隐藏
show(900);//参数还可以是特定的字符串
hide(900);//参数还可以是特定的字符串
(2)滑入与滑出
slideUp(800);//收起
slideDown(800);//拉下
slideToggle(800);//切换
(3)淡入与淡出
fadeIn(2000) //淡入
fadeOut(2000) //淡出
fadeToggle(2000) //切换
fadeTo(2000,0.4) //透明度
(4)属性动画效果
$("#box").animate({
"":"",
"":"",
"":""
},<改变的时间>,[过渡效果'linear'是匀速],[回
(5)停止当前的动画,执行后面的动
delay(ms): $("#ul1").animate({},700).delay(2000).animate({},700) //delay不马上执行链后面的,而是等待指定的时间后执行。
stop(): (boolean,boolean)==第一个参数:是否停止后续的动画,第二个参数:是否立即完成当前动画(为flase或无参代表立即停止当前动画)。
(6)实现无限滚动的方法
1、利用外边距实现:如果向左无限滚动
offSet = 0;
var tt;
function autoPlay(){
tt = setInterval(function () {
offSet -= 10;
$("ul").css({
"marginLeft": offSet
});
if (offSet <= -800) {
offSet = 0;//一下子换过来
}
}, 50);
}
关闭:clearInterval(tt);
继续:autoPlay();
2、利用动画animate实现无限滚动
var m=-800;
function autoPlay(){
$("ul").animate({
left:m
},4000,function (){
$(this).css({
left:"0px" //一下子换过来
});
autoPlay();//递归式
});
}
autoPlay();
关闭:stop();//停止当前的动画,
4、关于节点
外前:在指定元素前面添加一个兄弟元素 $("div").before(<new>);
内前:在指定元素中所以元素前添加一个子元素 $("div").prepend(<new>);//被动添加(相反)用prependTo
内后: 在指定元素中所以元素后添加一个子元素 $("div").append(<new>); //append是被动添加,而appendTo是主动添加
外后:在指定元素后面添加一个兄弟元素 $("div").after(<new>);
除此,我们还可以用html添加元素,但如果不处理,不同的是html方法是在元素内进行替换原有元素的。
数据的遍历添加,示例:
var att=$.map(datas,function (value,index){
return "<tr><td><a href='"+value.url+"'>"+value.name+"</a></td> <td> "+value.type+"</td></tr>";
});
$("#tbd").html(att);
删除元素
1、$("div.box:eq(0)").empty();清除
2、$("div.box:eq(0)").html("");
3、$("div.box:eq(0)").remove();自决
4、元素保留式删除
$(".box3").click(function (){
//删除元素的标签的事件
alert("Hello!");
});
$("button:eq(3)").click(function (){
//删除-保留
var rb=$("div").detach(".box3");//左参数大致,右才是真正,如没是大致
$("button:eq(4)").click(function (){
//恢复
$("#box1").append(rb);//
});
});
元素的克隆
var obj=$("div.box:eq(0)").clone();
$("div.box:eq(1)").append(obj);
元素的包裹:
将指定元素进行包裹: $("p").wrap({function(){ return "<div></div>"}});
批指定元素的父元素删除(拆包)$("p").unwrap();
##$(",").wrapAll(function(){ return "<div></div>"});将选中的元素用一个元素包裹起来。
## $("").wraplnner(function(){ return "<div></div>"});将每一个匹配的元素的子内容(文本节点也会包裹起来)用一个HTML结构包裹起来
元素的替换:$("p").replaceWith("<新标签>");
6、案例
(1)全选与全不选(逻辑)
$(function () {
//当点击全选/全不选时
$("#j_cbAll").click(function (){
$("#j_tb").find(":checkbox").prop("checked",$(this).prop("checked"));
});
//当点击下面的时,会获取checkbox的数量与已选中(checked=true)的checkbox的数量,如果相等,改变全选/全不选为打勾,否则设置为不打勾状态。
$("#j_tb").find(":checkbox").click(function (){
var sum=$("#j_tb").find(":checkbox").length;
var issum=$("#j_tb").find(":checked").length;
if(sum==issum){
$("#j_cbAll").prop("checked",true);
}else{
$("#j_cbAll").prop("checked",false);
}
});
});
(2)固定导航栏(逻辑)
$(function () {
//滚动条事件:只要全局文档的滚动条滚动就会被触发
$(document).scroll(function (){
\\如果垂直方向滚动的距离大于导航栏以上的距离,...
if($(document).scrollTop()>=$(".top").height()){
$(".nav").css({
position:"fixed",
top:"0px"
});
$(".main").css("marginTop",$(".nav").height());
}else{
//将导航栏还原
$(".nav").css("position","static");
$(".main").css("marginTop",0);
}
});
});
7、事件的绑定
介绍:事件的绑定除了以eventName(function(){});这种外,还有以下这些,它们绑定相同或不同事件都是不会覆盖的。这有点像css({})模式一样,css是为元素批量设置样式,而在事件on({}),我们可以用元素设置批量绑定事件。
使用:
(1)为自己绑定多个事件
$("#box").on({
"click":function(){alert("点击了")},
"mouseover":function (){alert("滑入")}
});
#代替此功能的方法:bind方法,除此bind还可以一次为元素绑定多个行为相同的事件。
$("#but1").bind("click mouseover",function (){
//为一个元素绑定多个事件,但事件行为是一样的。
});
(2)事件的委托
说明:委托的元素一般是其外层元素(祖父),子元素被点击后,通过事件的冒泡,委托的元素监听到点击了谁,然后回调函数的this指向它,而在表面看来是为其子元素绑定了事件。
$("#box").on("click","p",function (){
//this是动态的
});
代替此功能的方法:delegate,它也可以为子元素绑定事件(注意参数不同)。
$("#box").delegate("p","click",function (){
//this是动态的
});
(3)事件的解绑
$("#自身").off("事件名","子代");//off无参自身及子代,有一参为自身解除指定事件(子代delegate绑定的事件被解绑),有两参为子代解除
## $("#a").unbind("click");//为指定元素解除指定的事件
$("#parend").undelegate("#child","click");//还有删除由delegate()方法绑定的事件
(4)事件的触发
$("#but1").click();//不能写参数,触发 $("#but1")的click事件。
#其它触发方法
$("#but1").trigger("click");//需要写参数(事件名),会触发默认行为与事件冒泡。
$("#but1").triggerHandler("click");//不会触发默认行为与事件冒泡
# 默认行为:只输数字案例
//用return false;或:
$("#key").keydown(function(e){
e=e||window.e;
var key=e.keyCode;
if((key<48 && key!=8) || (key>57 &&key<96 )|| key>105 ){
e.preventBubble(); //主动取消默认行为
}
});
#事件的冒泡:如果子父级有相同的元素,如果子级的事件触发了,会向外(根级)冒泡,即外面的相同事件也会被触发,如果在回调函数中返回false,就可以取消事件的冒泡与默认行为(比如点击超链接会默认跳转)。
$("#a3").click(function(e){
e=e||window.e;
//return false; //停止事件的冒泡,且结束函数
e.stopPropagation();//停止事件的冒泡行为,并且不会结束函数
});
(5)自定义事件
意义:可以在一种条件下进行触发,而这就是自定义事件的触发条件。
设置:以on进行设置如$("..").<自定义的事件名>(function(){...});
触发:用trigger("<eventName>");来触发自定义的事件。
(6)事件的命名空间
说明:如果我们想设置有命名空间的事件,要用on设置,比如$("...").on("click.zjazn",function(){...})
使用:上面定义的也是click事件,但要触发它,如果单纯触发click,那么范围小的click.zjazn一就会被触发,如果触发的是范围小的click.zjazn,则不会触发范围大的click,冒泡也只会触发“外元素”的指定命名空间的事件。
(6)具体事件的说明
1、移入移出事件:mouseover\mouseover与mouseenter\mouseleave(推荐)的区别是后者不受子元素的干扰,在子元素内不会受子元素干扰而触发。
移入移出强大的方法:hover(function(){//移入},function(){//移出}),两个参数分别包含移入与移出,一个参数既是移入也是移出。
8、jQuery UI
说明:jQuery主要分为 3个部分:交互、小部件、效果库
案例1:展开与关闭
结构:
<div id="box">
<div>
<a href="javascript:;">用户热评</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<a href="javascript:;">我的动态</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<a href="javascript:;">我的粉丝</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
逻辑:
$("div>a").click(function () {
if($(this).next().height()==0){
//是关的状态
$(this).parent().siblings().children("ul").animate({height:"0px"},1000);
var num=$(this).next().children().length;
$(this).next().stop().animate({
height:num*30+"px"
},1000);
}else{
//是开的状态
$(this).next().stop().animate({
height:"0px"
},1000);
}
});
案例2:元素的拖拽
//拖拽函数的实现
1、给元素绑定一个点击事件,此时获取鼠标在box中的相对位置(调用jQuery元素对象的offset方法获取偏移量信息分别用来减去事件参数e.pageX/Y).
2、再给元素绑定移动事件与松下事件,移动时获取e.pageX/Y分别减去相对位置(向上移动,保持在box中的相对位置不变)作为offset新的偏移量。
3、松开时,解绑移动与松下事件。
扩展内容:
图片懒加载:
1、引入jquery-1.12.2.min.js 与lazyload.min.js。 图片<img class="lazy" data-original="img/01.png"> . js: $("img.lazy").lazyload();
jquery自定义插件: (function($){ $.fn.tableColor=function(){ this[0].style.color="red"; console.log(this);//一般调用this是$("xxx"),它是一个伪数组 } })(jQuery); $("p").tableColor();
对象合并: var G=$.extend({},obj1,obj2);//最外层属性相同obj2会覆盖与obj1的相同的属性。 var G2=$.extend(true,obj1,obj2);//真合并,相同属性内容也会进行合并
-->