2.选择元素
理解DOM
JQuery:能够简化在DOM中选择任务
使用$()函数
这个工厂接受CSS选择符作为参数
P{} $('P')
#S $("#S")
.S $(".S")
属性选择符
$(‘img[alt]’)
以^表示值在字符串的开始 a[href^="mailto:"]
以$表示值在字符串的结尾 a[href$=".pdf"]
*表示要匹配的值可以出现在任何地方 a[href^="http"][href*="henry"]
！表示对值取反
自定义选择符
自定义选择符和CSS中的伪类选择符语法相同：
$(ul li:eq(1))
奇数偶数 :odd :even
tr:nth-child()相对于元素的父元素而非当前选择的所有元素来计算
$('tr:nth-child(odd)').addClass('alt');
基于上下文内容选择元素
td:contains(Henry)：将带有Henry字样的表格选择，注意contains里面的内容区分大小写
基于表单选择符
:input
:button
:enabled
:disabled
:checked
:selected
DOM遍历
.filter()匹配元素
可以接受函数参数
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
.siblings()同DOM层次的所有元素
.parent()和.children（）
连缀：通过一行代码取得多个元素集合并且对元素集合执行多次操作
3.事件
$(document).ready(){}可以简写为$(function(){})
利用.on()
$(function() {
$("#switcher-large").on('click', function() {
$("body").addClass("large");
});
});
利用事件处理程序上下文
$(this).addclasss("large");
简写事件：将.on()简化成.chick()
$("#switcher-large").click(function() {
$("body").addClass("large");
});
显示隐藏高级特性
.toggleclass() 点击一下隐藏，再点击显示
$("#switcher h3").click(function() {
$('#switcher button').toggleClass('hidden');
});
事件传播
.hover()
$(function() {
$("#switcher h3").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
事件冒泡副作用
整个区域点击都会隐藏掉，包括点击按钮
$(document).ready(function() {
$('#switcher').click(function(event) {
$('#switcher button').toggleClass('hidden');
});
});
解决办法：为事件对象命名
$(document).ready(function() {
$('#switcher').click(function(event) {
if (event.target == this) {
$('#switcher button').toggleClass('hidden');
}
});
});
停止事件传播 .stoppropagation()
$(document).ready(function() {
$('#switcher').click(function(event) {
$('#switcher button').toggleClass('hidden');
});
});
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').click(function(event) {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
阻止默认事件传播 .preventdefault()
事件委托
采用.is()进行测试
$(document).ready(function() {
$('#switcher').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$(document).ready(function() {
$('#switcher').click(function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
});
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
}
});
});
查找当前元素还可以用.hasclass(),不过is()比较灵活
移除事件处理程序
.off()方法
$(document).ready(function() {
$('#switcher').click(function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click');
});
});
为事件处理加上命名空间click.collapse
$(document).ready(function() {
$('#switcher').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$(document).ready(function() {
$('#switcher').on('click.collapse', function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click.collapse');
});
});
重新绑定事件
使用funtion
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
然后用.on()调用函数
$('#switcher').on('click.collapse', toggleSwitcher);
对于只需触发一次的，可以用 .one()
$('#switcher').one('click', toggleSwitcher);
模仿用户操作
.trigger()方法，就可以模拟事件的操作
$('#switcher').trigger('click');
和.on一样可以简写
$('#switcher').click();
响应键盘事件
直接对键盘给出响应事件keyup()和keydown()
对文本输入给出响应事件keypress()
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
}; $(document).keyup(function(event) {
var key = String.fromCharCode(event.which);
if (key in triggers) {
setBodyClass(triggers[key]);
}
});
练习
双击事件
$("#header h2").dblclick(function(){
$("#chapter-1").toggleClass('hidden');
});
方向键：在文章里面P段落添加class
var index=0;
var indexall=$("#chapter-1>p").length;
$(document).keydown(function(e){
var code=e.which;
switch (code) {
case 38: //上
select_p();
break;
case 40: //下
select_p();
break;
case 37: //左(會導致輸入時無法使用左右移)
select_p();
movePrev();
break;
case 39: //右(會導致輸入時無法使用左右移)
select_p();
moveNext();
break;
default:
return;
}
});
var select_p=function(){
if (index<indexall){
$("#chapter-1 p:eq("+index+")").addClass("selected1").siblings().removeClass("selected1");
index++;
}
else {
index=0;
$("#chapter-1 p:eq(0)").addClass("selected1").siblings().removeClass("selected1");
}
};
//前一页
var movePrev=function(){
//coding
};
//后一页
var moveNext=function(){
//coding
};
4样式和动画
.CSS()
在CSS中取值
$(document).ready(function() {
var $speech = $(&apos;div.speech&apos;);
$(&apos;#switcher-large&apos;).click(function() {
var num = parseFloat($speech.css(&apos;fontSize&apos;));
});
});
parseFloat()函数是一个从左往右查找浮点数，能将12px=12
赋值给CSS
$(document).ready(function() {
var $speech = $(&apos;div.speech&apos;);
$(&apos;#switcher button&apos;).click(function() {
var num = parseFloat($speech.css(&apos;fontSize&apos;));
if (this.id == &apos;switcher-large&apos;) {
num *= 1.4;
} else if (this.id == &apos;switcher-small&apos;) {
num /= 1.4;
}
$speech.css(&apos;fontSize&apos;, num + &apos;px&apos;);
});
});
使用if else，下面看看使用switch
$(document).ready(function() {
var $speech = $(&apos;div.speech&apos;);
var defaultSize = $speech.css(&apos;fontSize&apos;);
$(&apos;#switcher button&apos;).click(function() {
var num = parseFloat($speech.css(&apos;fontSize&apos;));
switch (this.id) {
case &apos;switcher-large&apos;:
num *= 1.4;
break;
case &apos;switcher-small&apos;:
num /= 1.4;
break;
default:
num = parseFloat(defaultSize);
}
$speech.css(&apos;fontSize&apos;, num + &apos;px&apos;);
});
});
带厂商前缀的样式属性
jquery会自动检查所有带前缀的属性
隐藏和显示元素
hide()和show()
$(&apos;p&apos;).eq(1).hide();
注意：.eq() 和:eq()相似
.fadein()和.fadeout()
$(&apos;p&apos;).eq(1).fadeIn(&apos;slow&apos;);渐隐渐现
.slideDown() .slideUp()
滑上滑下
切换可见性
$(document).ready(function() {
$(&apos;a.more&apos;).click(function(event) {
event.preventDefault();
$firstPara.slideToggle(&apos;slow&apos;);
var $link = $(this);
if ($link.text() == &apos;read more&apos;) {
$link.text(&apos;read less&apos;);
} else {
$link.text(&apos;read more&apos;);
}
});
});
.text()可修改字符
.slideToggle()就是切换可见性
event.preventDefault();是停止其它操作
自定义动画
一个包含样式属性和值的对象。.css方法
可见参数时长，可以是毫秒也可以是预置的字符
可选的缓动
可选的回调参数
手工创建效果
$firstPara.animate({height: &apos;toggle&apos;}, 3000);
一次给多个属性添加动画效果
var $speech = $(&apos;div.speech&apos;);
var defaultSize = $speech.css(&apos;fontSize&apos;);
$(&apos;#switcher button&apos;).click(function() {
var num = parseFloat($speech.css(&apos;fontSize&apos;));
switch (this.id) {
case &apos;switcher-large&apos;:
num *= 1.4;
break;
case &apos;switcher-small&apos;:
num /= 1.4;
break;
default:
num = parseFloat(defaultSize);
}
$speech.animate({fontSize: num + &apos;px&apos;}, &apos;slow&apos;);
});
盒子动画效果
$(&apos;div.label&apos;).click(function() {
var paraWidth = $(&apos;div.speech p&apos;).outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({
borderWidth: &apos;5px&apos;,
left: paraWidth - switcherWidth,
height: &apos;+=20px&apos;
}, &apos;slow&apos;);
});
得出宽度 .outerWidth();
).outerWidth();
