现在的位置: 首页 > 综合 > 正文

learning jQuery学习笔记一 — 选择符

2018年02月07日 ⁄ 综合 ⁄ 共 1548字 ⁄ 字号 评论关闭

注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

$()工厂函数

常见格式:

       标签名:$('p')  --会取得文档中所有的段落

       ID:$('#some-id')   --会取得文档中具有对应的some-id ID的一个元素

       类:$('.some-class')  --会取得文档中带有some-class类的所有元素

 

jQuery里,$就是jQuery的缩写。在javascript函数库中,$()的使用非常普遍,为了避免同一页面中

同时出现而产生冲突,可以用jQuery来替代$,如jQuery().

 

 

CSS选择器

       在css样式表文件中定义一个类 horizontal如下:

       .horizontal{

              float:left;

              list-style:none;

              margin:10x;

       }

 

       $(document).ready(function(){

// 对id为selected-plays的子元素li添加样式horizontal

              $('#selected-plays>li').addClass('horizontal');

// 没有horizontal类(:not(.horizontal))

              $('#selected-playsli:not(.horizontal)').addClass('sub-level');

       });

      

 

XPath选择符

       $(document).ready(function(){

              $('a[@href^="mailto:"]').addClass('mailto');//寻找带有href属性且以mailto开头的锚元素(a)

              $('a[@href$=".pdf"]').addClass('pdflink');//取得所有带有href属性并以.pdf结尾的链接

              $('a[@href*="mysite.com"]').addClass('mysite');//要取得所有内部链接,即到mysite.com中其他页面的链接,则需要使用星号

       });  

 

 

自定义选择符

1、从匹配的带有horizontal类的div集合中,选择第2个项,那么应该使用下面的代码:

       $(‘div.horizontal:eq(1)’)

2、

为奇数行添加样式:

.odd{

       background-color:#ffc;/*奇数行的背景颜色为浅黄色*/

}

为偶数行添加样式:

.even{

       background-color:#cef;/*偶数行的背景颜色为浅蓝色*/

}

将这两个类添加到表格行

$(document).ready(function(){

       $(‘tr:odd’).addClass(‘odd’);//为奇数行添加样式

       $(‘tr:even’).addClass(‘even’);//为偶数行添加样式

       $(‘td:contains(‘Henry’)’).addClass(‘highlight’);//为含有“Henry”的行添加样式

//针对id为subCompanyIn的表格设置奇数行样式

$('#subCompanyInTabletr:odd').css("background-color","#DBE5F1");

});

Javascript本身从0开始编号,所以第一行为编号为0(偶数),第二行编号为1(奇数)。

抱歉!评论已关闭.