人生的路很长,路有很多分支,每个分支都对应着不一样的未来,然而你选择了现在的这条路你就必须走下去

人的一生常处于抉择之中,如:念哪一间大学?选哪一种职业?娶哪一种女子?……等等伤脑筋的事情。一个人抉择力的有无,可以显示其人格成熟与否。

倒是哪些胸无主见的人,不受抉择之苦。因为逢到需要决定的时候,他总是求询别人说:"嘿,你看怎么做?"

大凡能够成大功业的人,都是抉择力甚强的人。他知道事之成败,全在乎已没有人可以代劳,更没有人能代你决定。

在抉择的哪一刻,成败实已露出端倪。

美文欣赏完了,是不是可以一心来阅读我的文章了呢?静下心来,这期的文档含金量都比较大,一定要好好吸收!

下面说说我们这章的主要内容:jQuery选择器

说到选择器大部分的人会想到CSS(Cascading Style Sheets,层叠样式表),jQuery选择器具有良好的浏览器兼容性

优势:(1)简介的写法(2)支持CSS1.0到CSS3.0选择器(3)完善的处理机制

一:基本选择器:标签选择器、类选择器、ID选择器、并集选择器、交集选择器、全局选择器

#myid    返回: <jQuery对象>
匹配一个id为myid的元素。
element    返回: <jQuery对象> 数组
匹配所有的element元素
.myclass    返回: <jQuery对象> 数组
匹配所有class为myclass的元素
*    返回: <jQuery对象> 数组
匹配所有元素。该选择器会选择文档中所有的元素,包括html,head,body
selector1,selector2,selectorN    返回: <jQuery对象> 数组
匹配所有满足selector1或selector2或selectorN的元素

案例:

 1     <title>jQuery基本选择器</title>
 2     <style type="text/css">
 3         #box {
 4             /*background-color:pink;*/
 5             border:2px solid black;
 6             padding:5px;
 7         }
 8     </style>
 9      <script src="js//jquery-1.12.3.min.js"></script>
10     <script type="text/javascript">
11         $(function () {
12             $("#box").css("background-color","yellow");
13             $("h2").click(function () {
14                 $("h3").css("background-color", "orange");
15             });
16         });
17
18     </script>
19 </head>
20 <body>
21     <div id="box">id为box的div
22         <h2 class="title">class为title的h2</h2>
23         <h3 class="title">class位title的h3</h3>
24         <h3>热门排行</h3>
25         <dl>
26             <dt><img src="img\1.jpg" width="300px" height="300px" alt="美女图片"/></dt>
27             <dt class="title">打美女</dt>
28             <dd>色色游戏</dd>
29             <dd>QQ游戏</dd>
30         </dl>
31     </div>
32 </body>

二:层次选择器:后代选择器、子选择器、相邻元素选择器和同辈元素选择器

1 elementParent elementChild    返回: <jQuery对象> 数组
2 匹配elementParent下的所有子元素elementChild。例如:$("div p") 选择所有div下的p元素
3 elementParent > elementChild    返回: <jQuery对象> 数组
4 匹配elementParent下的子元素elementChild。例如:$("div>p") 选择所有上级元素为div的p元素
5 prev+next    返回: <jQuery对象> 数组
6 匹配prev同级之后紧邻的元素next。例如:$("h1+div") 选择所有div同级之前为h1的元素(<h1 /><div />)
7 prev ~ siblings    返回: <jQuery对象> 数组
8 匹配prev同级之后的元素siblings。例如:$("h1~div") 可以匹配(<h1 /><div /><div />)

三 :属相选择器:

1 jQuery 使用 XPath 表达式来选择带有给定属性的元素。
2 $("[href]") 选取所有带有 href 属性的元素。
3 $("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
4 $("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
5 $("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。

案例:

 1  <title>英雄联盟</title>
 2
 3     <script src="js//jquery-1.12.3.min.js"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6             $("p").click(function () {
 7                 $(".txt_box>.current").css("background-color", "#6FF");
 8                 $("p > span").css("background-color", "#F9F").next("background-color", "#F06");
 9                 $("strong~span").css("color", "#00C");
10             });
11         });
12     </script>
13 </head>
14 <body>
15          <h1>《英雄联盟》</h1>
16        <p>《英雄联盟》,简称LOL</p>
17       <p>那个<strong>Riot Games</strong>开发..<span>nagegeeeg...
18           <strong>魔兽争霸</strong>
19           啥啥啥....</span><a href="#">更多详情</a></p>
20        <h2>目录</h2>
21      <ul class="txt_box">
22          <li class="current">开发团队</li>
23          <li>游戏周边</li>
24          <li>游戏介绍</li>
25          <li>配置需求</li>
26          <li>游戏背景</li>
27     </ul>
28 </body>

四:通过条件过滤选取元素

1.简单过滤选择器

  (1):first 选择器。选择第一个匹配元素。 $("td:first").css("border","2px solid blue");

  (2):last 选择器。选择最后一个匹配元素。 $("td:last").css("border","2px solid blue");

  (3):odd 选择器。选择所有基数元素。 $("td:odd").css("border","2px solid blue");

  (4):even 选择器。选择所有偶数元素。 $("td:even").css("border","2px solid blue");

  (5):eq(index) 选择器。从匹配的集合中选择索引等于给定值的元素。 $(td:eq(0))".css("border","2px solid blue");

  (6):gt(index) 选择器。索引大于给定值的所有元素。

  (7):lt(index) 选择器。索引小于给定值的所有元素。

  (8):not(selector...) 选择器。去除某些选择器后的所有元素。 $("td:not(:first,:last)").css(...);

  (9):header 选择器。选择所有诸如 h1,h2,h3 之类的标题元素。 $(":header")

  (10):animated 选择器。选择所有正在执行动画效果的元素。 $(td:animated);

可见与不可见:

:visible选取所有可见的元素

:hidden选取所有的隐藏元素

案例:

 1 <title>近期热门栏目</title>
 2     <style type="text/css">
 3
 4     </style>
 5       <script src="js//jquery-1.12.3.min.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("li:even").css("background-color", "#CCC");
 9         });
10         $(function () {
11             $(".mydiv").css("background-color", "#FF99CC");
12         });
13         $(function () {
14             $(".one").click(function () {
15                 $(".myclass:hidden").show();
16             });
17         });
18     </script>
19 </head>
20 <body>
21     <p>淘乐,更多生活,<strong>快乐</strong>就在你身边</p>
22     <strong>近期热门</strong><p class="one">(更多)</p>
23     <ul>
24         <li>发的v数</li>
25         <li>的我看到健康</li>
26         <li class="mydiv">颠三倒四女</li>
27         <li>分地点VB</li>
28         <li>梵蒂冈独女</li>
29         <li>我七号的剧本就</li>
30         <li>DVD看剧本</li>
31         <li>大酒店及刺</li>
32         <li class="myclass">发货对话的</li>
33         <li class="myclass">一定会发动机</li>
34         <li class="myclass">傻逼举不胜举</li>
35     </ul>
36 </body>

选择器这块我觉得我讲的不是很好,因为有太多的功能没有给大家展示,等会给大家出一套关于jQuery的面试题!有兴趣可以看看

时间: 2024-10-11 00:37:56

人生的路很长,路有很多分支,每个分支都对应着不一样的未来,然而你选择了现在的这条路你就必须走下去的相关文章

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IT生涯的路很长,是否准备好?

IT生涯的路很长,是否准备好? 曾几何时,梦想自己成为一个出色的化学家.那大概是4年前的事了吧.后来,慢慢走向成熟.我很感谢亲爱的自己在大学所收获的知识.每天上班般的走进图书馆看着自己所喜欢的书,以前很讨厌看书的我,现在能静下心去学习.我感到自己渐渐成熟,某天突然对IT行业感兴趣,尤其是LINUX的博大精深.这将是我人生职业最大的转折. 有时候,我就会问.学这么多,还不是为了帮别人服务,找个工作那么难,并且还要忍气吐声的忙碌着,人的一生就要这样度过?这种想法一直促使这我,人总是会明白很多道理,以

只为提醒自己,前面的路很长

1.某君结合自己经历总结的c/c++程序员的修炼之道 转自:http://blog.csdn.net/langeldep/article/details/6333562 本人是过来人, 结合自身的体会和大家交流一下,希望新人能少走弯路. 每个人的情况不一样,我下面的描述可能并不适合每一个看到这篇文章的人. 一.C/C++语言 如果你的基础很差, 建议不要一开始就学C++语言,从C开始学起,对程序有个初步的认识,循序渐进.C语言的书嘛,先买一本 300 页以内的,把书中的每一个例子都通过键盘敲打进

作为一个programmer,我们的路很长

与其说软件行业是一个浮躁的行业,不如说社会是浮躁(部分而非全部),社会中人是主体运作,人的急功近利,自负,追求利益的最大化,原本技术驱动的行业,变得乌烟瘴气,令人唏嘘,令人看衰. 软件的行业浮躁主要来自于两大方面,一是雇主,二是雇员,请允许我这样称呼,雇主一般指老板,老板无非追求功与名,因而大肆宣传自己,自吹自擂,当然有些人做出了些实事,有些人一直在做秀,玩虚的.套用时髦词汇,云计算,互联网+,好像不说,都感觉自己out了........甚至有人认为是一场科技革命,是一个全新的时代,这个需要时间

前端这条路,我们该何去何从

原文地址:https://www.usblog.cc/blog/post/justzhl/前端这条路,我们该何去何从 这样,因为你会发现,如果你觉得某个教程写的不好,那可能很难找到一个教程适合你的,不是因为别人教程写的差(除非特别那种的),而是你该问问自己,是否有静下心来认真去看.找教程我给一个建议,建议你刚入门不要去看大牛的作品,最好看那些菜鸟或者和你技术差不多的,因为他们更容易让你懂,大牛的作品一般里面会涉及到很多东西,你去看的话,难免受打击,等到你了解部分之后再去品味大牛的作品. 当然菜鸟

路还很长

今天是4月9日,离实习的日子也剩下2个多月了. 而此时心情还是没能调整过来,昨天去参加了蓝桥杯C组的Java比赛.从最开始的激动,紧张到最后的失落. 0分,注定的0分. 这是个教训的开始,毕竟是太投入到这个比赛中. 又一次让很多人失望,也让自己明了这条路还很长,要学的东西还很多.从最开始不爱交流,只敢匿名的发布自己代码,到后来被 老师发现,却一下成了"有能力的青年".从最开始的用Java开发了打地鼠游戏,却一次一次夸下不能完成的海口,"我会在一个星期完 成给你的",

前端的路还很长

1.会做一些简单的设计(能够熟练使用ps.fireworks.ai.Flash等设计软件做出一些特定的效果) 2.使用html+css进行合理的页面布局 (考虑页面兼容性---->最终要学会做响应式页面或者能够做                               到页面的自适应:注意一下他们的区别于联系                               性能优化------>了解浏览器怎样工作的:渲染与重绘) 3.使用css3做出一些特定的动画效果(Canvas或SVG也可

O2O的路很多,BAT恋上了B2B这条路?

大风吹破浪潮,O2O寒冬论开始盛行,其实所谓的寒冬只是投资人不在盲目的相信概念而已,不会再像以前傻傻的被忽悠两句就投钱了,而真正有市场价值的项目根本无惧所谓的寒冬.寒冬的到来实际上是在净化行业环境,把那些滥竽充数的项目淘汰掉,剩下的项目才会健康成长,资本市场由热转冷的结果是胜者为王,O2O的路有很多,B2C路难走的话,还可尝试B2B. 百度糯米"会员+"战略,通过B2B的方式占领市场 在前几日的百度世界大会上,百度正式发布"糯米+"O2O生态战略,将围绕"

胡适:大学毕业后的几条路

文/胡适 这一两个星期里,各地的大学都有毕业的班次,都有很多的毕业生离开学校去开始他们的成人事业. 学生的生活是一种享有特殊优待的生活,不妨幼稚一点,不妨吵吵闹闹,社会都能纵容他们,不肯严格地要他们负行为的责任.现在他们要撑起自己的肩膀来挑他们自己的担子了.在这个国难最紧急的年头,他们的担子真不轻!我们祝他们的成功,同时也不忍不依据自己的经验,赠他们几句送行的赠言——虽未必是救命毫毛,也许做个防身的锦囊罢! 你们毕业之后,可走的路不出这几条:绝少数的人还可以在国内或国外的研究院继续做学术研究:少

大学毕业后的几条路

      胡?适?1?9?3?2?年?演?讲? -----?大?学?毕?业?后?的?几?条?路 这一两个星期里,各地的大学都有毕业的班次,都有很多的毕业生离开学校去开始他们的成人事业. 学生的生活是一种享有特殊优待的生活,不妨幼稚一点,不妨吵吵闹闹,社会都能纵容他们,不肯严格地要他们负行为的责任.现在他们要撑起自己的肩膀来挑他们自己的担子了.在这个国难最紧急的年头,他们的担子真不轻!我们祝他们的成功,同时也不忍不依据自己的经验,赠他们几句送行的赠言--虽未必是救命毫毛,也许做个防身的锦囊罢!