JQuery学习笔记(一)
来源:互联网 发布:软件项目维护费用 编辑:程序博客网 时间:2024/06/16 11:34
选择符——取得你想要的一切
工厂函数$()
在JQuery中,无论我们使用哪种类型的选择符(不管是CSS、XPath,还是自定义的选择符),都要从一个美元符号和一对圆括号开始:$()
。 $()
函数会消除使用for循环访问一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,并且会被保存到一个jquery对象中。可以在$()
函数的圆括号中使用的参数几乎没有什么限制。比较常用的一些例子:
标签名:$('p')会取得文档中所有的段落。ID:$('#some-id')会取得文档中具有对应的some-id ID的一个元素。类:$('.some-class')会取得文档中带有some-class 类的所有元素。
CSS选择符
以下的例子是一个嵌套无序列表
<ul id='select-plays'> <li>Comedies <ul> <li><a href='http://www.mysite.com/asypulikeit/'>As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul> <li><a href='hamlet.pdf'>Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV(<a href='mailto:hentyiv@king.co.uk'>email</a>) <ul> <li>Part I</li> <li>Part II</li> </ul> <li><a href='http://www.shakespeare.co.uk/henryv.htm'>Henry V</a></li> <li>Richard II</li> </ul> </li></ul>
我们注意到,其中第一个<ul
具有一个值为selected-plays的ID,但<li>
标签则全都没有与之关联的类。在没有应用任何样式的情况下,这个列表的外观如下图所示。
下图中的嵌套列表按照我们期望的方式显示—一组带符号的列表项垂直排列,并且每个列表都按照各自的级别进行了缩进。
基于列表项的级别添加样式
假设我们想让顶级的项,而且只有顶级的项水平排列。可以定义一个horizontal类。
.horizontal{ float:left; list-style:none; margin:10px;}
这个horizontal类会将元素浮动到它后面元素的左侧,如果这个元素是一个列表项,那么会移除其项目符号,最后,再为该元素的每一边各添加10像素的外边距。
这里,没有直接在Html中添加horizontal类,而只是将它动态的添加给位于顶级的列表项Comedies、Tragedies和Histroies,以便示范jquery中选择符的用法。
$(document).ready(function(){ $('#selected-plays > li').addClass('horizontal');});
在jquery代码中使用$(document).ready()
结构时,位于其中的所有代码都会在DOM加载后立即执行。
第2行代码使用了子元素组合符(>)将horizontal类只添加到位于顶级的项中。实际上,位于$()函数中的选择符的含义是,查找ID为selected-plays的元素(#selected-plays)的子元素(>)中所有的列表项(li)。
应用后,现在的嵌套列表如下图
要为其他项(非顶级的项)添加样式,有很多中方式。因为顶级项添加了horizontal类,所以取得全部非顶级项的一种方式,就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。
$(document).ready(function(){ $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level');});
这一次取得每个列表项(li)。
1)是ID为selected-plays的元素(#selected-plays)的后代元素。
2)没有horizontal类(:not(.horizontal))。
在为这些列表项添加了sub-level类之后,它们取得了在样式表规则.sub-level{background-color:#ffc;}
中定义的浅黄的背景颜色。此时嵌套列表如下图。
XPath选择符
XPath(XML Path Language,XML路径语言)是在XML文档中识别不同元素或元素值的一种语言,与CSS在Html文档中识别元素的方式类似。jquery库支持一组基本的XPath选择符,如果愿意也可以将它们与CSS选择符一同使用。而且,jquery中,无论对什么类型的文档都可以使用XPath和CSS选择符。
为链接添加样式
属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且,也可以使用星号(*)表示字符串中的任意位置。
假设想以不同的文本颜色来显示不同类型的链接。那么,首先要在样式表中定义如下样式
a { color:#00f;/*普通链接显示为蓝色 */}a.mailto { color:#f00;/*电子邮件链接显示为红色*/}a.pdflink { color:#090;/*指向PDF文件的链接显示为绿色*/}a.mysite { text-decoration:none;/*移除内部链接的下划线*/ border-bottom: 1px dotted #00f;}
然后,可以使用jquery为符合条件的链接添加3个类:mailto、pdflink和mysite。
要取得所有电子邮件链接,需要构造一个选择符,用来寻找所有带href属性([href])且以mailto开头(^=”mailto:”)的锚元素(a)。结果如下
$(document).ready(function(){ $('a[href^="mailto:"]').addClass('mailto');});
要取得所有指向PDF文件的链接,需要使用美元符号($)而不是(^),来取得所有带href属性并以.pdf结尾的链接,相应的代码如下所示:
$(document).ready(function(){ $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink');});
最后,要取得所有内部链接,即到mysite.com中其他页面的链接,则需要使用星号:
$(document).ready(function(){ $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink'); $('a[href*="mysite.com"]').addClass('mysite');});
这里,mysite.com可以出现在href属性值中的任何位置上。如果也想选择指向mysite.com内部所有子域名的链接,使用这个选择符特别关键(这里指的应该是使用顶级域名mysite.com,而不是使用具体的子域名www.mysite.com。否则,会将排除www之外的任何子域名,如blog.mysite.com等。)
应用后,看到下面的样式。
- 带点划线的蓝色文本:<a href='http://www.mysite.com/asypulikeit/'>As You Like It</a>
- 绿色文本:<a href='hamlet.pdf'>Hamlet</a>
- 红色文本:<a href='mailto:hentyiv@king.co.uk'>email</a>
自定义选择符
除了CSS和XPath选择符之外,jquery还添加了独有的完全不同的自定义选择符。jquery中的多数自定义选择符都可以基于某个标准选出特定的元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以一个冒号(:)开头。例如:从匹配的带有horizontal类的div集合中,选择第2个项,那么应该使用$('div.horizontal:eq(1)')
注意,因为javascript数组采用从0开始的编号方式,所以eq(1)取的是集合中的第2个元素。而CSS则是从1开始的,因此CSS选择符$('div:nth-child(1)')
取得的是作为其父元素第1个子元素的所有div。
交替地为表格行添加样式
jquery库中的两个十分有用的自定义选择符是:odd和:even。
<table> <tr> <td>As You Like It</td> <td>Comedy</td> </tr> <tr> <td>All's Well that Ends Well</td> <td>Comedy</td> </tr> <tr> <td>Hamlet</td> <td>Tragedy</td> </tr> <tr> <td>Macbeth</td> <td>Tragedy</td> </tr> <tr> <td>Romeo and Juliet</td> <td>Tragedy</td> </tr> <tr> <td>Henry IV,Part I</td> <td>History</td> </tr> <tr> <td>Henry V</td> <td>History</td> </tr></table>
向样式表中添加两个类,一个用于为奇数行添加样式,另一个用于为偶数行添加样式。
.odd{background-color:#ffc;/*奇数行的背景色为浅黄*/}.even{background-color:#cef;/*偶数行的背景色为浅蓝*/}
最后编写jquery,将这两个类添加到表格行(<tr>
标签)中:
$(document).ready(function(){ $('tr:odd').addClass('odd'); $('tr:even').addClass('even');});
效果如下:
乍一看,表格行的背景颜色似乎与意图相反。原因是与:eq()选择符一样,:odd()和:even()选择符使用的都是javascript本身的从0开始的编号方式。表格的第1行编号为0(偶数),而表格的第2行编号是1(奇数),然后依次类推。
不过,要注意的是,如果一个页面上存在多个表格,我们则真有可能看到意料之外的结果。例如这个表格最后一行是浅蓝色背景色,所以下一个表格的第一行就会带有浅黄色背景色。
假设想突出显示Henry游戏所有表格单元。
.highlight{font-weight:bold;color:#f00;}
$('td:contains("Henry")').addClass('highlight');
效果如下
不使用jquery也可以通过其他方式实现突显效果,然而,jquery+css,在内容由程序动态生成,而我们又无权改变html和服务器端代码的情况下,这种对样式化操作提供了优秀的替换方案。
- JQuery学习笔记(一)
- Jquery学习笔记(一)
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- jquery学习笔记(一)
- JQuery 学习笔记(一)
- jQuery学习笔记(一)
- JQuery学习笔记(一)
- jQuery学习笔记(一)---
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- JQuery学习笔记(一)
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- JQUERY 学习笔记(一)
- JQuery 学习笔记(一)
- jQuery 学习笔记(一)
- JQuery学习笔记(一)
- 利用URLRewriter重写url地址-实现伪静态
- Havel-Hakimi定理(判断一个序列是否可图)
- AVS中访问色度分量时的stride问题
- ubuntu su sudo sudo–i 区别
- ubuntu下tflearn安装
- JQuery学习笔记(一)
- 图像的直方图
- MM配置的节点的快速入口
- 使用AutoCompleteTextView实现对全国省市的模糊查询
- html5图片上传时IOS和Android均显示摄像头拍照和图片选择
- 该如何向你奶奶解释企业级架构
- 一个清理隐藏、创建、删除畸形目录、特殊文件名的方法
- Linux命令-cp
- 2017-7-10记录一个故障问题