疯狂Jquery第一天(Jquery学习笔记)


Posted in Javascript onMay 11, 2012

好了开始我的Jquery第一天。
我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下:

<html> 
<head> 
<title>jquery 链式操作</title> 
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<script type='text/javascript'> 
$(document).ready(function(){ 
alert("hello word!"); 
//静止右键点击 
// $(document).bind("contextmenu",function(e){ 
// return false; 
// }); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

接下来让我们来看看一个复杂的实例,这个实例让我们知道什么是:jquery的链式操作,
我用 . 来连接jquery 的链式操作。
可能有的人刚开始学query ,看起来比较陌生,在后面的疯狂Jquery 中我会一一解释。慢慢的你就会明白。
<html> 
<head> 
<title>Jquery 链式操作</title> 
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<style type="text/css"> 
#menu {width:300px} 
.has_children { 
background:#555;color:#fff;cursor:pointer; 
} 
.highligt{color:#fff;background:green;} 
div{padding:0;margin:0px;} 
div a { 
background:#888;display:none;float:left;width:300px; 
} 
</style> 
<script type='text/javascript'> 
$(document).ready(function(){ 
// alert("给所有目录添加click 事件"); 
$(".has_children").click(function(){ 
$(this).addClass('highligt') //为当前元素添加highligt类。 
.children("a").show().end() //将子节点的<a>元素显示出来。并且重新定位到上次操作的元素 
.siblings().removeClass("highligt") //获取同级的元素。(或兄弟元素),并且去掉他们highligt类 
.children("a").hide(); //将同级的元素,兄弟元素下的<a> 元素隐藏 
}); 
}); 
</script> 
</head> 
<body> 
<div id='menu'> 
<div class='has_children'> 
<span>第一章 认识Jquery</span> 
<a>1.1 Javascript 和 Javascript库</a> 
<a>1.2 加入Jquery</a> 
<a>1.3 编写简单的Jquery 代码</a> 
<a>1.4 Jquery对象 和 Dom对象</a> 
<a>1.5 解决Jquery 和其他库的冲突</a> 
<a>1.6 Jquery 开发工具和插件</a> 
<a>1.7 小结</a> 
</div> 
<div class='has_children'> 
<span>第二章 Jquery选择器</span> 
<a>2.1 Jquery 选择器是什么?</a> 
<a>2.2 Jquery 选择器的优势?</a> 
<a>2.3 Jquery 选择器</a> 
<a>2.4 应用Jquery改写实例</a> 
<a>2.5 选择器中的一些注意事项</a> 
<a>2.6 案例研究————类似淘宝品牌列表的效果</a> 
<a>2.7 还有其他选择器吗?</a> 
<a>2.8 小结</a> 
</div> 
<div class='has_children'> 
<span>第三章 Jquery中的DOM操作</span> 
<a>3.1 DOM的操作分类</a> 
<a>3.2 Jquery 中的DOM操作</a> 
<a>3.3 案例研究————某网站的超链接和图片效果</a> 
<a>3.4 小结</a> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
jQuery实现简单全选框
Sep 13 jQuery
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
jQuery 过滤not()与filter()实例代码
May 10 #Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 #Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 #Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 #Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
jQuery 图片切换插件(代码比较少)
May 07 #Javascript
You might like
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
vue实现循环切换动画
2018/10/17 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python之语音识别speech模块
2020/09/09 Python
django中ImageField的使用详解
2020/12/21 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
Java程序员面试90题
2013/10/19 面试题
村级环境卫生整治方案
2014/05/04 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis