jQuery 概述

jQuery 简介

官网： http://jquery.com/

中文：https://www.jquery123.com

本质： jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery有三条产品线

jQuery1.x.x : 兼容IE6、7、8，花了很大的气力让IE6、7、8等低级浏览器都兼容。

jQuery2.x.x : 不兼容IE6、7、8，从1代中剔除了所有兼容代码。

jQuery3.x.x : 全面支持HTML5和CSS3。

jQuery的操作过程

(1) jQuery操作页面元素一定是从一个$()开始的！

(2) $()函数里面有引号，引号里面写CSS选择器。

(3) 然后加上jQuery自己的方法（不能使用js原生的方法。）

添加事件监听

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!--添加事件监听-->
    $('.div3').click(function () {
        $(this).css('background-color','red');
    });
</script>
</body>
</html>

批量处理

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!--批量处理-->
    <!--添加事件监听-->
    $('div').click(function () {
        $(this).css('background-color','red');
    });
</script>
</body>
</html>

快速设置动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // <!--快速设置动画-->
    $('.div3').click(function () {
        $(this).animate({'width':600},500);
    });
</script>
</body>
</html>

支持css2 、css3 中所有的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!--支持css2 、css3 中所有的选择器-->
    $('.div1 .div2').css('background-color','blue');
    
</script>
</body>
</html>

自带的封装到无敌的动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!--自带的封装到无敌的动画-->
    $('.div3').click(function () {
        //上滑
        // $(this).slideUp();
        // 先上再下
        // $(this).slideUp().slideDown();
        // 先上再下 渐变
        // $(this).slideUp().slideDown().fadeOut();
        $(this).slideUp().slideDown().fadeOut().fadeIn();
    });
</script>
</body>
</html>

总结：

jQuery框架整体感知
步骤：
(1) jQuery操作页面元素一定是从一个$()开始的！
(2) $()函数里面有引号，引号里面写CSS选择器。
(3) 然后加上jQuery自己的方法（不能使用js原生的方法。）
注意：
$()函数的执行结果会返回一个jq对象，jq对象只能调用jq框架中提供的方法
js对象只能调用js中提供的方法，jq对象和js对象两者不能混为一谈。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson</title>
    <style>
        .div1{
            width: 200px;height:200px;background-color:skyblue ;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div3{
            width: 100px;
            height:100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<div class="div3">div3</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!-- js对象只能调用js中提供的方法，jq对象和js对象两者不能混为一谈。-->
    $('.div3').click(function () {
        $(this).style.backgroundColor = 'red';
    });
</script>
</body>
</html>