疯狂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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JavaScript实现音乐导航效果
Nov 19 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
php 求质素(素数) 的实现代码
2011/04/12 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Django url 路由匹配过程详解
2021/01/22 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
二年级体育教学反思
2014/01/15 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
升学宴学生致辞
2015/07/27 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android