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')})});