码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础知识1

时间:2018-09-28 20:48:57      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:javascrip   lse   img   jquery基础   前端   yellow   doctype   标签   分享图片   

jquery的概念

  js query

  jquery库

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

使用jquery

  下载包

  引用

  <script src="jquery.js"></script>

<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{
            width: 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",
                    width:"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{
            width: 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

 

jQuery基础知识1

标签:javascrip   lse   img   jquery基础   前端   yellow   doctype   标签   分享图片   

原文地址:https://www.cnblogs.com/qq849784670/p/9720386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!