day46 jQuery
内容回顾:
1.库和框架的区别
库: 小而精: 直接操作DOM, 如css()方法
jquery封装了js中的哪些操作(大量的api=方法)
- 事件
- 属性
- DOM
- 选择器
- ajax(交互的技术)
jQuery的链式编程: jQuery的方法可以实现和js的属性操作一样的功能, 好处在哪, jQuery的方法执行完,给返回了jQuery对象, 还可以接着使用其他方法, 这就是链式编程
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>bajie</li>
<li>wukong</li>
<li>datang</li>
</ul>
<script src="jquery.js"></script>
<script>
var colors = ['red','yellow','blue'];
//1.从jquery对象转换为js对象
console.log($('li')[0]); //注意这里, 方式一.加上[下标], 是从jquery对象到js对象的转换
//方式二.JQ对象.get(0)
//2.从js对象转换为jquery对象
var item = document.getElementsByTagName('li')[0];
console.log(item);
console.log($(item));
//链式编程
$(item).css('color','blue').click(function () {
alert(666)
});
for(var i=0; i<colors.length; i++){
$('li')[i].style.backgroundColor = colors[i]; //使用 .style 而不是.css(), 因为这里的是js对象
}
</script>
</body>
</html>
框架:
事件, DOM, 属性操作, ajax, '模板引擎'
2.jQuery的入口函数
$(function(){}) #等待文档加载完成之后才调用
$(window).ready(function(){}) #和js的window.onload 一样, 但是没有时间覆盖现象
3.DOM事件的三步走
事件源, 主要还是学习选择器, 和css基本一样: $('div') $('#box') $('.box') $('*') 获取到的是jQuery对象
选择器的方法
绑定事件, JQ对象调用的是JQ的事件,都不带on: 比如js 是onclick onmouseover onmouseout onscroll onresize onchange
比如JQ 是: JQ对象.click(function(){}); 当调用完事件操作, jQuery内部又返回一个jQuery对象,可以接着调方法
事件的回调函数 是事件驱动
4.对样式属性的操作
.css()方法
如果有一个参数,并且参数类型是字符串:.css('color')是获取对应的属性值
如果有两个参数:.css('color','red')是设置单个的属性值
如果有一个参数,并且参数类型是{}: 是设置多个属性值 .css({'color':'red',width:300})
今日内容
一.jQuery
1.js和jquery对象的转换
js对象->jquery对象: $(js对象)
jquery对象->js对象: 方式一: JQ对象[0], 方式二: JQ对象.get(0)
2.选择器
作用: 选中标签对应的JQ对象
高级选择器里面说个后代选择器(用法和css的一样)
<body>
<div id="box">
<p>bajie</p>
</div>
<p>wukong</p>
<script src="jquery.js"></script>
<script>
$(function () {
$('#box p').css('color','red');
})
</script>
</body>
紧邻选择器 + : div+p(兄弟关系的下一个p)
兄弟选择器 ~ : div~p(兄弟关系的后面的所有p)
<body>
<div id="box">
<p>bajie</p>
<p>datang</p>
<p>xiha</p>
</div>
<p>wukong</p> // #box+p: 选择的是兄弟关系的紧挨着的下一个
<p>wukong</p>
<script src="jquery.js"></script>
<script>
$(function () {
$('#box+p').css('color','green');
})
</script>
</body>
基本过滤选择器:这个是css没有的
$('li:eq(2)') #多个li标签时,选择下标是2的li,eq()和标签一样写在''引号的里面
:eq()
:gt()
:lt()
:odd (odd number: 奇数)
:even (even number: 偶数)
:first
:last
<body>
<ul>
<li>bajie</li>
<li>wukong</li>
<li>dalang</li>
<li>xiha</li>
<li>strong</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
$('li:eq(0)').css('color','red');
})
</script>
</body>
属性选择器: 主要应用在form表单里面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
border:none;
outline:none; //先清理边框和外线在,重新进行设置
width: 300px;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<form action="#">
<input type="text" name="user">
<input type="password" name="pwd">
<input type="submit">
</form>
<script src="jquery.js"></script>
<script>
$(function () {
$('input[type=text]').css('width','100px'); //属性选择器, []括号里面不用使用''引号
})
</script>
</body>
</html>
筛选选择器(通过方法进行调用)
.find(): 查找指定父元素的所有后代元素(包括子子孙孙)
<body>
<div class="father">
<p>bajie</p>
<a href="#">wukong</a>
<span>datang</span>
<div class="g">xiha</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('.g').click(function () {
console.log(this); //this是js对象
$(this).css('color','red'); //$(this) 转换成jquery对象
});
$('.father').find('.g').click(function () { //find获取的是 .father下面的及下下面的所有的符合find()条件的标签, find()里面的选择器可是css的任一种
console(this); //this 是谁, 是最后一个引用事件的js对象
}
);
})
</script>
</body>
筛选选择器
.children() :获取的是亲儿子
.father() :获取的是亲爹
.eq()
<body>
<div class="father">
<p>bajie</p>
<a href="#">wukong</a>
<span>datang</span>
<div class="g">
<span>xiha</span>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('.father').find('span').click(function () {
$(this).css('color','red'); //对.father下的所有span生效
});
$('.father').children('span').click(function () {
$(this).css('background-color','green'); //只对.father下的直接子标签span生效
});
$('.father span').eq(0).css('color','blue'); // 和基本过滤选择器 ':eq()'一样
})
</script>
</body>
筛选选择器
.siblings() :查找所有的兄弟元素不包括自己,排他思想,选项卡时可用这个
<body>
<ul>
<li>bajie</li>
<li>wukong</li>
<li>datang</li>
<li>xiha</li>
<li>xiaoliu</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
//选项卡, 点一个变色, 其他为初始颜色
$('li').click(function () {
$(this).css('color','red').siblings('li').css('color','black');
})
})
</script>
</body>
筛选选择器
.siblings() :当有嵌套结构时, 需要找 .father().siblings().children()才是siblings的关系
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
.box{
width: 600px;
height: 300px;
}
.box ul{
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 100px;
height: 50px;
margin: 0 10px;
text-align: center;
line-height: 50px;
}
.active{
width: 100%;
height: 200px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="javascript:void(0)">bajie</a>
</li>
<li>
<a href="javascript:void(0)">wukong</a>
</li>
<li>
<a href="javascript:void(0)">datang</a>
</li>
<li>
<a href="javascript:void(0)">xiha</a>
</li>
<li>
<a href="javascript:void(0)">xiaoliu</a>
</li>
</ul>
<div class="active">
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('.box ul li a').click(function () {
$(this).css('color', 'green').parent().siblings().children().css('color','white'); //注意a标签是嵌套结构, 不是直接的siblings()关系
//jquery对值的操作: .text()
console.log($(this).text()); //text()里面没有参数是获取当前对象的值; text('八戒')有参数时是设置值
$('.active').show().text($(this).text());
var textVal = $(this).text();
//jquery对值的操作: .html()
var newVal = `<h1>${textVal}</h1>`;
$('.active').show().html(newVal);
})
})
</script>
</body>
</html>
3.对样式属性的操作
.css()
4.对属性的操作
html的标签属性操作: 是对html文档中的属性进行读取, 设置和移除操作. 比如attr(), removeAttr()
对类的操作: 建议使用addClass() removeClass()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
color: red;
}
.active{
color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="jquery.js"></script>
<script>
$(function () {
//初始化操作, 往div里面添加a标签
// $('.box').html(`<a href="http://www.baidu.com">百度一下</a>`);
//
$('.box').html(`<a id="anchor"></a>`); //(anchor: 锚)
$('#anchor').attr('href','http://www.baidu.com').text('百度一下');
$('#anchor').attr(
{
title: '123',
class: '456' //一般class名的设置不用attr设置, 因为会把原先的类名覆盖掉
}
);
$('body').click(function () {
// $('#anchor').attr('class','active') //我们改成jquery给我们提供的专门操作类名的方法 addClass() removeClass() toggleClass()
$('#anchor').addClass('active'); //追加类名
$('#anchor').removeClass('active 456'); //移出多个类名用空格分隔
$('#anchor').removeAttr('title href'); //移出多个标签的属性
})
})
</script>
</body>
</html>
对类的操作: toggleClass()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$('button').click(function () {
$('.box').toggleClass('hidden'); //自动控制显示隐藏
})
})
</script>
</body>
</html>
对标签对象的属性的操作 .prop()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex">
<script src="jquery.js"></script>
<script>
$(function () {
//获取标签属性
console.log($('input[type=radio]').eq(0).attr('checked'));
//js 对标签对象的属性的操作
console.dir($('input[type=radio]').eq(0)[0]); //可以看到input的js对象里的, checked: 为true
console.dir($('input[type=radio]').eq(1)[0]); //可以看到input的js对象里的, checked: 为false
//jquery 对标签对象的属性的操作
console.dir($('input[type=radio]').eq(1).prop('checked')); //.prop()方法, 单选的时候给后端传的是true和false用这样的方法获取
//.removeProp()
})
</script>
</body>
</html>
5.对值的操作
.text()
.html()
.val()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
.box{
width: 600px;
height: 300px;
}
.box ul{
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 100px;
height: 50px;
margin: 0 10px;
text-align: center;
line-height: 50px;
}
.active{
width: 100%;
height: 200px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
</ul>
<div class="active">
</div>
<form action="">
<input type="text" value="123">
</form>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
//模板字符串的应用
$('.box ul').html(`<li>
<a href="javascript:void(0)">bajie</a>
</li>
<li>
<a href="javascript:void(0)">wukong</a>
</li>
<li>
<a href="javascript:void(0)">datang</a>
</li>
<li>
<a href="javascript:void(0)">xiha</a>
</li>
<li>
<a href="javascript:void(0)">xiaoliu</a>
</li>`);
$('.box ul li a').click(function () {
$(this).css('color', 'green').parent().siblings().children().css('color','white'); //注意a标签是嵌套结构, 不是直接的siblings()关系
//jquery对值的操作: .text() : innerText的封装
console.log($(this).text()); //text()里面没有参数是获取当前对象的值; text('八戒')有参数时是设置值
$('.active').show().text($(this).text());
var textVal = $(this).text();
//jquery对值的操作: .html() : innerHTML的封装
var newVal = `<h1>${textVal}</h1>`;
$('.active').show().html(newVal);
//jquery对form表单value的操作
$('input[type=text]').val('666'); //val()里面没有参数是获取当前对象的值; val(666)有参数时是设置值
//用val()的时候是标签有value()属性的时候
})
})
</script>
</body>
</html>
6.对DOM的操作
7.动画效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$('#btn').click(function () {
// $('.box').hide(); //动画操作前, 先关掉计时器
$('.box').stop().toggle(1000); //显示隐藏, 当有参数时,是动画的效果: 左上切入切出
})
})
</script>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
});
})
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>
8.选项卡的嵌套
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
.box{
width: 600px;
height: 300px;
}
.box ul{
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 100px;
height: 50px;
margin: 0 10px;
text-align: center;
line-height: 50px;
}
.active{
width: 100%;
height: 200px;
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="javascript:void(0)">bajie</a>
</li>
<li>
<a href="javascript:void(0)">wukong</a>
</li>
<li>
<a href="javascript:void(0)">datang</a>
</li>
<li>
<a href="javascript:void(0)">xiha</a>
</li>
<li>
<a href="javascript:void(0)">xiaoliu</a>
</li>
</ul>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('.box ul li a').click(function () {
$(this).css('color', 'green').parent().siblings().children().css('color','white');
var textVal = $(this).text();
var newVal = `<h1>${textVal}</h1>`;
//取标签a对应的索引
console.log($(this).parent().index()); //返回列表中第一个元素相对于其同辈元素的位置
var index = $(this).parent().index();
$('div.active').eq(index).addClass('show').html(newVal).siblings('div.active').removeClass('show').html('');
})
})
</script>
</body>
</html>
9.用索引控制轮播图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
.box{
width: 600px;
height: 300px;
}
.box ul{
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 100px;
height: 50px;
margin: 0 10px;
text-align: center;
line-height: 50px;
}
.active{
width: 100%;
height: 200px;
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="next">下一张</button>
<ul>
<li>
<a href="javascript:void(0)">bajie</a>
</li>
<li>
<a href="javascript:void(0)">wukong</a>
</li>
<li>
<a href="javascript:void(0)">datang</a>
</li>
<li>
<a href="javascript:void(0)">xiha</a>
</li>
<li>
<a href="javascript:void(0)">xiaoliu</a>
</li>
</ul>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
<div class="active">
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
var count = 0;
$('.next').click(function () {
count++;
if(count == 5){ count = 0; };
console.log(count);
$('ul li').eq(count).css('backgroundColor','green').siblings().css('backgroundColor','red');
$('div.active').eq(count).addClass('show').html('八戒').siblings('div.active').removeClass('show').html('');
});
$('.box ul li a').click(function () {
$(this).css('color', 'green').parent().siblings().children().css('color','white');
var textVal = $(this).text();
var newVal = `<h1>${textVal}</h1>`;
//取标签a对应的索引
console.log($(this).parent().index()); //返回列表中第一个元素相对于其同辈元素的位置
var index = $(this).parent().index();
$('div.active').eq(index).addClass('show').html(newVal).siblings('div.active').removeClass('show').html('');
})
})
</script>
</body>
</html>
10.百度导航
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; /*清除默认样式*/
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.header{
height: 46px; /*宽度没给, 让子标签撑起来*/
/*overflow: hidden; !*因为子盒子浮动了, 这里要清除浮动, 但是上面有了固定高度, 所以不用清浮动了*!*/
}
.header ul{
float: left; /*浮动的盒子都有一种收缩的效果*/
height: 46px;
}
.header ul li{
float: left;
height: 46px;
padding: 0 10px;
background: none;
transition: background 500ms; /*c3里面的动画效果, 500毫秒颜色的渐变*/
cursor: pointer; /*li下面的a上悬浮的时候有小手, li的其他区域没有, 那么就给li加一个小手*/
}
.header ul li:first-child{
}
.header ul li:first-child a {
color: #fff;
}
.header ul li a{
color: #666;
display: inline-block; /*加上这句, 就形成了BFC区域, 下面的margin-left才会生效*/
margin-top: 19px;
}
.header ul li:hover{
/*用户点击其中一个li后, hover就不起作用了, 用!important优先级可以无限大*/
transition: prop 1s;
}
.header ul li:hover a{
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li>
<a href="javascript: void(0)">热门</a>
</li>
<li>
<a href="javascript: void(0)">游戏</a>
</li>
<li>
<a href="javascript: void(0)">卡通</a>
</li>
<li>
<a href="javascript: void(0)">女神降临</a>
</li>
<li>
<a href="javascript: void(0)">明星</a>
</li>
<li>
<a href="javascript: void(0)">风景</a>
</li>
<li>
<a href="javascript: void(0)">简约</a>
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
//取到li, 对li进行点击操作
$('div ul li').click(function () {
//点击的li, 背景色和文字颜色变化, 没点的复原
$(this).css('background','#389cff').siblings().css('background','#fff');
$(this).find('a').css('color', '#fff').parent().siblings().find('a').css('color', '#666');
})
});
</script>
</body>
</html>