jQuery基础教程

发布于：2022-12-30 ⋅ 阅读:(419) ⋅ 点赞:(0)

文章目录

1.如何使用jQuery

1-1.下载jQuery文件

请添加图片描述

1-2.引入jQuery文件

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

2.jQuery的入口函数

2-1.jQuery入口函数的第一种写法

// 第一种
    $(document).ready(function(){

    })

2-2.jQuery入口函数的第二种写法

// 第二种
    $(function(){

    })

2-3.window.onload入口函数与jquery入口函数的区别

  1. window.onload入口函数不能写多个，jquery可以写多个
  2. jquery入口函数快于window.onload入口函数

3.$是什么

3-1.$是一个函数

3-2.传递的参数不同，效果也不同

  1. 如果传递的是一个匿名函数 ----- 入口函数
$(function(){

    })
  1. 如果参数是一个dom对象，就会把dom对象转换成jquery对象
$('#app')这样的话可以把dom对象转换成jquery对象，从而使用jquery对象的方法

3-3.jquery对象长什么样

请添加图片描述

4.dom对象和jQuery对象

4-1.dom对象

  1. 使用js原生方法获取的dom就是dom对象，只能用原生提供的方法

4-2.jQuery对象

  1. 使用$()方法获取的dom就是jQuery对象，不能使用原生的方法，只能使用jQuery提供的方法
  2. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。

4-3.dom对象和jQuery对象相互转换

4-3-1.dom对象转换为jQuery对象

 1. $(dom对象)

4-3-2.jQuery对象转换为dom对象

 1. $('div')[index]，index是索引
 2. $('div').get(index)，index是索引

5.jQuery常用API

5-1.$(‘div’).css(属性，属性值)

<script src="./js/jquery-3.6.1.min.js"></script>
$(function(){
    $('div').css('background','red')
})

效果展示：
请添加图片描述

5-2.隐式迭代

  1. 意思就是说$(‘div’),获取过来的元素要进行操作的时候，只要不是选中特定的一个元素，那么就会自定把这个jquery对象中的元素遍历一遍
$(function(){
    $('div').css('background','red')
})

5-3.jQuery常用筛选选择器

  1. :first ----获取第一个元素
  2. :last ----获取最后一个元素
  3. :eq(index) ----获取第index个元素
  4. :odd ----获取索引为奇数的元素
  5. :even ----获取索引为偶数元素
$(function(){
    $('ul li:first').css('background','red')
    $('ul li:last').css('background','pink')
    $('ul li:eq(2)').css('background','#ccc')
    $('ol li:odd').css('background','blue')
    $('ol li:even').css('background','green')
})

结果展示：
请添加图片描述

5-4.jQuery筛选方法（重点）

  1. 语法：parent() ---- 用法$(‘li’).parent() ---- 查找父级
  2. 语法：children(selector) ---- 用法$(‘ul’).children(‘li’) ---- 查找子级
  3. 语法：find(selector) ---- 用法$(‘ul’).find(‘li’) ---- 后代选择器
  4. 语法：siblings(selector) ---- 用法$(‘div’).siblings(‘li’) ---- 查找兄弟节点，不包括本身
  5. 语法：nextAll(expr) ---- 用法$(‘div’).nextAll() ---- 查找当前元素之后的所有同辈元素
  6. 语法：prevtAll(expr) ---- 用法$(‘.last’).prevAll() ---- 查找当前元素之前的所有同辈元素
  7. 语法：hasClass(class) ---- 用法$(‘div’).hasClass(protected) ---- 检查当前的元素是否含有某个特定的类，如果有返回true
  8. 语法：eq(index) ---- 用法$(‘li’).eq(2) ---- 相当于 $(‘ul li:eq(2)’)，index从零开始

5-5.下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0%;
        margin: 0%;
    }
    .nav{
        width: 700px;
        height: 30px;
        background-color: antiquewhite;
    }
    .nav>li{
        float: left;
        list-style: none;
        margin-left: 30px;
        line-height: 30px;
        text-align: center;
    }
    ul li{
        list-style: none;
        
    }
    .hid > li{
        margin-right: 40px;
        
    }
    .hid{
        display: none;
    }
</style>
<body>
    <ul class="nav">
        <li>
            <a href="#">经过显示离开隐藏</a>
            <ul class="hid">
                <li>显示隐藏</li>
                <li>显示隐藏</li>
                <li>显示隐藏</li>
            </ul>
        </li>

        <li>
            <a href="#">经过显示离开隐藏</a>
            <ul class="hid">
                <li>显示隐藏</li>
                <li>显示隐藏</li>
                <li>显示隐藏</li>
            </ul>
        </li>
        
        <li>
            <a href="#">经过显示离开隐藏</a>
            <ul class="hid">
                <li>显示隐藏</li>
                <li>显示隐藏</li>
                <li>显示隐藏</li>
            </ul>
        </li>
        
        <li>
            <a href="#">经过显示离开隐藏</a>
            <ul class="hid"> 
                <li>显示隐藏</li>
                <li>显示隐藏</li>
                <li>显示隐藏</li>
            </ul>
        </li>
    </ul>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            $('.nav>li').mouseover(function(){
                $(this).children('ul').show()
            })
            $('.nav>li').mouseout(function(){
                $(this).children('ul').hide()
            })
        })
        </script>
</body>
</html>

6.jQuery中的排他思想

  1. 给所有按钮去掉颜色
  2. 点击当前按钮变颜色
$(function(){
            $('button').click(function(){
                 // 给所有按钮去掉颜色
                 $('button').siblings('button').css('background','')
                // 点击当前按钮变颜色
                $(this).css('background','pink')
            })
        })

6-1.tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0%;
        margin: 0%;
        box-sizing: border-box;
    }
    .container{
        width: 400px;
        height: 300px;
        background-color: antiquewhite;
    }
    #left li{
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
        list-style: none;
        cursor: pointer;
    }

    #right{
        width: 370px;
        height: 300px;
        background-color: aqua;
        position: relative;
        margin-left: 30px;
        margin-top: -300px;
    }
    #right li{
        text-align: center;
        line-height: 300px;
        list-style: none;
        position: absolute;
        width: 370px;
        height: 300px;
        display: none;
    }
</style>
<body>
    <div class="container">
        <ul id="left">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <div id="right">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </div>
    </div>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            $('#left > li').mouseover(function(){
                $(this).siblings('li').css('background','')
                $(this).css('background','pink')
                var index = $(this).index()
                $('#right>li').siblings('li').hide()
                $('#right>li').eq(index).show()
            })
        })
    </script>
</body>
</html>

7.jQuery样式操作

7-1.操作css方法

  1. 参数只写属性名,则是返回属性值
$(this).css('color')
  1. 参数是属性名,属性值,逗号分隔,是设置-组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color','red')
  1. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({'color':'red','fontsize':'12px' })

7-2.添加类，删除类，切换类

  1. 添加类 ---- addClass(‘类’)
$('div').addClass('active')
  1. 删除类 ---- removeClass(‘类’)
$('div').removeClass('active')
  1. 添加类 ---- toggleClass(‘类’),一会儿加上一会儿去掉
$('div').toggleClass('active')

8.jQuery效果

8-1.显示隐藏

8-1-1. show([speed,[easing]，[fn]])

  1. speed表示要设置的时间
  2. easing表示指定切换效果，默认是swing，可用参数linear
  3. fn动画执行时的函数，每个元素可以执行一次

8-1-2. hide([speed,[easing]，[fn]])

8-1-3. toggle([speed,[easing]，[fn]])

8-2.滑动

8-2-1. slideDown([speed,[easing]，[fn]])

  1. speed表示要设置的时间
  2. easing表示指定切换效果，默认是swing，可用参数linear
  3. fn动画执行时的函数，每个元素可以执行一次

8-2-2. slideUp([speed,[easing]，[fn]])

8-2-3. slideToggle([speed,[easing]，[fn]])

8-3.淡入淡出

8-3-1. fadeIn([speed,[easing]，[fn]])

  1. speed表示要设置的时间
  2. easing表示指定切换效果，默认是swing，可用参数linear
  3. fn动画执行时的函数，每个元素可以执行一次

8-3-2. fadeOut([speed,[easing]，[fn]])

8-3-3. fadeToggle([speed,[easing]，[fn]])

8-3-4. fadeTo([speed,透明度) 修改透明度

8-4.自定义动画

8-4-1. animate(params，[speed,[easing]，[fn]])

  1. params，是自定义要设置的值，案例如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: antiquewhite;
    }
</style>
<body>
    <button>动起来</button>
    <div></div>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                $('div').animate({
                    left:300,
                    top:300
                },1000)
            })
        })
    </script>
</body>
</html>

8-5.stop()停止动画解决bug

  1. 触发多个动画的情况下的bug，要在动画之前使用stop（）

9.jQuery属性操作

9-1.prop() ---- 设置或者获取元素固有的属性值

9-1-1.获取属性的语法

prop('属性')

9-1-2.设置属性的语法

prop('属性','属性值')

9-2.attr() ---- 设置或者获取元素自定义数值型

9-2-1.获取属性的语法

attr('属性')//类似于getAttribute

9-2-2.设置属性的语法

attr('属性','属性值')//类似于setAttribute

9-3.data（）数据缓存

  1. data0方法可以在指定的元素上存取数据,并不会修改DOM元素结构。- 旦页面刷新,之前存放的数据都将被移除。

10.jQuery内容文本值

10-1.html() ---- 普通元素内容

//获取元素内容
$('div').html()
//设置元素内容
$('div').html('被设置了')

10-2.text() ---- 获取设置元素文本内容

//获取文本内容
$('div').text()
//设置文本内容
$('div').text('文本被修改了')

10-3.val() ---- 获取设置表单内容

//获取表单内容
$('input').val()
//设置表单内容
$('div').val('val被设置了')

11.jQuery元素操作

11-1.each()方法遍历元素

  1. $(‘div’).each(function(index,domEle){ })
  2. index是遍历的索引
  3. domEle是索引对应的dom元素
$('div').each(function(index,domEle){ })

11-2.$.each(obj，function(index,element){ })

  1. obj是遍历的对象
  2. index是遍历的索引
  3. element是遍历的内容

11-3.$.创建添加删除元素

11-3-1.创建元素

var li = $('<li>我被创建了</li>')

11-3-2.添加元素append(‘li’)和prepend(‘li’)after(‘ol’)before(‘ol’)

  1. 内部添加是父子关系
//把li元素添加到ul中的最后面
$('ul').append('li')
//把li元素添加到ul中的最前面
$('ul').prepend('li')
  1. 外部添加是兄弟关系
//把ol元素添加到ul中的后面
$('ul').after('ol')
//把ol元素添加到ul中的前面
$('ul').before('ol')

11-3-3.删除元素

  1. element.remove() ---- 删除匹配的元素本身
//删除ul
$('ul').remove()
  1. element.empty() ---- 删除匹配的元素集合中的所有子节点
//删除ul下面的所有li
$('ul').empty()
  1. element.html(’ ') ---- 清空匹配元素内容
//删除ul下面的文字
$('ul').html('')

12.jQuery尺寸、位置操作

12-1.jQuery尺寸

用法请看中文手册：https://jquery.cuishifeng.cn/
请添加图片描述

12-2.jQuery位置

用法请看中文手册：https://jquery.cuishifeng.cn/
请添加图片描述

13.jQuery事件

13-1.jQuery事件注册

13-1-1. 单个事件注册(只能一个一个的注册事件)

$('div').click(function(){ })
$('div').mouseover(function(){ })

13-1-2. 事件处理on() ----

  1. element.on(evevts,[selector],fn)
$('div').on({
	click:function(){
	$(this).css('background','red')
	},
	mouseover:function(){
	$(this).css('width','200')
	}
})

13-1-3. 事件委派(给ul添加事件，委派给li，点击li的时候触发事件)

//给ul添加事件，委派给li，点击li的时候触发事件
$('ul').on('click','li'function(){
console.log('委派成功')
})

13-1-4. on()可以动态创建的元素绑定事件

想给ul下面的li绑定事件，但是ul下面没有li，那就动态创建一个
$(function(){
	$('ul').on('click','li'function(){
	console.log('动态绑定成功')
	})
	var li = $('<li>我是后来创建的<li/>')
	$('ul').append('li')  
})

13-1-5. off()事件解绑

//解绑ul中的click事件
$('ul').off('click')

13-1-6. trigger()自动触发事件

$(function(){
	$('ul').on('click','li'function(){
	console.log('动态绑定成功')
	})
	$('ul').trigger('click')
})

13-3.jQuery事件对象

13-3-1.事件对象

  1. 参数里面的e或者event就是事件对象
$(function(){
	$('ul').on('click','li'function(e){
	console.log(e)
	})
})

14.jQuery的其他方法

省略

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布