jQuery基础知识1

jquery的概念

　　js query

　　jquery库

　　封装了大量js，封装js的入口函数、兼容性问题、DOM操作、事件、ajax

使用jquery

　　下载包

　　引用

<script>
            //入口函数
            $(function(){
            
                //DOM操作三步走：事件源 事件 事件驱动 
                
                //选择器 就是来获取事件源的
                id
                    $('#box')
                class
                    $('.box')
                标签
                    $('div')
                    
                //事件和事件驱动 在click方法中的函数称为回调函数
                
                $('#box').click(function(){
                    //对样式的操作
                    .css()方法
                    
                
                })
                    
                
            
            });
        </script>

jquery的文件讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
             100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box" class="wrap">qing</div>
    <!--1导入模块，在前端中一个js文件是模块，一个css也可以是一个模块，一个html/png/mp3-->
    <script type="text/javascript" src="./jquery.js"></script>

    <script>
        //jquery内部的aip 99%都是方法
        console.log(jQuery)
        console.log($("#box"))
        //三步走
        $("#box").click(function () {
            //千万不要用js的属性和方法 js调用js的属性和方法 jquery对象调用的是jquery的对象和方法
            $(".wrap").css(
                {
                    "backgroundColor" :"yellow",
                    "300px"
                }
            )
        })
    </script>
</body>
</html>

View Code

jquery的入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="box">

    </div>
    <script>
        //1.入口函数 不用等待图片资源加载完成之后就可以调用 它没有事件覆盖现象
        // $(document).ready(function () {
        //     //回调函数
        //     console.log($("#box"))
        // })

        $(function () {
            console.log($("box"))
        });
        $(function () {

        });
    </script>
</body>
</html>

View Code

jquery的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
             200px;
            height: 200px;
            background-color: red;
            /*display: none;*/
        }
    </style>
</head>
<body>
    <button>动画</button>
    <button>动画</button>
    <button>动画</button>
    <button>动画</button>
    <button>动画</button>
    <button>动画</button>
    <div id="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            console.log($("button"));
            var isShow = true;
            $("button").click(function () {
                //隐藏，显示  第二个元素是隐藏或显示后执行的函数
                // $("#box").hide(2000);
                // $("#box").show(2000,function () {
                //     alert(22222);
                // })
                //显示  淡入淡出
                // $("#box").fadeIn(5000);
                // $("#box").fadeOut(5000);
                if(isShow){
                    $("#box").stop().slideUp(1000);
                    isShow = false;
                }else {
                    $("#box").stop().slideDown(1000);
                    isShow = true;
                }

            })
        })
    </script>
</body>
</html>

View Code