疯狂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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
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
第十三节 对象串行化 [13]
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python装饰器decorator介绍
2014/11/21 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
详解Python装饰器
2019/03/25 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
教师自荐信范文
2015/03/06 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
numpy数据类型dtype转换实现
2021/04/24 Python
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Apache自带的ab压力测试工具的实现
2022/07/23 Servers