jQuery 入门

jQuery的优点:

取得页面元素

修改外观,与css相比它提供了跨浏览器的标准解决方案,因为浏览器对css不支持完全相同的标准
为页面提供动态效果
无须刷新即可从服务器获取信息

抽象浏览器的不一致性


jQuery是一个js库,并且因为js是解释型语言,所以使用它不必进行编译或构建,我们只需引入该库文件的位置。正如字面意思所述query是“查询的意思”,jQuery重点放在从HTML页面里获取元素并对其进行操作。


JQuery基本操作就是选择文档中的某一部分,通过$()结构完成。
为了进行操作的分离,我们仅仅在js文件中添加所有行为
$(document).ready()结构预订DOM加载完成后(不必等待图像加载完成)触发的函数调用


选择符
jQuery利用CSS选择符的能力,让我们在DOM中快捷而轻松的获取元素或元素集合
我们通过各种选择符和方法取得的结果集合始终都会被包装在一个jQuery对象绑定事件。

选择符      CSS            jQuery
标签名       p             $('p')
ID        #some-id      $('#some-id')
class     .someclass    $('.some-class)

属性选择符
$('a[herf^=http][href*=herry]').addClass('henrylink');href属性既以http开头且任意位置又包含henry的所有链接添加一个henrylink类


每隔一行为表格添加样式

自定义选择符与CSS中伪类选择符语法相同,选择符以一个冒号开始

$('div.horizontal:eq(1)') 匹配的带有horizontal类的div集合中选择第2项。 eq(1)取得集合中第2个元素
$('div:nth-child(1)') 取得的是第1个元素
$('div:first-child')  取得第1个子代元素
:eq(), :odd, :even,选择符都是使用js内置从0开始的编号方式,第一行编号为0(偶数),第二行编号为1(奇数)

$('tr:odd').addClass('alt'); 奇数行添加类alt。
但是上面有个问题就是当有多个表格时,如果当前表格最后一行为非alt类效果,那么下一个表格的第一行就会出现alt类的效果。跟我们所认为的从0开始编行,效果相反。解决办法是用:nth-child()选择符,它接受一个数值(表第几个子元素),even,odd为参数
$('tr:nth-child(odd)').addClass('alt');
:contains()选择符,它是区分大小写的。
$('td:contains(Henry)').addClass('highlight'); 得到的是单元格个引用,而不是当前的元素


基于表单的选择符

:text :checkbox :radio :image
:submit :reset :password :file    type属性值为选择符名称
:input                            输入字段,文本去,选择列表和按钮元素
:button                           按钮元素或type属性值为button的输入元素
:enabled                          启用的表单元素
:disabled                         禁用的表单元素
:checked                          勾选的单选按钮或复选框
:selected                         选择的选项元素
filter()方法,可以接受筛选函数,然后利用它的隐式迭代能力,迭代前面所有匹配的元素,然后基于元素测试函数的返回值。
$('tr').filter(':odd').addClass('alt')   <=> $('tr:odd').addClass('alt');


为特定单元格添加样式
$('td:contains(Henry)').next().addClass('highlight');              下一个单元格
$('td:contains(Henry)').nextAll().addClass('highlight');           该元素中Henry单元格后面的
$('td:contains(Henry)').nextAll().andSelf.addClass('highlight');   包括自己
$('td:contains(Henry)').parent().children().addClass('highlight'); 同一组元素 
访问DOM元素
var myTag = $('#my-element').get(0);         //访问对象集的第一个元素
var myTag = $('#my-element')[0];   
var myTag = $('#my-element').get(0).tagName; //得到相应的标签名

注意点:注意明确我们到底是得到的单元格的引用还是元素的引用。
隐式迭代 implicit iteration
连缀chaining

你可能感兴趣的:(jQuery)