前端学习day11：jquery
2019-04-03 19:13
204 查看
体验：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<script src="jquery-3.0.0.js"></script>
<script>
//加载静态资源 图片 视频 音频 链接 文档树
//有且只有一个
/* window.onload = function () {
}*/
//入口函数 js document 根 jquery---> $(document) --->$( )
//1:简写
//2:jquery可以有多个 并且不会覆盖
//3:只需要文档树加载成功立即执行入口函数
//4: 兼容性
/* $(document).ready(function () {
});*/
$(function () {
alert(1)
})
$(function () {
alert(2)
})
$(function () {
alert(3)
})
</script>
</body>
</html>
特征：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
<script src="jquery-3.0.0.js"></script>
<script>
/* var lis = document.querySelectorAll('ul>li')
for(var i =0;i<lis.length ;i++){
//判断奇数还是偶数
if(i%2==0){ //偶数下标奇数行
lis[i].style.backgroundColor = 'skyblue'
}
else {
lis[i].style.backgroundColor = 'red'
}
}*/
//入口函数
$(function () {
//获取元素 $() 选择器作为参数 ---》获取元素
//隐形迭代 :even偶数下标 :odd 奇数下标
//链式调用
$('ul li:even').css('background-color','yellow').text('我是奇数行')
$('ul li:odd').css({'background-color':'red',width:'300px',height:'100px','border':'1px solid #ccc'})
});
</script>
</body>
</html>
jq对象和js的转换：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<div class="box"></div>
<script src="jquery-3.0.0.js"></script>
<script>
//js方法和jquery方法的转换 对像 jquery对象 ---》jquery方法
//两种对象不能使用同一方法 js对象 js方法
var box = document.getElementsByClassName('box')[0]//js对象
/*
* box.style.width = '200px'
* */
/*$(box).css({'width':'200px',height:'200px',backgroundColor:'red'});*/ //设置样式
var $box = $('.box');//jquery
$box[0].style.width = '200px';
$box[0].style.height = '200px'
$box[0].style.backgroundColor = 'red'
console.log($box)
//js对象和jquery对象的转换
//js--->jquery 花钱 box ---> $(box)
//jquery->js box --->box[0]
</script>
</body>
</html>
文本操作：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
width: 30%;
height: 400px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text" id="pass">
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
$('.box').html('<em>我是div元素</em>').css({"border-radius":"50%","line-height":"400px","text-align":"center"})
// onblur $对象.blur(function(){}) jquery所有事件不加on
$('#pass').blur(function () {
//获取用户输入的值
console.log(this) // bug js当中事件对象this
//jquery 中的事件 对象 $(this)
console.log($(this).val())
})
});
</script>
</body>
</html>
属性操作：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<div class="box" ></div>
<img src="images/jdTop.jpg" alt="">
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
$('.box').attr('id',200)
console.log($('.box').attr('id'))
$('img').attr('src','images/samll.jpg')
});
</script>
</body>
</html>
样式操作：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
// 除非是特别简单样式 或者是计算样式 opacity 0,0.3,left top
$('.box').css({borderRadius:'50%'})
});
</script>
</body>
</html>
行外样式：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 100px auto;
}
.cloth {
border-radius: 50%;
opacity: 0.6;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<!--<button>移除</button>
<button>切换</button>-->
<div class="box "></div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//对象:eq(i) i下标获取第i+1个元素
$('button:eq(0)').click(function () {
$('.box').toggleClass('hide')
if($('.box').hasClass('hide')){ //判断当前元素是否包含隐藏样式
$(this).text('显示')
}
else {
$(this).text('隐藏')
}
})
/* $('button:eq(1)').click(function () {
$('.box').removeClass('cloth')
})
$('button:eq(2)').click(function () {
$('.box').toggleClass('cloth')
})*/
});
</script>
4000
</body>
</html>
选择器：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="text" hidden> <!--隐藏-->
<div class="box">
<p>我是第一行
<p>我是第二个p</p>
<span>我是p里的span</span>
<div>213
<span>111111</span>
</div>
</p>
<span>我是span</span>
</div>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//1: prev + next
/* var $obj = $('p ~ span')
console.log($obj)*/
//找没有被默认选择中的 :checked 选择中的是被勾选的 :not(:checked)未被选中的
var $inputs = $('input:not(:checked)')
console.log($inputs)
$(':header').css({'font-weight':'100'});
console.log($('.box').children('p')) ;
});
</script>
</body>
</html>
突出显示：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
body {
background-color: #ccc;
}
ul {
width: 47%;
height: auto;
margin: 100px auto;
border: 3px solid #fff;
padding: 30px;
background-color: #000;
}
ul li {
float: left;
margin-right: 30px;
}
ul li img {
width: 200px;
height: 200px;
display: block;
}
.clearFix::after {
content: '';
line-height: 0;
display: block;
clear: both;
}
/*取消3 6 li元素的外间距*/
ul li:nth-of-type(3n){
margin-right: 0;
}
/*前三张 */
ul li:nth-of-type(-n+3){
margin-bottom: 30px;
}
</style>
</head>
<body>
<ul class="clearFix">
<li><img src="images/01.gif" alt=""></li>
<li><img src="images/02.gif" alt=""></li>
<li><img src="images/03.gif" alt=""></li>
<li><img src="images/05.gif" alt=""></li>
<li><img src="images/06.gif" alt=""></li>
<li><img src="images/08.gif" alt=""></li>
</ul>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//所有Li元素绑定鼠标移入事件
$('ul li').mouseover(function () {
//当前对象透明度为1 其余兄弟是透明度0.4
$(this).css('opacity','1').siblings().css('opacity','0.4')
})
//鼠标移出ul ul的透明度为1
$('ul').mouseout(function () {
console.log($(this))
$(this).children().css('opacity','1')
})
/*对象.css('','')
* 对象.css({ 属性名1:'属性值','属性名02':‘属性值’ })
* */
});
</script>
</body>
</html>
显示隐藏：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<button class="btn">显示</button>
<button class="btn">隐藏</button>
<button class="btn">滑上去</button>
<button class="btn">滑下来</button>
<button class="btn">淡入</button>
<button class="btn">淡出</button>
<div class="box"></div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
$('.btn').eq(0).click(function () {
$('.box').show(2000,function () {
//元素显示了以后执行本函数
$(this).css('border-radius','50%')
});
})
$('.btn').eq(1).click(function () {
$('.box').hide(2000);
})
$('.btn').eq(2).click(function () {
$('.box').slideUp(2000);
})
$('.btn').eq(3).click(function () {
$('.box').slideDown(2000);
})
$('.btn').eq(4).click(function () {
$('.box').fadeIn(2000);
})
$('.btn').eq(5).click(function () {
$('.box').fadeOut(2000);
})
});
</script>
</body>
</html>
呼吸灯：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
display: block; /*转换块级元素*/
}
ul li {
list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {
content: '';
display: block;
line-height: 0;
clear: both;
}
.Photo-frame {
position: relative;
width: 590px;
height: 470px;
border: 1px solid #ccc;
margin: 100px auto;
/*溢出隐藏*/
overflow: hidden;
}
/*照片条*/
/*.picBox {
!*定位*!
position: absolute;
width: 2950px;
height: 470px;
top:0;
}*/
.picBox > li {
position: absolute;
left: 0;
top:0;
/*隐藏*/
display: none;
}
.arrow {
position: absolute;
top:50%;
margin-top: -20px;
width: 24px;
height: 40px;
background-color: rgba(45,45,45,.3);
color: #fff;
line-height: 40px;
text-align: center;
font-size: 25px;
cursor: pointer;/*鼠标小手样式*/
}
#next {
right: 0;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(45,45,45,.7);
}
/*小圆点*/
.circles {
position: absolute;
bottom:20px;
left: 50%;
margin-left:-76px ;
height: auto;
}
.circles span {
display: inline-block;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
background-color: darkblue;
}
/*
.circles span:hover {
box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset;
}*/
</style>
</head>
<body>
<!--相框-->
<div class="Photo-frame">
<!--照片条-->
<ul class="picBox clearFix" style="left: 0">
<li style="display: block">
<a href="#"><img src="images/zhutu1.jpg" alt="">
</a></li>
<li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu6.jpg" alt=""></a></li>
</ul>
<!--指示 小圆圈-->
<div class="circles">
<span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset"></span>
<span in="1"></span>
<span in="2"></span>
<span in="3"></span>
<span in="4"></span>
</div>
<!--箭头 next 右箭头-->
<div class="arrow" id="next"> > </div>
<!--左箭头-->
<div class="arrow" id="prev"> < </div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//点击右箭头 下一张淡入 其余兄弟淡出
var index = 0; //第一张
$('#next').click(function () {
index++; //1 第二张
if(index===5){
index = 0;
}
$('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
});
$('#prev').click(function () {
index--; //1 第二张
if(index===-1){
index = 4;
}
$('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
});
})
</script>
</body>
</html>
动画：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: #55a532;
position: absolute;
left: 30px;
top:40px;
}
</style>
</head>
<body>
<div class="box"></div>
<button class="btn">动起来</button>
<button class="btn">不许动</button>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
$('.btn:first').click(function () {
$('.box').animate({left:'400px',top:'400px'},2000,'swing',function () {
console.log('动画完成')
}).animate({left:'800px',top:'0px'},2000)
});
$('.btn:last').click(function () {
$('.box').stop() //延续 没有清空序列
});
});
</script>
</body>
</html>
手风琴：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 300px;
height: auto;
border: 1px solid #ccc;
}
.box .item {
width: 100%;height: auto;
border-bottom: 1px solid #bbb;
}
.title {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: skyblue;
}
.content {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="item"><div class="title">标题1</div><div class="content hide">我是弹出来的div1</div></div>
<div class="item"><div class="title">标题2</div><div class="content hide">我是弹出来的div2</div></div>
<div class="item"><div class="title">标题3</div><div class="content hide">我是弹出来的div3</div></div>
<div class="item"><div class="title">标题4</div><div class="content hide">我是弹出来的div4</div></div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//点击title 任意一个 绑定点击事件
//如果点击某一个标题 显示这个标题对应的内容
//其余兄弟隐藏
$('.item > .title').click(function () {
if($(this).next().css('display')==='block'){
$(this).next().slideUp(1000)
}
else {
$(this).next().slideDown(1000).parent().siblings().find('.content').slideUp(1000)
}
console.log($(this).next().css('display'))
})
})
</script>
</body>
</html>
轮播图：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.clearFix::after,.clearFix::before {
content: '';
display: block;
line-height: 0;
clear:both;
}
ul li {
list-style:none;
}
img {
display: block;
width:500px;
height: 400px;
}
.Photo-frame {
position: relative;
width:500px;
height:400px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
}
.picBox >li {
position: absolute;
left:0;
top:0;
display: none;
}
.arrow {
position: absolute;
top:50%;
margin-top:-20px;
width:24px;
height:40px;
background-color: rgba(45,45,45,.3);
color:white;
line-height:40px;
text-align: center;
font-size:20px;
cursor: pointer;
}
#next {
right:0;
}
#prev {
left:0;
}
.arrow:hover {
opacity: .7;
}
.circles {
position: absolute;
bottom:10px;
left:50%;
margin-left:-48px;
height:auto;
}
.circles span{
display: inline-block;
width:10px;
height:10px;
margin:0 3px;
border:2px solid rgba(45,45,255,.3);
border-radius: 50%;
background-color: greenyellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="Photo-frame">
<ul class="picBox clearFix" >
<li style="display: block"><a href="#"><img src="images/2-big.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu6.jpg" alt=""></a></li>
</ul>
<div class="arrow" id="next"> > </div>
<div class="arrow" id="prev"> < </div>
<div class="circles">
&l
20000
t;span ind="0" style="box-shadow: 0 0 10px 5px rgba(0,0,0,.7) inset"></span>
<span ind="1"></span>
<span ind="2"></span>
<span ind="3"></span>
<span ind="4"></span>
<span ind="5"></span>
</div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//点击下一张
var index=0;
$('#next').click(function () {
index++;
if (index===6){
index=0;
}
$('.picBox li').eq(index).fadeIn(500).siblings().fadeOut(500)
$('.circles span').eq(index).css('boxShadow','0 0 10px 5px rgba(0,0,0,.7) inset').siblings().css('boxShadow','none')
})
//点击上一张
$('#prev').click(function () {
index--;
if (index===-1){
index=5;
}
$('.picBox li').eq(index).fadeIn(500).siblings().fadeOut(500)
$('.circles span').eq(index).css('boxShadow','0 0 10px 5px rgba(0,0,0,.7) inset').siblings().css('boxShadow','none')
})
//随时间自动切换
function play() {
timer=setInterval(function () {
$('#next').click()
},2000)
}
play()
$('.Photo-frame').mouseover(function () {
clearInterval(timer)
})
$('.Photo-frame').mouseout(function () {
play()
})
//鼠标移入小圆点显示对应的图片
$('.circles span').mouseover(function () {
index=this.getAttribute('ind')
$('.circles span').eq(index).css('boxShadow','0 0 10px 5px rgba(0,0,0,.7) inset').siblings().css('boxShadow','none')
$('.picBox li').eq(index).fadeIn(500).siblings().fadeOut(500)
})
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- j2ee学习笔记之前端（js、jQuery、html、html5、webService、ajax、css）—— 一直会补充
- 前端学习笔记-jquery-12-（过滤选择器）过滤器：子元素过滤器
- 前端学习笔记-jquery-15-表单属性元素选择器
- Web前端学习（6）_jQuery
- 献给和我同样学习前端脚本时，先学jQuery，而之前没有接触过JS的同学
- 前端学习之jQuery中.html() .text() .val()的区别
- 前端学习总结（四）jQuery
- Web前端开发学习之路——认识JQuery与JQuery Mobile
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）
- 前端学习之路——jQuery动画
- 【前端学习笔记】JQuery的基本思想、常用方法
- 前端学习Jquery
- 前端开发学习随笔-------jquery.data()
- 【Jquery】前端学习记录（2）【身份证、左侧导航、模糊搜索】
- 前端学习之三——jquery选择器
- 做前端的能不能不学习 JavaScript 而直接学习 jQuery ？
- 前端学习笔记--jQuery--基础知识--事件篇
- 前端学习-jQuery学习小笔记（2）——jQ属性样式篇
- 前端的那些事之Jquery篇模块的学习
- 3.精通前端系列技术之深入学习Jquery(一)