疯狂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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
vue项目支付功能代码详解
Feb 18 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
js实现电灯开关效果
2021/01/19 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python使用append合并两个数组的方法
2015/04/28 Python
python简单读取大文件的方法
2016/07/01 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
python下载的库包存放路径
2020/07/27 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
Internet体系结构
2014/12/21 面试题
食品流通安全承诺书
2014/05/22 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
公司业务员管理制度
2015/08/05 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android