jQuery项目案例
文章目录
-
- 1、动态添加和删除数据
- 2、微博发布
- 3、移动水果
- 4、上下拉切换
- 5、精品演示
- 6、tab标签切换
- 7、突出显示
- 8、下拉菜单
- 9、页面滚动
- 10、王者手风琴
- 总结
1、动态添加和删除数据
案例演示：
实现步骤：
val()获取值，tr添加设置内容，append内部添加，slideDown向下滑动，val()清空
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动态添加和删除数据title>
<link rel="stylesheet" href="css/style.css">
<script src="jquery.js">script>
head>
<body>
<div>
课程名称：<input type="text" id="tname">
所属学院：<input type="text" id="tdep">
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
div>
<table id="j_tb">
<tr>
<th>课程名称th>
<th>所属学院th>
<th>已学会th>
tr>
<tr>
<td>JavaScripttd>
<td>信息工程系td>
<td><a href="javascrip:;" class="del">删除a>td>
tr>
<tr>
<td>csstd>
<td>信息工程系td>
<td><a href="javascrip:;" class="del">删除a>td>
tr>
<tr>
<td>htmltd>
<td>信息工程系td>
<td><a href="javascrip:;" class="del">删除a>td>
tr>
<tr>
<td>jQuerytd>
<td>信息工程系td>
<td><a href="javascrip:;" class="del">删除a>td>
tr>
table>
<script>
$(function(){
$("#j_btnAddData").click(function(){
var tname=$("#tname").val();
var tdep=$("#tdep").val();
// var tr=$(""+tname+" "+tdep+" 删除 2、微博发布
案例演示：
实现步骤：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
style>
<script src="jquery.js" type="text/javascript" charset="utf-8">script>
<script>
$(function(){
$(".btn").click(function(){
var txt =$(".txt").val();
console.log(txt);
var li=$("");
li.html(txt+"删除");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
$("ul").on("click","a",function(){
// $(this).parent().slideUp(function(){
$(this).parent().remove();
// })
})
})
script>
head>
<body>
<div class="box" id="weibo">
<span>微博发布span>
<textarea name="" class="txt" cols="30" rows="10">textarea>
<button class="btn">发布button>
<ul>
ul>
div>
body>
html>
3、移动水果
案例演示：
实现步骤：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
select {
width: 200px;
height: 300px;
font-size: 22px;
background-color: #80ff45;
}
style>
<script src="jquery.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<select name="" id="sel1" class="sel1" size="4" multiple>
<option value="">香蕉option>
<option value="">大鸭梨option>
<option value="">苹果option>
<option value="">大西瓜option>
select>
<button class="allright">>>>button>
<button class="allleft"><<<button>
<button class="right">>button>
<button class="left"><button>
<select name="" id="sel2" class="sel2" size="4" multiple>
select>
<script type="text/javascript">
$(function(){
$(".allright").click(function(){
$("#sel2").prepend($("#sel1 option"));
})
$(".allleft").click(function(){
$("#sel1").prepend($("#sel2 option"));
})
$(".right").click(function(){
$("#sel2").prepend($("#sel1 option:selected"))
})
$(".left").click(function(){
$("#sel1").prepend($("#sel2 option:selected"))
})
})
script>
body>
html>
4、上下拉切换
案例演示：
实现步骤：
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<script type="text/javascript" src="jquery.js">
script>
<style>
div{
width: 300px;
height: 500px;
background-color: #00FFFF;
}
style>
<body>
<button type="button">下拉button>
<button type="button">上拉button>
<button type="button">切换button>
<div>div>
<script type="text/javascript">
$(function(){
$("button").eq(0).click(function(){
$("div").slideDown();
})
$("button").eq(1).click(function(){
$("div").slideUp();
})
$("button").eq(2).click(function(){
$("div").slideToggle();
})
})
script>
body>
html>
5、精品演示
案例演示：
实现步骤：
获取下标，对应内容通过下标show，其他hide
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
style>
<script src="jquery.js">script>
<script>
$(function(){
$("#left li").click(function(){
//获取点击的数组下标
var index=$(this).index();
$("#content div").eq(index).show().siblings().hide();
})
})
script>
head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴a>li>
<li><a href="#">雪地靴a>li>
<li><a href="#">冬裙a>li>
<li><a href="#">呢大衣a>li>
<li><a href="#">毛衣a>li>
<li><a href="#">棉服a>li>
<li><a href="#">女裤a>li>
<li><a href="#">羽绒服a>li>
<li><a href="#">牛仔裤a>li>
ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/女裤.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" />a>
div>
<div>
<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" />a>
div>
div>
div>
body>
html>
6、tab标签切换
案例演示：
实现步骤：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script type="text/javascript" src="jquery.js">
script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
style>
head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍li>
<li>规格与包装li>
<li>售后保障li>
<li>商品评价（50000）li>
<li>手机社区li>
ul>
div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
div>
<div class="item">
规格与包装模块内容
div>
<div class="item">
售后保障模块内容
div>
<div class="item">
商品评价（50000）模块内容
div>
<div class="item">
手机社区模块内容
div>
div>
div>
<script>
$(function(){
$(" ul li").mouseover(function(){
var index = $(this).index()
$(".item").eq(index).show().siblings().hide();
$("ul li").eq(index).addClass("current").siblings().removeClass("current");
})
})
script>
body>
html>
7、突出显示
案例演示：
实现步骤：
触碰透明度0.5 离开透明度 1 （opacity）
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
style>
<script type="text/javascript" src="../jquery.js">
script>
<script>
$(function(){
$("ul li").mouseover(function(){
var index=$(this).index();
$("li").eq(index).siblings().stop().animate({
opacity:0.5
})
})
$("ul li").mouseout(function(){
var index=$(this).index();
$("li").eq(index).stop().siblings().stop().animate({
opacity:1
})
})
})
script>
head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/02.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/03.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/04.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/05.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/06.jpg" alt="" />a>
li>
ul>
div>
body>
html>
8、下拉菜单
案例演示：
实现步骤：
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="jquery.js">script>
head>
<body>
<script>
$(function(){
$(".wrap>li").mouseover(function(){
$(this).children("ul").stop().slideDown();
})
$(".wrap>li").mouseout(function(){
$(this).children("ul").stop().slideUp();
})
})
script>
<ul class="wrap">
<li class="cc">
微博
<ul>
<li><a href="">私信a>li>
<li><a href="">评论a>li>
<li><a href="">添加好友a>li>
ul>
li>
ul>
body>
html>
9、页面滚动
案例演示：
实现步骤：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: block;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
style>
<script src="../jquery.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div class="back">返回顶部div>
<div class="container">
div>
<script>
$(function() {
$(window).scroll(function(){
var scrollTop=$(document).scrollTop();
var top=$(".container").offset().top;
if(scrollTop>=top){
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
})
$(".back").click(function(){
// $(document).scrollTop(0);
$("html,body").stop().animate({//动画效果只能是元素去做，不能是文档
scrollTop:0
})
})
})
script>
body>
html>
10、王者手风琴
案例演示：
实现步骤：
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
style>
head>
<body>
<script type="text/javascript" src="../jquery.js">script>
<script type="text/javascript">
$(function() {
$(".king li").mouseover(function(){
$(this).stop().animate({
width:224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
})
$(".king li").mouseout(function(){
$(this).stop().animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
})
})
script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
a>
li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
a>
li>
ul>
div>
body>
html>
总结
li:first li:last li:eq(2) li:odd --奇数 li:even --偶数
ul li --子代
ul
hide()
show()
siblings()
$(this).index()
.click
.mouseover
.mouseout
addClass()
removeClass()
css(“background”,“red”)
slideDown()
slideUp()
slideToggle()
hover()
animite()
fadeIn()
fadeOut()
fadeTo(“show”,0.5)
each(function(index,element))
$.extend(a,b)
$.extend(true,a,b)
on({click:function(){}})
on("","",function(){})
append() repend() before() after() remove() after()
val() text() html()
offset().top offset().left postion() postion().top
$(document).scrollTop()
$(window).scroll()
$(“body,html”).animate({})
prop()
prop("","") --固有属性
attr()
attr("","")–自定义属性
checked --固有属性