jquey基础学习第一天

向右看齐 2022-12-17 05:26 146阅读 0赞

jquery对象与DOM对象的交换

1,DOM换jquery

2,jquery换DOM

jquery选择器

1,jquery选择器

2,jQuery 筛选选择器

3,jQuery 筛选方法（重点）

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

jquery的排他思想:

jquery修改CSS样式:

1,操作CSS样式

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

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())

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

jquery属性操作

jquery获取文本值

jquery遍历each()

jquery添加,删除元素

jquery尺寸,位置操作

有道云笔记链接:[http://note.youdao.com/s/3QiB5qc4][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选择器 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70][]

![20201022091420789.png][]

## 2,jQuery 筛选选择器 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70 1][]

## 3,jQuery 筛选方法（重点） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70 2][]

# 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样式 ##

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

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

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

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

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

$("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()

> scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
> 
> scrollTop() 方法设置或返回被选元素被卷去的头部。
> 
> 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

# #

[http_note.youdao.com_s_3QiB5qc4]: http://note.youdao.com/s/3QiB5qc4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70]: /images/20221123/8e9eb240e70b44a9acc00420e1290375.png
[20201022091420789.png]: /images/20221123/73ae04bc9ec74d8c9290285b89700db1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70 1]: /images/20221123/6155451729534d94aa39304c7a7cb7af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzODE2Nw_size_16_color_FFFFFF_t_70 2]: /images/20221123/1b206966b0254e27a2630a32938d6e6f.png