JQuery学习笔记

一、选择符

1、工厂函数 $()

    标签名 ：$('p')取得文档中所有段落
    ID ：      $('#id') 取得文档中对应id的一个元素
    类 ：      $('.class')取得文档中带有class类的所有元素
2、CSS选择符

    子元素组合符：> $('#selected-plays > li').addClass('horizontal');

    要为其他项（非顶级的项）添加样式,就是使用否定式伪类选择符来识别没有horizontal类的所有列表项$('#selected-plays li:not(.horizontal)').addClass('sub-level');

    $('tr:nth-child(even)')  :选择<tr>标签偶数行的
    $('tr:nth-child(odd)')    :选择<tr>标签基数行的

3、XPath选择符

    属性选择符：@  例如：$('a[@title]') 表示：要选择所有带title属性的链接

    取得包含一个元素的所有元素：$('div[ol]')  表示：包含一个ol元素的所有div元素。

    类似正则匹配符：^:开始      $：结束  例如：$('[@href^=mailto:]')  $('[@href$=.pdf:]')  $('[@href*".163.com"]') 
4、自定义选择符

    选择符以一个(：)开始。示例：匹配horizontal类的div集合，并选择第2项(注：JS从数组从0开始)：$('div.horizontal:eq(1)')     $('tr:even')  $('tr:odd')

 

二、事件
1、绑定事件

    $().ready(function(){$('button1').bind('click',function(){alert('a')})});

    $().ready(function(){$('button1').click(function(){alert('a')})});            //简写

2、点击交替效果应用(toggle)

    $('#button1').toggle(function(){$('#d1').addClass('hidden');},function(){$('#d1').removeClass('hidden');})    //点击"button"第一次执行第一个参数，第二次点击执行第二个参数，以此交替循环

    $('#button1').toggleClass('hidden');   //简写，代码优雅

3、移入/移出交替效果应用(hover)

     $('#d1').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})

4、模拟用户即由程序触发事件(trigger)

     $('#d1').trigger('click');

三、效果(CSS操作)
1、内联CSS

    $().ready(function(){$('button1').bind('click',function(){alert('a')})});