Jquery学习笔记

1. 引入

• 本地引入

<script src="./jquery.min.js"></script>

• 网络引入

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

• 入口函数

$(function() { })

2. jquery对象和dom对象(原生的js对象)

2.1 区别

        来源

                dom对象主要通过document获取，得js对象，或js对象数组

                jquery对象通过$(选择器)来获取，得到【伪数组】

        调用机制

                dom对象本质是操作元素的属性

                jquery对象本质是调用方法

                两者是不能混用的

2.2 转换

        dom对象 --> jquery对象

        $( document.querySelector('div') )

        jquery对象 --> dom对象

        $('div')[0]

        $('div').get(0)

3. 选择器

3.1 基本选择器

• id选择器 $('#d1')
• 类选择器 $('.c1')
• 元素选择器 $('div')

3.2 复合选择器

（jquery含 隐式迭代：把匹配到的所有元素进行遍历，对每个元素调用相同的方法

（js则需要手动遍历）

• 并集选择器 , ,
• 交集选择器
• 后代选择器 $('ul li').css('color','blue')
• 子选择器 >

3.3 筛选选择器

• :first
• :last
• :even      $('ul li:even')          奇数
• :odd        $('ul li:odd')    索引值为偶数，0 2 4 ...
• :not()      $('ol li:not(:first)')
• :gt()        $('ol li:gt(0)')         所有【大于 索引值】的元素
• :eq()       $('ol li:eq(3)')         给定【索引值】的元素
• :nth-child(n)     $('ol li:nth-child(4)').css('color','gold')

选择ol下的第四个（并非索引4）

n为自然数：0 1 2 3 ...

3.4 筛选方法

• first()                          $('ol li').first()
• last()                          $('ol li').last()
• parent()                      $('.son').parent()
• children()                    $('.nav').children('p')
• slice(start, [end])        $('ol li').slice(1)

                 选取一个匹配的子集
                 参数1，起始索引，为负是从尾
                 参数2 默认为结尾

• eq(索引)       给定索引值的元素          $('ol li').eq(3)
• nextAll() 当前元素之后所有的同辈元素   $('ol li').first().nextAll()
• find("")           查找后代元素                 $('.nav').find('p')
• siblings()        其他兄弟元素                $('ol li').first().siblings()
• not()                                                     $('ol li').not($('ol li').first()).css('color','pink')
• get(索引)        js 对象                           $('ol li').get(0)
• first()              jquery 对象                    $('ol li').first()

4. DOM操作

4.1 操作样式

        css方法

        css(属性名) 获取样式属性的值

        $('div').css('width')

        css(属性名,属性值) 设置样式属性的值

        $('div').css('background-color','yellow')

        $('div').css("background", "") //空属性值

        $('div').css({
        "width":"200px",
        "background-color":"red"
        })

        类方法

                addClass() 添加类 $('div').addClass('d1')

                removeClass() 移除类 $('div').removeClass('d1')

                toggleClass() 切换类：存在（不存在）就删除（添加）

        $('div').click(function(){
        $(this).toggleClass('d1')
        })

4.2 操作属性

• prop() 一般操作元素固有属性

                prop(属性名) 获取 $('a').prop('href')

                prop(属性名,属性值) 设置 $("input").prop("checked", true);

• attr() 一般操作元素自定义属性（也可操作固有属性）

                attr(属性名,属性值) 设置 $('div').attr('data-index', '3')

                attr(属性名) 获取 $('a').attr('href')

4.3 操作文本 ⭕text和html

• html() 有样式

                html() 获取         $('div').html()

                html(内容) 设置  $('div').html('<h1>标题</h1>')

• text() 纯文本

                text() 获取         $('div').text()

                text(内容) 设置  $('div').text('内容')

• val() 操作文本框内容

                val() 获取           $('input').val()

                val(内容) 设置    $('input').val('张三')

4.4 操作节点

1）创建节点    $('字符串类型的元素')

        var li = $('<li>中国移动</li>')
        $('ul').append(li)

2）添加元素 

        append() 末尾

        var li = $('<li>中国移动</li>')
        $('ul').append(li)

        li.appendTo($('ul'))

        prepend() 前面

        var li = $('<li>中国移动</li>')
        $('ul').prepend(li)

3）删除元素 元素.remove() 可以自己删除自己

        var li = $('<li>中国移动</li>')
        $('ul').append(li)
        li.remove()

4）克隆复制 $("img").clone()

5. Jquery效果

5.1 参数

• speed                           预定速度字符串("slow", "normal", "fast")或动画时长毫秒数(如：1000)
• easing (Optional)         用来指定切换效果，默认"swing"，可用参数"linear"
• fn                                 在动画完成时执行的函数，每个元素执行一次

5.2 显示和隐藏

改的是display属性

• show([s,[e],[fn]])                 $('div').show(1000,function(){ alert('显示') })
• hide([s,[e],[fn]])                   $('div').hide(1000,function(){ alert('隐藏') })
• toggle([s],[e],[fn])               $('div').toggle(1000,function(){ alert('切换') })

5.3 上滑和下滑

• slideDown([s],[e],[fn])           $('div').slideDown(1000,function(){ })
• slideUp([s,[e],[fn]])               $('div').slideUp(1000,function(){ })
• slideToggle([s],[e],[fn])        $('div').slideToggle(1000,function(){ })

5.4 淡入淡出

• fadeIn([s],[e],[fn])                 $('div').fadeIn(1000,function(){ })
• fadeOut([s],[e],[fn])               $('div').fadeOut(1000,function(){ })
• fadeTo([[s],o,[e],[fn]]) 修改透明度  $('div').fadeTo(1000,0.5,function(){ })
• fadeToggle([s,[e],[fn]])           $('div').fadeToggle(1000,function(){ })

6. 遍历

6.1 jquery对象.each(匿名函数)

var arr =  ['red','green','blue']

$('div').each(function(i, e) {
     //参1: 索引  参2: 元素，  参2 === this
     //this，js元素对象，此处 this == e
    $(e).css('color',arr[i])
})

隐式迭代（自动遍历）  $("ul li").css('color', red)

6.2 $.each(jquery对象,匿名函数)

//普通遍历
$.each(        $("div")        ,function (i, e) {
		// 参1: 索引   参2: 元素
});

//遍历字面量对象
$.each({ name: "张三", age: 23 }, function (i, e) {
		//参1：属性名  参2：属性值
});

7. 事件绑定和解绑

7.1 绑定

1）传统绑定 jq对象.方法名(匿名函数)

添加多个点击事件不会被覆盖，因为jquery本质是调用方法

$('div').click( function(){
    $(this).css('background','red')
})

2）on

绑定多个不同类型事件

$('div').on({
    click:function(){
        $(this).css('background','red')
    },
    mouseover:function(){
        $(this).css('background','blue')
    }
})

事件委托、动态绑定

• 把子元素事件绑定到父元素上
• 原理：事件冒泡(向上传递)
• 会给动态生成的元素绑定事件

$('ul').on('click', 'li', function() {
//参1: 事件名，参2: 具体绑定对象，参3: 匿名函数
    //this就是代表里面的子元素
    console.log(this.innerHTML);
}) 

7.2 解绑 off

• 移除单个事件 $('div').off('click')
• 移除所有事件 $('div').off()

8. 其它 

8.1 链式编程

        $('#content div').eq(index).show().siblings().hide()

        $(this).css('background','pink').siblings().css('background','')

        $("button").not($(this)).css("background", "")

8.2 获取索引

$('#left li').mouseover(function(){
//获取光标移入元素在同辈中的索引
var index = $(this).index();

$("div").attr("index")