jQuery基础笔记

jQuery基础笔记

第一步： 
<script language="javascript" src="jquery.js"></script>

例子一：
<div ID=a  class="b">
分别有3种写法,作用都是一样的
$("div")
$(".b")
$("#a")

例子二： 
  <div ID="aa" class="bb">
  <br>
  测试
  <p>
  点这里
  </p>
  <div>

代码:
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function() {
    $(".bb p").click(function() {
  alert("Hello world!");
 });
})
</SCRIPT>

效果：
只有点<p>的范围才触发事件，也可以这么写：$("div > p ")或者$("div  p ")

例子三：
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn </div>

代码：
$("div:contains('John')") .css("background", "#00FEEE");

例子四：
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

代码：
$("input[name='newsletter']").css("background", "#00FEEE");
$("input[name='newsletter']").attr("checked", true);

进阶例子：漂亮效果的表格
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>11</td>
    <td>ABC@gmail.com</td>
  </tr>
</tbody>
</table>

代码：
 $(".stripe tr")
 .mouseover(function(){$(this).addClass("over");})
 .mouseout(function(){ $(this).removeClass("over");})
 $(".stripe tr:even").addClass("alt");

需要样式表配合：
<style>
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
td * {
        padding:6px 11px;
}
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}

</style>

进阶例子：点击控件变色

<dl>
<dt>Name: <dt>
<dd><input type="text" /></dd>
<dt>Password: <dt>
<dd><input type="password" /></dd>
<dt>Textarea: <dt>
<dd><textarea></textarea></dd>
</dl>

代码：
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("ie_focus")}).blur(function(){$(this).removeClass("ie_focus")});

需要样式表配合：
    .redborder{border:2px dashed #ff0000 }
   body { font: .9em/1.5 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }
  form { width: 20em; margin: 4em auto; }
  dt { clear: left; float: left; }
  dd { clear: right; margin-left: 6em; }
  input, textarea { width: 12em; border: 1px solid #ccc; }
  input:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
  .ie_hover { background: #ffc; }
  .ie_focus { border: 1px solid #f00; background: #fcc; }