jQuery 学习笔记 一 初体验
2014-04-28 21:49
447 查看
<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") ) ;
相关文章推荐
- jQuery 学习笔记
- Jquery学习笔记:通过层次关系获取jquery对象
- jQuery学习笔记之toArray()
- jQuery学习笔记 06
- jQuery学习笔记--ajax查询,jQuery解析返回的json数据 详解
- 锋利的JQuery 学习笔记
- jQuery 学习笔记
- JQuery学习使用笔记 -- JQuery插件开发
- 锋利的jquery学习笔记 第二章
- jQuery文档学习笔记
- Jquery学习笔记
- jquery中validation部分学习笔记
- javascript和jquery 学习笔记
- jquery-学习笔记2
- jQuery学习笔记
- Jquery 学习笔记(二)jQuery性能优化指南
- Codeschool学习笔记--Jquery
- 学习笔记之jquery
- JQuery学习笔记7:element属性控制
- jQuery学习笔记之十------高级事件