疯狂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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
轮播的简单实现方法
Jul 28 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
Laravel日志用法详解
2016/10/09 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
js加解密 脚本解密
2008/02/22 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
python实现按日期归档文件
2021/01/30 Python
python编程的核心知识点总结
2021/02/08 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HashMap和Hashtable的区别
2013/05/18 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
群众路线教育实践活动心得体会
2014/03/07 职场文书
毕业实习证明范本
2015/06/16 职场文书
公司庆典主持词
2015/07/04 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL