疯狂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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
webpack入门必知必会
Jan 16 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
Vue使用v-viewer实现图片预览
Oct 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
色色整理的PHP面试题集锦
2012/03/08 PHP
php去除HTML标签实例
2013/11/06 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php提高网站效率的技巧
2015/09/29 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
webpack3之loader全解析
2017/10/26 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Python如何执行系统命令
2020/09/23 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
如何设置Java的运行环境
2013/04/05 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
公务员转正考察材料
2014/02/07 职场文书
门面房租房协议书
2014/08/20 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
MySQL里面的子查询的基本使用
2021/08/02 MySQL