<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
.unselect{
color: #2524ff;
font-size: 20px;
}
.selected{
color: #f54958;
font-size: 25px;
}
.highlight{
background-color: #6caeee;
}
</style>
<div id="divMsg">Hello Word !</div>
<input id="btnShow" type="button" value="显示"/>
<input id="btmHide" type="button" value="隐藏" />
<input id="btnChange" type="button" value="修改内容为 Hello Word, too !">
<form>
<input name="check1" type="checkbox" value="an"/>
<input name="check2" type="checkbox" value="an"/>
<input type="button" value="ab" />
<input type="radio" value="ac" />
<input type="text" value="aa">
<p> aa</p>
<p> ba</p>
<p >
<span> aa</span>
</p>
</form>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<h1>h1</h1>
<h2>h2</h2>
<table>
<tr>
<td name="cc">aa</td><td>bb</td><td><ol>p</ol></td>
</tr>
<tr>
<td name="cc" id="cc">cc</td><td></td> <td></td>
</tr>
</table>
<img name="imgs" />
<div>
<span> aa</span>
</div>
/* 此示例使用了: * (1) jQuery的Id选择器: $("#btnShow") * (2) 事件绑定函数 bind() * (3) 显示和隐藏函数. show()和hide() * (4) 修改元素内部html的函数html() */ $("#btnShow").bind("click",function(event){$("#divMsg").show();}); $("#btmHide").bind("click",function(event){$("#divMsg").hide();}); $("#btnChange").bind("click",function(event){$("#divMsg").html("Hello Word ,too !");}); //创建 DOM 添加到现有的 DIV上 $("<div id='testDiv' style='border: solid 1px #ff1e37'>动态创建DIV</div> ").appendTo($("#divMsg")); //获取匹配的第二个元素 eq 函数 ; gt 匹配所有大于给定索引值的元素; lt 选择结果集中索引小于 N 的 elements $("div:eq(1)").toggleClass("selected"); //保留子元素中不含有ol的元素 filter 过滤器 $("div").filter(function(index){ return $("ol",this).size() == 0; }); //由于input元素的父元素是一个表单元素,所以返回true is函数 logs( $("input[type='checkbox']").parent().is("form") ) ;