Web前端学习笔记—— jQuery之简介、对象、选择器
jQuery简介
JavaScript库的概念
JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。
把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个
jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery的优点好处
jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。
jQuery的版本
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本
jQuery官网
体验jQuery
案例：让div显示与设置内容
使用JavaScript开发过程中，有许多不便之处
-查找元素的方法太少，麻烦。
-遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
-有兼容性问题。
-想要实现简单的动画效果，也很麻烦
-代码冗余。
$(document).ready(function () {
$('#btn1').click(function () {
// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
$('div').show(200);
});
$('#btn2').click(function () {
$('div').text('我是内容');
});
});
优点总结：
-查找元素的方法多种多样，非常灵活
-拥有隐式迭代特性，因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单，而且功能更加的强大。
-代码简单、粗暴。
jQuery中顶级对象
jQuery中的顶级对象是$或jQuery
获取jQuery对象
入口函数
高级功能
注意：jQuery中的$和JQuery关键字本身为同一对象；
jQuery中页面加载事件
使用jQuery的三个步骤：
引入jQuery文件
入口函数
功能实现
关于jQuery的入口函数：
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});
jQuery入口函数与window.onload的对比
JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
jQuery对象和DOM对象
jQuery对象和DOM对象的区别
DOM对象
用原生JavaScript获取的DOM对象
通过document.getElementById() 反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？
伪数组(集合)，集合中的每一个对象是DOM对象
jQuery对象
jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)
区别
jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员
// DOM对象
var box = document.getElementById('box');
// 错误
box.text('hello');
// 正确
box.innerText = 'hello';
// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
var $box = $('#box');
// 错误
$box.innerText = 'hello';
// 正确
$box.text('hello');
jQuery对象和DOM对象的相互转换
jQuery对象转换成DOM对象：
jQuery对象.get(索引值);
jQuery对象[索引值]
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：
$(DOM对象) 只有这一种方法;
案例
- 开关灯 [01-开关灯.html]
// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {
// 获取元素；
var inpArr = document.getElementsByTagName('input');
// 获取第一个按钮，然后绑定事件；
$(inpArr[0]).click(function () {
// 设置body的背景色
$('body')[0].style.background = '#fff';
});
// 获取第二个按钮，然后绑定事件；
$(inpArr[1]).click(function () {
// 设置body的背景色
$('body').get(0).style.background = '#000';
});
});
选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档）
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
jQuery基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(’#id’); | 获取指定ID的元素 |
| 类选择器 | $(’.class’); | 获取同一类class的元素 |
| 标签选择器 | $(‘div’); | 获取同一类标签的所有元素 |
| 并集选择器 | $(‘div,p,li’); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(‘div.redClass’); | 获取class为redClass的div元素 |
- 总结：跟css的选择器用法一模一样。
jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(‘ul > li’); | 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
- 跟CSS的选择器一模一样。
jQuery过滤选择器
- 这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(‘li:eq(2)’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(‘li:odd’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为偶数的元素 |
jQuery筛选选择器(方法)
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul-li’)，子类选择器 |
| find(selector) | $(‘ul’).find(‘li’); | 相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $(’#first’).siblings(‘li’); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(’#first’).parent(); | 查找父亲 |
| eq(index) | $(‘li’).eq(2); | 相当于$(‘li:eq(2)’),index从0开始 |
| next() | $(‘li’).next() | 找下一个兄弟 |
| prev() | $(‘li’).prev() | 找上一次兄弟 |
案例
- 鼠标放上突出展示 [02-突出展示.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
//获取所有的li,添加鼠标进入事件
$(".wrap>ul>li").mouseenter(function () {
//设置当前的li的透明度的同时修改当前的li的所有的兄弟元素li的透明度
$(this).css("opacity",1).siblings("li").css("opacity",0.5);
});
//鼠标离开事件
$(".wrap").mouseleave(function () {
//从当前的div中所有的li,设置透明度
$(this).find("li").css("opacity",1);
});
});
script>
head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/02.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/03.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/04.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/05.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/06.jpg" alt=""/>a>li>
ul>
div>
body>
html>
- 好友列表切换
<html>
<head lang="en">
<title>title>
<meta charset="UTF-8">
<style type="text/css">
#u1 li {
margin-bottom: 10px;
background-color: Orange;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
}
#u1 li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#u1 li ul li {
background-color: pink;
}
style>
<script src="jquery-1.12.1.js">script>
<script>
//页面加载后,隐藏所有的li
$(function () {
$("#u1>li>ul").hide();
//找到id为u1下面的直接的子元素li添加点击事件
$("#u1>li").click(function () {
//当前点击的li里面的ul显示
$(this).children("ul").show(500);
//隐藏当前被点击的li的兄弟元素的li中的ul
$(this).siblings("li").find("ul").hide(500);
});
});
script>
head>
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫li>
<li>爱哭鬼li>
<li>张大胆li>
<li>班主任li>
ul>
li>
<li>小学同学
<ul>
<li>张三丰li>
<li>张无忌li>
<li>乔布斯li>
<li>助教li>
ul>
li>
<li>
初中同学
<ul>
<li>盖茨li>
<li>川普li>
<li>奥巴马li>
<li>凤姐li>
ul>
li>
ul>
div>
body>
html>
- 下拉菜单 [04-下拉菜单.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
}
.wrap li{
background-image: url(images/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
style>
<script src="vendor/jquery.js">script>
<script>
jQuery(document).ready(function () {
//需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
//需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
//需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
$(".wrap>ul>li").mouseover(function () {
//获取鼠标进入的li，是原生dom对象；
//转换成jquery对象
$(this).children("ul").show();
});
//需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").hide();
});
});
script>
head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
ul>
div>
body>
html>
- 手风琴 [05-手风琴.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
ul {
list-style: none
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
//页面加载的事件
$(function () {
//获取所有的li
$("#box>ul>li").mouseenter(function () {
//当前的li宽为800px,其他的li的宽为100px
$(this).css("width", "800px").siblings("li").css("width", "100px");
});
$("#box").mouseleave(function () {
$("li").css("width", "240px");
});
});
script>
head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg"/>li>
<li><img src="images/2.jpg"/>li>
<li><img src="images/3.jpg"/>li>
<li><img src="images/4.jpg"/>li>
<li><img src="images/5.jpg"/>li>
ul>
div>
body>
html>
- 淘宝服饰精品 [06-淘宝服饰精品.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: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left,#center,#right{
float: left;
}
#left li , #right li{
background: url(images/lili.jpg) repeat-x;
}
#left li a,#right 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,#right li a:hover{
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
style>
<script src="vendor/jquery.js">script>
<script>
jQuery(function () {
//需求1：鼠标进入左侧ul中的li，让中间ul中的li对应索引值的显示，其他隐藏；
//需求2：鼠标进入右侧ul中的li，让中间ul中的li对应索引+9的显示，其他隐藏；
//需求1：鼠标进入左侧ul中的li，让中间ul中的li对应索引值的显示，其他隐藏；
$("#left li").mouseover(function () {
//让中间ul中的li对应索引值的显示，其他隐藏；
// alert($(this).index()); jquery方法获取索引值
var num = $(this).index();
$("#center li").eq(num).show().siblings("li").hide();
});
//需求2：鼠标进入右侧ul中的li，让中间ul中的li对应索引+9的显示，其他隐藏；
$("#right li").mouseover(function () {
//让中间ul中的li对应索引值的显示，其他隐藏；
$("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
});
});
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>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/女包.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/男包.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/>a>li>
<li><a href="#"><img src="images/男靴.jpg" width="200" height="250" />a>li>
ul>
<ul id="right">
<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>
body>
html>