jQuery 学习第一天(上)
1.JavaScript 库
- 定义:封装好的特定的集合(方法和函数),本质js文件,里面对js原生代码进行了封装
- 常见的JavaScript 库
- jquery
- prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
2. jQuery 库
- 封装了常用的功能代码,优化了DOM操作,事件处理,动画设计和Ajax交互
- 图解
- 优点
- 轻量级
- 跨浏览器兼容
- 链式编程,隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 树形菜单,日期控件,轮播图
2.1 jQuery的下载
- 版本
- 1x:兼容ie678,不在更新
- 2x:不兼容ie678,不在更新
- 3x:不兼容ie678,还在更新
2.2 jQuery的入口函数
-
都是为了在DOM加载完毕后再执行jQuery代码
-
第一种方法
$(document).ready(function() {
});
$(function() {
});
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
$(function() {
$('div').hide();
});
</script>
<div></div>
</body>
</html>
注意点
- 等待DOM结构渲染完毕即可执行代码(相当于DOMContentLoaded)
2.3 jQuery的顶级对象$
- $ 是jQuery的别称,在代码中可以用jQuery代替
,
但
通
常
使
用
,但通常使用
,但通常使用
- $ 是jQuery的顶级对象,相对于JavaScript中的window,把元素利用$包装成jQuery对象,就可以使用jQuery的方法
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<script>
jQuery(document).ready(function() {
alert(11);
})
</script>
</body>
</html>
2.4 jQuery对象和DOM对象
- 用原生js获取的为DOM对象
- 用jQuery方法获取的是jQuery对象
- jQuery的本质是用$将DOM对象包装成的一个新的对象,本质是伪数组
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<span></span>
<script>
var div = document.querySelector('div');
console.dir(div);
var jdiv = $('div');
console.dir(jdiv);
div.style.backgroundColor = 'blue';
jdiv.hide();
</script>
</body>
</html>
注意点
2.5 jQuery对象和DOM对象的转换
$(DOM对象)
$('div')[index] index是索引号
$('div').get(index)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<video src="./mov.mp4" muted></video>
<script>
var myvideo = document.querySelector('video');
var jvedio = $(myvideo);
var dvideo = jvedio[0];
dvideo.play();
</script>
</body>
</html>
3. jQuery选择器
3.1 基础选择器
$('选择器') //这里的选择器同css的相同
$('li>a')
$('li a')
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="box">14</li>
</ol>
<script>
$(function() {
var list = $('ol li');
console.log(list);
var li1 = $('.box');
console.log(li1);
})
</script>
</body>
</html>
3.2 jQuery设置样式
$('div').css('属性','值')
3.3 隐式迭代
- 遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
<script>
$(function() {
$('ol li').css('backgroundColor', 'pink');
$('ol li').css('color', 'blue');
})
</script>
</body>
</html>
3.4 筛选选择器
语法 | 用法 | 描述 |
---|
:first | $(‘li:first’) | 获取第一个li元素 |
:last | $(‘li:last’) | 获取最后一个li元素 |
:eq(index) | $(‘li:eq(2)’) | 获取第3个li元素,index从0开始 |
:odd() | $(‘li:odd’) | 获取index为奇数的li元素 |
:even | $(‘li:even’) | 获取index为偶数的li元素 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ol>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ol>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<script>
$(function() {
var first = $('ol li:first');
first.css('color', 'red');
console.log(first);
var last = $('ol li:last');
last.css('color', 'blue');
console.log(last);
var index2 = $('ol li:eq(2)');
index2.css('color', 'orange');
console.log(index2);
var odd = $('ul li:odd');
odd.css('color', 'skyblue');
var even = $('ul li:even');
even.css('color', 'pink');
})
</script>
</body>
</html>
3.5 jQuery筛选方法
语法 | 用法 | 说明 |
---|
parent() | $(‘li’).parent() | 查找父级 |
children(selector) | $(‘ul’).children(‘li’) | 相对于$(‘ul>li’),查找最近一级(亲儿子) |
find(selector) | $(‘ul’).find(‘li’) | 相对于$(‘ul li’),后代选择器 |
siblings(selector) | $(’.first’).siblings(‘li’) | 查找兄弟节点,不包括元素本身 |
nextAll([expr]) | $(’.first’).nextAll() | 查找当前元素之后的所有同辈元素 |
prevAll([expr]) | $(’.last’).prevAll() | 查找当前元素的所有同辈元素 |
hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前的元素是否含有某个特定的类,如果有。返回true |
eq(index) | $(‘li’).eq(2) | 相对于$(‘li:eq(2)’),index从零开始 |
注意点
- 重点记住:parent(),children(),find(),sibling(),eq()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="nav">
<p>我是son</p>
<div>
<p>我是sun</p>
</div>
</div>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
<ul>
<li class="first"></li>
<li>我是第二个li</li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
<script>
$(function() {
console.log($('.sun').parent());
console.log($('.nav').children('p'));
console.log($('.first').siblings('li'));
console.log($('.last').prevAll());
console.log($('ul li').eq(1));
})
</script>
</body>
</html>
新浪下拉菜单案例
<!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>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
margin-right: 20px;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
$('.nav>li').mouseover(function() {
$(this).children('ul').show();
});
$('.nav>li').mouseout(function() {
$(this).children('ul').hide();
});
})
</script>
</body>
</html>
排他思想案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$(function() {
$('button').click(function() {
$(this).css('background', 'blue');
$(this).siblings().css('background', '');
})
})
</script>
</body>
</html>
精品服饰展示案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="./images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="./images/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
<script>
$(function() {
$('#left li').click(function() {
var index = $(this).index();
$('#content div').eq(index).show();
console.log(index);
$('#content div').eq(index).siblings().hide();
})
})
</script>
</body>
</html>
4. 链式编程
s('this').css('background','red').siblings().css('background','')
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$(function() {
$('button').click(function() {
$(this).css('background', 'blue').siblings().css('background', '');
})
})
</script>
</body>
</html>
5. jQuery修改css样式
console.log($('div').css('width'));
$('div').css({
'width': '200px',
'height': '300px',
'backgroundColor': 'blue'
})
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 200px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
console.log($('div').css('width'));
$('div').css({
'width': '200px',
'height': '300px',
'background-color': 'blue'
})
})
</script>
</body>
</html>
注意点
- 多组样式以对象方式存储,在其中属性可以不加引号,属性值为字符串的必须加
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 200px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
console.log($('div').css('width'));
$('div').css({
'width': '200px',
'height': '300px',
'background-color': 'red'
})
})
</script>
</body>
</html>
6.jQuery操作类名
方法 | 说明 |
---|
addClass(‘类名’) | 给当前元素添加类名 |
removeClass(‘类名’) | 移除当前元素的类名 |
toggleClass(‘类名’) | 切换类名,如果有该类名,切换成没有,如果没有,切换成有 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all .5s;
}
.current {
background-color: blue;
transform: rotate(360deg);
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="first"></div>
<div class="second current"></div>
<div class="third"></div>
<script>
$(function() {
$('div.first').click(function() {
$(this).addClass('current');
})
$('div.second').click(function() {
$(this).removeClass('current');
})
$('div.third').click(function() {
$(this).toggleClass('current');
})
})
</script>
</body>
</html>
tab栏切换案例
<!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>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
$(function() {
$('.tab_list li').click(function() {
var index = $(this).index();
$('.tab_con div').eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
})
</script>
</body>
</html>
类操作与className的区别
- 原生JS中的className会覆盖掉原先的类名
- 而jQuery的类名操作不会影响之前的类名