jQuery基础——选择器、效果
1、使用JS的痛处
在学习和使用js的过程当中发现了js的一些痛处：javascript
一、书写繁琐，代码量大。css
二、代码复杂。html
三、动画效果很难实现。使用定时器，要当心各类定时器的清除。各类操做和处理事件很差实现。java
四、浏览器的兼容性。jquery
一样是实现点击按钮后，展现三个div栏，并在div栏显示内容：编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100%;
height: 50px;
margin: 10px 0px 0px 0px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">展现</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var oBtn = document.getElementsByTagName('button')[0];
var oDivs = document.getElementsByTagName('div');
oBtn.onclick = function () {
for (var i=0;i<oDivs.length;i++) {
oDivs[i].style.display = 'block';
oDivs[i].innerHTML = 'div展现了';
}
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100%;
height: 50px;
margin: 10px 0px 0px 0px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">展现</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/*
使用js的一些痛处：
书写繁琐，代码量大
代码复杂
动画效果很难实现。使用定时器，要当心各类定时器的清除。各类操做和处理事件很差实现
浏览器的兼容性
*/
// jquery就解决了上面的问题
$(function() {
$('#btn').click(function () { // #btn:经过id选择器取到元素
$('div').css('display', 'block');
$('div').html('div展现了');
})
})
</script>
</html>
2、jQuery和JavaScript的区别
一、类型不一样
Javascript是一门编程语言，咱们用它来编写客户端浏览器脚本；jQuery是javascript的一个库，包含多个可重用的函数，用来辅助咱们简化javascript开发。浏览器
二、功能范围不一样
jQuery能作的javascipt都能作到，而javascript能作的事情，jQuery不必定能作到。dom
注意：通常状况下，是库的文件，该库中都会抛出来构造函数或者对象，若是是构造函数，那么使用new关键字建立对象，若是是对象直接调用属性和方法。编程语言
三、执行时间的不一样
window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。ide
$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。
四、编写个数不一样
window.onload不能同时编写多个，若是有多个window.onload方法，只会执行一个
$(document).ready()能够同时编写多个，而且均可以获得执行
五、简化写法不一样
window.onload没有简化写法
$(document).ready(function(){})能够简写成$(function(){});
3、DOM文档加载的步骤
一、解析HTML结构。
二、加载外部脚本和样式表文件。
三、解析并执行脚本代码。
四、DOM树构建完成。
五、加载图片等外部文件。
六、页面加载完毕。
注意：须要注意的是DOM数先构建完成，才加载图片等外部文件。
4、jquery文件引入和加载
jquery-3.3.1.js 较大，通常是用在开发环境下。
jquery-3.3.1.min.js 更小，通常是用在生产环境下。
一、直接写在<script>里的js代码
不写window.onload的代码执行顺序是从上到下。
所以会在DOM加载的第三步：解析并执行脚本代码时运行。
二、写在window.onload = function() { }里的js代码
window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
所以通常是在DOM加载的第五步、第六步时运行。
window.onload = function () {
// 若是不写window.onload()代码的执行顺序————从上到下
// window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
var oDiv = document.getElementById('box');
console.log(oDiv);
alert(111);
}
三、书写jquery的方式，入口函数（jquery是js的一个库文件，既然是库文件，那么就会跑出来一个构造函数或者对象）
$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。
所以是在DOM文档加载的第四步以后运行。
// 若是没有引入jquery: $ is not defined
console.log($);
/* 构造函数
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…
*/
//jquery是js的一个库文件，既然是库文件，那么就会跑出来一个构造函数或者对象
//书写jquery的方式，入口函数
// $(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕(DOM文档加载的第四步)
$(document).ready(function () {
alert(222);
})
//等价
$(function () {
alert(333);
})
jquery文件引入代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery文件的引入</title>
</head>
<body>
<script type="text/javascript">
// window.onload = function () {
// // 若是不写window.onload()代码的执行顺序————从上到下
// // window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
// var oDiv = document.getElementById('box');
// console.log(oDiv);
// alert(444);
// }
// alert(222);
</script>
<div id="box">
</div>
</body>
<script src="./jquery-3.3.1.js"></script>
<script type="text/javascript">
// 若是没有引入jquery: $ is not defined
console.log($);
/* 构造函数
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…
*/
//jquery是js的一个库文件，既然是库文件，那么就会跑出来一个构造函数或者对象
//书写jquery的方式，入口函数
// $(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕(DOM文档加载的第四步)
$(document).ready(function () {
alert(222);
})
//等价
$(function () {
alert(333);
})
window.onload = function () {
// 若是不写window.onload()代码的执行顺序————从上到下
// window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
var oDiv = document.getElementById('box');
console.log(oDiv);
alert(111);
}
alert(444);
</script>
</html>
5、jquery选择器——基础选择器
jquery选择器的用法其实跟css选择器用法相似，只是代码的书写不一样。
注意：使用jquery的时候要有入口函数——回调函数。
// 方式一：
$(function () {
函数体;
})
// 方式二：
$(dociment).ready(function () {
函数体;
})
一、id选择器
console.log($('#brother'));
$('#brother').css('color','red'); // 设置样式，把字体修改成红色
二、标签选择器
//(1)设置一个值
$('a').css('color','yellow');
//(2)设置多个值，设置多个值的时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'});
三、类选择器
$('.li3').css('background','green');
四、通配符选择器*（使用不是不少）
console.log($('*'));
/* 取出了全部标签
jQuery.fn.init(17) [html, head, meta, title, style, body,
ul, li#brother, li, a, li.li3, li, li, li, li,
script, script, prevObject: jQuery.fn.init(1)]
*/
// 应用：实现清空整个界面的元素
$('*').html('');
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*#brother {*/
/*color: red;*/
/*font-size: 24px*/
/*}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="https://www.luffycity.com">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
<li>路飞学城6</li>
<li>路飞学城7</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 使用jquery的时候，要有入口函数
/*等价
$(function () {
alert(333);
})
*/
// 回调函数
$(document).ready(function () {
//基础选择器
//1.id选择器
console.log($('#brother'));
$('#brother').css('color','red'); // 设置样式，把字体修改成红色
//2.标签选择器
//(1)设置一个值
// $('a').css('color','yellow');
//(2)设置多个值，设置多个值的时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'});
//3.类选择器
$('.li3').css('background','green');
//4.通配符选择器 *（使用不是不少）
console.log($('*'));
/* 取出了全部标签
jQuery.fn.init(17) [html, head, meta, title, style, body,
ul, li#brother, li, a, li.li3, li, li, li, li,
script, script, prevObject: jQuery.fn.init(1)]
*/
// 应用：实现清空整个界面的元素
$('*').html('');
})
</script>
</html>
6、jquery选择器——层级选择器
一、后代选择器 div p
$('div p').css('color','red');
$('#box p').css('color','red');
二、子代选择器 div > p
$('#box>p').css('color','green'); // '小鸡炖蘑菇' 因为不是子代，没有变为绿色
三、毗邻选择器 #father+p
匹配紧接着选中元素的兄弟
$('#father+p').css('font-size','24px'); // 仅仅修改了“我是你老母”
四、兄弟选择器 #father~p
匹配选中元素的全部兄弟（本身除外）
$('#father~p').css('background','blueviolet');
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*#brother {*/
/*color: red;*/
/*font-size: 24px*/
/*}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="https://www.luffycity.com">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
<li>路飞学城6</li>
<li>路飞学城7</li>
</ul>
<div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 回调函数
$(document).ready(function () {
//层级选择器
//1.后代选择器 div p
$('div p').css('color','red');
$('#box p').css('color','red');
//2.子代选择器 div > p
$('#box>p').css('color','green'); // '小鸡炖蘑菇' 因为不是子代，没有变为绿色
//3.毗邻选择器 匹配全部紧接着选中元素的兄弟 #father+p
$('#father+p').css('font-size','24px');
//4.兄弟选择器 匹配全部兄弟 #father~p
$('#father~p').css('background','blueviolet');
console.log($('li'));
//5.获取第一个元素
$('li:first').css('font-size','32px');
//6.获取最后一个元素
$('li:last').css('font-size','32px');
$('li:eq(2)').css('color','orange'); //eq(0)是第一个元素，eq(2)是第三个元素
})
</script>
</html>
其中还有基本过滤选择器的内容：
一、获取第一个元素
$('li:first').css('font-size','32px');
二、获取最后一个元素
$('li:last').css('font-size','32px');
三、获取给定索引值的元素
$('li:eq(2)').css('color','orange'); //eq(0)是第一个元素，eq(2)是第三个元素
7、jquery选择器——基本过滤选择器
一、:first 获取第一个元素
同上节所示。
$('li:first').text('真的吗');
上例中选择到li标签中第一个，并用text方法修改文本内容。
二、:last 获取最后一个元素
同上节所示。
$('li:last').html('我是最后一个元素？')
上例中选择到li标签中最后一个，并用html方法修改文本内容。
三、:odd匹配全部索引值为奇数的元素，从0开始计数
// :odd匹配全部索引值为奇数的元素，从0开始计数（所以一、3是红色）
$('li:odd').css('color','red');
四、:even匹配全部索引值为偶数的元素，从0开始计数
// :even匹配全部索引值为偶数的元素，从0开始计数(所以0、2是绿色)
$('li:even').css('color','green');
五、:eq(index)获取给定索引值的元素 从0开始计数
// :eq(index)获取给定索引值的元素 从0开始计数
// 选中索引值为1的元素
$('li:eq(1)').css('font-size','32px');
六、:gt(index) 匹配全部大于给定索引值的元素
// :gt(index) 匹配全部大于给定索引值的元素
// 大于索引值1
$('li:gt(1)').css('font-size','50px');
七、:lt(index) 匹配全部小于给定索引值的元素
// :lt(index) 匹配全部小于给定索引值的元素
// 小于索引值1
$('li:lt(1)').css('font-size','12px');
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
// 获取第一个：first,获取最后一个：last
// $('li:first').text('真的吗');
// $('li:last').html('我是最后一个元素？')
// :odd匹配全部索引值为奇数的元素，从0开始计数（所以一、3是红色）
$('li:odd').css('color','red');
// :even匹配全部索引值为偶数的元素，从0开始计数(所以0、2是绿色)
$('li:even').css('color','green');
// :eq(index)获取给定索引值的元素 从0开始计数
// 选中索引值为1的元素
$('li:eq(1)').css('font-size','32px');
// :gt(index) 匹配全部大于给定索引值的元素
// 大于索引值1
$('li:gt(1)').css('font-size','50px');
// :lt(index) 匹配全部小于给定索引值的元素
// 小于索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
8、jquery选择器——属性选择器
一、标签名[属性名] 查找全部含有id属性的该标签名的元素
//标签名[属性名] 查找全部含有id属性的该标签名的元素
$("li[id]").css('color','red'); // 选取li标签中有id属性的
二、标签名[attr=value] 匹配给定的属性是某个特定值的元素
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px'); // 选取li标签中class属性的值为"what"的
三、[attr!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
//[attr!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen'); // 选取li标签中class属性的值不为"what"的
四、[attr^=value]匹配给定的属性是以某些值开始的元素
//[attr^=value]匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','grey'); // 选取input标签中name属性以"username"开头的
五、[attr$=value]匹配给定的属性是以某些值结尾的元素
//[attr$=value]匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow'); // 选取input标签中name属性以'222'结尾的
六、[attr*=value]匹配给定的属性是以包含某些值的元素
//[attr*=value]匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF'); // 选取button标签中class属性中包含'btn'的
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 属性选择器
//标签名[属性名] 查找全部含有id属性的该标签名的元素
$("li[id]").css('color','red'); // 选取li标签中有id属性的
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px'); // 选取li标签中class属性的值为"what"的
//[attr!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen'); // 选取li标签中class属性的值不为"what"的
//[attr^=value]匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','grey'); // 选取input标签中name属性以"username"开头的
//[attr$=value]匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow'); // 选取input标签中name属性以'222'结尾的
//[attr*=value]匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF'); // 选取button标签中class属性中包含'btn'的
})
</script>
</html>
9、jquery选择器——筛选选择器
筛选选择器基于链式调用，运用点语法（get方法、set方法）实现。
一、获取第n个元素 数值从0开始
//获取第n个元素 数值从0开始
$('span').eq(1).css('font-size','30px'); // 选择到第二个span标签
二、first()获取第一个元素
//first()获取第一个元素
$('span').first().css('background','red');
三、last()获取最后一个元素
//last()获取最后一个元素
$('span').last().css('color','greenyellow');
四、.parent() 选择父亲元素
//.parent() 选择父亲元素
console.log($('span').parent()); // jQuery.fn.init(1) ——》0: p.p1
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'});
五、.siblings()选择全部的兄弟元素
//.siblings()选择全部的兄弟元素
$('.list').siblings('li').css('color','red'); // 仅选择到了class='list'的li标签的兄弟
六、.find()查找全部的后代元素
//.find()
//查找全部的后代元素
$('div').find('button').css('background','#313131'); // div标签的后代中查找到button标签
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选选择器</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 链式调用，点语法：get方法 set方法
//获取第n个元素 数值从0开始
$('span').eq(1).css('font-size','30px'); // 选择到第二个span标签
//first()获取第一个元素
$('span').first().css('background','red');
//last()获取最后一个元素
$('span').last().css('color','greenyellow');
//.parent() 选择父亲元素
console.log($('span').parent()); // jQuery.fn.init(1) ——》0: p.p1
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'});
//.siblings()选择全部的兄弟元素
$('.list').siblings('li').css('color','red'); // 仅选择到了class='list'的li标签的兄弟
//.find()
//查找全部的后代元素
$('div').find('button').css('background','#313131'); // div标签的后代中查找到button标签
})
</script>
</html>
10、jquery对象和DOM对象转换
一、DOM对象转换为jQuery对象
// dom对象
var oDiv = document.getElementById('box');
// jQuery对象
console.log($(oDiv)); // jQuery.fn.init [div#box]
// 因为$(oDiv)是jquery对象，所以可使用jquery方法：click()
$(oDiv).click(function () {
alert(111);
})
二、jQuery对象转换为DOM对象
// 第一种方式：$('button')[0]
console.log($('button')[0]); // <button>隐藏</button>
// 第二种方式：$('button').get(0)
console.log($('button').get(0)); // <button>隐藏</button>
代码示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和dom对象转换</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
天王盖地虎
</div>
<button>隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// dom对象转换为jquery对象
var oDiv = document.getElementById('box');
console.log($(oDiv)); // jQuery.fn.init [div#box]
// 因为$(oDiv)是jquery对象，所以可使用jquery方法：click()
$(oDiv).click(function () {
alert(111);
})
// jquery对象转换为dom对象
// 第一种方式：
console.log($('button')[0]); // <button>隐藏</button>
// 第二种方式：
console.log($('button').get(0)); // <button>隐藏</button>
var isShow = true;
$('button').get(0).onclick = function () {
// alert(222);
if (isShow) {
$('#box').hide(); // jquery方法，点击按钮后隐藏
$(this).text('显示');
isShow = false;
} else {
$('#box').show();
$(this).text('隐藏');
isShow = true;
}
}
</script>
</html>
注意：把button从jquery对象转换为dom对象；并使用jquery方法实现点击隐藏和点击显示。
var isShow = true;
$('button').get(0).onclick = function () {
// alert(222);
if (isShow) {
$('#box').hide(); // jquery方法，点击按钮后隐藏
$(this).text('显示');
isShow = false;
} else {
$('#box').show();
$(this).text('隐藏');
isShow = true;
}
}
11、jQuery的效果——显示隐藏(show\hide\toggle)
在javascript中实现隐藏和显示有三种方法：
一、经过.css设置属性，来控制隐藏、显示
// 经过.css设置属性，来控制隐藏、显示
$('#btn').click(function () {
$('#box').css('display','block');
})
二、jQuery提供了方法show()、hide()控制元素显示隐藏
show：
1.概念：显示隐藏的匹配元素。
2.语法：show(speed,callback)参数。
3.参数：speed：三种预约速度之一的字符串('show','normal','fast')或表示动画时长的毫秒值(如：1000毫秒==1秒)
callback：在动画完成时执行的函数，每一个元素执行一次。
hide：
hide(speed,callback)跟show使用方法相似，表示隐藏显示的元素。
能够经过show()和hide()方法，来动态控制元素的显示隐藏。
var isShow = true;
$('#btn').click(function () {
if (isShow) {
// show(speed,callback)
$('#box').show('show',function () {
// alert(111);
$(this).text('盒子出来了');
isShow = false;
$('#btn').text('隐藏');
})
} else {
// 动画时长的毫秒值2000ms
$('#box').hide(2000,function () {
$(this).text('盒子消失了');
isShow = true;
$('#btn').text('显示');
})
}
})
三、toggle开关，若是元素是可见的，切换为隐藏的；若是元素是隐藏的，切换为可见的。
若是是仅仅显示和隐藏盒子，不须要操做文字，推荐使用toggle方法。
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111);
});
})
代码示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——显示隐藏</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">显示</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 一、经过.css设置属性，来控制隐藏、显示
// $('#btn').click(function () {
// $('#box').css('display','block');
// })
// 二、jQuery提供了一些方法show() hide()控制元素显示隐藏
/*
var isShow = true;
$('#btn').click(function () {
if (isShow) {
// show(speed,callback)
$('#box').show('show',function () {
// alert(111);
$(this).text('盒子出来了');
isShow = false;
$('#btn').text('隐藏');
})
} else {
// 动画时长的毫秒值2000ms
$('#box').hide(2000,function () {
$(this).text('盒子消失了');
isShow = true;
$('#btn').text('显示');
})
}
})
*/
//三、toggle 开关，若是元素显示则隐藏，反之亦然
// 若是是仅仅显示和隐藏盒子，不须要操做文字，推荐使用toggle方法
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111);
});
})
</script>
</html>
12、jquery的效果——slide高度变化显示隐藏
一、slideDown：经过高度变化（向下增大）来到动态地显示全部匹配的元素，在显示完成后触发一个回调函数。用法和参数跟上面相似。
二、slideUp：经过高度变化（向上减少）来动态地隐藏全部匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面相似。
下例中运用hover来触发回调，鼠标浮动其上触动显示和隐藏：
$(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000);
},function () { // 第二个回调函数
$('#box').slideUp('slow');
})
})
三、slideToggle：经过高度变化来切换全部匹配元素的可见性，并在切换完成后可选地触发一个回调函数。和toggle用法相似。
$('#btn').click(function () {
$('#box').slideToggle('fast');
})
代码示例以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——slide</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
/*
$(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000);
},function () { // 第二个回调函数
$('#box').slideUp('slow');
})
})
*/
$('#btn').click(function () {
$('#box').slideToggle('fast');
})
</script>
</html>
十3、jQuery的效果——fade不透明度变化
一、fadeIn：经过不透明度的变化来实现全部匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化
二、fadeOut：经过不透明度的变化来实现全部匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。
三、fadeTo：把全部匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。
四、fadeToggle：经过不透明度的变化来开关全部匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——slide</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
/*display: none;*/
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// $('#btn').click(function () {
$('#box').mouseover(function () { // 鼠标移动上去逐渐隐形
$('#box').fadeOut(2000);
/* 点击后内部样式表变为以下：
<div id="box" style="display: none;"></div>
*/
})
$('#btn').mouseout(function () { // 鼠标移动上去逐渐现形
// $('#box').fadeIn(2000);
$('#box').fadeTo(2000,0.3);
})
$('btn').click(function () {
$('#box').fadeToggle(3000);
})
})
</script>
</html>
十4、jquery效果——animate动画
概念：用于建立自定义动画的函数
语法：animate(params,[speed],[fn])
参数：params:一组包含做为动画属性和终值的样式属性和及其值的集合。
speed:三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每一个元素执行一次。
$(function () {
$('#btn').click(function () {
/*
// params:一组包含做为动画属性和终值的样式属性和及其值的集合
$('#box').animate({
width: '200px',
height: '300px'
})
*/
// 动画效果向右下方向移动
$('#box').animate({left:'100px',top: '200px'});
// 动画队列:动画效果是先右移、再下移
$('#box').animate({left:'100px'}).animate({top: '400px'});
// 在运行时，stop方法中止动画
$('#box').animate({left:'100px',top:'300px'}, 2000);
// delay方法延迟操做
$('#box').animate({left:'100px'}).delay(2000).animate({top: '400px'});
})
$('#stop').click(function () {
$('#box').stop()
})
})
总体代码以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画animate</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">动画吧</button>
<button id="stop">中止吧</button>
<div id="box">
hello luffy
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
/*
// params:一组包含做为动画属性和终值的样式属性和及其值的集合
$('#box').animate({
width: '200px',
height: '300px'
})
*/
// 动画效果向右下方向移动
$('#box').animate({left:'100px',top: '200px'});
// 动画队列:动画效果是先右移、再下移
$('#box').animate({left:'100px'}).animate({top: '400px'});
// 在运行时，stop方法中止动画
$('#box').animate({left:'100px',top:'300px'}, 2000);
// delay方法延迟操做
$('#box').animate({left:'100px'}).delay(2000).animate({top: '400px'});
})
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
</html>
一、stop：中止全部在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：clearQueue:若是设置成true，则清空队列。能够当即结束动画。
gotoEnd:让当前正在执行的动画当即完成，而且重设show和hide的原始样式，调用回调函数等
二、delay：概念：用来作延迟的操做
语法：delay(1000)，一秒以后作后面的操做
十5、利用jquery效果——弹出广告
弹出广告代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出广告</title>
<style type="text/css">
</style>
</head>
<body>
<div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
<img src="广告.png" style="width: 100%;height: 100%;"/>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 排队去干活
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000); // 点击盒子1秒时间淡出
});
})
</script>
</html>
相关文章
- 1. jQuery基础：jQuery选择器
- 2. jQuery基础选择器
- 3. jquery选择器基础
- 4. jQuery基础及选择器
- 5. JQuery基础——选择器
- 6. js---jQuery基础+选择器
- 7. jQuery选择器——基础选择器、层次选择器
- 8. jQuery——选择器效率
- 9. jQ基础篇--jQuery选择器总结
- 10. JQuery学习笔记——基础选择器
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jQuery基础：jQuery选择器
- 2. jQuery基础选择器
- 3. jquery选择器基础
- 4. jQuery基础及选择器
- 5. JQuery基础——选择器
- 6. js---jQuery基础+选择器
- 7. jQuery选择器——基础选择器、层次选择器
- 8. jQuery——选择器效率
- 9. jQ基础篇--jQuery选择器总结
- 10. JQuery学习笔记——基础选择器