jQuery

最新推荐文章于 2024-10-09 12:15:53 发布

原创最新推荐文章于 2024-10-09 12:15:53 发布 · 376 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了jQuery库的基础使用方法，包括选择器、属性操作、动画效果等，并深入探讨了jQuery的事件处理机制及AJAX应用。

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

概述:

jquery是一个轻量级的js库,他将js的功能进行了封装(所有的都是函数),他在封装的基础上做了进一步的兼容(兼容性好);

特点:

链式调用 (里面所有的方法返回的都是一个jquery对象)

丰富的选择器和筛选器

良好的动画兼容(动画库很强大,借助了animated.js (主要是css3的动画))

jQuery地址:

jQuery 官网: https://jquery.com/

中文官网:https://www.jquery123.com/

jQuery选择器:

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./js/jquery.js"></script>  //记住这里一定要引入jquery官网的js包才能使用
    <script>
        //css选择器
        console.log($('ul>li:nth-child(3)'));
        //新增的选择器
        console.log($('li:eq(1)'));  //eq传入的是下标

        //根据下标获取为奇数的
        console.log($('li:odd'));
        //根据下标获取为偶数的
        console.log($('li:even'));
        console.log($('li:first'));
        console.log($('li:last'));

        //隔行变色(使用dom)
        let odd=$('li:odd')
        let even=$('li:even')
        for(var i=0;i<odd.length;i++){
            odd[i].style.backgroundColor='red'
        }
        for(var i=0;i<even.length;i++){
            even[i].style.backgroundColor='blue'
        }

jQuery属性操作:

$('div').prop('class','box')//设置
        console.log($('div').prop('class'));//获取
        //prop只能操作原生属性
        console.log($('div').eq(0).prop('id'));
        //对应不是原生获取的undefined
        console.log($('div').eq(0).prop('name'));
        //设置到对应的元素对象上 element.id element.name
        $('div').prop('content','我是内容') //设置
        console.log($('div').prop('content'));

        //attr 是原生的setAttribute getAttribute
        $('div').attr('message','ok')
        console.log($('div').attr('id'));
        console.log($('div').attr('name'));
        console.log($('div').attr('message'));

//class属性操作
//添加class
$('p').addClass('box')
$('p').addClass('red')
//获取 通过attr或者prop获取
console.log($('p').prop('class'))
//删除class
$('p').removeClass('box')
//修改
//先删再添加
$('p').removeClass('red')
$('p').addClass('blue')
//切换 删除如果没有该属性就加上
$('p').toggleClass('green')

jQuery筛选器:

<ul>
       <li>1</li>
        <li class="box">2</li>
        <li>
            <span>span1</span>
            <span>span2</span>
            <a href="">连接1
                <p class="box"></p>
            </a>
            <a href="">连接2</a>
            <a href="">连接3</a>
        </li>
        <li>4</li>
        <li class="box">5</li>
    </ul>

//获取元素进行筛选
console.log($('ul>li').eq(2)); //得到第三个li
console.log($('ul>li').first()); //获取第一个
console.log($('ul>li').last()); //获取最后一个

//父子关系
conlose.log($('ul>li').eq(2).parent('div'))//获取符合选择器的父元素(不符合就没有)
console.log($('ul>li').eq(2).parent()); //获取对应的父元素
console.log($('ul>li').eq(2).children()); //获取所有的子元素console.log($('ul>li').eq(2).children('a')); //获取所有的子元素a

//兄弟关系
        //获取第三个li的第二个子元素的兄弟span标签
        console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));
        //获取第三个li的第二个子元素的所有兄弟
        console.log($('ul>li:eq(2)').children().eq(1).siblings);
        //获取第三个li的前一个元素
        console.log($('ul>li:eq(2)').prev());
        //获取第三个li的前一个box元素(符合条件才返回结果)
        console.log($('ul>li:eq(2)').next());
        //获取第三个li的后一个box元素(符合条件才返回结果)
        console.log($('ul>li:eq(2)').next('.box'));
        //获取第三个li后面的所有
        console.log($('ul>li:eq(2)').nextAll());
        //获取第三个li后面的所有box
        console.log($('ul>li:eq(2)').nextAll('.box'));
        //获取第三个前面的所有
        console.log($('ul>li:eq(2)').prevAll());
        //获取第三个前面的所有box
        console.log($('ul>li:eq(2)').prevAll('.box'));

//find 查找
        //查找所有子元素的内容找到对应的条件 对应的class名字为box
        console.log($('ul').find('.box'));
        //查找所有子元素内容找到对应的条件(跨级)
        console.log($('ul').eq(2).find('.box'));

jQuery宽高获取:

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 20px;
            border: 30px solid yellow;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="./js/jquery.js"></script>
    <script>
        //设置宽度 传参就是设置 没传就是获取
        //$('div').width(200)
        console.log($('div').width()); //返回number类型的值
        console.log($('div').height()); //返回number类型的值

        //innerWidth innerHeight (包含padding)
        console.log($('div').innerWidth());
        console.log($('div').innerHeight());

        //outerWidth outerHeight (包含padding和border)
        console.log($('div').outerWidth());
        console.log($('div').outerHeight());
    </script>

jQuery位置获取:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin:20px;
            position: relative;
        }
        p{
            position: absolute;
            left: 100px;
            top: 100px;
            margin-top: -10px;
            margin-left: -10px;
            transform: translate(30px,30px);
        }
        button{
            margin: 50px;
            transform: translate(50px,50px);
        }
    </style>
</head>
<body>
    <div>
        <p>
            <button>按钮</button>
        </p>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        //获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
        console.log($('p').offset()); //返回一个对象
        console.log($('p').offset().left);
        console.log($('p').offset().top);
        console.log($('button').offset());

        //获取当前的盒子在父元素内容的位置(不受margin的影响)
        console.log($('p').position());
        console.log($('button').position());
    </script>

jQuery观察者事件:

<body>
    <div>点击我</div>
    <button>点击我</button>
    <input type="text">
    <script src="./js/jquery.js"></script>
    <script>
        //事件名 处理函数
        $('div').on('click',function(){
            console.log('点击了');
        })
        $('div').on('click',handler);
        function handler(){
            console.log('点击了1');
        }
        //取消事件监听
        $('div').off('click',handler)
        //one方法 执行一次 
        $('div').one('mouseenter',()=>{
            console.log('鼠标移进');
        })

        //针对对应的事件的相关函数
        $('button').click(()=>{
            console.log('button点击了');
        })
        $('button').mouseenter(()=>{
            console.log('button移进');
        })
        $('button').mouseleave(()=>{
            console.log('button移出');
        })
        $('input').change(()=>{
            console.log('输入改变值');
        })

        //hover方法 结合了移进移出 (mouseenter和mouseleave)
        $('p').hover(()=>{
            console.log('移进');
        },()=>{
            console.log('移出');
        })
    </script>

jQuery的ajax:

概述:

jquery的ajax对应的原生的ajax进行了封装xhr,他对应的xhr进行了功能的扩展但是ajax它在此基础上进行了增强它还支持其他的请求

resultFul:

是一种接口风格,他是从rest规范,他是以返回json格式数据,以请求的方式来区分对应的功能

result请求:

get请求获取数据

post请求添加数据

delete请求删除数据

put请求修改一条数据

patch请求批量修改数据

ajax代码:

$('button:eq(0)').click(()=>{
            //url地址 参数 回调函数
            $.get('https://jsonplaceholder.typicode.com/todos',{
                _limit:10
            },(res)=>{
                console.log(res);
            })
        })
        $('button:eq(1)').click(()=>{
            //url地址 参数 回调函数
            $.post('https://jsonplaceholder.typicode.com/posts',{
                username:'jack'
            },(res)=>{
                console.log(res);
            })
        })
        $('button:eq(2)').click(()=>{
            $.ajax({
                url:'https://jsonplaceholder.typicode.com/posts',
                data:{
                    _limit:10
                },
                method:'get',
                timeout:3000,
                dataType:'json',
                success(res){
                    console.log(res)
                },
                error(err){
                    conlose.log(err)
                },
                copmlete(){
                    conlose.log('完成了')
                }
})
})

jQuery动画使用:

<script>
        //option(只能传入number类型)   时间   回调函数
        $('div').animate({
            width:200,
            left:200,
            top:300,
            opacity:0.4
        },2000,()=>{
            console.log('动画完成了');
        })
        
        //显示隐藏  回调函数(变化宽高和透明度)
        $('div').show(2000,()=>{
            $('div').hide(2000)
        })

        // 显示隐藏 slideDown下拉  
        $('div').slideDown(2000,()=>{
            $('div').slideUp(2000)
        })

        //切换toggle 显示隐藏
        $('div').toggle(2000,()=>{
            $('div').slideToggle(2000)
        })

        // 出去 进来(只改变透明度)
        $('div').fadeIn(2000,()=>{
            $('div').fadeOut(2000,()=>{
                $('div').fadeToggle(2000)
            })
        })
    </script>

jQuery插件扩展:

<div>111</div>
<script>
    //给jQuery对象扩展
    //第一个是名字    第二个是扩展的配置
    $.extend({
        myHello(){  //自定义的
            conlose.log('hello')
}
})
//调用
    $.myHello()

//给jQuery对象的方法扩展
    $.fn.extend({
        renderColor(){
            $(this).css('color','blue')
}
})
    $('div').renderColor()

jQuery样式操作:

 <div style="height:100px">
        <span>我是内容</span>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        //样式操作 获取样式 设置样式
        //传递一个参数就获取 传递两个参数就是设置(参数传满了就是设置)
        //可以获取所有的样式
        console.log($('div').css('backgroundColor'));
        console.log($('div').css('height'));
        //设置样式
        $('div').css('width','100px')
        //dom元素创建
        let jqueryObj=$('<p>我是新建的标签</p>')
        console.log(jqueryObj);

        //添加
        $('div').append(jqueryObj) //从后面追加到div里面
        $('div').prepend(jqueryObj) //从前面追加到div里面
        $('div').before(jqueryObj)  //插入到前面
        $('div').after(jqueryObj)  //插入到后面

        //删除
        $('div').empty() //清空
        $('div').remove() //将自己删除

        //修改
        $('div').replaceWith($('<b></b>'))

        //克隆 (深拷贝)
        let p=$('p').clone()
        console.log(p);
    </script>

jQuery多库共享:

<body>
    <script src="./jquery.min.js"></script>
    <script>
        console.log(jQuery);
        console.log($);
        //如果不传参数 默认干掉$ 传入true俩个都干掉
        let a = $.noConflict(true)
        console.log($);//被干掉了
        console.log(jQuery);
        console.log(a);
    </script>
</body>