一、操作元素
- 宽高
- $(“div”).height(); // 高度
- $(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别：返回值不同
.height()方法返回的是 数字类型(20)，
.css(“height”)返回的是字符串类型(20px)，
因此.height()方法常用在参与数学计算的时候
- 坐标值
$(“div”).offset(); // 获取或设置坐标值！设置值后变成相对定位！（在position没有设置值的情况下）
$(“div”).position(); // 获取坐标值 子绝父相 不能设置只能读取！ - 滚动条（滚动事件）
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
- 案例：两侧跟随的广告
$(window).scroll(function(){
var docScrollTop = $(document).scrollTop();
// console.log(docScrollTop);
$(".main").animate({"top":docScrollTop+80},50);
});
- 案例：固定导航栏
var topHeight = $(".top").height();
$(window).scroll(function(){
var docScrollTop = $(document).scrollTop();
//文档被卷去的高度大于或者等于top高度的时候，变成固定定位
if(docScrollTop >= topHeight) {
$(".nav").css({
"position":"fixed",
"top":0
});
$(".main").css("margin-top",$(".nav").height()+20+"px");
}
// 否则变成static定位
else {
$(".nav").css({
"position":"static"
});
$(".main").css("margin-top","20px");
}
});
二、事件分析
- 绑定事件
click/mouseenter/blur/keyup // 绑定事件
bind：$node.bind(“click”,function(){}); // 触发一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});
//2
// $(function(){
// $("button").bind("click mouseenter",function(){
// alert("www");
// })
// });
//2
// $(function(){
// $("button").bind({
// "click":function(){
// alert("1");
// },
// "mouseenter":function(){
// alert("2");
// }
// })
// });
//传递数据
// $(function(){
// $("button").bind("click",{aa:true},function(e){
// alert(e.data.aa);
// });
// });
// one 只触发一次
// $(function(){
// $("button").one("click",function(){
// alert("one");
// });
// });
//绑定
// $(function(){
// $("li").bind("click",function(){
// alert($(this).html());
// }
// });
//delegate
// $(function(){
// $("ul").delegate("li","click",function(){
// alert($(this).html());
// });
// });
//on强烈推荐
$(function(){
$("ul").on("click","li",function(){
alert($(this).html());
});
});
- 解绑事件
unbind undelegate off
$(function(){
$("ul").on("click mouseenter","li",function(){
alert($(this).html());
});
$("ul").off("mouseenter");
});
- 触发事件
click : $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为
$("#btnSub").click(function(){
var txtName = $("#txtName").val();
if(txtName === "1"){
alert("提交");
}else {
// $("#txtName").val("").triggerHandler("focus");
$("#txtName").val("").trigger("focus");
}
})
$("#btntrr").bind("click",function(){
// $("#btnSub").trigger("click");
$("#btnSub").triggerHandler("click");
})
- 事件对象介绍
- event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为
$(function(){
$(".link").on("click",function(e){
e.preventDefault(); //阻止事件默认行为
e.stopPropagation();
console.log(e.type);
});
$(".box").on("click",function(e){
alert("父盒子被点击了")
})
})
event.keycode //获取键盘的按钮
$(window).click(function(e){
console.log(e.which); //鼠标左1中2右3
}).keydown(function(e){
console.log(e.keyCode);
})
})
-
event.target事件触发源，不一定===this。
例如event.target===this判断是否触发事件是本身 -
event.currentTarget事件响应方法中=this，当前dom对象 -
event.data传递的额外事件响应方法的额外参数
三、事件补充
- animate动画：不支持背景的动画效果
animate动画支持的属性列表 - 在线文档：
w3school：http://www.w3school.com.cn/jquery/index.asp
jQuery官网：http://jquery.com/ - $()的几种常用用法：
1.$(“#id”) 选择某个元素，返回值为jQuery对象
2.$(this) 将DOM对象转换成jQuery对象
3.$(“<div></div>”) 创建元素，返回值为jQuery对象
4.$(function(){}); 入口函数的简写方式
$("div").html() 获取内容的时候，只返回匹配到的第一个元素的数据 - 链式编程问题：
$("div").html() 后面就不能继续链式了？
为什么？函数返回值问题！
- 案例 五角星 链式编程
end()可以取消链式的断开。结束当前这个方法
$(function(){
var star = "★";
var kong = "☆";
// 链式编程，这种方法就是断掉了。
// $(this).text(star).prevAll().text(star);
// $(this).nextAll().text(kong);
$(".comment").on("mouseenter","li",function(){
$(this).text(star).prevAll().text(star).end().nextAll().text(kong);
}).on("click","li",function(){
$(this).addClass("clicked").siblings().removeClass("clicked");
}).on("mouseleave",function(){
$(".comment li").text(kong);
//鼠标移开时，要先把没被点击的标签，设置为空
$(".clicked").text(star).prevAll().text(star).end().nextAll().text(kong);
})
})
- map返回数组(了解)
$(function(){
//全局的map函数参数和jq对象的函数参数是相反的
// var arr = $.map($("li"),function(e,index){
// return index;
// });
var arr2 = $("li").map(function(index,e){
console.log(index);
return index;
})
});
- each函数（和map相似）
$node.each(function(index,element){});
// $("li").each(function(index,e){
// var t = $(e).text();
// $(e).text(t+index);
// })
$.each($("li"),function(index,e){
var t = $(e).text();
$(e).text(t+index);
})
$.each([1,2,3,5,6,7], function (i,v) {
console.log(i + " : " + v);
});
- 隐式迭代
选择器选择的数组后面的方法会实现数组中每个标签！
如果获取多元素的值，默认返回第一个元素的值。 - 处理全局$冲突
市面上框架很少用$；
如果命名冲突，jq对象会把其他$对象替代
使用$.noConflict();让jQuery释放$ ，让$回归到jq之前的对象定义上去。
如果还想沿用，可以var JQ = $.noConflict(); 用JQ替代$ jq可以替换成任何字符串
jjQuery也可以。 - 数据缓存
$(“div”).data(“index”); // 获取数据index的值
html里面的data 属性，例如：data-ROLE，jQuery获取的时候用：$(“div”).data(“role”);；
设置data属性的时候，例如：$(“div”).data(“UPCASE”,123);，获取的时候使用：$(“div”).data(“UPCASE”);；
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>注意HTML属性不区分大小写</div>
$( "div" ).data( "lastValue" ) === 43;
lastValue -> data-last-value
- data()跟.attr() 方法的区别：
- 获取数据的时候，attr方法需要传入参数，data方法可以不传入参数，这时候获取到的是一个js对象，即使没有任何data属性。
- 获取到的数据类型不同，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。
- data方法获取到数据之后，我们使用一个对象来接收它，那么就可以直接操作(设置值或获取值)这个对象，而attr方法不可以；并且通过这种方式，要比.data(key,value)的方式更高效！
- data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会。
- Query优势：
1.书写简洁、代码优雅
2.Write Less，Do More
3.强大的选择器，支持CSS1-3所有的选择器
4.浏览器兼容性好，兼容IE6、7、8
5.统一的入口，降低了学习、记忆成本
6.强大的动画效果、事件支持
7.开源、免费
8.插件丰富，可扩展性强
四、jQuery插件
- 全局jq函数扩展方法
$.log = function(){
console.log(new Date());
}
$.log();
- 扩展一个普通的jq对象方法
$.fn.log = function(){
console.log($(this).text());
}
$(function(){
$("div").log();
});
- 第三方插件
- 颜色插件
引入插件之后：
$(function(){
$(".box").animate({
backgroundColor:"white"},2000)
});
- 延迟加载插件
鼠标滚动到某处才会加载内容，提高效率
<img class="lan" data-original="a.jpg" width="100" height="150">
$(function(){
$(".lan").lazyload();
});
- 自定义选择器：
jQuery.extend(jQuery.expr[':'], {
"class-itcast": function(ele) {
return jQuery(ele).hasClass("itcast");
}
});
$(":class-itcast").css("background","pink");
-
jQueryUI
第三方
（npm包管理工具 了解一下）
引入js和css的库和样式，照着人家demo写
