jQuery基础教程：对象转换、选择器与动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44638167/article/details/109214774

本文详细介绍了jQuery中的DOM与jQuery对象的转换，包括选择器的使用，重点讲解了jQuery筛选方法。同时，文章深入探讨了jQuery的隐式迭代和排他思想，以及如何修改CSS样式。此外，还详细阐述了各种效果，如显示隐藏、滑动、淡入淡出和自定义动画等，帮助读者掌握jQuery的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3,jquery类操作与classname的区别

jquery效果:(会让display:none 的样式修改为display:block)

1,显示与隐藏(show(),hide(),toggle())

2,滑动效果(sildeDown(),sildeUp(),sildeToggle())

3,事件切换(hover())

4,动画停止(stop())(重要)

5,淡入淡出效果(fadeIn(),fadeOut(),fadeToggle(),fadeTo())

有道云笔记链接:http://note.youdao.com/s/3QiB5qc4

jquery对象与DOM对象的交换

1,DOM换jquery

$(DOM)里面加'';

2,jquery换DOM

$(DOM)[index] index是索引号,$(DOM)是一个伪数组,
$(DOM).get[index],get是和上面一样

jquery选择器

1,jquery选择器

2,jQuery 筛选选择器

3,jQuery 筛选方法（重点）

jquery中的隐式迭代（重要）:

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

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

jquery的排他思想:

<body>
    <button>确定</button>
    <button>确定</button>
    <button>确定</button>
    <button>确定</button>
</body>
<script>
    $(function (){
        $('button').click(function (){ //在$('button')中进行了隐式迭代,为每一个button都添加了click.
            $(this).css("background",'red');
            $(this).siblings('button').css("background",'');
        })
    })
</script>

jquery修改CSS样式:

1,操作CSS样式

参数只写属性名，则是返回属性值

console.log($('div').css('width'));  //200px

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

 $("div").css("width",300);
 console.log($("div").css("width"));//300px

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

  $("div").css({
        width:400,
        height:400,
        backgroundColor:"blue"
        //复合属性必须使用驼峰命名法,如果值不是数字那么要加引号
    }
    )

2,jquery类操作,操作CSS类样式

1,添加类addClass

 $("div").click(function(){
            $('div').addClass("curren"); //不需要加点.,因为addclass函数是添加类,知道是加的是类,所以不需要加点.
        })

2,删除类removeClass

$(this).removeClass("curren");//空就全删

3,切换类toggleClass

$(this).toggleClass("curren"); //toggleClass是先检查是不是存在这个类,不存在就添加,存在就删除

3,jquery类操作与classname的区别

jquery类操作是对指定的类进行操作,不影响原有的类名,

className会覆盖原有的类名,jquery的类操作不会覆盖

jquery效果:(会让display:none 的样式修改为display:block)

1,显示与隐藏(show(),hide(),toggle())

1,show()

show([speed,[easing],[fn]]) 显示的参数:

(1) 参数都可以省略，无动画直接显示。

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

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

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

2,hide()

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

（1）参数都可以省略，无动画直接显示。

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

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

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

3,toggle()

toggle([speed,[easing],[fn]]) 切换的参数:

（1）参数都可以省略，无动画直接显示。

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

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

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

一般来说不会加参数,直接显示或者隐藏

2,滑动效果(sildeDown(),sildeUp(),sildeToggle())

参数同上方的显示隐藏一样,但是一般不设参数

1,下滑(sildeDown())

 $("button").eq(0).click(function(){
            $("div").slideDown();
        })

2,上滑(sildeUp())

 $("button").eq(1).click(function(){
            $("div").slideUp();
        })

3,切换滑动(sildeToggle)

 $("button").eq(2).click(function(){
            $("div").slideToggle();
        })

3,事件切换(hover())

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它写over,out的情况: $(Dom).hover(function(){},function(){});

只写一个函数: $(Dom).hover(function(){})一般可以与sildeToggle配合;

4,动画停止(stop())(重要)

动画或者效果一旦触发就会执行，

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

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

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

(3) stop()写后面会让动画停止,没有动画效果.

5,淡入淡出效果(fadeIn(),fadeOut(),fadeToggle(),fadeTo())

1,淡入fadein() 隐藏的元素会被显示出来,display:none会改变成display:block

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

（1）参数都可以省略。

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

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

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

2,淡出fadeOut() display:block 会改成display:none

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

（1）参数都可以省略。

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

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

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

3,淡入淡出切换fadeToggle()

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

（1）参数都可以省略。

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

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

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

4,不透明度改变fadeTo()

要使用透明度的时候,速度必须写

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

（1）opacity 透明度必须写，取值 0~1 之间。

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

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

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

6,自定义动画(animate())

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

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

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

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

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

  $(function(){
        $("button").click(function(){
            $("div").animate({
                left:300,
                top:300,
                width:300,
            },1000);
        })
    })

jquery属性操作

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

1.获取属性语法
<a href="www.baidu.com " title="123"></a>
 $(function(){
        //prop("")获取属性值
        console.log($("a").prop("href"));//www.baidu.com
 2,设置属性语法
$("a").prop("title","345");
        console.log($("a").prop("title"));//345

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

attr(''属性'')      // 类似原生 getAttribute() 获取属性值
 <div index="2"></div>
 console.log($("div").attr("index"));// 2
attr(''属性'', ''属性值'')   // 类似原生 setAttribute() 设置属性值
 $("div").attr("index","4");
 console.log($("div").attr("index"));// 4

3,数据缓存 data()

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

在元素的内存里面存放数据.

 <span>123</span>
  $("span").data("name","yang");//设置值
  console.log(($("span").data("name")));//获取值

jquery获取文本值

1,html() 普通元素内容(innerHTML)

html() 得到元素内容
html("内容") 设置元素内容

2,text() 普通元素文本内容()

text() 得到元素文本内容
text("内容") 设置元素文本内容

3,val() 表单值

val()获取表单值
val("内容") 设置表单值

jquery遍历each()

1,each()

$("div").each(function (index, domEle) { xxx; }）
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数：  index 是每个元素的索引号;  demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象  $(domEle)
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
<script>
    $(function(){
         var arr=["blue","red","green"];
        $("div").each(function(index,demEle){
            $(demEle).css("color",arr[index]);//demEle是Dom对象,要换成jquery对象;
        })
    })
</script>

2,$.each()

$.each(object，function (index, element) { xxx; }）
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：  index 是每个元素的索引号;  element  遍历内容
     var arr=["blue","red","green"];
      $.each(arr,function(index,value){
            console.log(index);//0 1 2
            console.log(value);// blue red green
        })

jquery添加,删除元素

1,添加(内部添加与外部添加)

1,内部添加
 <ul>
       <li>第一</li>
       </ul>
       <div>第一个div</div>
       var  li=$("<li>第二</li>");
        $("ul").append(li);// 添加在最后面
        $("ul").prepend(li);//添加在最前面
 2,外部添加
   $("div").after(li);//添加在在后面
   $("div").before(li);//添加在前面

2,删除

1,element.remove()//  删除匹配的元素（本身）
element.empty()    //  删除匹配的元素集合中所有的子节点
element.html('''')   //  清空匹配的元素内容

remove 删除元素本身。

empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

jquery尺寸,位置操作

位置主要有三个,offset(),position(),scrollTop()/scrollLeft();

1,offset()

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

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

offset().left 用于获取距离文档左侧的距离。可以设置元素的偏移：offset({ top: 10, left: 30 });

2,position()

position() 获取元素偏移

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

该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，

position().left 用于获取距离定位父级左侧的距离。该方法只能获取。

3,scrollTop()和scrollLeft()