效果图:
页面代码,包含css 和 js代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
//alert('hello jquery');
//样式
$('#mydiv').css({
'background-color':'#ccc',
'width':'600px',
'height':'40px'
});
//alert($('li').length);
$('li').css({
'float':'left',
'font-size':'20px',
'width':'100px',
'line-height':'40px',
'cursor':'pointer',
'text-align':'center'
});
//事件 eq gt lt
var dong = $('.mystyle');
$('li').on({
'mouseover':function(){
$(this).css({
'background-color':'red',
'color':'white'
});
},'mouseout':function(){
$(this).css({
'background-color':'#ccc',
'color':'black'
});
},'click':function(){
//$('#dong').show(1000);
//slideUp //动画
dong.html("<h1>"+$(this).text()+"</h1>");
if(dong.is(':visible')){
dong.fadeOut(1000);
}else{
dong.fadeIn(1000);
}
}
});
//DOM操作
//val();html();,text();
dong.css({
'background-color':'green',
'width':'600px',
'height':'400px',
'display':'none'
});
});
</script>
<style type="text/css">
.mystyle{
}
</style>
</head>
<body>
<div id="mydiv">
<ul>
<li>aaaaaaaa1</li>
<li>aaaaaaaa2</li>
<li>aaaaaaaa3</li>
<li>aaaaaaaa4</li>
<li>aaaaaaaa5</li>
<li>aaaaaaaa6</li>
</ul>
</div>
<div></div>
<div class='mystyle'>
</div>
</body>
</html>
分享到:
相关推荐
JQuery是现在最流行的Ajax框架;本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括:选择器;Dom操作;事件;动画;Ajax操作;是一个非常容易上手的代码案例。送给初学者。--邵老师
jQuery基础案例分析(初学者入门精通最佳案例),内容丰富,一切用代码说话。 通常,学习一个技术从基础一点点学识一个很慢的学习过程,即便学会了也编不出东西来。通过简单的案例来学习,分析代码为什么这么写,...
jQuery UI打造实用的图片裁切功能,图片裁切现在比较流行,像很多网站的头像上传功能,上传后允许你在线对头像进行剪切编辑,其它大部分都是基于jQuery的,本裁切不完全用到了jQuery,还用到了一些UI扩展插件,因此...
学习JQuery基础时做案例,隔行换色-全选全不选-QQ表情-下拉框左右移动,用到的素材
版次:2-1 所属分类: 计算机 > 软件与程序设计 > 网络编程 > javascript 编辑推荐 畅销图书升级版,涵盖jQuery 1.3的全部新特性 著名jQuery资源网站LearningjQuery.com创始人全力打造 jQuery官方网站推荐
在这个选择器案例中包含了 3 个基础案例,分别是 呼吸灯特效、手风琴特效、突出展示特效。某些图片可能套用了别人的图片,所有代码是原创。配套与jQuery课程资源。选择器课件详见 ...
jQuery开发入门 jQuery选择器 jQuery操作DOM Ajax在jQuery中的应用 jQuery实用工具函数
测试 –1,作用 –2,测试 三,Jquery –1,概述–2,使用步骤–3,入门案例–4,jQuery的文档就绪 –1,概述 –2,使用步骤 –3,入门案例 –4,jQuery的文档就绪 四,JQuery的语法 –1,选择器–2,常用...
基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型...
操作案例1:制作jQuery Mobile基本页面 1.3.4 jQuery Mobile对话框 1.4 与电话整合 操作案例2:制作商家信息展示页面 2 jQuery Mobile UI组件 2.1 网格系统 2.2 格式化内容 2.3 可折叠的内容 2.4 工具栏 操作案例3:...
书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...
jQuery攻略 jQuery是目前应用最广泛的JavaScript框架之一。已经成为微软ASP.NET、...作者按照“问题描述——解决方案——知其所以然”的思路组织全书内容,将各种实用的jQuery技巧穿插在案例中,使读者轻松掌握jQuery。
配套博客https://blog.csdn.net/H200102/article/details/106985912,https://blog.csdn.net/H200102/article/details/106991221。...压缩包里包含JQuery的基础和高级内容的源码和笔记,JQuery的版本和文档。
从基础开始学习jQuery,这里含有从基础到高级的jQuery实例
jquery学习,从最基础的开始,适用于对js不太了解的人使用,包含代码和资料,包含20个案例,由于视频太大,无法上传,需要的可以给我留言,单独发送
第1章介绍了jQuery Mobile的功能特点、获取方法,以及与其他移动开发框架的对比;第2~5章分别讲解了jQuery Mobile的页面与对话框、工具栏与格式化内容、页面常用组件、主题等基础知识;第6章和第7章分别详细介绍了...
最全套的企业级jquery框架技术,内容包含jQuery基础知识、方法、案例等资源。
上传的《锋利的JQuery》实例源码,每一章节中都包含有实例的代码源码(包括附录中的实例)……;主要适用于零基础或有简单网页基础的人群学习
一个基于js的jQuery类库 ,简化了js,方便代码员使用,里面基本汇总了jQuery前端所需的知识,缺乏ajax,没有服务器与后台关联知识,不过对于前端还是比较全的,含有全选,反选,左右选择以及二级联动的代码案例以及...
本文实例讲述了jQuery实现在新增加的元素上添加事件方法。分享给大家供大家参考,具体如下: 最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为on...