继续JQuery，今天学习了，JQuery的特殊效果，链式调用，属性操作，JQuery循环，JQuery事件。
JQuery的特殊效果
- 许多JS方法可以对标签进行效果渲染，除了animate方法，还有一些其他的方法
- .fadeIn():淡入
- .fadeOut():淡出
- .fadeToggle():切换淡入淡出
- .hide():隐藏元素
- .show():显示元素
- .toggle():切换元素的可见状态
- .slideDown():向下展开
- .slideUp():向上卷起
- .slideToggle():切换元素的向下展开，向上卷起
<style>
.box1 {
width: 150px;
height: 150px;
background-color: gold;
float: left;
margin: 50px;
}
.box2 {
width: 150px;
height: 150px;
background-color: red;
float: left;
margin: 50px;
}
.box3 {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin: 50px;
}
</style>
<script src='./js/jquery-1.12.4.min.js'></script>
<script>
$(function () {
$('.btn1').click(function () {
// 参1 时间 参2曲线 参3 动画结束执行的方法
// $(".box1").fadeIn(2000, 'swing', function () {
// // alert('渐变显示')
// });
// $(".box2").show(2000,'swing',function () {
// // });
$(".box3").slideDown(2000,'swing',function () {
})
})
$('.btn2').click(function () {
// 参1 时间 参2曲线 参3 动画结束执行的方法
// $(".box1").fadeOut(2000, 'swing', function () {
// // alert('渐变消失')
// });
// $(".box2").hide(2000,'swing',function () {
// // });
$(".box3").slideUp(2000,'swing',function () {
})
})
$('.btn3').click(function () {
// stop停止动画 可以防止用户恶意点击
// $(".box1").stop().fadeToggle(2000, 'swing', function () {
// console.log('渐变切换');
// })
// $(".box2").toggle(2000,'swing',function () {
// });
$(".box3").slideToggle(2000,'swing',function () {
})
})
})
</script>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<input type="button" value="按钮1" class="btn1">
<input type="button" value="按钮2" class="btn2">
<input type="button" value="按钮3" class="btn3">
</body> 链式调用
- JQuery对象的方法会在执行完后返回这个JQuery对象，所有的JQuery对象的方法可以连起来写
$('#div') // id为div1的元素
.children('ul') //该元素下面的ul元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings()//跳到div元素平级的所有兄弟元素
.children('ul')//这些兄弟元素的ul元素
.slideUp('fast');//高度从实际高度变换到零来隐藏ul元素
练习_层级菜单
<!DOCTYPE html>
<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>Document</title>
<script src='../js/jquery-1.12.4.min.js'></script>
<style type="text/css">
body {
font-family: 'Microsoft Yahei';
}
body,
ul {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.menu {
width: 200px;
margin: 20px auto 0;
}
.menu .level1,
.menu li ul a {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-decoration: none;
background-color: #3366cc;
color: #fff;
font-size: 16px;
text-indent: 10px;
}
.menu .level1 {
border-bottom: 1px solid #afc6f6;
}
.menu li ul a {
font-size: 14px;
text-indent: 20px;
background-color: #7aa1ef;
}
.menu li ul li {
border-bottom: 1px solid #afc6f6;
}
.menu li ul {
display: none;
}
.menu li .current {
display: block;
}
.menu li ul li a:hover {
background-color: #f6b544;
}
</style>
<script>
$(function(){
// 给每一个链接加一个点击事件
$('.level1').click(function(){
// 将当前点击的元素里的小列表元素向下展开
// $(this).next().slideDown();
// 将其他展开的小列表收起来
// $(this).parent().siblings().children('ul').slideUp();
// 也可以使用链式调用，写成一句话
$(this).next().slideDown().parent().siblings().children('ul').slideUp();
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">水果</a>
<ul class="current">
<li><a href="#">苹果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">葡萄</a></li>
<li><a href="#">火龙果</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">海鲜</a>
<ul>
<li><a href="#">蛏子</a></li>
<li><a href="#">扇贝</a></li>
<li><a href="#">龙虾</a></li>
<li><a href="#">象拔蚌</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">肉类</a>
<ul>
<li><a href="#">内蒙古羊肉</a></li>
<li><a href="#">进口牛肉</a></li>
<li><a href="#">野猪肉</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">蔬菜</a>
<ul>
<li><a href="#">娃娃菜</a></li>
<li><a href="#">西红柿</a></li>
<li><a href="#">西芹</a></li>
<li><a href="#">胡萝卜</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">速冻</a>
<ul>
<li><a href="#">冰淇淋</a></li>
<li><a href="#">湾仔码头</a></li>
<li><a href="#">海参</a></li>
<li><a href="#">牛肉丸</a></li>
</ul>
</li>
</ul>
</body>
</html> 标签内容，属性操作
之前学的.css(),是对标签的样式进行操作，也就是 style属性，那要想对除样式之外的标签内容或者属性进行读写呢？
- .html(),可以以字符串的形式取出或者设置元素内的所有内容
- ()里为空，表示取出元素内的所有内容，为纯文本
- ()里写上字符串，表示更改元素内的内容，更改的内容可以被浏览器渲染
- .text(),可以以字符串的形式取出或者设置元素内的纯文本内容
- ()里为空，表示取出元素内的所有文本内容，为纯文本
- ()里写上字符串，表示更改元素内的文本内容，更改的内容只是文本内容，不能够被浏览器渲染
<script>
$(function(){
// 获取标签div的内容
var divHtml = $('div').html();
console.log(divHtml);// 这是一个div（纯文本）
// 在div标签里添加一个链接
var $div = $('div').html('<a href="">一个链接</a>');
var divHtml1 = $div.html();
// div的原先内容会被一个被渲染了链接覆盖
// 在更改后的div标签里追加“这是追加的文字”这句话
$div.html(divHtml1+'这是追加的文子');
// 界面内容：一个链接这是追加的文子（链接是被渲染过的）
// 只读取div标签里的文本
var text = $div.text();
console.log(text);//一个链接这是追加的文子(纯文本)
// 只追加div标签里的文本，追加的文字为“这是只追加文本的一段话”
$div.text(text+"这是只追加文本的一段话");
var text2 = $div.text();
console.log(text2);//一个链接这是追加的文子这是只追加文本的一段话(纯文本)
})
</script>- .prop(),可以取出或者设置其他系统自带属性的方法
- ()里写上属性名字符串，表示获取属性的值
- ()里写上字典形式的值，表示设置属性
- .attr(),可以取出或者设置自定义的属性
- 同.prop()
<script>
$(function(){
// 获取a2的网址
// 使用.prop()获取
var href = $('.a2').prop('href');
console.log(href);//http://wwww.baidu.com/
// 使用.attr()获取
var href1 = $('.a2').attr('href');
console.log(href1);//http://wwww.baidu.com
// 给a1加上网址’http://www.qq.com‘
// 使用.prop()设置属性
// $('.a1').prop({href:'http://www.qq.com'});
// var href3 = $('.a1').prop('href');
// console.log(href3);// http://www.qq.com/
// 使用.attr()设置属性
$('.a1').attr({href:"http://www.qq.com"});
var href4 = $('.a1').attr('href');
console.log(href4);// http://www.qq.com
// 获取a3中自定义属性mydata的值
var $a3 = $('.a3');
// 使用.prop() 获取
var mydata = $a3.prop('mydata');
console.log(mydata);// undefined (无法用.prop()获取自定义属性的值)
// 使用.attr()获取
var mydata1 = $a3.attr('mydata');
console.log(mydata1);//heheda (使用.attr()可以正常获取自定义的属性)
})
</script>JQuery循环
- 当获取的对象元素有很多个，需要每个都处理的话，需要使用JQeury的循环方法.each()
<script>
$(function(){
// // 把ul列表中的每一个元素的数字大小设置为 30px;
// var $ul = $('ul');
// $ul.each(function(index, obj){
// // index 为元素集合的索引值，从0开始
// // obj为循环到的当前的元素
// $(this).css({fontSize:"30px"});
// })
//
//---------------------------------------------------------------------------------------
// 循环的另一种形式
var list = [1,2,3,4,5,6,7,8];
// 对list 进行循环，输出每个元素的索引值
// 参数1：需要循环的集合，参数2：每一次循环，做的事
$.each(list,function(index){
console.log(index);
})
// 所以第一种循环的形式也可以写成
$.each($('.ul li'), function(index){
$(this).css({fontSize:"30px"});
})
})
</script>JQuery事件
- 代码实时倾听的用户输入的动作
- 之前已经多次使用了click()事件，还有一些其他常用的事件
blur()： 元素失去焦点时被触发（焦点是,如，输入框的闪标）
focus（ ）：元素获得焦点时被触发
mouseover()： 鼠标进入时被触发（进入子元素也被触发）
mouseout() ：鼠标离开时被触发 （进入子元素也被触发）
mouseenter（）：鼠标进入时被触发（进入子元素不被触发）
mouseleave（）：鼠标离开时被触发（离开子元素不被触发）
hover（）：鼠标进入和离开时被触发（进入和离开子元素不被触发，可以看做可同时为mouseenter()事件和mouseleave()事件制定触发时需要执行的函数）
ready():DOM加载完成时被触发
submit（）用户递交表单时被触发
- blur(),focus()
<script>
$(function(){
// 获得焦点打印’获得焦点‘，失去焦点打印"失去焦点"
$('.input').blur(function(){
console.log('失去焦点');
});
$('.input').focus(function(){
console.log("获得焦点");
});
})
</script>
</head>
<body>
焦点测试<input type="text" class="input">
</body>- mouseover(),mouseout()
<style>
.parent{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: aqua;
}
.children{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script>
$(function(){
// 监听鼠标进入离开事件，要求进入块打印“进入块”，离开块打印“离开块”，要求进出子块也要被触发
$('.parent').mouseover(function(){
console.log('进入块');
});
$(".parent").mouseout(function(){
console.log("离开块");
})
})
</script>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>- mouseenter(),mouseleave（）
<style>
.parent{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: aqua;
}
.children{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script>
$(function(){
// 监听鼠标进入离开事件，要求进入块打印“进入块”，离开块打印“离开块”
$('.parent').mouseenter(function(){
console.log('进入块');
});
$(".parent").mouseleave(function(){
console.log("离开块");
})
})
</script>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>- hover()
<style>
.parent{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: aqua;
}
.children{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script>
$(function(){
// 监听鼠标进入离开事件，要求当进出离开时，打印“触发hover事件”
$('.parent').hover(function(){
console.log('触发hover事件');
});
})
</script>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>ready(),在使用JQuery时就会触发ready事件
$(document).ready(function(){})submit()
<script>
$(function(){
// 要求点击提交后，打印“已经提交”
$('.form').submit(function(){
console.log("已经提交");
})
})
</script>
</head>
<body>
<form action="" class="form" method="get" target="_blank">
输入框1<input type="text">
输入框2<input type="text">
<input type="submit" value="注册" class="submit">
</form>
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
