jQuery学习总结

1. jQuery简介

jQuery是一个快速、简洁的JavaScript框架，开发人员可以用它在HTML文档中更方便地使用JavaScript代码进行操作，它是目前应用最广泛的JavaScript库之一。jQuery的优势在于：设计思想优雅，支持主流浏览器，兼容性好，API简洁易用，高效运作。

2. jQuery基础语法

2.1 选择器

jQuery使用CSS选择器来选择指定元素，可以直接使用标签名，类名或ID来选择指定元素。常用的选择器有：

标签选择器：$('tag')，例如$('p')选择页面中所有的段落<p>元素。
类选择器：$('.class')，例如$('.content')选择页面中所有class为content的元素。
ID选择器：$('#id')，例如$('#intro')选择页面中id为intro的元素。

2.2 事件

jQuery可以很方便地绑定事件，事件发生后可以执行相应的函数。常见的事件有：

点击事件：$('selector').click(function(){})，例如$('#btn').click(function(){alert('hello')})当点击id为btn的按钮时弹出对话框。
鼠标移动事件：$('selector').mousemove(function(){})
键盘事件：$('selector').keypress(function(){})

2.3 操作DOM元素

通过jQuery可以很方便地操作DOM元素，比如修改元素的样式、内容等。

修改样式：$('selector').css('property', 'value')，例如$('p').css('color', 'red')将页面中所有的段落文本修改为红色。
修改内容：$('selector').html('content')，例如$('#intro').html('hello')将id为intro的元素文本修改为hello。
添加元素：$('selector').append('content')，例如$('body').append('<p>hello</p>')在页面末尾添加一个段落元素。

3. jQuery进阶应用

3.1 Ajax请求

jQuery可以很方便地进行Ajax请求，通过向服务器发送异步请求，更新页面内容，而不需要重新加载整个页面。

$.ajax({
    type: 'GET',
    url: 'data.php',
    data: {name: 'tom', age: 18}, //向服务器发送的数据
    dataType: 'json', //接收服务器返回的数据格式
    success: function(data){ //请求成功后执行的函数
        console.log(data);
    },
    error: function(){ //请求失败后执行的函数
        console.log('请求失败');
    }
})

3.2 动画效果

jQuery可以很方便地实现动画效果，可以操纵元素的CSS属性实现动画效果。

$('#btn').click(function(){
    $('p').animate({ //将所有段落元素高度增加50px，并在2秒内完成动画
        height: '+=50'
    }, 2000, function(){ //动画完成后执行的函数
        console.log('动画已完成');
    });
});

4. 示例

4.1 实现图片轮播

以下是一个简单的图片轮播示例：

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            var index = 0; //当前图片下标
            var imgList = ['img1.jpg', 'img2.jpg', 'img3.jpg']; //图片列表
            var imgLen = imgList.length; //图片数量
            setInterval(function(){
                if(index == imgLen){ //轮播到最后一张图片
                    index = 0;
                }
                var imgPath = 'img/' + imgList[index]; //图片路径
                $('#img').attr('src', imgPath); //修改图片src属性
                index++;
            }, 2000);
        });
    </script>
</head>
<body>
    <img src="img/img1.jpg" id="img">
</body>
</html>

4.2 异步获取天气信息

以下是一个通过异步请求获取天气信息的示例：

<!DOCTYPE html>
<html>
<head>
    <title>异步获取天气信息</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $('#search').click(function(){ //点击搜索按钮
                var city = $('#city').val(); //获取输入框的值
                $.ajax({
                    type: 'GET',
                    url: 'http://wthrcdn.etouch.cn/weather_mini',
                    data: { city: city },
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        var result = data.data.forecast[0];
                        $('#result').html('城市：'+city+'<br>天气：'+result.type+'<br>温度：'+result.low+'~'+result.high);
                    },
                    error: function(){
                        console.log('请求失败');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="city">
    <button id="search">搜索</button>
    <div id="result"></div>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery学习总结（超级详细） - Python技术站

jquery学习总结（超级详细）