Jquery学习笔记一

最新推荐文章于 2024-04-13 00:47:02 发布
最新推荐文章于 2024-04-13 00:47:02 发布
阅读量91 收藏
点赞数
分类专栏： JavaScript技术 文章标签： jQuery 三星 CSS HTML UP ViewUI
最近闲暇下来，决定学习学习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>

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

[img]http://dl.iteye.com/upload/attachment/283452/e6065bb3-84dd-3f75-9110-7920784988d3.jpg[/img]

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

[img]http://dl.iteye.com/upload/attachment/283454/553280ff-89a5-390d-92eb-089be98c8e34.jpg[/img]

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

[img]http://dl.iteye.com/upload/attachment/283456/4301ab88-883e-37d2-a52a-8074aff16052.jpg[/img]

ok，效果达到了，完成。
zhangwanfly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery学习笔记（1）
qq_51861704的博客
05-15 161
Jquery主要内容 1：Jquery对象 Jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以...
JQuery学习笔记
kianagrow的博客
05-15 1082
jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery实际项目中的应用1
程驰天下的专栏
03-31 1446
$(document).ready(function() {  // 下面代码可以制作一个加载动画 //$("#titleTag").ajaxStart(function(){ $(this).show(); }); //$("#titleTag").ajaxStop(function(){ $(this).hide(); }); //查询所有tag的衣服   $.post("listSuppli
jquery学习笔记一
weixin_44981396的博客
10-27 154
jquery学习笔记一 简单的jquery实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/1.css"/> ...
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 969
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1159
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记1
weixin_38720471的博客
10-26 59
隔行变色功能实现 js实现： window.onload=function(){ //获取所有行 var rows=document.getElementsByTagName("tr"); //隔行变色 for(var i=0;i<rows.length;i++){ if(i%2==1){ rows[i].className="altrow"; } } } </script> jQuery实现： <
jQuery的学习笔记
qi_bai_jin的博客
11-06 1020
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery 学习笔记
Dshuai7191的博客
08-26 296
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
jQuery学习笔记(1)
2401_84097658的博客
04-13 519
资料过多，篇幅有限，需要文中全部资料可以点击这里获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-OAxRK0fU-1712940361131)][外链图片转存中…(img-AP6yg03D-1712940361131)]资料过多，篇幅有限，需要文中全部资料可以点击这里获取。
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
Jquery 学习笔记（一）
10-29
从今天起正式学习Jquery（实际严格讲已经用了几个月的Jquery的一丁点东西），边学边做边记笔记；阅读书籍《锋利的Jquery》+Jquery API Doc。
锋利的JQuery学习笔记.pdf
08-14
锋利的JQuery学习笔记
densenet模型-基于卷积神经网络识别火龙果是否腐烂-不含数据集图片-含逐行注释和说明文档.zip
05-23
densenet模型_基于卷积神经网络识别火龙果是否腐烂-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,
Python保留格式复制多个excel工作表到汇总表并生成目录.zip
最新发布
05-23
工作中，经常需要将很多独立的excel表格按照顺序复制汇总到单个表格，并且要求保留原表格的格式，且要生成目录页。使用excel自带的“移动或复制”可以实现，但是纯手工操作，需要一个一个打开并复制到新的表格。目录也要手动“复制粘贴”。可不可以用Python一键搞定呢？
一款基于golang支持protobuf，类似于swagger的文档自动化工具.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值