jQuery

js类库:

  对常用的方法和对象进行封装,方便我们使用。

jQuery和html的整合:

  jquery是单独的js文件

    通过script标签的src属性导入即可

  获取一个jquery对象

    $("选择器")   或者    jQuery("选择器")

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.0.min.js">
</script>
</head>
<body>
    <input type="text" id="username" value="yisen"/>
</body>
<script>
        //1.通过原生js
        alert(document.getElementById("username").value);//输出value
        //2.通过jquery
        var $username = $("#username");//简写方式
        //var $username = jQuery("#username");
        alert($username.val());//输出value
</script>
</html>

  dom和jquery对象之间的转换

    dom对象 ===》jquery对象

      $(dom对象)

    jquery对象 ===》dom对象

       方式1:

        jquery对象[index]

      方式2:

        jquery对象.get(index)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
    <script src="../js/jquery-1.11.0.min.js"></script>
<body>
    <input type="text" id="username" value="yisen"/>
</body>
<script>
    //dom >>>jquery   $(dom对象)
    //1.获取dom对象
    var obj = document.getElementById("username");
    //2.转化
    var $username = $(obj);
    //dom对象与jquery对象不能混用
    alert($username.val());
    //alert($username.value);错误
    
    
    //jquery >>>dom
    //1.获取jquery对象
    var $username = $("#username");
    //2.转化
    //2.1方式1
    var obj = $username.get(0);
    //2.2方式2
    var obj1 = $username[0];
    alert("方式1:"+obj.value);
    alert("方式二:"+obj1.value);
</script>
</html>

   页面加载:

    js:

      window.onload = function(){}//在一个页面中只能使用一次

    jquery:   在一个页面中可以使用多次

      方式1:

        $(funciton(){...})

      方式2:

        $(document).ready(function(){...});

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            onload = function(){
                alert(1);
            }
            //原生js中,页面加载只能使用一次
            /*onload = function(){
                alert(2);
            }*/
            $(function(){
                alert(2);
            })
            $(function(){
                alert(3);
            })
        </script>
    </head>
    <body>
    </body>
</html>

  派发事件:

    $("选择器").click(function(){...});

    等价于   原生js中

    dom对象.onclick = function(){...}; 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //派发事件
                $("#bId").click(function(){
                    alert(123)
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="bId" value="点击查看" />
    </body>
</html>

    常用事件:

<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <style type="text/css">
            #e02{
                border: 1px solid #000000;
                  height: 200px;
                 width: 200px;
            }
            
        </style>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#e01").blur(function(){
                    $("#textMsg").html("文本框失去焦点:blur");
                }).focus(function(){
                    $("#textMsg").html("文本框获得焦点:focus");
                }).keydown(function(){
                    $("#textMsg").append("键盘按下:keydown");
                }).keypress(function(event){
                    $("#textMsg").append("键盘按:keypress");
                }).keyup(function(){
                    $("#textMsg").append("键盘弹起:keyup");
                });            
                var i = 0;
                $("#e02").mouseover(function(){
                    $("#divMsg").html("鼠标移上:mouseover");
                }).mousemove(function(){
                    //$("#divMsg").html("鼠标移动:mousemove , " + i++ );
                }).mouseout(function(){
                    $("#divMsg").html("鼠标移出:mouseout");
                }).mousedown(function(){
                    $("#divMsg").html("鼠标按下:mousedown");
                }).mouseup(function(){
                    $("#divMsg").html("鼠标弹起:mouseup");
                });
                
                $("#e03").click(function(){
                    $("#buttonMsg").html("单击:click");
                }).dblclick(function(){
                    $("#buttonMsg").html("双击:dblclick");
                });
                
            });
        </script>
        
    </head>
    <body>
        <input id="e01" type="text" /><span id="textMsg"></span> <br/>
        <hr/>
        <div id="e02" ></div><span id="divMsg"></span> <br/>
        <hr/>
        <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
    </body>
</html>

  效果:

    隐藏或展示

      show(毫秒数)  hide(毫秒数)

    滑入或滑出

      slideDown(毫秒数):向下滑入

      slideUp(毫秒数):向上滑出

    淡入或淡出

      fadeIn(毫秒数):淡入

      fadeOut(毫秒数):淡出

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        
        div{
            border:1px solid #000;
            width:100px;
            height:100px;
        }
    </style>
    <!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容-->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //藏b1div
            $("#b1").click(function(){
                //切换
                $("#b1Div").toggle(1000);                
            });
            
            //滑出/滑入b2div
            $("#b2").click(function(){
                $("#b2Div").slideToggle(2000);
            });
            
            $("#b3").click(function(){
                $("#b3Div").fadeToggle(3000);
            })
        })        
    </script>
</head>
<body>
    <input type="button" id="b1" value="显示/隐藏 b1Div" />
    <div id="b1Div"></div> <br/>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div> <br/>
    <input type="button" id="b3" value="淡出/淡入b3Div" />
    <div id="b3Div"></div>
        
</body>
</html>

 

posted @ 2020-07-13 15:06  Yisennnn丶  阅读(6)  评论(0编辑  收藏