02 jQuery 常用API

1.jQuery选择器

1.1 jQuery选择器

原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，获取元素统一标准

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

语法

名称 用法 描述.
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $(*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素
子代选择器 $("ul>li"); 使用>号，获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格，代表后代选择器，获取ul下的所有Ii元素，包括孙子等

1.2 隐式迭代

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

不用我们再进行循环，会给所有匹配到的元素进行循环遍历

语法 用法 描述
:first $(li:first') 获取第-个i元素
:last $(Ii:last') 获取最后-个i元素
:eq(index) $'li:eq(2)") 获取到的Ii元素中，选择索引号为2的元素,索引号index从0开始。
:odd $("l:odd") 获取到的1i元素中，选择索引号为奇数的元素
:even $("Ii:even") 获取到的1i元素中，选择索引号为偶数的元素

1.3 jq筛选方法

语法 用法 说明
parent() $("1i").parent(); 查找父级
children(selector) $("ul").children("1i") 相当于$("ul>li")，最近一级(亲儿子)
find(selector) $("u1").find("li"); 相当于$("ul li"),后代选择器
siblings(selector) $(".first").siblings("1i"); 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $(".last").prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $('div').hasClass("protected") 检查当前的元素是否含有某个特定的类,如
果有，则返回true
eq( index) $("li"). eq(2); 相当于$("1i:eq(2)"), index从0开始

演示





Document



  • 1 第一个

  • 1

  • 1

  • 1

  • 1

  • 1



  1. 2

  2. 2

  3. 2

  4. 2

  5. 2

  6. 2



1.6 jq的排他思想

多选一的效果，排他思想：设置当前元素样式，其余兄弟元素清除




Document










1.7 链式编程

为了节省代码量，看起来优雅

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

2.jQuery样式操作

2.1 操作css方法

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

1.参数只写属性名，则是返回属性值
$(this).css("color")

2.参数是属性名，属性值，逗号分隔，设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和导引
$(this).css("color","red")

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

2.2 设置类样式方法

一个个去改过于麻烦 直接给设置一个类 把类名给标签

  1. 添加类名

    $("选择器").addClass("类名")

  2. 溢出类

    $(this).removeClass("类名")

3.切换

$("div").toggleClass("类名")

2.3 类操作与className 的区别

原生js中classname会覆盖元素原先里面的类名

jquery里面类操作只是对指定类进行操作，不影响原来的类名

3.jQuery效果

封装了很多动画效果，最为常见的如下

显示隐藏

show();
hide();
toggle()

滑动

slideDown();
slideUp();
slideToggle();

深入淡出

fadeln()
fadeOut()
fadeToggle()
fadeTo()

自定义动画

animate()

3.1 显示隐藏效果

1.显示隐藏语法规范

show([speed],[easing],[fn]) // 显示
hide([speed],[easing],[fn]) // 隐藏
toggle([speed],[easing],[fn]) //切换

2.显示参数

参数都可以省略，无动画直接显示

speed:三种预定速度之一的字符串（"slow","normal","fast"） 或表示动画时长的毫秒数值如：1000

easing:(Optional)用来指定切换效果，默认是"swing", 可用参数"linear"

fn:回调函数，在动画完成时执行函数，每个元素执行一次





Document








3.2 滑动效果

  1. 下滑效果语法规范

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

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

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

  2. 下滑效果参数

（1）参数都可以省略。

（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

演示





Document








3.3 事件切换

hover([over,]out)

over:鼠标移动到元素上要触发的函数（mouseenter）

out:鼠标移出元素触发的函数(mouseleave)

3.4 动画队列极其停止排队方法

  1. 动画或效果队列

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

  1. 停止排队

(1)stop()方法用于停止动画或效果

(2)注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

3.5 淡入淡出效果

  1. 语法规范

    fadeIn([speed,[easing],[fn]])

    fadeOut([speed,[easing],[fn]])

    fadeToggle([speed,[easing],[fn]])

  2. 淡入淡出效果

    fadeTo([[speed],opacity,[easing],[fn]])

opacity:透明度必须写，取值0-1之间

3.6 自定义动画 animate

  1. 语法规范

animate(params,[speed],[easing],[fn])

  1. 参数

（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderleft。其余参数可以省略

4.jQuery属性操作

4.1 设置或获取元素固有属性值prop()

  1. 获取属性语法

    prop("属性")

  2. 设置属性语法

    prop("属性","属性值")

演示





Document


cccc

我是div


4.2 设置或获取元素自定义属性值 attr()

  1. 获取属性语法

    attr("属性") // 类似原生getAttribute()

  2. 设置属性语法

    attr("属性","属性值") // 类似原生getAttribute()

该方法也可以获取H5自定义属性

4.3 数据缓存data()

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





Document


cccc

我是div

123

5.jq内容文本值

主要针对元素的内容还有表单的值操作

  1. 普通元素内容html() (相当于原生innerHTML)

    html() // 获取元素的内容
    html("内容") // 设置元素的内容

演示





Document


我是内容



5.1 修改html内容方法

修改普通元素的内容是text() 方法

parents("选择器") 快速找到指定祖先元素

toFixed() 小数后几位

substr() 截取字符串

6.jquery元素操作

主要是遍历、创建、添加、删除元素操作

6.1 遍历元素

jq隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

第一种 建议遍历dom对象

$("div").each(function (index, domEle) { xxx; }）
第二种 建议用来遍历数组、对象

$.each(遍历对象,回调函数）
$.each($("div"), function(index, domEle){xxxx;})

  1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
  2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
  3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

演示




Document


1

2

3


6.2 创建元素

语法

$("

  • ") //动态创建li标签

    6.3 添加元素

    内部添加

    element.append("内容") // 把内容放入匹配元素内部最后面，类似原生appendChild

    内部添加元素，生成之后，他们是父子关系

    外部添加

    外部添加元素，生成之后，他们是兄弟关系

    6.4 删除元素

    element.remove() // 删除匹配的元素（本身）

    element.empty() // 删除匹配的元素集合中所有的子节点

    element.html("") // 清空匹配的元素内容

    演示





    Document



    • 原先的li


    我是原先的div


    7. jQuery尺寸、位置操作

    7.1 jQeury尺寸

    语法 用法
    width() / height() 取得匹配元素宽度和高度值只算width / height
    innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含padding
    outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含padding、border
    outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值包含padding、border、 margin

    参数为空，则获得相应值，返回的是数字型

    参数可以不写单位

    7.2 jQuery位置

    位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

    1.offset() 设置或获取元素偏移

    (1) offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

    (2) 该方法有两个属性left、top、offset().top 用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

    (3) 可以设置元素的偏移：offset({top:10,left:30})

    2.position()获取元素偏移

    (1)position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位就是文档为准

    (2)只能获取不能设置

    3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

    (1)scrollTop()方法设置或被选元素被卷去的头部

    posted @ 2020-06-01 17:15  xujing123  阅读(214)  评论(0)    收藏  举报