JQuery的介绍
JQuery：即javascript库。对原生的js代码进行封装，咱们能够间接疾速而高效的应用封装好的性能常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、挪动端的zepto等，这些库都是对原生 JavaScript 的封装，外部都是用 JavaScript 实现的，咱们次要学习的是 jQuery。
官网地址：https://jquery.com/，
JQuery的长处
1. 轻量级。外围文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，根本兼容了当初支流的浏览器
3. 链式编程、隐式迭代。
4. 对事件、款式、动画反对，大大简化了DOM操作。
5. 反对插件扩大开发。有着丰盛的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 收费、开源。
体验JQuery
步骤
- 引入jQuery文件。
- 在文档最开端插入 script 标签，书写体验代码。
JQuery入口函数
// 第一种: 简略易用。$(function () { ... // 此处是页面 DOM 加载实现的入口}) ; // 第二种: 繁琐，然而也能够实现$(document).ready(function(){ ... // 此处是页面DOM加载实现的入口});JQuery中的顶级对象
$是jQuery的顶级对象，相当于原生JavaScript中的 window。
$是 jQuery 的别称，在代码中能够应用 jQuery 代替
<script> //第一种办法 $(function() { alert('hello JQuery') }) //第二种办法 jQuery(function () { alert('hello JQuery') }) </script>DOM对象与JQuery对象
原生js获取的对象称为DOM对象用JQuery获取到的对象称为Jquery对象 Jquery对象的实质其实是$对DOM对象包装后产生的对象（以伪数组的形式存储）
DOM对象只能应用javascript原生的办法，而JQuery对象只能应用Jquery中的办法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM对象和JQuery对象</title> <script src="./jquery-3.5.1.js"></script> </head> <body> <div>DOM对象</div> <header>JQuery对象</header> </body> <script> //应用DON获取元素 var div = document.querySelector('div'); console.dir(div); //应用jQuery获取元素 console.log($('header')) </script> </html>DOM对象和JQuery对象的互相转换
DOM对象与JQuery对象是能够互相转换的。
// 1.DOM对象转换成jQuery对象，办法只有一种var box = document.getElementById('box'); // 获取DOM对象var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种办法：// 2.1 jQuery对象[索引值]var domObject1 = $('div')[0]// 2.2 jQuery对象.get(索引值)var domObject2 = $('div').get(0) JQuery的选择器
JQuery的根本选择器
$('选择器')外面的选择器间接写css的选择器即可，然而须要加引号
JQuery中的层级选择器
JQuery中的筛选选择器
筛选选择器 顾名思义：就是在所有的选项中筛选符合条件的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery筛选选择器</title> <script src="jquery-3.5.1.js"></script> </head> <body> <ul> <li>锄禾日当午</li> <li>锄禾日当午</li> <li>锄禾日当午</li> <li>锄禾日当午</li> <li>锄禾日当午</li> <li>锄禾日当午</li> </ul> <ol> <li>男儿当自强</li> <li>男儿当自强</li> <li>男儿当自强</li> <li>男儿当自强</li> <li>男儿当自强</li> <li>男儿当自强</li> </ol> </body> <script> $(function () { $('ul li:first').css('color', 'red'); $('ul li:last').css('color', 'yellow'); $('ul li:eq(1)').css('background', 'pink'); $('ol li:odd').css('background', 'yellow'); $('ol li:even').css('background', 'blue') }) </script> </html>jQuery中如何设置款式
$('元素').css('属性', '值')
JQuery中的隐式迭代
// 遍历外部 DOM 元素（伪数组模式存储）的过程就叫做隐式迭代。// 简略了解：给匹配到的所有元素进行循环遍历，执行相应的办法，而不必咱们再进行循环，简化咱们的操作，不便咱们调用。$('div').hide(); // 页面中所有的div全副暗藏，不必循环操作<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>隐式迭代</title> </head> <script src="jquery-3.5.1.js"></script> <body> <div>hello word</div> <div>hello word</div> <div>hello word</div> <div>hello word</div> <ul> <li>hello word</li> <li>hello word</li> <li>hello word</li> <li>hello word</li> </ul> </body> <script> var div = document.querySelectorAll('div') for (var i = 0; i < div.length; i++) { div[i].style.backgroundColor = 'pink' } $('ul li').css('background', 'yellow') </script> </html>链式操作
// 链式编程是为了节俭代码量，看起来更优雅。$(this).css('color', 'red').sibling().css('color', ''); JQuery中的排他思维
// 想要多选一的成果，排他思维：以后元素设置款式，其余的兄弟元素革除款式。$(this).css(“color”,”red”);$(this).siblings(). css(“color”,””);<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JQuery中的排它思维</title> <script src="./jquery-3.5.1.js"></script> </head> <body> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> </body> <script> // jquery中的排他思维 $(function () { $('button').click(function () { // $(this).siblings('button').css('background', '') // $(this).css('background', 'red') // 链式编程 $(this).css('background', 'red').siblings('button').css('background', "") }) }) </script> </html>淘宝精品
外围思路
思路剖析:
1.外围原理：鼠标通过左侧盒子某个小li，就让内容区盒子绝对应图片显示，其余的图片暗藏。
2.须要失去以后小li 的索引号，就能够显示对应索引号的图片
3.jQuery 失去以后元素索引号 $(this).index()
4.两头对应的图片，能够通过 eq(index) 办法去抉择
5.显示元素 show() 暗藏元素 hide()
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘宝精品图</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; font-size: 14px; } 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; } #title, #content { float: left; } #title li { background: url(img/lili.jpg) repeat-x; } #title li a { display: block; width: 48px; height: 28px; border-radius: 1px solid pink; text-align: center; line-height: 28px; color: black; } #title li a:hover { background-image: url(img/abg.gif); } #content { border-left: 1px solid pink; border-right: 1px solid pink; } </style> </head> <body> <div class="wrapper"> <ul id="title"> <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="./img/女靴.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/雪地靴.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/冬裙.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/呢大衣.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/毛衣.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/棉服.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/女裤.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/羽绒服.jpg" alt=""></a> </div> <div> <a href="#"><img src="./img/牛仔裤.jpg"></a> </div> </div> </div> <script> $(function() { $("#title li").click(function() { //取得以后li的索引号 var index = $(this).index(); //进行链式操作 console.log(index) $('#content div').eq(index).show().siblings().hide() }) }) </script> </body></html>tab栏切换
思路剖析: 1.点击上部的li，以后li 增加current类，其余兄弟移除类。 2.点击的同时，失去以后li 的索引号 3.让下部外面相应索引号的item显示，其余的item暗藏<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tab栏切换</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } ul { overflow: hidden; list-style: none; } .tab { width: 800px; margin: 200px auto; } .tab-list li { box-sizing: border-box; float: left; width: 200px; height: 30px; color: white; text-align: center; padding: 7px 0px; font: normal normal 14px '楷体'; background-color: rgb(70, 99, 117) } .tab-con { width: 800px; } .tab-con div { width: 100%; height: 30PX; text-align: center; line-height: 30PX; background-color: PINK; margin-bottom: 1px; } .curent { background-color: skyblue !important; } .items { display: none; } </style> </head> <body> <div class="tab"> <div class="tab-list"> <ul> <li class="curent">选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> </ul> </div> <div class="tab-con"> <div class="items" style="display: block;">选项一</div> <div class="items">选项二</div> <div class="items">选项三</div> <div class="items">选项四</div> </div> </div> <script> $('.tab-list li').click(function() { $(this).addClass('curent').siblings('li').removeClass('curent'); // 获取索引 var index = $(this).index(); $('.tab-con div').eq(index).show().siblings().hide() }) </script> </body></html>JQury款式操作
操作CSS办法
// 1.参数只写属性名，则是返回属性值var strColor = $(this).css('color');// 2. 参数是属性名，属性值，逗号分隔，是设置一组款式，属性必须加引号，值如果是数字能够不必跟单位和引号$(this).css(''color'', ''red'');// 3. 参数能够是对象模式，不便设置多组款式。属性名和属性值用冒号隔开， 属性能够不必加引号$(this).css({ "color":"white","font-size":"20px"});操作类款式办法
// 1.增加类$("div").addClass("current");// 2.删除类$("div").removeClass("current");// 3.切换类$("div").toggleClass("current");<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Jquery类操作</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } .one { width: 200px; height: 200px; margin: 200px auto; background-color: #0000FF; } .two { background-color: purple; transition: all 2s; transform: rotate(360deg); } </style></head><body><div class="one"></div><script> $('.one').click(function () { $(this).toggleClass('two') }) </script></body></html>JQuery中的成果
显示与暗藏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery成果之显示与暗藏</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } .box { width: 145px; height: 400px; background-color: purple; } </style> </head> <body> <button>显示</button> <button>暗藏</button> <button>显示与暗藏</button> <div class="box"></div> <script> $(function() { $('button').eq(0).click(function() { $('.box').show(1000, function() { console.log('显示') }) }) $('button').eq(1).click(function() { $('.box').hide(1000, function() { console.log('暗藏') }) }) $('button').eq(2).click(function() { $('.box').toggle(1000, function() { console.log('显示与暗藏') }) }) }) </script> </body></html>滑入滑出
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery成果之滑动与滑落</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } p { display: flex; } button { flex: 3; } </style> </head> <body> <p> <button>上滑动</button> <button>下滑动</button> <button>切换滑动</button> </p> <div><img src="img/MI.png"></div> <script> $(function() { $('button').eq(0).click(function() { $('div').slideUp(1000, function() { console.log("向上滑动") }) }) $('button').eq(1).click(function() { $('div').slideDown(1000, function() { console.log("向上滑动") }) }) $('button').eq(2).click(function() { $('div').slideToggle(1000, function() { console.log("向上滑动") }) }) }) </script> </body></html>事件切换
JQuery为咱们提供了一个新事件，相当于css中的hover
hover([over,]out) // 其中over和out为两个函数- over:鼠标移到元素上要触发的函数（相当于mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
- 如果只写一个函数，则鼠标通过和来到都会触发它
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery成果之滑动与滑落</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } p { display: flex; } button { flex: 3; } </style> </head> <body> <p> <button>按钮</button> <button>按钮</button> </p> <div><img src="img/MI.png"></div> <script> //第一种办法 /*$(function(){ $('button').hover(function(){ // 第一个回调函数相当于鼠标通过 $('div').slideUp(1000) },function(){ // 第二个回调函数相当于鼠标来到 $('div').slideDown(1000) }) })*/ // 第二种办法 利用hover事件切换与slideToggle实现成果 $(function() { $('button').hover(function() { $('div').stop().slideToggle() }) }) </script> </body></html>自定义动画
自定义动画十分弱小，通过参数上的传递能够模仿很多动画，办法是animate();
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery中的animate动画</title> <script src="./jquery-3.5.1.js"></script> <style> * { margin: 0; padding: 0; } body { display: flex; } button { flex: 1; } .box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <button>点击挪动</button> <div class="box"></div> <script> $(function() { $('button').click(function() { $('.box').animate({ left: 200, top: 100, }, 1000) }) }) </script> </body></html>手风琴
鼠标通过某个小li 有两步操作
1.以后小li 宽度变为 224px， 同时外面的小图片淡出，大图片淡入
2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JQuery手风琴成果</title> <style> * { margin: 0; padding: 0; } img { display: block; } ul { list-style: none; } .king { width: 720px; margin: 200px auto; background: url(./img/bg.png) no-repeat; overflow: hidden; padding: 10px; } .king li { position: relative; float: left; width: 69px; height: 69px; margin-right: 10px; } .king li.curent { width: 224px; } .king li.curent .small { display: none; } .king li.curent .big { display: block; } .king .big { width: 224px; display: none; } .king .small { position: absolute; top: 0; left: 0; width: 69px; height: 69px; background-color: blue; border-radius: 5px; } </style> <script src="./jquery-3.5.1.js"></script> </head> <body> <div class="king"> <ul> <li class="curent"> <a href="#"><img src="./img/m.png" alt="" class="big"><img src="./img/m1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/t.png" alt="" class="big"><img src="./img/t1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/w.png" alt="" class="big"><img src="./img/w1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/z.png" alt="" class="big"><img src="./img/z1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/c.png" alt="" class="big"><img src="./img/c1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a> </li> <li> <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a> </li> </ul> </div> <script> //入口函数 $(function() { // 鼠标通过某个小li 有两步操作： $(".king li").mouseenter(function() { // 1.以后小li 宽度变为 224px， 同时外面的小图片淡出，大图片淡入 $(this).stop().animate({ width: 224 }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn() // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出 $(this).siblings('li').stop().animate({ width: 69 }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut() }) }); </script> </body></html>