学习素材
最好的jQuery入门教材
目录
- 选择网页元素
- 改变结果集
- 链式操作
- 元素的操作:取值和赋值
- 元素的操作:移动
- 元素的操作:复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
选择网页元素
- jQuery基本设计思想:选择某个网页元素,然后对其进行某种操作
- 使用jQuery的第一步:将一个选择表达式,放进构造函数
jQuery()
(简写为$()
)中,然后得到被选中的元素。 - 选择表达式可以是CSS选择器,或者是jQuery特有的表达式。
- css选择器:
$(document); //选择整个文档对象
$('#idName'); //选择id为idName的网页元素
$('div.className'); //选择class为className的div元素
$('input[attrName=attrValue]'); //选择attrName属性等于attrValue的input元素
- jQuery特有的表达式:
$('a:first); //选择网页中的第一个a元素
$('tr:odd'); //选择表哥的奇数行
$('
$('div:visible'); //选择可见的div元素
$('div:gt(2)'); //选择所有的div元素,除了前三个
$('div:animated'); //选择当前处于动画状态的div元素
改变结果集
- jQuery设计思想之二:提供各种强大的过滤器,对结果集进行筛选,缩小选择结果。
$('div').has('p'); //选择包含p元素的div元素
$('div').not('.className'); //选择class不等于className的div元素
$('div').filter('.className'); //选择class等于className的div元素
$('div').first(); //选择第一个div元素
$('div').eq(5); //选择第六个div元素
- 有时候,需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
链式操作
- jQuery设计思想之三:最终选中网页元素以后,可以对它进行一系列的操作,并且所有操作可以连接在一起,以链条的形式写出来。
- 如:
$('div').find('h3').eq(2).html('Hello!'); //找到div元素,选择其中的h3元素,选择第三个h3元素,将其内容改为Hello!
- 它的原理在于每一步的jQuery操作,返回的都是一个jQuery元素,所以不同操作可以连在一起。
- jQuery还提供了
.end()
方法,使得结果集可以后退一步。
$('div').find('h3').eq(2).html('Hello').end().eq(0).html('World'); //退回到选中所有h3元素的那一步
元素的操作:取值和赋值
- jQuery设计思想之四:使用同一个函数,来完成取值getter和赋值setter,即取值器和赋值器合二为一,到底是取值还是赋值,由函数的参数决定。
$('h1').html; //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数,表示对h1进行赋值
.html();
.text();
.attr();
.width();
.height();
.val();
- 注意!:如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(text()例外,它取出所有元素的text内容)。
元素的操作:移动
- jQuery设计思想之五:提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。
- 假设我们选中了一个div元素,需要把它移动到p元素后面。一种方法是使用
.insertAfter
,把div元素移动到p元素后面:$('div').insertAfter($('p'));
第二种方法是使用.after()
: $('p').after($('div'));
两者的区别:第一种返回div元素,第二种返回p元素。
.insertAfter()
.after()
.insertBefore()
.before()
.appendTo()
.append()
.prependTo()
.prepend()
元素的操作:复制、删除和创建
- 复制元素使用:
.clone();
- 删除元素使用:
.remove();
.detach();
两者的区别:前者不保留元素的时间,后者保留,有利于重新插入文档时使用。 - 清除元素使用:
.empty();
- 创建元素使用:只要把新元素直接传入jQuery的构造函数就可以了。如:
$('<p>Hello</p>');
$('ul').append('<li>list item</li>')
工具方法
- jQuery设计思想之六:除了对选中的元素进行操作以外,还提供一些与元素无关的工具方法。不必选中元素,就可以直接使用这些方法。
- 工具方法的实质,是定义在jQuery构造函数上的方法,即
jQuery.method()
,所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象
上的方法,即jQuery.prototype.method()
,所以必须生成实例(即选中元素)后使用。 - 常用的工具方法:
$.trim(); //去除字符串两端的空格
$.each(); //遍历一个数组或对象
$.inArray(); //返回一个值在数组中的索引位置。若不在数组中,则返回-1
$.grep(); //返回数组汇总符合某种标准的元素
$.extend(); //将多个对象合并到第一个对象
$.makeArray(); //将对象转化为数组
$.type(); //判断对象的类别(函数对象、日期对系那个、数组对象、正则对象等)
$.isArray(); //判断某个参数是否为数组
$.isEmptyObject(); //判断某个对象那个是否为空
$.isFunction(); //判断某个参数是否为函数
$.isPlainObject(); //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support(); //判断浏览器是否支持某个特性
事件操作
- jQuery设计思想之妻:把事件直接绑定在网页元素之上。
$('p').inclick(function(){
alert('Come on!');
});
.blur();
.change();
.click();
.dbclick();
.focus();
.focusin();
.focusout();
.hover();
.keydown();
.keypress();
.keyup();
.load();
.mousedown();
.mouseenter();
.mouseleave();
.mousemove();
.mouseout();
.mouseover();
.mouseup();
.ready();
.resize();
.scroll();
.select();
.submit();
.toggle();
.unload();
- 以上这些事件在jQuery内部,都是
.bind()
的便捷方式。使用.bind()
可以更灵活的控制时间,如为多个事件绑定同一个函数:
$('input').bind(
'click change',
function(){
alert('Hello!');
}
);
$('p').one(
'click',
function(){
alert('Hello!');
}
);
$('p').unbind('click');
- 所有的事件处理程序,都可以接受一个事件对系那个作为参数,如下例中的e:
$('p').click(function(e){
alert(e.type);
});
event.pageX;
event.pageY;
event.type;
event.which;
event.data;
event.target;
event.preventDefault();
event.stopPropagation();
- 在事件处理函数中,可以用this关键字,返回事件针对的DOM元素:
$('a').click(function(e){
if($(this).attr('href').match('evil')){
e.preventDefault();
$(this).addClass('evil');
}
});
- 有两种方法可以自动触发一个事件。一种是直接使用事件函数,另一种是使用
.trigger();
或 .triggerHandler();
$('a').click();
$('a').trigger('click');
特殊效果
$('h1').show(); //展现一个h1标题
.fadeIn();
.fadeOut();
.fadeTo();
.hide();
.show();
.slideDown();
.slideUp();
.slideToggle();
.toggle();
- 除了
.show()
.hide()
,所有其他的特效默认执行时间是400ms,不过可以自行设置
$('h1').fadeIn(300);
$('h1').fadeOut('slow');
$('p').fadeOut(300, function(){ $(this).remove();})
$('div').animate(
{
left: "+=50",
capacity: 0.25
},
300,
function(){alert('well!');}
);
.stop()
.delay()
用来停止或延缓特效的执行。$.fx.off
如果设置为true
,则关闭所有网页特效。