疯狂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 powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
简单了解JavaScript arguement原理及作用
May 28 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python psutil库安装教程
2018/03/19 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
基于python实现模拟数据结构模型
2020/06/12 Python
python代码区分大小写吗
2020/06/17 Python
python如何从键盘获取输入实例
2020/06/18 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
运动会广播稿30字
2014/01/21 职场文书
中学生个人自我评价
2014/02/06 职场文书
社区母亲节活动方案
2014/03/05 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android