jQuery 第三天知识点大纲
一、复习
第一天jQuery优点
jQuery入口函数
jQuery 选择器
第二天jQuery CSS操作
jQuery 动画
jQuery Dom操作
二、jQuery的元素操作
2.1 jQuery获取元素的高和宽
$(“div”).height(); // 高度
$(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别：
返回值不同，.height()方法返回的是 数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
jQuery(document).ready(function () {
// 设置div的背景色
$("div").css("background-color","green");
// 设置高度
$("button").eq(0).click(function () {
// css方式设置高度
//$("div").css("height","300px");
//$("div").height(300);
$("div").height("300px");
});
// 获取高度
$("button").eq(1).click(function () {
// 给div设置thml内容
$("div").html("div的高度是：" + $("div").height());
});
// 设置宽度
$("button").eq(2).click(function () {
$("div").width(600);
});
// 获取宽度
$("button").eq(3).click(function () {
$("div").html("div的宽度是：" + $("div").width());
});
// 对比.css("height")和.height()
$("button").eq(4).click(function () {
console.log("height()方式获取的结果是：" + $("div").height());
console.log("height()方式获取的结果类型：" + typeof $("div").height());
console.log("css()方式获取的结果是：" + $("div").css("height"));
console.log("css()方式获取的结果类型：" + typeof $("div").css("height"));
/*$("div").html();
$("div").html();*/
});
});
</script>
</head>
<body>
<button>设置高度</button>
<button>获取高度</button>
<button>设置宽度</button>
<button>获取宽度</button>
<button>对比CSS和height宽度</button>
<div></div>
</body>
</html>
innerHeight //只能获取：内边距+内容的高度
innerWidth //同上.........宽度
outerHeight
outerWidth //获取：左右内边距+内容+左右边框
2.2 jQuery元素坐标操作
$(“div”).offset(); // 获取或设置坐标值** 设置值后变成相对定位**
$(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/*position: absolute;*/
top: 100px;
left: 200px;
width: 400px;
height: 300px;
background-color: #000000;
}
p {
background: #666;
position: absolute;
top: 80px;
left: 90px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function () {
// 获取offset坐标值
$("#btn1").click(function () {
console.log("距离页面上部的距离：" + $("div").offset().top);
console.log("距离页面左边的距离：" + $("div").offset().left);
});
// 获取相对于父元素的位置
$("#btn2").click(function () {
console.log("相对与父元素上部的距离：" + $("p").position().top);
console.log("相对与父元素左边的距离：" + $("p").position().left);
});
// 设置offset
$("#btn3").click(function () {
var txtTop = $("#txtTop").val();
var txtLeft = $("#txtLeft").val();
// 设置两个值：top和left
/*$("div").offset({
top: txtTop,
left: txtLeft
});*/
$("div").offset({
left: txtLeft
});
});
});
</script>
</head>
<body>
<button id="btn1">获取offset坐标值</button>
<button id="btn2">获取position坐标值</button>
<button id="btn3">设置position坐标值</button>
<label for="txtTop">top：</label><input type="text" id="txtTop"/>
<label for="txtLeft">left：</label><input type="text" id="txtLeft"/>
<div>
<p>我是div的子元素p</p>
</div>
</body>
</html>
offset() 获取或设置元素相对于文档位置的方法
返回一个object，包含left和top属性，值是相对于document的位置。
如果传入一个参数，则是对元素重新设置相对于document的位置。
传入参数必须包括：left和top属性。比如： {left：100，top：150}
例如：$(selector).offset({left:100, top: 150});
position() 获取相对于其最近的定位的父元素的位置。
只能获取，不能设置。
相对与其最近的定位元素
返回一个object，包含left和top属性
例如： $(selector).position();
2.3元素的滚动
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
scrollLeft() 获取或者设置元素水平方向滚动的位置
scrollTop() 获取或者设置窗口垂直方向的滚动的位置
例如： $(selector).scrollLeft(100);
scroll() 事件触发或者绑定滚动事件
scroll(hander) 绑定滚动事件
scroll() 触发滚动事件 $(selector).scroll(function(){ //当选择的元素发生滚动的时候触发 });
案例：01 固定导航栏案例
链接：http://pan.baidu.com/s/1i4PbQKX 密码：hnxi
案例：02 两侧跟随的广告
链接：http://pan.baidu.com/s/1pLk4pbt 密码：za8t
三、jQuery事件绑定机制
3.1-3.5绑定
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(){});
3.1 简单事件绑定方法
.click(hander) .click() //绑定事件 或者触发 click事件
.blur() //失去焦点事件，同上
.hover(mousein, mouseleave) //鼠标移入，移出
mouseout： 当鼠标离开元素及它的子元素的时都会触发。
mouseleave: 当鼠标离开自己时才会触发，子元素不触发。
.dbclick() 双击
change 改变,比如：文本框发送改变，下来列表发生改变等...
focus 获得焦点
keyup, keydown, keypress : 键盘 键被按下。
mousedown, mouseover
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
3.2 绑定事件的方式 bind方式
（不推荐，1.7以后的jQuery版本被on取代）
语法格式：.bind( eventType [, eventData ], handler )
【参数说明】：
第一个参数：事件类型
第二个参数：传递给事件响应方法的数据对象，可以省略。
事件响应方法中获取数据方式： e.data
第三个参数：事件响应方法
第二个参数可以省略。
例如： $("p").bind("click", function(e){ //事件响应方法 });
3.3 delegate方式（推荐，性能高，支持动态创建的元素）
语法格式：$(selector).delegate( selector, eventType, handler )
语法说明：第一个参数:selector， 子选择器
第二个参数：事件类型
第三个参数：事件响应方法
例如：
$(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });
优势：效率较高
3.4 on方式（最现代的方式，兼容zepto，强烈建议使用的方式）
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
语法格式：$(selector).on( events [, selector ] [, data ], handler )
参数介绍：第一个参数：events，事件名
第二个参数：selector,类似delegate
第三个参数: 传递给事件响应方法的参数
第四个参数：handler，事件处理方法
例如：
//绑定一个方法
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
//给子元素绑定事件
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
//绑定多个事件的方式 $( "div.test" ).on({ click: function() {
$( this ).toggleClass( "active" ); }, mouseenter: function() {
$( this ).addClass( "inside" ); }, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
3.5 one绑定一次事件的方式
.one( events [, data ], handler )
例如：
$( "p" ).one( "click", function() { alert( $( this ).text() ); });
3.6 解绑事件
unbind、undelegate
off
unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate解绑delegate事件
$( "p" ).undelegate(); //解绑所有的delegate事件
$( "p" ).undelegate( "click" ); //解绑所有的click事件
例如：
var foo = function () {
// Code to handle some kind of event };
// ... Now foo will be called when paragraphs are clicked... $( "body" ).delegate( "p", "click", foo );
// ... foo will no longer be called. $( "body" ).undelegate( "p", "click", foo );
off解绑on方式绑定的事件$( "p" ).off();
$( "p" ).off( "click", "*" );
// 解绑所有的click事件，两个表示所有
$( "body" ).off( "click", "p", foo );
案例：
var foo = function() {
// Code to handle some kind of event };
// ... Now foo will be called when paragraphs are clicked ... $( "body" ).on( "click", "p", foo );
// ... Foo will no longer be called. $( "body" ).off( "click", "p", foo );
3.7 触发事件
click : $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为
简单事件触发$(selector).click(); //触发 click事件
trigger方法触发事件$( "#foo" ).trigger( "click" );
triggerHandler触发 事件响应方法，不触发浏览器行为$( "input" ).triggerHandler( "focus" );
3.8 jQuery事件对象的简介
event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为
event.data //传递的额外事件响应方法的额外参数
event.currentTarget //在事件响应方法中等同于this，当前Dom对象
**event.target **//事件触发源，不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.pageY
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型：click，dbclick...
event.which //鼠标的按键类型：左1 中2 右3
jQuery其他补充
链式编程： end()补充
五角星评论案例
五角星案例.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星案例</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }
.comment {
color: red;
/*font-size: 0;*/
/*设置字符间距*/
/*letter-spacing: -13px;*/
/*设置单 词间距 I am a teacher */
/*word-spacing: -13px;*/
}
.comment li {
float: left;
/*display: inline-block;*/
font-size: 40px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
var wjx_sel = "★",
wjx_none = "☆";
$(".comment").on("mouseenter", "li", function(){
//prevAll前面所有的兄弟节点
// $(this).text(wjx_sel).prevAll().text(wjx_sel);
// $(this).nextAll().text(wjx_none);
//当执行的jQuery 链式编程断掉的时候，如果能把链再链上就好了。
//end()可以结束当前调用的链。 恢复上一级的调用链。
$(this).text(wjx_sel)
.prevAll()
.text(wjx_sel)
.end() //结束prevAll，回到 $(this)链
.nextAll()
.text(wjx_none);
//第二步： 记录一下用户点击的那个五角星
//给点击的li标签添加一个样式类
}).on("click","li", function(){
$(this).addClass('clicked').siblings().removeClass('clicked');
}).on("mouseleave",function(){
//鼠标移开的时候，先给所有的li标签添加一个空心的 五角星
//隐式迭代
$(".comment li").text(wjx_none);
var t = $(".comment li").text();
$(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
.nextAll().text(wjx_none);
//第三步： 当鼠标移开评分控件的时候，把click（包括自己）之前的五角星全部变成实心的，后面的变成空心。
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
第一步：鼠标移入，当前五角星和前面的五角星变实体。后面的变空心五角星
第二步：鼠标点击的时候，为当前元素添加clicked类，其他的移除clicked类
第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实心
隐式迭代
默认情况下，会自动迭代执行jQuery选择出来所有dom元素的操作。
如果获取的是多元素的值，默认返回的是第一个元素的值
map函数
$.map(arry,function(object,index){}) 返回一个新的数组
$("li").map(function(index, element){}) 注意参数的顺序是反的
each函数
$.each(array, function(index, object){})
$("li").each(index, element )
参数的顺序是一致的
each和 map函数的使用案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each和 map函数的使用案例</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
// $("li").each(function(index, el) {
// var originTxt = $(el).text();
// $(el).text(originTxt + index);
// });
$.each($("li"), function(i, e) {
var originTxt = $(e).text();
$(e).text(originTxt + i+1);
});
//map函数： 会把所有的
// 全局的map 函数 参数 跟 jQuery对象的参数是反的。
var temp = $.map($("li"), function(elme, index) {
return index;
});
var temp2 = $("li").map(function(i, e){
console.log(i);
return i;
});
});
</script>
</head>
<body>
<ul>
<li>圣诞快乐</li>
<li>圣诞快乐</li>
<li>圣诞快乐</li>
<li>圣诞快乐</li>
</ul>
</body>
</html>
noConflict 全局对象污染冲突
$ jQuery
var $ = {name : "it"};
<script src="jQueryDemos/jquery-1.11.3.min.js"></script>
var laoma_jQ - $.noConflict();//让jQuery释放$,让$回归到jQuery之前的对象定义上去。
$.name
jQuery
jQuery.data() jQuery对象的数据缓存。(了解)
* $(".nav").data("name", 123);//设置值。
var t = $(".nav").data("name"); //获取值
t.name = "18";//对象的更改，会直接同步到 元素的jQuery对象上去。
网友评论