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

JQuery零星点滴

2012年02月05日 ⁄ 综合 ⁄ 共 1811字 ⁄ 字号 评论关闭

  学习JQuery,记录下零星的点滴。

  先给出HTML一个页面,其中包含HTML的一些标记:

   <div class="Ken" id="YeanJay">
       此处显示 class "Ken" id "YeanJay" 的内容
       <div class="mini">
           此处显示 class "mini" 的内容</div>
   </div>
   <div class="Ken" id="two" title="test">
       此处显示 class "Ken" id "two" title "test"的内容
       <div class="mini" title="other">
           此处显示 class "mini" 的内容 title为other</div>
       <div class="mini" title="test">
           此处显示 class "mini" 的内 title为 test的内容</div>
   </div>

   <div>12121212<div>

   <div>eeeeeee<div>

   <p>此处为P标签的样式</p>

   <span>此处为span的样式</span>

  1. 关于CSS选择器

       给出三种最常用的CSS选择器:

       1.1 #id  根据给定的ID匹配一个元素的CSS  例子:  #YeanJay{background:#aaa} ,将id为YeanJay的元素的背景颜色设置为#aaa。

       1.2 .class 根据给定的类名匹配元素 例子:.Ken{font-size:14px;},将类名为Ken的元素的字体大小设置成14px。

       1.3 div,span,p,td 设置给出的组合标签的样式 例子: div,span,p,td{font-size:13px;},将div,span,p,td标签的字体设置为13px。

2. 关于CSS颜色

       #ffaabb,R:232 G:32 B:222

       这里注意:#ffaabb = #fab   也就是12,34,56,分别相等的时候,可以在三组里面各取出一个来。

3.关于JQuery选择器

      直接以示例给出:

       3.1 $(“.Ken”).css(…);      改变类名为Ken的元素的css。

       3.2 $(“#YeanJay”).css(…);  改变ID为YeanJay的元素的CSS。

       3.3 $(“div”).css(…); 改变所有DIV元素的CSS。

      以上三种为基本的选择器。

      注意:$("div”)可以写成$('div’)。也就是说在在选择器两边使用单引号和使用双引号是一样的。

      3.4.$(“body div”).css(…); 改变body下面的所有的div元素的样式。

      3.5$(“body>div”).css(…);改变body的子div的样式,这里是同辈的DIV。比如顶上的那段HTML中,会改变类名为Ken的DIV,但不会改变mini的DIV。

      比较:3.4和3.5,3.4是body下面的所有的div,3.5是body下面的第一层div。也就是同辈的div元素。

      3.6 $(“.Ken”).next(“div”).css(…); 改变类Ken之后的下一个的div元素的CSS。这里的下一个是指他本身的兄弟元素,是同辈的。   另外的写法:$(".Ken+div“).css(…);

      3.7 $(“.Ken”).nextAll(“div”).css(…); 改变类Ken之后的所有的兄弟Div。注意:第一层的意思是如果在DIV里面嵌套了DIV那么只有最外层的DIV改变样式。

也就是只能选择同辈的div元素。另外的一种写法:$(".Ken~div”).css(…);

      以上四种为层次选择器。

      3.8 过滤选择器:div:first 第一个DIV,div:last 最后一个DIV ,div:not(.Ken) 类名不是Ken的div,div:even 偶数的div,div:odd奇数的div,div:eq(0) 索引值为0的DIV,

div:gt(3) 索引大于3的DIV,div:lt(3)索引小于3的DIV,:header 标题元素 如<h1><h2>,:animated 正在执行动画的元素

      待续……

抱歉!评论已关闭.