jQuery:就是JavaScript库中的一种,jQuery,很多优点
* JavaScript库也可以叫JavaScript函数库
* JavaScript库:把一些浏览器兼容性的代码或者是常用的函数封装在一个js文件中,这个文件就是一个JavaScript库,common.js可以看成是一个js库.
*
* 封装了很多js代码的一个js文件,就是一个库
*
* 有的js库封装的代码很少,小型的js库
* 有的js库封装的代码很多,大型的js库
* 有的js库是一个人编写的,这样的js库可能是免费的
* 有的js库是一个团队(公司)编写,这样的js库可能是收费
*
* 对象.on事件名字=匿名函数;
*
* jQuery是JS库中的一种,
* JS库也叫JS函数库
* Prototype、YUI(网络反响一般)、Dojo、ExtJS、jQuery等 都是JS库
*
* jQuery的优点:写的少做的多,体积小,功能强大,链式编程,隐式迭代.插件丰富,开源,免费
jQuery初试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
<script src="jquery-1.12.1.js"></script>
<script>
$('#btn').click(function () {
$('#dv').css({'width':'200px','height':'200px','backgroundColor':'blue'});
});
</script>
</body>
</html>jQuery再体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<p>第一个</p>
<p>第二个</p>
<script src="jquery-1.12.1.js"></script>
<script>
//jQuery版本的
$("#btn").click(function () {
$("p").text("我们都是p,我骄傲");
});
</script>
</body>
</html>jQuery中的顶级对象
* 浏览器中的顶级对象:window,浏览器中和页面中所有的东西都是window的
* 页面中的顶级对象:document,页面中某些东西是document
*
*
* jQuery中的顶级对象:jQuery----可以用$符号来代替,为了方便,jQuery(jQuery的js文件中的所有的东西都是jQuery或者都是$符号下的)
*
*
* 如果想要使用jQuery中的属性或者方法,那么需要jQuery.属性或者jQuery.方法()来使用
*
* 简单的写法:$.属性,或者$.方法
*
* 大多数情况下,jQuery中几乎都是方法,属性很少
*
* jQuery中几乎把DOM中的事件都封装成了一个方法,在jQuery中几乎是把on去掉,然后变成方法了
*
* DOM中注册事件
* 例子:
* document.getElementById("id属性值").onclick=匿名函数;
* jQuery中注册事件
*
* 例子:
* $("#id属性值").click(匿名函数);
jQuery和DOM对象的装换
*什么是DOM对象？什么是jQuery对象
//这个按钮----如果通过DOM获取----DOM对象
//这个按钮----如果通过$或者是jQuery的方式获取---jQuery对象
*为什么要把DOM对象转jQuery对象,为什么又把jQuery对象转DOM对象
//DOM操作很麻烦(兼容,一个功能写好多代码)---->转jQuery对象,操作简单,不需要写兼容，
//jQuery操作中,有一些兼容没封装在jQuery中,转DOM对象,通过原生的js代码实现功能,如果后面都解决了,又想简单的写代码操作内容,再转回jQuery对象
*转化
//DOM对象
var btnObj=document.getElementById("btn");
//jQuery对象
//$(btnObj) ---------->通过这样就可以实现DOM对象和jQuery之间的转换
//jQuery获取的---jQuery对象
//var btnObj2=$("#btn");
// btnObj2[0].onclick=function () { ----------->通过这种方式 btnObj2[0] 可以实现之间的转换
// console.log("哈哈,我又变帅了");
// };
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
<script src="jquery-1.12.1.js"></script>
<script>
var btnObj=$('#btn');
btnObj[0].onclick=function () {
alert();
}
</script>
</body>
</html>jQuery文件导入的一个小问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="jquery-1.12.1.js">
</script>
<script>
$("#btn").click(function () {
console.log("班主任好漂亮啊");
}); /*这里一定要加分号，这里默认认为直接调用了下面代码，报错*/
(function () {
console.log('hello world!');
})();
</script>
</body>
</html>老版本的body开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
<script>
//DOM版本的---10行代码
document.getElementById("btn").onclick=function () {
//判断
var body=document.body;
if(body.className=="cls"){
body.className="";
this.value="关灯";
}else{
body.className="cls";
this.value="开灯";
}
};
</script>
</body>
</html>jQuery版本的开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="开关" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
$("#btn").click(function () {
//判断body标签是否应用了cls的类样式
if($("body").hasClass("cls")){
//此处应用了cls类样式,那么就移除这个类样式
$("body").removeClass("cls");
}else{
//此处没有应用类样式cls,那么就添加类样式
$("body").addClass("cls");
}
});
// $("#btn").click(function () {
// if($("body")[0].className=="cls"){
// $("body")[0].className="";
// }else{
// $("body")[0].className="cls";
// }
// });
</script>
</body>
</html>表单标签DOM操作中设置和获取value属性的值---->对象.value
//jQuery中:
* jQuery对象.val();-------表示的是获取该元素的value属性值
* jQuery对象.val("值");----表示的是设置该元素的value属性
* jQuery对象.css("css的属性名字","属性的值");---->设置元素的样式属性值
* 注意:
* .css("属性","值");属性的写法可以是DOM操作中的js写法,也可以是css中的写法
于是开关灯案例又有了一种新实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
$("#btn").click(function () {
if($(this).val()=="关灯"){
$("body").css("backgroundColor","black");
$(this).val("开灯");
}else{
$("body").css("backgroundColor","");
$(this).val("关灯");
}
});
</script>
</body>
</html>页面加载的不同方式
*不加载
// $("#btn").click(function () {
// console.log("小苏好帅哦");
// });
*DOM加载：页面全部加载完毕才触发(标签,文字,图片,引入的文件)
// window.onload=function () {
// console.log("小苏好帅");
// };
*jQuery的第一种加载方式：同上DOM加载
// $(window).load(function () {
// console.log("小苏好猥琐哦");
// });
*jQuery的第二种加载方式：比上面第一种的快---页面中的基本的元素加载后就触发
$(document).ready(function () {
console.log("1");
});
*jQuery的第三种加载方式：页面中基本的元素加载后就触发
jQuery(function () {
console.log("页面加载了1111");
}); ↑ 或者 ↓
$(function () {
console.log("页面加载了1");
});
页面加载问题：页面时至上而下加载的，如果绑定的时候，需要绑定的元素并没有加载，事件是无法绑定的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//页面加载的事件
$(function () {
//根据id获取按钮,添加点击事件
$("#btn").click(function () {
console.log("哈哈,真的好帅");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>DOM中获取元素的方式
* 根据id获取元素
* document.getElementById("id属性的值");
* 根据标签名字获取元素
* document.getElementsByTagName("标签名字");
* 根据name属性获取元素
* document.getElementsByName("name属性的值");
* 根据类样式名字获取元素
* document.getElementsByClassName("类样式的名字");
* 根据选择器获取元素
* document.querySelector("选择器");---->id选择器,类选择器,标签选择器...一个
* document.querySelectorAll("选择器");多个的
jQuery中获取元素的方式:
* $("选择器")----jQuery对象
案例：id选择器取值和设置值，注意语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
console.log($(this).val());
$(this).val("嘎嘎,下雨了");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>案例：标签选择器
* id选择器
* $("#id属性的值")---->某个元素
* 标签选择器
* $("标签名字")------>多个元素或者是某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//.text()方法相当于DOM中的.innerText属性
//对象.text()----->获取该元素的文本内容
//对象.text("值")---->设置该元素的文本内容
//本身代码没有循环操作,jQuery中内部帮助我们循环操作的----->隐式迭代
//页面加载的事件
$(function () {
//根据id选择器获取按钮,添加点击事件
$("#btn").click(function () {
//根据标签选择器获取p标签
$("p").text("我们都是p");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<p>鸣人</p>
<p>佐助</p>
<p>卡卡西</p>
<p>自来也</p>
<p>大蛇丸</p>
</body>
</html>案例：类选择器的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls {
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//类选择器:$(".类样式的名字")---某个或者是多个
//.css("属性","值");-----设置某个元素的css样式属性值
$(function () {
//根据id选择器获取按钮,添加点击事件
$("#btn").click(function () {
//获取所有应用cls类样式的元素,改变背景颜色
$(".cls").css("backgroundColor","yellow");
$(".cls").css("border","1px solid red");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div class="cls"></div>
<p class="cls">这是一个p</p>
<p>山东盛产一种补药,药力极强,男人吃了女人受不了，女人吃了男人受不了，记者问老农:这么好的药为什么不多种一些,老农眯起眼睛:笑了笑,说:种多了,地受不了</p>
</body>
</html>案例：交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: blue;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//根据id选择器获取按钮,添加点击事件
$("#btn").click(function () {
//交集选择器----标签+类选择器
//先找p标签,从p标签中找应用了cls类样式的元素
$("p.cls").css("backgroundColor","green");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<p class="cls">小苏喜欢助教很久了</p>
<p>其实助教也喜欢小苏</p>
<ul>
<li>小苏</li>
<li>助教</li>
<li>班主任</li>
</ul>
<span class="cls">我和小苏坐地铁上班,看到了一个很漂亮的女生,旁边站着一个很猥琐的男生,我回头和小苏说:真想大声的喊出来,好白菜都让猪拱了,小苏快速的拉动着我的衣角,千万不要这么做,我的轮椅都换了两个了</span>
</body>
</html>案例：并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
.cls{
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/*
*
* 交集选择器 标签名.类样式的名字
* 并集选择器 选择器,选择器,选择器...
*
* */
//页面加载的事件
$(function () {
$("#btn").click(function () {
//div,p,span
$("#dv,p,.cls").css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<p>这是一个p</p>
<span class="cls">这是一个span</span>
<ul>
<li>小苏喜欢吃榴莲</li>
<li>助教喜欢吃臭豆腐</li>
<li>班主任都喜欢吃</li>
</ul>
</body>
</html>案例:点击按钮在div中添加一个p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/*
* .val();----设置或者是获取表单标签的value属性值
* .text();----设置或者是获取标签中的文本内容---就相当于DOM中innerText
* .css();-----设置元素的css样式属性值
* .html();----设置或者是获取标签中的html内容---就相当于DOM中innerHTML
* */
$(function () {
//点击按钮
$("#btn").click(function () {
$("#dv").html("<p>这是一个p标签</p>");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>案例：点击按钮设置元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//点击按钮,设置div的宽,高,背景颜色,边框
$(function () {
$("#btn").click(function () {
$("#dv").css("width","300px");
$("#dv").css("height","200px");
$("#dv").css("backgroundColor","red");
$("#dv").css("border","1px solid green");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>案例：层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 500px;
height: 300px;
border:2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//点击按钮,设置div中span的样式
//层次选择器---后代选择器
$("#btn").click(function () {
//获取的是div这个父级元素中所有span标签(直接的子元素,孙子元素)
//$("#dv span").css("backgroundColor","red");
//获取的是div这个父级元素中直接的子元素
//$("#dv>span").css("backgroundColor","red");
//获取的是div这个父级元素后面的所有的兄弟元素---span
//$("#dv~span").css("backgroundColor","red");
//获取的是div后面直接的兄弟元素
//$("#dv+span").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span>这是div前面的兄弟元素span</span>
<div id="dv">
<span>这是第一个span</span>
<ul>
<li>第一个li</li>
<li>第二个li
<span>第二个li中的span</span>
<span>第二个li中的span</span>
</li>
<li>第三个li</li>
</ul>
<span>这是第二个span</span>
<span>这是第三个span</span>
</div>
<p>这是p</p>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
</body>
</html>选择器的总结
//id选择器
//$("#id属性值")
//标签选择器
//$("标签名字")
//类选择器
//$(".类样式的名字")
//交集选择器--------标签+类选择器
//$("标签名.类样式名字")
//并集选择器--------多条件选择器
//$("标签名字,.类样式名字,#id选择器")
//层次选择器
//$("选择器 选择器");======>$("#dv span")
案例：隔行变色轻松版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('#uu>li:even').css('backgroundColor','red');
$('#uu>li:odd').css('backgroundColor','yellow');
});
});
</script>
</head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>乔峰:降龙十八掌</li>
<li>张无忌:乾坤大挪移</li>
<li>段誉:鳞波微步</li>
</ul>
</body>
</html>案例：高亮显示以及链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//高亮显示效果:鼠标进入,当前的li有背景颜色,离开颜色就干掉了
//获取ul中所有的li标签,添加鼠标进入和鼠标离开事件
//链式编程
$(function () {
//鼠标进入
$("#uu>li").mouseenter(function () {
$(this).css("backgroundColor", "red");
}).mouseleave(function () {
$(this).css("backgroundColor", "");
}).click(function () {
$(this).css("color","green").css("fontSize","30px").css("fontFamily","全新硬笔行书简");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>倩女幽魂</li>
<li>海阔天空</li>
<li>千纸鹤</li>
<li>真的爱你</li>
</ul>
</body>
</html>案例：中文验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//点击按钮,验证用户输入的是不是中文名字,如果是中文名字，则文本框的背景为绿色,否则为红色
$(function () {
//按钮的点击事件
$("#btn").click(function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
var flag=reg.test($("#txt").val());
if(flag){
$("#txt").css("backgroundColor","green");
}else{
$("#txt").css("backgroundColor","red");
}
});
});
</script>
</head>
<body>
请输入中文名字：<input type="text" value="" id="txt"/><br/>
<input type="button" value="验证" id="btn"/>
</body>
</html>案例：显示和隐藏下拉菜单
*频繁的操作可能会延时执行，通过stop()方法可以将上一个操作清掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.wrap{
width: 330px;
height: 30px;
margin: 100px auto 0;
background-image: url(images/bg.JPG);
}
.wrap li{
background-image: url(images/libg.JPG);
}
.wrap > ul > li{
float: left;
margin-left: 10px;
position: relative;
}
.wrap a{
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul{
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$('.wrap>ul>li').mouseenter(function () {
$(this).children('ul').show(200);
});
$('.wrap>ul>li').mouseleave(function () {
$(this).children('ul').hide(200);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:;">吴建兵</a>
<ul>
<li>
<a href="javascript:;">吴建兵</a>
</li>
<li>
<a href="javascript:;">吴建兵</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">吴建军</a>
<ul>
<li>
<a href="javascript:;">吴建军</a>
</li>
<li>
<a href="javascript:;">吴建军</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">吴建军</a>
<ul>
<li>
<a href="javascript:;">吴建军</a>
</li>
<li>
<a href="javascript:;">吴建军</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>案例：精品服饰展示
*注：右边获取index需要相加对应的 li 值，比如前边有5个 li 后边就要加上五
//.index()方法---->当前这个元素的索引，从零开始异世界生活。。
//:eq(索引值)---->选择器---对应索引的元素
<!DOCTYPE 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: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a, #right 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, #right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//页面加载事件
$(function () {
//左边的ul中的li
$("#left>li").mouseenter(function () {
//先获取当前li的索引值
var index=$(this).index();
//先隐藏所有的li
$("#center>li").hide();//隐藏
//设置某个li显示
//$("#center>li:eq(索引值)")---->对应的li标签
//显示当前的对应的li即可
$("#center>li:eq("+index+")").show();
});
//右边的ul中的li
$("#right>li").mouseenter(function () {
//先获取当前li的索引值
var index=$(this).index()+9;
//先隐藏所有的li
$("#center>li").hide();//隐藏
//设置某个li显示
//$("#center>li:eq(索引值)")---->对应的li标签
//显示当前的对应的li即可
$("#center>li:eq("+index+")").show();
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
...多个...
</ul>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
...多个...
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
...多个...
</ul>
</div>
</body>
</html>