昔洛 的个人博客

Bug不空,誓不成佛

目录
jQuery (上)
/      

jQuery (上)

学习内容

  • jQuery 简介
    • jQuery 入门
    • jQuery 入口函数
    • jQuery 对象
  • jQuery 选择器
  • jQuery 样式操作
  • jQuery 动画效果
  • jQuery 属性操作

一、jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库(js文件),是一个封装好的特定的集合(方法和函数),学习 jQuery 本质就是学习调用这些函数和方法。

入门

  • jQuery 官方地址:https://jquery.com/
  • jQuery 优点:
    • 轻量级,文件小,对页面加载速度几乎没有影响
    • 有链式编程、隐式迭代的特点
    • 跨浏览器兼容,基本兼容了现在主流的浏览器
    • 样式、动画支持、大大简化了 DOM 操作
    • 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等

入口函数

  • 第一种
$(function () {
	... // 此处是页面 DOM 加载完成的入口
});
  • 第二种
$(document).ready(function(){
	... // 此处是页面 DOM 加载完成的入口
});

注意:
等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码

jQuery 对象和 DOM 对象

js 的对象只能用 js 的属性和方法
jq 的对象只能用 jq 的属性和方法

  • DOM 对象可以与 jQuery 对象相互转换
    • DOM 对象转换为 jQuery 对象:$(DOM对象)
    • jQuery 对象转换为 DOM 对象
      • $(‘div’)[index] index 为索引
      • $(‘div’).get(index) index 为索引

二、jQuery 选择器

$(‘选择器’) 里面直接写 css 选择器即可

  • CSS 选择器
选择器 含义
$(‘#id’) 指定 id 元素
$(‘*’) 所有元素
$(‘.class’) 指定 class 元素
$(‘div’) 根据标签获取元素
$(‘div,p,li’) 获取多个
$(‘li.class’) 交集获取
$(‘ul>li’) 子代(亲儿子)选择器
$(‘ul li’) 后代选择
  • 筛选选择器
选择器 含义
$(‘li:first’) 第一个元素
$(‘li:last’) 最后一个元素
$(‘li:eq(2)’) 索引为2的元素
$(‘li:odd’) 索引为奇数
$(‘li:even’) 索引为偶数

注意:索引是从 0 开始的,所以奇偶选择器可能会与实际效果相反

  • jQuery 筛选方法
    对象.方法()
方法 含义
$(‘li’).parent() 获取父级元素
$(‘ul’).children(‘li’) 子集(亲儿子),如果不加参数,获取所有的,如果添加指定的元素,按照指定的找
$(‘ul’).find(‘li’) 获取所有后代,有参数则按照指定参数找
$(‘li’).siblings(‘li’) 兄弟选择器,获取除自己外所有的亲戚,参数含义同上
$(‘li’).nextAll() 获取后面的
$(‘li’).prevAll() 获取前面的
$(‘div’).hasClass(‘aaa’) 判断是否具有某个类名
$(‘div’).eq(index) 指定索引方法
  • jQuery 利用 siblings 兄弟筛选的排他思想
$(this).css('color','red'); // 自己设置样式
$(this).siblings().css('color',''); // 他的兄弟设置其他的样式

三、jQuery 样式操作

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

  • 操作 css 方法

    • 语法:$(this).css(arguments);
    • 参数只写属性名,则是返回属性值:$(this).css(‘color’);
    • 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号: $(this).css(‘color’,‘red’);
    • 参数可以是对象形式,方便设置多组样式。属性名和属性值都用冒号隔开,属性可以不用加引号:$(this).css({‘color’:‘white’,‘font-size’:‘20px’});
  • 设置类样式方法

    操作类似于 document 的 classList

    • 添加类:$(‘div’).addClass(‘current’);
    • 移除类:$(‘div’).removeClass(‘current’);
    • 切换类 $(‘div’).toggleClass(‘current’);

四、jQuery 的动画效果

  • 显示隐藏效果

    show([speed,[easing],[fn]])
    hide([speed,[easing],[fn]])
    toggle([speed,[easing],[fn]])

  • 滑动效果

    slideDown([speed,[easing],[fn]])
    slideUp([speed,[easing],[fn]])
    slideToggle([speed,[easing],[fn]])

  • 淡入淡出

    fadeIn([speed,[easing],[fn]])【淡入】
    fadeOut([speed,[easing],[fn]])【淡出】
    fadeToggle([speed,[easing],[fn]])【切换】
    fadeTo([[speed],opacity,[easing],[fn]])【到大某个位置】

    • 参数都可以省略,无动画则直接显示
    • speed:三种预定速度之一的字符串(‘slow’,‘normal’,`fast’)或 表示动画时长的毫秒数值
    • easing:用来指定切换的效果,默认是 ‘swing’,可用参数 ‘linear’
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次
  • 事件切换:hover([over,]out)

    • over:鼠标移到元素行要触发的函数(相当于mouseover/mouseenter)
    • out:鼠标移出元素要触发的函数(相当于 mouseout/mouseleave)
    • 如果只写一个函数,则鼠标经过和离开都会触发它
  • 动画队列及停止排队的方法

    动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

    • 停止排队:$(‘div’).stop(),用于停止动画或效果
    • 注意:stop() 写到动画或者效果的前面,相当于停止结束上一次的动画
  • 自定义动画:
    • 语法:animate(params,[speed],[easing],[fn])
    • 参数:
      • params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
      • speed:三种预定时间速度之一的字符串,(‘slow’,‘normal’,‘fast’)或表示动画时长的毫秒数值
      • easing:用于指定切换效果,默认是‘swing’,可用参数‘linear’
      • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

    需要注意的是 animate 是不能改变颜色的,所以不能把颜色变化做动画效果,不过可以使用自定义插件来完成。另外,animate 自定义属性一定要是 元素 才可以设置,像 document 这是文档对象,并非元素,也就是 <> 的元素才可使用 animate 自定义动画。

五、jQuery 属性操作

  • 设置或获取元素固有属性值 prop()
    • 语法:$().prop(‘属性’)
    • 设置属性值:$().prop(属性,值)
    • 注意:jQuery1.6 之后,对于 checked,selected,disabled 这类 boolean 类型的属性来说,不能用 attr 方法,只能使用 prop 方法。
  • 设置或获取元素自定义属性 attr()
    • 语法:$().attr(‘属性’) 类似于原生 getAttribute()
    • 设置属性值:$().attr(属性,值)
  • 数据缓存 data()

    data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构,所以元素上无法查看,一旦页面刷新,之前存放的数据都将被移除

    • 语法:$().data(‘name’,‘value’) 添加数据,$().data(‘name’) 获取数据值
  • 表单属性 val()
    • 语法:$().val()获取值 相当于原生方法 value(),$().val(‘值’) 设置值
  • 设置元素内容:
    • html()方法,相当于原生 innerHTML() $().html() 获取内容,$().html(context) 设置内容,可解析标签
    • text()方法,相当于原生 innerText() $().text() 获取内容,$().text(context) 设置内容,不解析标签。
内事不懂问百度,外事不懂问谷歌~
评论
歌名 - 歌手
0:00