疯狂Jquery第一天(Jquery学习笔记)

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

赞 (0)

相关推荐

  • 疯狂Jquery第一天(Jquery学习笔记)

    好了开始我的Jquery第一天. 我也是从Hello wrod!开始的.关于jquery 的引用我直接一笔带过.如下: 复制代码 代码如下: <html> <head> <title>jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type='text/ja

  • JQuery CSS样式控制 学习笔记

    JQuery CSS样式控制 学习笔记

    jQuery 就不多说了,这是JS的一个函数库,比较常用,我们今天是就jQuery的三种用于css的操作进行总结 $(selector).css("name","value") $(selector).css({properties}) $(selector).css(name) $(selector).css("name","value")为所有元素给定CSS属性设置值: 下面看我刚写的代码 复制代码 代码如下: <h

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装. 这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码. 图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显): JS主要代码如下: 复制代码 代码如下: (function() { var yQuery = (fun

  • jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

    摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle

  • jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

  • 分享jQuery插件的学习笔记

    插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一． 插件概述 插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,主要大致可以分为:UI 类.表单及验

随机推荐