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; }