苏州网站优化公司,数据库端口 wordpress,南昌网站建设服务平台,网页设计入门教学视频jQuery 选择器、样式和效果
代码下载
jQuery 介绍
JavaScript库#xff1a;即 library#xff0c;是一个封装好的特定的集合#xff08;方法和函数#xff09;。从封装一大堆函数的角度理解库#xff0c;就是在这个库中#xff0c;封装了很多预先定义好的函数在里面即 library是一个封装好的特定的集合方法和函数。从封装一大堆函数的角度理解库就是在这个库中封装了很多预先定义好的函数在里面比如动画animate、hide、show比如获取元素等。 简单理解 就是一个JS 文件里面对我们原生js代码进行了封装存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery就是为了快速方便的操作DOM里面基本都是函数方法。 常见的JavaScript 库jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等这些库都是对原生 JavaScript 的封装内部都是用 JavaScript 实现的。
jQuery总体概况如下 :
jQuery 是一个快速、简洁的 JavaScript 库其设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。j 就是 JavaScript Query 查询 意思就是查询js把js中的DOM操作做了封装我们可以快速的查询使用里面的功能。jQuery 封装了 JavaScript 常用的功能代码优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。学习jQuery本质 就是学习调用这些函数方法。jQuery 出现的目的是加快前端人员的开发速度可以非常方便的调用和使用它从而提高开发效率。
jQuery的优点
轻量级。核心文件才几十kb不会影响页面加载速度。跨浏览器兼容基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件例如树形菜单、日期控件、轮播图等。免费、开源。
jQuery 的基本使用
jQuery的官网地址 https://jquery.com/ 官网即可下载最新版本。 各个版本的下载https://code.jquery.com/ 版本介绍 1x 兼容 IE 678 等低版本浏览器 官网不再更新 2x 不兼容 IE 678 等低版本浏览器 官网不再更新 3x 不兼容 IE 678 等低版本浏览器 是官方主要更新维护的版本 体验jQuery
引入jQuery文件。在文档最末尾插入 script 标签书写体验代码。$(‘div’).hide() 可以隐藏盒子。
jQuery中常见的两种入口函数
// 第一种: 简单易用。
$(function () { ... // 此处是页面 DOM 加载完成的入口
}) ; // 第二种: 繁琐但是也可以实现
$(document).ready(function(){... // 此处是页面DOM加载完成的入口
});总结
等着 DOM 结构渲染完毕即可执行内部代码不必等到所有外部资源加载完成jQuery 帮我们完成了封装。相当于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。
jQuery中的顶级对象$
$是 jQuery 的别称在代码中可以使用 jQuery 代替但一般为了方便通常都直接使用 $ 。$是 jQuery 的顶级对象相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的总结如下 :
用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象。jQuery 对象本质是 利用$对DOM 对象包装后产生的对象伪数组形式存储。 注意 只有 jQuery 对象才能使用 jQuery 方法DOM 对象则使用原生的 JavaScirpt 方法。 jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
// 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)
总结实际开发比较常用的是把DOM对象转换为jQuery对象这样能够调用功能更加强大的jQuery中的方法。
jQuery 选择器
原生 JS 获取元素方式很多很杂而且兼容性情况不一致因此 jQuery 给我们做了封装使获取元素统一标准。
基础选择器
$(选择器) // 里面选择器直接写 CSS 选择器即可但是要加引号 名称用法描述ID选择器$(‘#id’)获取指定ID的元素全选选择器$(‘*’)匹配所有元素类选择器$(‘.class’)获取同一类class的元素标签选择器$(‘div’)获取同一类标签的所有元素并集选择器$(‘div,p,li’)获取多个元素交集选择器$(‘li.current’)交集元素
层级选择器
层级选择器最常用的两个分别为后代选择器和子代选择器。
名称用法描述子代选择器$ (“ul›li”)使用号获取亲儿子层级的元素注意并不会获取孙子层级的元素后代选择器$(“ul li”)使用空格代表后代选择器获取ul下的所有li元素包括孙子等
基础选择器和层级选择器案例代码
bodydiv我是div/divdiv classnav我是nav div/divp我是p/pulli我是ul 的/lili我是ul 的/li li我是ul 的/li/ulscript$(function() {console.log($(.nav));console.log($(ul li));})/script
/body筛选选择器
筛选选择器顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
语法用法描述:first$(‘li:first’)获取第一个i元素:last$(‘li:last’)获取最后一个元素:eq(index)$(‘li:eq(2)’)获取到的1i元素中选择索引1号为2的元素索引号index从0开始:odd$(li:odd’)获取到的1i元素中选择素号1号为奇数的元素:even$(li:even’)获取到的li元素中洗择索引1号为偶数的元素
案例代码
bodyulli多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/li/ulolli多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/li/olscript$(function() {$(ul li:first).css(color, red);$(ul li:eq(2)).css(color, blue);$(ol li:odd).css(color, skyblue);$(ol li:even).css(color, pink);})/script
/body另: jQuery中还有一些筛选方法类似DOM中的通过一个节点找另外一个节点父、子、兄以外有所加强。
语法用法说明parent ()$ (“li”). parent()查找父级children(selector)$(“ul”).children(“li”)相当于 (“u11i”)最近一级亲儿子find(selector)$(“ul”).find(“li”)相当于(“ul li”),后代选择器siblings (selector)$(“.first”).siblings (“li”)查找兄弟节点不包括自己本身nextAll([expr])$(“. first”).nextAll()查找当前元素之后所有的同辈元素prevtAll([expr])$ (“.last”).prevAll()查找当前元素之前所有的同辈元素hasClass(class)$(‘div’).hasClass (“protected”)检查当前的元素是否含有某个特定的类如果有则返回trueeq(index)$(“li”).eq(2)相当于 (“1i:eq(2)”),index 从0开始重点记住: parent() children() find() siblings() eq()
新浪下拉菜单案例 $(.sina ulli).mouseenter(function() {$(this).children(ol).show();});$(.sina ulli).mouseleave(function() {$(this).children(ol).hide();});知识铺垫
jQuery 设置样式
$(div).css(属性, 值) jQuery 里面的排他思想
// 想要多选一的效果排他思想当前元素设置样式其余的兄弟元素清除样式。
$(this).css(“color”,“red”);
$(this).siblings(). css(“color”,“”);隐式迭代
// 遍历内部 DOM 元素伪数组形式存储的过程就叫做隐式迭代。
// 简单理解给匹配到的所有元素进行循环遍历执行相应的方法而不用我们再进行循环简化我们的操作方便我们调用。
$(div).hide(); // 页面中所有的div全部隐藏不用循环操作链式编程
// 链式编程是为了节省代码量看起来更优雅。
$(this).css(color, red).sibling().css(color, ); 淘宝服饰精品案例
思路分析:
核心原理鼠标经过左侧盒子某个小li就让内容区盒子相对应图片显示其余的图片隐藏。需要得到当前小li 的索引号就可以显示对应索引号的图片jQuery 得到当前元素索引号 $(this).index()中间对应的图片可以通过 eq(index) 方法去选择显示元素 show() 隐藏元素 hide() $(.taobao ulli).mouseenter(function() {$(this).addClass(current).siblings().removeClass(current);$(.taobao div img).eq($(this).index()).show().siblings().hide();});jQuery 样式操作
jQuery中常用的样式操作有两种css() 和 设置类样式方法
操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式 也可以操作类修改多个样式。 常用以下三种形式 :
// 1.参数只写属性名则是返回属性值
var strColor $(this).css(color);// 2. 参数是属性名属性值逗号分隔是设置一组样式属性必须加引号值如果是数字可以不用跟单位和引号
$(this).css(color, red);// 3. 参数可以是对象形式方便设置多组样式。属性名和属性值用冒号隔开 属性可以不用加引号
$(this).css({ color:white,font-size:20px}); 注意css() 多用于样式少时操作多了则不太方便。 设置类样式方法
作用等同于以前的 classList可以操作类样式 注意操作类里面的参数不要加点。常用的三种设置类样式方法
// 1.添加类
$(div).addClass(current);// 2.删除类
$(div).removeClass(current);// 3.切换类
$(div).toggleClass(current);
注意
设置类样式方法比较适合样式多时操作可以弥补css()的不足。原生 JS 中 className 会覆盖元素原先里面的类名jQuery 里面类操作只是对指定类进行操作不影响原先的类名。
tab 栏切换案例
思路分析:
点击上部的li当前li 添加current类其余兄弟移除类。点击的同时得到当前li 的索引号让下部里面相应索引号的item显示其余的item隐藏
jQuery 效果
jQuery 给我们封装了很多动画效果最为常见的如下
显示隐藏show() / hide() / toggle() ;划入画出slideDown() / slideUp() / slideToggle() ;淡入淡出fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;自定义动画animate() ; 注意 动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法可以停止动画排队stop() ; 显示隐藏
显示隐藏动画常见有三个方法show() / hide() / toggle() ;
显示语法规范
show([speed,[easing],[fn]]);参数都可以省略 无动画直接显示。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果默认是“swing”可用参数“linear”。fn: 回调函数在动画完成时执行的函数每个元素执行一次。
隐藏语法规范
hide([speed,[easing],[fn]]);参数都可以省略 无动画直接显示。speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing: (Optional) 用来指定切换效果默认是“swing”可用参数“linear”。fn: 回调函数在动画完成时执行的函数每个元素执行一次。 切换语法规范
toggle([speed,[easing],[fn]]);参数都可以省略 无动画直接显示。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果默认是“swing”可用参数“linear”。fn: 回调函数在动画完成时执行的函数每个元素执行一次。 建议:平时一般不带参数直接显示隐藏即可。
代码演示
bodybutton显示/buttonbutton隐藏/buttonbutton切换/buttondiv/divscript$(function() {$(button).eq(0).click(function() {$(div).show(1000, function() {alert(1);});})$(button).eq(1).click(function() {$(div).hide(1000, function() {alert(1);});})$(button).eq(2).click(function() {$(div).toggle(1000);})// 一般情况下我们都不加参数直接显示隐藏就可以了});/script
/body滑入滑出
滑入滑出动画常见有三个方法slideDown() / slideUp() / slideToggle() ;
语法规范同上
淡入淡出
淡入淡出动画常见有四个方法fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
语法规范同上
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]]);opacity 透明度必须写取值 0~1 之间。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写easing:(Optional) 用来指定切换效果默认是“swing”可用参数“linear”。fn: 回调函数在动画完成时执行的函数每个元素执行一次。
代码演示
bodybutton淡入效果/buttonbutton淡出效果/buttonbutton淡入淡出切换/buttonbutton修改透明度/buttondiv/divscript$(function() {$(button).eq(0).click(function() {// 淡入 fadeIn()$(div).fadeIn(1000);})$(button).eq(1).click(function() {// 淡出 fadeOut()$(div).fadeOut(1000);})$(button).eq(2).click(function() {// 淡入淡出切换 fadeToggle()$(div).fadeToggle(1000);});$(button).eq(3).click(function() {// 修改透明度 fadeTo() 这个速度和透明度要必须写$(div).fadeTo(1000, 0.5);});});/script
/body自定义动画
自定义动画非常强大通过参数的传递可以模拟以上所有动画方法为animate() ;
语法
animate(params,[speed],[easing],[fn]);params: 想要更改的样式属性以对象形式传递必须写。 属性名可以不用带引号 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果默认是“swing”可用参数“linear”。fn: 回调函数在动画完成时执行的函数每个元素执行一次。
代码演示
bodybutton动起来/buttondiv/divscript$(function() {$(button).click(function() {$(div).animate({left: 500,top: 300,opacity: .4,width: 500}, 500);})})/script
/body停止动画排队
动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。停止动画排队的方法为stop()
stop() 方法用于停止动画或效果。stop() 写到动画或者效果的前面 相当于停止结束上一次的动画。
总结: 每次使用动画之前先调用 stop() , 再调用动画。
事件切换
jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下
语法
hover([over,]out) // 其中over和out为两个函数over:鼠标移到元素上要触发的函数相当于mouseenterout:鼠标移出元素要触发的函数相当于mouseleave如果只写一个函数则鼠标经过和离开都会触发它
hover事件和停止动画排列案例
bodyul classnavlia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/li/ulscript$(function() {// 鼠标经过// $(.navli).mouseover(function() {// // $(this) jQuery 当前元素 this不要加引号// // show() 显示元素 hide() 隐藏元素// $(this).children(ul).slideDown(200);// });// // 鼠标离开// $(.navli).mouseout(function() {// $(this).children(ul).slideUp(200);// });// 1. 事件切换 hover 就是鼠标经过和离开的复合写法// $(.navli).hover(function() {// $(this).children(ul).slideDown(200);// }, function() {// $(this).children(ul).slideUp(200);// });// 2. 事件切换 hover 如果只写一个函数那么鼠标经过和鼠标离开都会触发这个函数$(.navli).hover(function() {// stop 方法必须写到动画的前面$(this).children(ul).stop().slideToggle();});})/script
/body突出显示案例 $(.show ul li).hover(function() {$(this).siblings().stop().fadeTo(namal, 0.5);}, function() {$(this).siblings().stop().fadeTo(namal, 1);});王者荣耀手风琴效果案例
鼠标经过某个小li 有两步操作当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入其余兄弟小li宽度变为69px 小图片淡入 大图片淡出 $(.king ul li).mouseover(function() {$(this).stop().animate({width: 224}, normal).children(img:first).stop().fadeIn(normal).siblings().stop().fadeOut(normal);$(this).siblings(li).stop().animate({width: 69}, normal).find(img:first).stop().fadeOut(normal).siblings().stop().fadeIn(normal);})
