jquery 基础指南

第一部分：构造函数

 

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()那样用。