jQuery基础——选择器、效果
一、使用JS的痛处
在学习和使用js的过程中发现了js的一些痛处：
1、书写繁琐，代码量大。
2、代码复杂。
3、动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。
4、浏览器的兼容性。
同样是实现点击按钮后，展示三个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>
JavaScript代码示例
<!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>
jQuery代码示例
二、jQuery和JavaScript的区别
1、类型不同
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本；jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发。
2、功能范围不同
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法。
3、执行时间的不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
4、编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
5、简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
三、DOM文档加载的步骤
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。
5、加载图片等外部文件。
6、页面加载完毕。
注意：需要注意的是DOM数先构建完成，才加载图片等外部文件。
四、jquery文件引入和加载
jquery-3.3.1.js 较大，一般是用在开发环境下。
jquery-3.3.1.min.js 更小，一般是用在生产环境下。
1、直接写在<script>里的js代码
不写window.onload的代码执行顺序是从上到下。
因此会在DOM加载的第三步：解析并执行脚本代码时运行。
2、写在window.onload = function() { }里的js代码
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
因此一般是在DOM加载的第五步、第六步时运行。
window.onload = function () {
// 如果不写window.onload()代码的执行顺序————从上到下
// window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
var oDiv = document.getElementById('box');
console.log(oDiv);
alert(111);
}
3、书写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>
多种引入代码示例
五、jquery选择器——基础选择器
jquery选择器的用法其实跟css选择器用法类似，只是代码的书写不同。
注意：使用jquery的时候要有入口函数——回调函数。
// 方式一：
$(function () {
函数体;
}) // 方式二：
$(dociment).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('');
代码示例：
<!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>
基本选择器代码示例
六、jquery选择器——层级选择器
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');
代码示例：
<!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>
层级选择器代码示例
其中还有基本过滤选择器的内容：
1、获取第一个元素
$('li:first').css('font-size','32px');
2、获取最后一个元素
$('li:last').css('font-size','32px');
3、获取给定索引值的元素
$('li:eq(2)').css('color','orange'); //eq(0)是第一个元素，eq(2)是第三个元素
七、jquery选择器——基本过滤选择器
1、:first 获取第一个元素
同上节所示。
$('li:first').text('真的吗');
上例中选择到li标签中第一个，并用text方法修改文本内容。
2、:last 获取最后一个元素
同上节所示。
$('li:last').html('我是最后一个元素？')
上例中选择到li标签中最后一个，并用html方法修改文本内容。
3、:odd匹配所有索引值为奇数的元素，从0开始计数
// :odd匹配所有索引值为奇数的元素，从0开始计数（因此1、3是红色）
$('li:odd').css('color','red');
4、:even匹配所有索引值为偶数的元素，从0开始计数
// :even匹配所有索引值为偶数的元素，从0开始计数(因此0、2是绿色)
$('li:even').css('color','green');
5、:eq(index)获取给定索引值的元素 从0开始计数
// :eq(index)获取给定索引值的元素 从0开始计数
// 选中索引值为1的元素
$('li:eq(1)').css('font-size','32px');
6、:gt(index) 匹配所有大于给定索引值的元素
// :gt(index) 匹配所有大于给定索引值的元素
// 大于索引值1
$('li:gt(1)').css('font-size','50px');
7、: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开始计数（因此1、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>
jquery基本过滤选择器代码示例
八、jquery选择器——属性选择器
1、标签名[属性名] 查找所有含有id属性的该标签名的元素
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red'); // 选取li标签中有id属性的
2、标签名[attr=value] 匹配给定的属性是某个特定值的元素
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px'); // 选取li标签中class属性的值为"what"的
3、[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen'); // 选取li标签中class属性的值不为"what"的
4、[attr^=value]匹配给定的属性是以某些值开始的元素
//[attr^=value]匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','grey'); // 选取input标签中name属性以"username"开头的
5、[attr$=value]匹配给定的属性是以某些值结尾的元素
//[attr$=value]匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow'); // 选取input标签中name属性以'222'结尾的
6、[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>
jquery属性选择器代码示例
九、jquery选择器——筛选选择器
筛选选择器基于链式调用，运用点语法（get方法、set方法）实现。
1、获取第n个元素 数值从0开始
//获取第n个元素 数值从0开始
$('span').eq(1).css('font-size','30px'); // 选择到第二个span标签
2、first()获取第一个元素
//first()获取第一个元素
$('span').first().css('background','red');
3、last()获取最后一个元素
//last()获取最后一个元素
$('span').last().css('color','greenyellow');
4、.parent() 选择父亲元素
//.parent() 选择父亲元素
console.log($('span').parent()); // jQuery.fn.init(1) ——》0: p.p1
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'});
5、.siblings()选择所有的兄弟元素
//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red'); // 仅选择到了class='list'的li标签的兄弟
6、.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>
十、jquery对象和DOM对象转换
1、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);
})
2、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;
}
}
十一、jQuery的效果——显示隐藏(show\hide\toggle)
在javascript中实现隐藏和显示有三种方法：
1、通过.css设置属性，来控制隐藏、显示
// 通过.css设置属性，来控制隐藏、显示
$('#btn').click(function () {
$('#box').css('display','block');
})
2、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('显示');
})
}
})
3、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"> // 1、通过.css设置属性，来控制隐藏、显示
// $('#btn').click(function () {
// $('#box').css('display','block');
// }) // 2、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('显示');
})
}
})
*/ //3、toggle 开关，如果元素显示则隐藏，反之亦然
// 如果是仅仅显示和隐藏盒子，不需要操作文字，推荐使用toggle方法
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111);
});
}) </script>
</html>
show/hide/toggle方法代码示例
十二、jquery的效果——slide高度变化显示隐藏
1、slideDown：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数。用法和参数跟上面类似。
2、slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似。
下例中运用hover来触发回调，鼠标浮动其上触动显示和隐藏：
$(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000);
},function () { // 第二个回调函数
$('#box').slideUp('slow');
})
})
3、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>
slideDown\slideUp\slideToggle代码示例
十三、jQuery的效果——fade不透明度变化
1、fadeIn：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
2、fadeOut：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
3、fadeTo：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
4、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>
十四、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>
animate自定义动画代码示例
1、stop：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
2、delay：概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
十五、利用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>
jQuery基础——选择器、效果的更多相关文章
- jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器
1.#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id") 其中#my_id ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...
- jQuery基础--选择器
2. 选择器 2.1. 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素.注意:jQuery选择器返回的是jQuery对象. jQue ...
- jQuery基础选择器
attr()方法的功能是设置或获取元素的某项属性值. attr("disabled", "true”)表示使该功能不可用. #id 选择器 $("#my_id& ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之一
jQuery基础之一 初识jQuery jQuery封装JavaScript中多个好用的函数成为并形成代码库,操作时也更符合我们的习惯,并且减少了浏览器之间的兼容性. jQuery官网 引入 本地 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
随机推荐
- Python DataFrame 如何删除原来的索引，重新建立索引
删除行索引重排: ser.reset_index(drop = True) df.reset_index(drop = True) ---------------------------------- ...
- Servlet的概念与用法
Servlet: Servlet(Servlet+Applet) Servlet是一种独立于平台和协议的服务器端Java应用程序,通用Servlet 可以生成动态Web页面.Servlet还 ...
- 初用sqlite3.exe
1.记得要先建立数据库文件 为了进行数据库的编写,我安装了sqlite3,由于刚接触数据库,我尝试着建立表,并插入元组,属性,用select from语句也可以调出写入的内容,但是不知道如何保存,直接 ...
- PHP常用人工智能库
1.NLPTools(http://php-nlp-tools.com/)NLPTools是一个PHP自然语言处理库.能进行文本分级,聚类等操作.2.Prediction Builder(https: ...
- P2050 [NOI2012]美食节（费用流）
P2050 [NOI2012]美食节 P2053 [SCOI2007]修车的加强版 因为数据较大,一次性把所有边都加完会T 于是我们每次只连需要的边跑费用流 就是开始先连所有厨师做倒数第1道菜 跑费用 ...
- ubuntu18.04 安装mongodb 数据库
工具: 系统:ubuntu18.04 64位 数据库:mongodb GUI:Robo 3T 描述:在win 下面使用Robo 3T 连接Mongodb 数据库 一. 安装mo ...
- php中magic_quotes_gpc的作用 解决日文数据提交后多出来反斜杠的问题
magic_quotes_gpc发生作用是在传递$_GET,$_POST,$_COOKIE时 1.条件: magic_quotes_gpc=off写入数据库的字符串未经过任何过滤处理.从数据库读出的字 ...
- xml转换csv
/// <summary> /// xml文件转换为CSV /// </summary> /// <param name="fileName"> ...
- POJ 2182 Lost Cows (求序列第k大)
题解 二分+树状数组 显然最和一个数的值就是rank 那么其它数有什么规律? 从后往前匹配rank,我们可以发现第i个数的rank为还没有匹配的rank第(a[i]+1)大的数 这可以用 树状数组+二 ...
- lambda 表达式定制操作
泛型算法中的定制操作 许多算法都会比较输入序列中的元素以达到排序的效果,通过定制比较操作,可以控制算法按照编程者的意图工作. 普通排序算法: template<class RandomItera ...