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代码
-
第一种方法
// 1.入口函数第一种写法
$(document).ready(function() {
});
- 第二种方法
// 2.第二种写法
$(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>
<!-- 1.引入jQuery文件 -->
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// 1.入口函数第一种写法
// $(document).ready(function() {
// });
// 2.第二种写法
$(function() {
// 隐藏div盒子
$('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>
// 1.DOM对象的获取方式
var div = document.querySelector('div');
console.dir(div);
// 2.jquery对象的获取方式,获取的是一个伪数组，使用了$把DOM对象包装成了一个新的jQuery对象
var jdiv = $('div');
console.dir(jdiv);
// 3.DOM对象只能使用DOM对象的方法，jQuery对象只能使用jQuery对象的方法
div.style.backgroundColor = 'blue';
jdiv.hide();
</script>
</body>
</html>
- 效果图
注意点
- DOM对象和jQuery对象的方法不能混用
2.5 jQuery对象和DOM对象的转换
- DOM对象转换为jQuery对象
$(DOM对象)
- jQuery对象转换为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>
<!-- 1.muted属性不禁用自动播放 -->
<video src="./mov.mp4" muted></video>
<script>
// 1.获取DOM对象
var myvideo = document.querySelector('video');
// 2.转成jQuery对象
var jvedio = $(myvideo);
// 3.jQuery对象转换成DOM对象
var dvideo = jvedio[0];
// 使用DOM的自动播放属性
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() {
// 1.选择器
var list = $('ol li');
console.log(list);
// 2。类选择器
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() {
// 1.获取ol中的第一个li标签
var first = $('ol li:first');
first.css('color', 'red');
console.log(first);
// 2. 获取ol中的最后一个li标签
var last = $('ol li:last');
last.css('color', 'blue');
console.log(last);
// 3.获取ol中index为2的元素（第3个）
var index2 = $('ol li:eq(2)');
index2.css('color', 'orange');
console.log(index2);
// 获取ul中的odd（index为奇数）的li
var odd = $('ul li:odd');
odd.css('color', 'skyblue');
// 获取ul中even（index为偶数的）li
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());
// 选择第二个li
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() {
// 1.获取ul中的所有小li(亲儿子)
$('.nav>li').mouseover(function() {
// 2.显示小li中的ul
$(this).children('ul').show();
});
$('.nav>li').mouseout(function() {
// 2.显示小li中的ul
$(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() {
// 1.给所有的按钮绑定事件，隐式迭代
$('button').click(function() {
// 2.给点击的按钮设置蓝色，
$(this).css('background', 'blue');
// 3.给兄弟设置默认的
$(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() {
// 1.获取当前的索引号
var index = $(this).index();
// 2.让对应的索引号图片显示
$('#content div').eq(index).show();
console.log(index);
// 3.兄弟隐藏
$('#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() {
// 1.给所有的按钮绑定事件，隐式迭代
$('button').click(function() {
// 2.给点击的按钮设置蓝色，
// 3.给兄弟设置默认的
// 链式编程
$(this).css('background', 'blue').siblings().css('background', '');
})
})
</script>
</body>
</html>
5. jQuery修改css样式
- 如果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() {
// 1.如果设置css样式时只写属性，会返回属性值
console.log($('div').css('width'));
// 2.设置多组样式
$('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() {
// 1.如果设置css样式时只写属性，会返回属性值
console.log($('div').css('width'));
// 2.设置多组样式
$('div').css({
'width': '200px',
'height': '300px',
'background-color': 'red'
})
// $('div').css({
// // 属性名可以不加引号，属性值为数字可以不加引号
// width: 200,
// height: '300px',
// backgroundColor: '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() {
// 1.添加类名
$('div.first').click(function() {
$(this).addClass('current');
})
// 2.移除类名
$('div.second').click(function() {
$(this).removeClass('current');
})
// 3.切换类名
$('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的类名操作不会影响之前的类名
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
