jQuery
一、 jQuery概述
1.1 javascript库
即library,是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度解读，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show,比如获取元素等。
简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
1.2 jQuery的优点
- 轻量级。核心文件才几十kb,不影响页面加载速度
- 跨浏览器兼容。甚至兼容了现在主流的浏览器
- 链式编程，隐式编程
- 对事件、样式、动画支持、大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件，比如：日期控件，轮播图
- 免费。开源
二、jQuery的基本使用
1、jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
- $("#test").hide() - 隐藏 id=“test” 的元素
2、jQuery 入口函数
//jQuery 入口函数
$(document).ready(function(){
// 执行代码
});
//或者
$(function(){
// 执行代码
});
//JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
3、jQuery 的顶级对象 $
$ 是 jQuery 对象的别称，在代码中可以使用jQuery代替 $ ,
$ 是 jQuery 的顶级对象，相当于原生 javascript 中的window, 把元素利用 $ 包装成 jQuery 对象，就可以直接调用 jQuery 的方法。
4、jQuery 对象和DOM对象
DOM对象： 用原生 js 获取过来的对象就叫做DOM 对象。
var myDiv = document.querySelector('div); //my 是 DOM 对象
console.dir(myDiv); //打印结果为 div ,里面有很多的属性和方法
jQuery 对象：用 jQuery 方法获取过来的对象是jQuery 对象。本质：通过 $ 把DOM元素进行了包装
$('div'); //$('div') 是一个 jQuery 对象
console.dir('div'); //获取的 div 是一种伪数组
两者不能混用， jQuery 对象只能使用 jQuery 方法，DOM对象则使用Javascript 属性和方法。DOM对象与 jQuery 对象之间是可以相互转换的。
但因为原生JS 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，要想使用这些属性和方法需要把 jQuery 对象转换为DOM 对象才能使用， 所以下面我们来看一下DOM对象与 jQuery 对象之间的转换。
1）DOM 对象转换为 jQuery 对象：$(DOM对象) 只需要将DOM对象包装起来就可以。比如： $(‘video’)
2） jQuery 对象转换为DOM对象：
$('div')[index] //index 是索引号
$('div').get(index) //index 是索引号
三、jQuery 选择器
1、jQuery 基本选择器
原生js获取元素方式很多，很杂，因此jQuery 给我们做了封装，使获取元素统一标准。常见的选择器有元素选择器， #id 选择器 ，.class选择器，下面逐一看看
$("选择器") //里面选择器直接写CSS选择器即可，但是要加引号。
1.1 元素选择器
jQuery 元素选择器基于元素名选取元素。在页面中选取所有
元素:
$("p")
实例：当用户点击按钮后，有 p 元素被隐藏
<body>
<h2>哈哈哈哈</h2>
<p>我爱学习</p>
<button>点我</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</body>
按了点我按钮 之后我爱学习就隐藏起来了！
1.2 #id 选择器
id 选取元素语法如下：
$("#test")
实例：当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
<body>
<h2>哈哈哈哈</h2>
<p>我爱学习</p>
<p id="test">这是真的奥</p>
<button>点我</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
</body>
按了点我按钮之后 这是真的奥 就隐藏起来了！
1.3 .class 选择器
$(".test")
实例：用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
<body>
<h2 class = "test">哈哈哈哈</h2>
<p class = "test">这是真的奥</p>
<p>我爱学习</p>
<button>点我</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
</body>
按了点我按钮 之后 哈哈哈哈和这是真的奥 就隐藏起来了！
1.4 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们再循环，简化我们的操作，从而方便我们调用。
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>你喜欢学习吗</li>
<li>是的，你喜欢</li>
<li>是的，我也喜欢</li>
</ul>
<script>
//1.给四个div 设置背景颜色为粉色
$('div').css('background','pink')
// 2.给三个li 设置字体颜色为红色
$('ul li').css('color','red')
</script>
效果就像这样，便是利用了隐式迭代，把匹配的所有元素<div>内部进行遍历循环，给每一个元素添加css方法。
2、jQuery 筛选选择器
2.1 筛选选择器
下面演示一下使用筛选选择器展示的效果
<ul>
<li>选你</li>
<li>选你</li>
<li>选你</li>
<li>选你</li>
<li>选你</li>
</ul>
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
<script>
$(function(){
$("ul li:first").css("color","red")
$("ul li:last").css("color","blue")
$("ul li:eq(2)").css("color","green")
$("ol li:odd").css("color","pink")
$("ol li:even").css("color","skyblue")
})
</script>
2.2 jQuery 筛选方法
下面根据示例看一下常用的几个方法具体怎么使用的
parent()方法：查找父级
<div class="father">
<div class="son">儿子</div>
</div>
打印结果中可以看出通过此方法可以得到父级元素，那么当我们给当前div再加一层会是怎样
的结果那？
<div class="yi">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
打印结果仍然返回了最近一级的父级元素（相当于通过parent 方法只会找到亲爸爸）
2.children(selector) 方法：查找最近一级（亲儿子）
<div class="nav">
<p>我是谁</p>
<div>
<p>我又是谁</p>
</div>
</div>
<script>
$(function(){
//子
console.log( $(".nav").children("p").css("color","red"));
})
</script>
通过打印结果可以看出此方法可以返回子级元素，必须是临近的子级元素（俗称亲儿子）
3.find（）方法：查找所有子级
<div class="nav">
<p>我是谁</p>
<div>
<p>我又是谁</p>
</div>
</div>
<script>
$(function(){
//子
console.log( $(".nav").find("p").css("color","red"));
})
</script>
通过find 方法可以将子级元素全部选出，类似于后代选择器。
4. siblings(selector)方法：查找兄弟节点，不包括子级本身
<ol>
<li>我们是兄弟</li>
<li class="item">我们是兄弟</li>
<li>我们是兄弟</li>
</ol>
<script>
$(function(){
$("ol .item").siblings("li").css("color","red")
})
</script>
兄弟元素siblings 表示除了自身元素之外的所有亲兄弟
eq(index)方法：选择第几个元素
<ol>
<li>我们是兄弟</li>
<li class="item">我们是兄弟</li>
<li>我们是兄弟</li>
</ol>
<script>
$(function(){
$("ol li").eq(2).css("color","blue")
})
</script>
3、jQuery中的排他思想
jQuery中的排他思想和DOM中比较写法简单，通过使用隐式迭代可以轻松达到目的。
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function(){
//1.隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function(){
//2.当前的元素变化背景颜色
$(this).css("background","pink");
//3.其余的兄弟去掉背景颜色
$(this).siblings("button").css("background","")
})
})
</script>
案例：下拉菜单
<!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="../js/jquery.js"></script>
<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;
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>
</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").mousemove(function(){
$(this).children("ul").show(); //jquery当前元素，this不要引号
})
})
$(function(){
$(".nav>li").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</body>
</html>
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
