第一部分:构造函数
Jquery的构造函数接收四种类型的参数:
- jQuery(expression,context)
- jQuery(html)
- jQuery(elements)
- jQuery(fn)
简化为$();如果$被其它对象占用,可使用jQuery.noConflict()函数取消快捷方式
jquery构造函数可以直接传入document对象,ready()函数为docoment添加事件处理函数
$(document).ready(function(){
$('ul').css('color','red');
});
ready()函数为document添加事件处理函数。$(document).ready()可以直接用$(fn)代替(
$(function(){
$('ul').css('color','red');
});
另外,
prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,功能却不止如此。
$('a') 获取a元素;$('#a') 获取id为a的元素
第二部分:选择器
jQuery的选择符支持id,tagName,css1-3 expressions,Xpath 参见:http://docs.jquery.com/Selectors
<script type="text/javascript">
$("input[type='button']").click(function(){
var i = 0;
$("input[type='text']").each(function(){
i += parseInt($(this).val());
});
$('label').text(i);
});
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid 1px navy')
.css({'width':'30px'});
</script>
$("input[type='button']")用于找到type属性为button的input元素。在button_click时,$("input[type='text']")找出所有输入框,each()函数遍历找出来的数组中的对象的值,相加后设到label中
$('input:lt(2)')
.add('label')
两行代码意为:所有input中的前面两个(lt表示序号小于)再加上label对象合并成一个jQuery对象。
.css('border','none')
.css('borderBottom','solid 1px navy')
.css({'width':'30px'});
以上三行代码都是针对之前的jQuery对象设置CSS样式,如果一次需要设置多个CSS值,可用另一种形式,如:
.css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
第三部分:事件
jQuery对事件的支持主要包括:
- bind()--为事件绑定处理程序,例如,鼠标的进入与离开函数
$("p").bind("mouseenter mouseleave", function(e){
$(this).toggleClass("over");
});
- unbind()--注销绑定在事件上的处理程序,例如
$(document).unbind('ready'); 若无参数,则清除所有的事件处理程序
- trigger()--触发某类事件。
$("button:first").trigger('click'); - triggerHandler()--触发某类事件,但不触发默认的事件处理逻辑,比如a的定向。
$("input").triggerHandler("focus"); - one()--为事件绑定只能被触发一次的处理程序。
$("div").one("click", function(){
});
ready()/click()/change()/toggle(fn,fn)/dblclick()……各种常规事件的快捷方式,xxx(fn)为绑定处理程序,xxx()为触发事件
第四部分:链式代码
<script type="text/javascript">
$(function(){
//添加四个按钮
$('<input type="button" value="click me"/><input type="button" value="triggle click me"/> <input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body'));
//找出所有按钮
$('input[type="button"]')
.eq(0)//找到第一个按钮
.click(function(){
alert('you clicked me!');
})
.end().eq(1)//返回所有按钮,再找到第二个
.click(function(){
$('input[type="button"]:eq(0)').trigger('click');
})
.end().eq(2)//返回所有按钮,再找到第三个
.click(function(){
$('input[type="button"]:eq(0)').unbind('click');
})
.end().eq(3)//返回所有按钮,再找到第四个
.toggle(function(){
$('.panel').hide('slow');
},function(){
$('.panel').show('slow');
});
});
</script>
需要注意的是,有几个函数并不返回jQuery对象,所以链条就不能继续下去,比如get()就不能像eq()那样用。