下载：
官网：https://jquery.com/
jQuery的导入
1，导包：将下载后的包jquery-1.12.4.js直接复制进项目文件
2，引入js 文件
3，为页面加载事件绑定方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--使用jquery必需引入js 文件-->
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*$(document).reday(function(){});*/
//页面加载完之后所执行的函数
$(document).ready(function(){
alert("jquery非常重要 ,必需掌握");
});
//简化版 $(function(){});
$(function(){
alert("jquery非常重要 ,必需掌握2");
});
jQuery(function(){
alert("jquery非常重要 ,必需掌握3");
});
</script>
</head>
<body>
</body>
</html>
jQuery语法：
(
s
e
l
e
c
t
o
r
)
.
a
c
t
i
o
n
(
)
;
1
，
工
厂
函
数
(selector).action(); 1，工厂函数
(selector).action();1，工厂函数():将DOM对象转换为jQuery对象
2，选择器selector：获取需要操作的DOM元素
3，方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法。
jQuery操作页面元素：
1，使用addClass()方法为元素增加样式等于css()方法
2，使用css方法设置元素样式
3，使用show()，hide()方法设置元素的显示和隐藏
addClass()方法的使用
语法：jQuery对象.addClass([样式名]);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左导航菜单</title>
<style type="text/css">
li{list-style: none; line-height: 22px; cursor: pointer;}
.aaaa{
background-color: yellow;
color: gray;
}
</style>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
$(function(){
//给元素绑定事件
//document.getElementById("idd"); 同等于 $("#idd")
//给 <li id="idd" οnclick="">你喜欢的明星有哪些</li> 绑定了一个事件 onclick
//第一步 $("#idd").click();//去掉on
//第二步$("#idd").click(function(){});
$("#idd").click(function(){
//设置样式 第一种方式
//改变样式效果 aaa为本来上面已经设置好了的
//$("#idd").addClass("aaaa");
//设置样式 第二种方式
/*$("#idd").css("background-color","red");
$("#idd").css("color","yellow");*/
//设置样式 第三种方式
//$("#idd").css("background-color","red").css("color","yellow");
//设置样式 第四种方式
$("#idd").css({"background-color":"red","color":"yellow"});
});
});
</script>
</head>
<body>
<ul>
<!--当鼠标放在li 点击一个切换样式-->
<li id="idd" onblur="">你喜欢的明星有哪些</li>
<li>王宝强</li>
<li>马蓉</li>
<li id="idccc">等</li>
<input id="iddd" />
</ul>
</body>
</html>
鼠标移入移出事件
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>仿京东左侧菜单</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//绑定移入事件
/*$("li").mousemove(function(){
alert("进来了没有");
});*/
//移出事件
/*$("li").mouseout(function(){
alert("移出了");
});*/
//$("li").mousemove().mouseout();
//$("li").mousemove(function(){}).mouseout(function(){});
$("li").mousemove(function(){
//移入进去的时候把所有子节点全部显示
$(this).children("div").show();
}).mouseout(function(){
//hide 隐藏
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<div class="nav-box">
<div class="nav-top"><a href="">全部商品分类</a></div>
<ul>
<li >
<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
</li>
<li>
<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
</li>
<li>
<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
</li>
<li>
<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
</li>
<li>
<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: none;/*隐藏*/
}
.dddd{
display:block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*$(function(){});*/
jQuery(function(){
//点击事件
/*$("h2").click(function(){
$("div").addClass("dddd");
//显示效果
//$("div").css("display","block");
});*/
/*$("h2").mousemove(function(){
//移入进去的时候把所有子节点全部显示
$("div").addClass("dddd");
}).mouseout(function(){
//hide 隐藏
$("div").css("display","none");
});*/
$("h2").click(function(){
$("div").addClass("dddd");
$("h2").css("background-color","red").next().css("color","yellow");
});
});
</script>
</head>
<body>
<h2>陈鹏辉你喜欢谁</h2>
<div>
<p>贺鹏</p>
<p>姚成</p>
<p>刘小鹏</p>
</div>
</body>
</html>
next()方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: none;/*隐藏*/
}
.dddd{
display:block;/*可见*/
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*$(function(){});*/
jQuery(function(){
//点击事件
/*$("h2").click(function(){
$("div").addClass("dddd");
//显示效果
//$("div").css("display","block");
});*/
/*$("h2").mousemove(function(){
//移入进去的时候把所有子节点全部显示
$("div").addClass("dddd");
}).mouseout(function(){
//hide 隐藏
$("div").css("display","none");
});*/
$("h2").click(function(){
$("div").addClass("dddd");
$("h2").css("background-color","red").next().css("color","yellow");
});
});
</script>
</head>
<body>
<h2>陈鹏辉你喜欢谁</h2>
<div>
<p>贺鹏</p>
<p>姚成</p>
<p>刘小鹏</p>
</div>
</body>
</html>
基本选择器
标签选择器
element:根据给定的标签名匹配元素
$("h2")//:选取所有h2的元素
类选择器
.class:根据给定的class元素匹配元素
$(".title")://选取所有class为title的元素
ID选择器
#id：根据给定的id匹配元素
$("#title")//选取id为title的元素
并集选择器
selector1，selector2：将每一个选择器匹配的元素合并后一起返回
$("div,p,title")//选取所有div,p和拥有class为title的元素
全集选择器
*匹配所有元素
$("*")//选取所有元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle1.css">
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//标签选择器
$("dt").click(function(){
//显示dd的标签
$("dd").css("display","block");
});
//标签选择器
$("h1").css("color","blue");
//类选择器
$(".price").css({"background-color":"#AAAAAA","padding":"5px"});
//id选择器
$("#author").css("color","darkblue");
//并集选择器
$(".intro,dt,dd,#ticket").css("color","red");
// 全局选择器，就是选择全部
$("*").css("font-weight","900");
});
</script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>
层次选择器
1，后代选择器
$("#menu span")//选取menu下的<span>元素
2，子选择器
$("#menu>span")//选取#menu的子元素<span>
3,相邻元素选择器
$("h2+dl")选取紧邻<h2>元素后的同辈元素<dl>
4，同辈元素选择器
$("h2~dl")选取h2后的所有同辈元素<dl>
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle2.css">
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//后代选择器
$(".textRight p").css("color","red");
//子选择器
$(".textRight>p").css("color","yellow");
//相邻选择器
$("h1+p").css("background-color","red");
//同辈选择器
$("h1~p").css("background-color","blue");
});
</script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price" >
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<div>这是第2个孩子</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<div>dl下面的div大厦在没有改</div>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>
属性选择器
1，选取包含给定属性的元素
$("[href]")选取含有href属性的元素
2，选取等于给定属性是某个特定值的元素
$("[href='#']")//选取href属性值为“#”的元素
3，选取不等于给定属性是某个特定值的元素
$("[href !='#']")选取href属性值不为“#”的元素
4，选取给定属性是以某些特定值开始的元素
$("[href^='en']")//选取href属性值以en开头的元素
5，选取给定属性是以某些特定值结尾的元素
$("[href$='.jpg']")选取href属性值以.jpg结尾的元素
6，选取给定属性是以包含某些元素值的元素
$("[href*='txt']")//选取href属性中含有txt的元素
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<link rel="stylesheet" href="css/newStyle.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//属性选择器
$("#news a[class]").css("color","red");
//等于 hot
$("#news a[class='hot']").css("background-color","yellow");
//不等于hot
$("#news a[class!='hot']").css("font-size","20px");
//指定以某些开头的 www
$("#news a[href^='www']").css("color","burlywood");
//以 html结尾的
$("#news a[href$='html']").css("color","#B02F4A");
//包含aspx
$("#news a[href*='aspx']").css("background-color","#0000FF");
});
</script>
</head>
<body>
<section id="news">
<header>京东快报<a href="#" class="more">更多 > </a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
</body>
</html>
过滤选择器
1,first:选取第一个元素
$("li:first")//选取所有<li>元素中的第一个<li>元素
2,last:选取最后一个元素
$("li:last")//选取所有<li>元素中的最后一个<li>元素
3，not(selector):选取去除所有与给定选择器匹配的元素、
$("li:not(.three)")//选取class中不是three的元素
4，even选取索引是偶数的所有元素（index从0开始）
$("li:even")//选取所有索引是偶数所有<li>元素
5，odd选取索引是偶数的所有元素（index从0开始）
$("li:even")//选取所有索引是奇数所有<li>元素
6，eq(index)选取索引等于index的元素（index从零开始）
$("li:eq(3)")//选取索引等于3的<li>元素
7，gt(index)选取索引大于index的元素（index从零开始）
$("li:gt(3)")//选取索引大于3的<li>元素（大于1，不包括1）
8，lt(index)选取索引小于index的元素（index从零开始）
$("li:lt(3)")//选取索引小于3的<li>元素（小于3，不包括3）
9，header选取所有标题元素，如h1-h6
$(":header")//选取网络中所有标题元素
10，focus 选取当前获取焦点的元素
$(":fouse") //选取当前获得焦点的元素
11，animated 选择所有动画
$(":animated")//选取当前所有动画元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
<script src="js/jquery-1.12.4.js"></script>
<!--6次-->
<script>
$(function(){
$(".contain :header").css("background-color","blue").css("color","white");
//第一个
$(".contain li:first").css("color","red");
//最后一个
$(".contain li:last").css("color","yellow");
//结业考试必考 百分之百考
//奇数
//$(".contain li:odd").css("background-color","gray");
//偶数
//$(".contain li:even").css("background-color","gold");
/*$(".contain li:lt(4)").css("background-color","gray");*/
$(".contain li:gt(2)").css("background-color","gray");
});
</script>
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
</body>
</html>
jQuery中的事件与动画
基础事件
1，鼠标事件
1.1，click()事件//单击事件
1.2，mouseover()事件//鼠标指针移过时
1.3，mouseout()事件//鼠标指针移出时
1.4，mouseenter()事件//鼠标指针进入时
1.5，mouseleave()事件//鼠标指针离开时
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//鼠标移入事件
$(".nav-ul a").mousemove(function(){
$(this).css("background-color","blue");
});
//鼠标移出事件
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
});
//一起写 移入 移出
$(".nav-ul a").mousemove(function(){
$(this).css("background-color","blue");
}).mouseout(function(){
$(this).css("background-color","#ff2832");
});
$(".nav-ul a").mousemove(function(){
$(this).css("background-color","blue");
}).mouseout(function(){
$(this).css("background-color","#ff2832");
}).click(function(){
alert("点击事件")
});
});
</script>
2，键盘事件
keydown()
按下键盘时
keyup()
释放按键时
keypress()
产生可打印的字符时
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
*{margin: 0; padding: 0; font-family:"微软雅黑";}
fieldset {
width: 300px;
margin: 10px auto;
}
dl{clear: both;}
dt,dd{
display:inline-block;
height: 35px;
line-height: 35px;;
}
dt{ width: 80px; text-align: right;}
input[type="submit"]{width: 60px; text-align: center; line-height: 25px;}
</style>
</head>
<body>
<fieldset>
<legend>会员登录</legend>
<dl>
<dt>用户名：</dt>
<dd><input id="userName" type="text" /></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="password" type="password" /></dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" onkeydown="" value="登 录" /> </dd>
</dl>
<span id="events"></span>
</fieldset>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function () {
//回车事件
$("#password").keydown(function(enven){
if(enven.keyCode==13){//等于回车健
if(confirm("确定登陆吗")){
alert("登陆成功");
}
}
});
});
</script>
</body>
</html>
3，window事件
4，表单事件
复合事件
1，鼠标光标悬停
2，鼠标连续点击
事件的绑定
bind(type,[date],fn);//
type为事件类型，包括click事件，mouseover，mouseout等基础事件，此外，也可以自定义事件。
[date]为可选函数
fn为处理函数
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//绑定单个事件
//$(".menu-btn").bind("mouseover",function(){});
/*$(".menu-btn").bind("mouseover",function(){
$(".topDown").show();//显示
});
$(".menu-btn").bind("mouseout",function(){
$(".topDown").hide();//隐藏
});*/
//可以绑定多个事件
//$(".menu-btn").bind({})
$(".menu-btn").bind({
mouseover:function(){
$(".topDown").show();//显示
},
mouseout:function(){
$(".topDown").hide();//隐藏
}
})
});
</script>
</head>
<body>
<div class="top" onmouseover="" onmouseout="">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">我的当当</a>
<ul class="topDown">
<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>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><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>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
</body>
</html>
移除事件
$("#del").click(function(){
$("#nav li:first").unbind("click");
});
当unbind()不带参数时，表示移除所绑定的所有事件
script>
$(function(){
//点击第一个按钮触发事件，显示第一个页面，第二个页面隐藏
$("#nav li:first").bind("click",function(){
$("#dayTask").show();
$("#growTask").hide();
$(".taskContent").css("background-color","blue");
});
//点击第二个按钮触发事件，显示第二个页面，第一个页面隐藏
$("#nav li:last").bind("click",function(){
$("#dayTask").hide();
$("#growTask").show();
$(".taskContent").css("background-color","rosybrown");
});
//解除绑定事件，点击del接触点击事件
$("#del").click(function(){
$("#nav li:first").unbind("click");
});
});
</script>
复合事件
1,hover()方法:
相当于mouseover和mouseout事件的组合
<script>
$(function(){
$(".on").hover(function(){
$(".topDown").show();
},function(){
$(".topDown").hide();
});
});
</script>
2,toggle()方法
用于模拟鼠标连续click事件
$(document).ready(function(){
$("div").toggle(
function(){
$("div").css("background-color","#0000CC");
},
function(){
$("div").css("background-color","burlywood");
},
function(){
$("div").css("background-color","red");
},
function(){
$("div").css("background-color","#4DC83A");
}
,
function(){
$("div").css("background-color","yellow");
}
);
});
jQuery动画效果
1，控制元素显示与隐藏
show([speed],[callback])控制元素的显示,
hide([speed],[callback])控制元素的隐藏
<script>
$(function(){
$(".on").hover(
function(){
//移入
//$(".topDown").show(); 默认是0
$(".topDown").show(2000);//2秒显示完
},
function(){
//移出
//show(参数1，参数2) 可以有两个参数 参数2执行完之后所执行的函数
$(".topDown").hide(2000,function(){
alert("执行完了");
});
}
); });
</script>
2，改变元素的透明度
fadeIn(),fadeOut()可以通过改变元素的透明度实现淡入淡出的效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淡入淡出效果</title>
<style>
body{text-align: center;}
</style>
</head>
<body>
<img src="images/ad.jpg" /><br/>
<input name="fadein_btn" type="button" value="淡入" />
<input name="fadeout_btn" type="button" value="淡出" />
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function() {
//通过属性选择器选择
$("input[name=fadein_btn]").click(function(){
//淡入
//$("img").fadeIn();
$("img").fadeIn(2000);
});
$("input[name=fadeout_btn]").bind("click",function(){
//淡出
$("img").fadeOut(2000,function(){
alert("执行完后所执行的");
});
});
});
</script>
</body>
</html>
3，改变元素高度
slideDown()可使元素逐步延申显示
slideUp()可使元素逐步缩短直至隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>改变元素高度</title>
<style type="text/css" >
body{
margin: 0px;
padding: 0px;
}
h2{
background-color: blue;
color: white;
margin: 0px;
}
</style>
</head>
<body>
<div id="box">
<h2>窗边的小豆豆</h2>
<div class="txt">
<p>本书讲述了作者上小学的一段真实的故事。</p>
<p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
<p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>
</div>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function() {
$("h2").bind("click",function(){
$(".txt").slideDown(1000);
$(".txt").slideUp(1000);
//$(".txt").slideUp(1000,function(){});
});
});
</script>
</body>
</html>
4，自定义动画
animate
$(selector).animate({params},speed,callback)
总结：
使用jQuery操作DOM对象
设置和获取样式值：
css(name,value);//可以设置一个属性
或
css({name:value,name:value,name:value....});
//可以设置多个属性
示例：
$(this).css("border","5px")
追加和移除样式
$(selector).addClass(class);
$(selector).addClass(class1 class2 .....classN);
<script>
$(document).ready(function(){
//最开始的时候 没有使用jquery之前如何设置样式
document.getElementById("").style.backgroundColor="";
//学了jquery后
$(".title").css("background-color","red");
//今天通过追加样式
//$(".title").addClass("content");
/*$(".title").hover(
function (){
$(".title").addClass("content text333");
},
function (){
$(".title").removeClass("content text333");
}
);*/
$(".title").bind("click",function(){
//连续点击事件
$(".text").toggleClass("text333 content");
});
});
</script>
hasClass()方法用来判断是否包含指定的样式
<script>
$(document).ready(function(){
$(".title").hover(
function (){
//console.log($(".text").hasClass("content"));
//判断是否含有content样式
if(!$(".text").hasClass("content")){
//没有则追加样式
$(".text").addClass("content");
}
//判断是否含有textddd样式
if(!$(".text").hasClass("textddd")){
//没有则追加样式
$(".text").addClass("textddd");
}
},
function (){
//如果有此样式，则删除
if($(".text").hasClass("content")){
$(".text").removeClass("content");
}
if($(".text").hasClass("textddd")){
$(".text").removeClass("textddd");
}});});
</script>
html()方法可以对html方法进行操作，类似于JS中的innerHTML；
$("div.left").html(<div class='content'>...</div>)
//.html()方法可以获取元素中html代码,()里面为设置元素中的html代码
val()
<script>
//没有学jquery之前是这样给元素添加值的
function aa(){
//div是这样的 添加值
//document.getElementById("ddd1").innerHTML="<h2>添加了一个值</h2>";
//如果元素中有value 属性的 添加值
//document.getElementById("aaa1").value="刚添加的";
//删除是这样的
document.getElementById("ddd1").innerHTML="";
document.getElementById("aaa1").value="";
}
//使用jquery之后
$(function(){
//添加值
$("#ddd1").html("<h1>这是jquery方式</h1>");
$("#aaa1").val("添加的值");
//删除是这样的
$("#ddd1").html("");
//value缩写为val
$("#aaa1").val("");
});
</script>
text()可获取或者设置文本的内容
<script>
$(document).ready(function(){
$("h1").bind("click",function(){
var str = "<ul><li>产品1</li><li>产品2</li><li>产品33</li></ul>";
$(".proList").html(str);
});
$("span").click(function(){
$(".proList").html("");
});
$("h1").bind("click",function(){
var str = "<ul><li>产品1</li><li>产品2</li><li>产品3</li></ul>";
$(".proList").text(str);
});
$("span").click(function(){
//加什么文字就给什么文字
$(".proList").text("");
});
});
</script>
插入节点
元素内部插入节点
1,append(content)
$(A).append(B)表示将B追加到A中
如：$("ul").append($NewNode1);
2,appendTo(content)
$(A).appendTo(B)表示将A追加到B中
如：$newNode1.append("ul1");
3,prepend(content)
$(A).prepend(B)表示将B前置插入到A中
如：$("ul").prepend($newNode1);
4,prependTo(content)
$(A).prepend(B)表示将A前置插入到B中
如：$newNode1.prepend("ul1");
扫一扫
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
