jQuery笔记(1) (多图)

2022-09-20 20:25:00 浏览数 (1)

jQuery

终于开始学jQuery啦,这次的封面也是自己做的哟~先来看看我们的目标吧!

JavaScript库

即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如animate,hide,show,比如获取元素等/

简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放在里面,这样我们可以快速高效地使用这些封装好的功能了.

比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法).

常见的JavaScript库

  • jQuery
  • Prototype
  • Yui
  • Dojo
  • ext JS
  • 移动端的zepto

这些都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery.

jQuery是一个快速,简洁的JavaScript库,其设计的宗旨是'write less, do more',即倡导更少的代码做更多的事情

j就是JavaScript;Query查询;意思就是查询JS,把JS中的DOM操作做了封装,我们可以快速的查询使用里面的功能.

jQuery封装了JavaScript常用的功能代码,优化了DOM操作,事件处理,动画设计和Ajax交互.

学习jQuery本质: 就是学习调用这些函数(方法)

优点

  • 轻量级.核心文件才几十kb,不会影响页面加载速度
  • 跨浏览器兼容,基本兼容了现在主流的浏览器
  • 链式编程,隐式迭代
  • 对事件,样式,动画支持,大大简化了DOM操作
  • 支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单,日期控件,轮播图等.
  • 免费,开源.

如何使用:

首先我们去到jQuery官网,点击下载

压缩的比较厉害,我们直接粘贴到我们自己创建的jQuery.min.js文件里就好了

现在做一个操作感受一下jQuery的优势:

隐藏box盒子

居然只要一行就能搞定了!

和之前一样,jQuery也有入口函数,即窗口加载的事件

jQuery的入口函数

第一种(推荐):

$ (function ( ) {

... //此处是DOM加载完成的入口 } );

第二种:

$(document).ready(function () {

...//此处是DOM加载完成的入口

})

jQuery的顶级对象$

  1. 是jQuery的别称,在代码中可以使用jQuery代替,但是一般为了方便,通常都使用
  2. 是jQuery的顶级对象,相当于原生JavaScript中的window.把元素利用包装成jQuery对象,就可以调用jQuery的方法.

jQuery对象和DOM对象

  1. 用原生的开始获取的对象就是DOM对象
  2. jQuery方法获取的元素就是jQuery对象
  3. jQuery对象的本质是: 利用$DOM对象包装后产生的对象(伪数组形式存储)

打印box的jQuery对象:

注意: jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript属性和方法

jQuery对象和DOM对象之间是可以相互转换的.

因为原生JS比jQuery大,原生的一些属性和方法jQuery没有给我们封装,想要使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用.

  1. DOM对象转换成jQuery对象: $(DOM对象)
  2. jQuery对象转换成DOM对象(两种方式)
    1. $('div')[index] index是索引号
    2. $('div').get(index)

jQuery常用API

目标:

(感觉好累)

jQuery选择器

$('选择器') 里面选择器直接写CSS选择器即可,但是要加引号

jQuery设置属性

$('div').css('属性','值')

但是很奇怪吧,我们的jQuery对象是一个伪数组,为什么它能同时给四个box设置背景颜色呢?按理来说,应该要循环遍历修改才能使我们的背景颜色都变成粉色.这是因为jQuery有隐式迭代.

隐式迭代(重要)

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代

简单理解: 给匹配到的所有元素进行遍历循环,执行相应的方法,而不用我们再去循环,简化我们的操作,方便我们调用.

筛选选择器

:first

:even

注意这个和CSS的是不一样的,jQuery的是建立在索引号的基础上的偶数

:eq(index)

jQuery筛选方法(重要)

parent( ) 返回的是最近一级的父级元素 亲爸爸

children(selector) 只选择亲儿子 相当于'>'

find(selector) 选中所有的子代元素

先来做一个微博下拉菜单的案例,真的非常方便!!!

菜单是这样的,我们的需求是当鼠标经过上面的li时,下面的菜单会自己弹出来.

让下拉菜单显示的方法

鼠标离开后ul继续隐藏

siblings(selector) 查找所有的兄弟元素

eq(index) 根据索引选择元素 但是更推荐下面这种,如果index为变量时方便修改,第一种的index在引号内,不好修改,需要用" "拼接.

hasClass('判断的类名') 判断元素是否有这个类名

重点记住: parent() children() find() siblings() eq()

jQuery里面的排他思想

想要多选一的效果,排他思想: 当前元素设置样式.其余的兄弟元素清除样式.我们用原生的JS方法是很麻烦的,要双重循环才能实现排他思想,我们看看jQuery是怎么实现的吧.

原本要写两次循环的排他思想,现在只要两行代码就能搞定!

再做一个案例:淘宝精品案例

当我们鼠标移到商品名称时,相应的图片显示出来,结构写出来是这样的:

内容的结构是这样的:

jQuery的写法:

真的超级方便快捷啊!!狠狠爱了

链式编程

链式编程是为了节省代码量,看起来更优雅

比如我们之前的代码:

我们可以把他简化成这样:

jQuery样式操作

操作CSS方法

jQuery可以使用CSS方法来修改简单元素样式,也可以操作类,修改多个样式

1.参数只写属性名,则是返回属性值

$(this).css('color');

就会返回该元素的颜色

2.参数是属性名,属性值,逗号分割,是设置一组样式,属性必须加引号,值如果是数字可以不加单位和引号

$(this).css('color','red')

3.参数可以是对象形式,方便设置多组样式.属性名和属性值用冒号分开,属性可以不加引号

$(this).css({'color':'white', 'font-size': '20px'}')

没错,如果不加引号的话就只能使用驼峰命名法,后面的值如果不是数字的话就必须得加引号

设置类样式方法

作用等同于以前的classList,可以操作样式,注意操作类里面的参数不要加点

添加类

$('div').addClass('类名')

移除类

$('div').removeClass('类名');

切换类

$('div').toggleClass('类名');

如果有这个类,就删除掉,如果没有就添加

加个过渡更好看

这次我们再用jQuery的方法做一次之前的淘宝tab栏切换案例

看看以前的原生JS的代码:

对比一下真的很香!!!

类操作和className的区别

原生JS中的className会覆盖元素原先里面的类名.

jQuery里面类操作只是对指定类进行操作,不影响原先的类名

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍jQuery动画‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jQuery给我们封装了很多动画效果,最常见的如下:

显示隐藏效果

语法:

显示: hide([speed, [easing], [fn]])

隐藏: hide([speed, [easing], [fn]])

切换: hide([speed, [easing], [fn]])

显示参数

  1. 参数都可以省略,无动画直接显示
  2. speed: 三种预定速度之一的字符串('slow','normal',or 'fast')或表示动画动画时长的毫秒数值,(如: 1000)
  3. easing: 用来指定切换效果,默认是"swing",可用参数"linear"
  4. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

但是一般都不用这个,因为这个动画实在太丑.

先休息啦,今天也学了10个视频(虽然很少),但是我累了555

本来打算晚上发的，但是发现很多我做的东西没了，比如给一些重点的地方划线啥的，都消失了。。好无语啊，明天再搞搞就发

现在去看帅哥

jquery javascript css

0 人点赞