`
fengfeng925
  • 浏览: 107123 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery学习笔记一

jQuery三星CSSHTMLUP 
阅读更多
    最近闲暇下来，决定学习学习Jquery。以后准备把Jquery的学习整理成笔记，方便自己以后学习参考。
     首先研究学习了下Jquery的选择器功能，给我的感觉确实是太强大了，做了个小例子。代码贴出来，包括注释，方便自己查阅。
     这个小例子是做个相机列表页面，当点击“显示所有产品列表”时候，所有产品显示，并高亮其中一部分产品。点击“精简显示”时，隐藏部分列表。首先准备个html页面，初始代码如下 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <title>Jquery Test</title>
    </head>
    <body>
        <div class="SubCategoryBox">
            <ul>
                <li>
                    <a href="#">佳能</a>
                    <i>(30440)</i>
                </li>
                <li>
                    <a href="#">索尼</a>
                    <i>(27220)</i>
                </li>
                <li>
                    <a href="#">三星</a>
                    <i>(20808)</i>
                </li>
                <li>
                    <a href="#">尼康</a>
                    <i>(17821)</i>
                </li>
                <li>
                    <a href="#">松下</a>
                    <i>(12289)</i>
                </li>
                <li>
                    <a href="#">卡西欧</a>
                    <i>(8242)</i>
                </li>
                <li>
                    <a href="#">富士</a>
                    <i>(14894)</i>
                </li>
                <li>
                    <a href="#">柯达</a>
                    <i>(9520)</i>
                </li>
                <li>
                    <a href="#">宾得</a>
                    <i>(2195)</i>
                </li>
                <li>
                    <a href="#">理光</a>
                    <i>(4114)</i>
                </li>
                <li>
                    <a href="#">奥林巴斯</a>
                    <i>(12205)</i>
                </li>
                <li>
                    <a href="#">明基</a>
                    <i>(1466)</i>
                </li>
                <li>
                    <a href="#">爱国者</a>
                    <i>(3091)</i>
                </li>
                <li>
                    <a href="#">其他品牌相机</a>
                    <i>(7275)</i>
                </li>
            </ul>
        </div>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </body>
</html>

然后为这个html添加样式，样式代码如下 
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
    text-align: center;
}

a {
    color: #04D;
    text-decoration: none;
}

a:hover {
    color: #F50;
    text-decoration: underline;
}

.SubCategoryBox {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}

.SubCategoryBox ul {
    list-style: none;
}

.SubCategoryBox ul li {
    display: block;
    float: left;
    width: 200px;
    line-height: 20px;
}

.showmore {
    clear: both;
    text-align: center;
    padding-top: 10px;
}

.showmore a {
    display: block;
    width: 120px;
    margin: 0 auto;
    line-height: 24px;
    border: 1px solid #AAA;
}

.showmore a span {
    padding-left: 15px;
    background: url(img/down.gif) no-repeat 0 0;
}

.promoted a {
    color: #F50;
}

接着就要对这个列表进行操作了，加上Jquery的代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
         	$(function(){ 								    // 等待DOM加载完毕.
				var $category = $('ul li:gt(5):not(:last)');// 获得索引值大于5的品牌集合对象(除最后一条)	
				$category.hide();							// 隐藏上面获取到的jQuery对象。
				var $toggleBtn = $('div.showmore > a');     // 获取"显示全部品牌"按钮
				$toggleBtn.click(function(){
		     	if($category.is(":visible")){				// 如果元素显示
					$category.hide();                   	// 隐藏$category
					$('.showmore a span')
						.css("background","url(img/down.gif) no-repeat 0 0")      
						.text("显示全部品牌");               // 改变背景图片和文本
					$('ul li').removeClass("promoted");		// 去掉高亮样式
			  	}else{
					$category.show();                   	// 显示$category
					$('.showmore a span')
						.css("background","url(img/up.gif) no-repeat 0 0")      
						.text("精简显示品牌");               //改变背景图片和文本
					$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
						.addClass("promoted");				//添加高亮样式
			  	}
				return false;					      	    //超链接不跳转
			})
		})
        </script>
        <title>Jquery Test</title>
    </head>
    <body>
        <div class="SubCategoryBox">
            <ul>
                <li>
                    <a href="#">佳能</a>
                    <i>(30440)</i>
                </li>
                <li>
                    <a href="#">索尼</a>
                    <i>(27220)</i>
                </li>
                <li>
                    <a href="#">三星</a>
                    <i>(20808)</i>
                </li>
                <li>
                    <a href="#">尼康</a>
                    <i>(17821)</i>
                </li>
                <li>
                    <a href="#">松下</a>
                    <i>(12289)</i>
                </li>
                <li>
                    <a href="#">卡西欧</a>
                    <i>(8242)</i>
                </li>
                <li>
                    <a href="#">富士</a>
                    <i>(14894)</i>
                </li>
                <li>
                    <a href="#">柯达</a>
                    <i>(9520)</i>
                </li>
                <li>
                    <a href="#">宾得</a>
                    <i>(2195)</i>
                </li>
                <li>
                    <a href="#">理光</a>
                    <i>(4114)</i>
                </li>
                <li>
                    <a href="#">奥林巴斯</a>
                    <i>(12205)</i>
                </li>
                <li>
                    <a href="#">明基</a>
                    <i>(1466)</i>
                </li>
                <li>
                    <a href="#">爱国者</a>
                    <i>(3091)</i>
                </li>
                <li>
                    <a href="#">其他品牌相机</a>
                    <i>(7275)</i>
                </li>
            </ul>
        </div>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </body>
</html>

然后，就可以实现功能了，初始化进去的图片如下



点击“显示全部品牌”后的页面如下



再点击“精简显示品牌”后页面如下



ok，效果达到了，完成。
  • 大小: 10.8 KB
  • 大小: 18 KB
  • 大小: 12.1 KB
1
顶
2
踩
分享到：
| 在CentOS下安装配置MySQL
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery学习笔记1

    ### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开，包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等...

    jQuery学习笔记（一）

    **jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    jquery学习笔记.rar

    总的来说，这份"jQuery学习笔记"是一份全面的教程资料，涵盖了从基础到进阶的所有重要知识点。通过系统学习，你可以理解jQuery的核心原理，掌握其高效的操作DOM、处理事件、实现动画和进行Ajax通信的方法，从而提升...

    javascript and jquery学习笔记与资料

    这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级...

    JQuery学习笔记（日常积累）

    在深入探讨jQuery的知识点之前，首先需要理解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...

    JQuery学习笔记（技术文档）

    ### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...

    圣思源的jquery学习笔记

    圣思源张龙老师的jQuery学习笔记，深入浅出地剖析了这个库的核心概念和实用技巧，对于想要深入理解jQuery或提升前端技能的开发者来说，无疑是一份宝贵的学习资源。 首先，jQuery的核心理念是"Write Less, Do More...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...

Magicbox
Global site tag (gtag.js) - Google Analytics