手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >疯狂Jquery第一天(Jquery学习笔记)
疯狂Jquery第一天(Jquery学习笔记)
摘要:好了开始我的Jquery第一天。我也是从Hellowrod!开始的。关于jquery的引用我直接一笔带过。如下:复制代码代码如下:jquer...

好了开始我的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>

<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>

<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>

<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>

【疯狂Jquery第一天(Jquery学习笔记)】相关文章:

Javascript实现的SHA-256加密算法完整实例

AngularJS学习笔记之ng-options指令

AngularJS学习笔记之基本指令

用srcElement实现添加效果 原创

滚动效果

JQuery中clone方法复制节点

javascript实现获取服务器时间

自动检查并替换文本框内的字符

如何实现浏览器上的右键菜单

两表格传递变量

精品推荐
分类导航