疯狂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 页面载入进度条实现代码
Feb 08 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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 define()函数及defined()函数使用详解
2013/06/09 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP导入导出Excel代码
2015/07/07 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
php curl发送请求实例方法
2019/08/01 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
Vue中props的使用详解
2018/06/15 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android