jQuery 2

最新推荐文章于 2023-03-14 13:17:10 发布

zhuxyyds

最新推荐文章于 2023-03-14 13:17:10 发布

阅读量472

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/zhuxyyds/article/details/120800395

版权

常用的 jQuery 事件方法

$(document).ready(function) 文档完全加载完后执行函数
click(function) 方法是当按钮点击事件被触发时会调用一个函数
dblclick(function)双击元素时，会发生 dblclick 事件。
mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
hover(function)方法用于模拟光标悬停事件。
focus(function)当元素获得焦点时，发生 focus 事件。
blur(function)当元素失去焦点时，发生 blur 事件。

    <script>
        //1.html 通过事件属性来设置对应事件
        //function 事件处理函数(){}
        //<input type="button"  value="按钮" onclick="事件处理函数">
        //2.得到html元素的dom对象，调用方法的设置
        /*
         window.onload=function(){
                var  btndom=document.getElementById("btn1");
                btndom.onclick=function(){}
            }
            <input id="btn1" type="button"  value="按钮" onclick="事件处理函数">*/
        

        //使用按钮的点击事件来学习事件的设置
        $(function(){
            $("#b1").click(function(){
                alert("点击事件");
            });
        })
        //双击事件
        $(function(){
            $("#b2").dblclick(function(){
                alert("双击事件");
            });
        })
        //鼠标指针穿过元素时，会发生 mouseenter 事件
        $(function(){
            $("#b3").mouseenter(function(){
                alert("鼠标移入事件");
            });
        })
        //鼠标指针离开元素时，会发生 mouseleave 事件
        $(function(){
            $("#b4").mouseleave(function(){
                alert("鼠标离开事件");
            });
        })
        //模拟光标悬停事件
        $(function(){
            $("#a1").hover(function(){
                alert("光标悬停");
            });
        })
        //元素获得焦点时
        $("#t1").focus(function	(){
					$(this).val("background-color");
				});
        //元素失去焦点时
		$("#t1").blur(function(){
				   alert($(this).val());
				});
    </script>
</head>
<body>
    <input type="button" id="b1" value="单击" > 
    <br><br>
    <input type="button" id="b2" value="双击" >  
    <br><br> 
    <input type="button" id="b3" value="鼠标移入" >
    <br><br>
    <input type="button" id="b4" value="鼠标离开" >
    <br><br>
    <a id="a1" href="#">光标悬停</a>
    <br><br>
    <input id="t1" type="text" value="获得焦点和失去焦点">
</body>

元素的隐藏和显示动画【就是元素的隐藏和显示】

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

    <script>
        $(function(){
             /*
                    $("[src]").hide();
                     $("[src]").hide(3000);
                    $("[src]").hide(3000,function(){
                    });
                    $("[src]").fadeOut(3000);
                    $("[type]").val("显示");
                    */
            $("[type]").click(function(){
                if($("[type]").val()=="隐藏"){
                    $("[src]").slideUp(3000);
                    $("[type]").val("显示");
            }else{
                /*
                    $("[src]").show();
                    $("[src]").show(3000);
                    $("[src]").show(3000,function(){  
                    });

                    $("[src]").fadeIn(3000);
                    $("[type]").val("隐藏");
                    */
                $("[src]").slideDown(3000);
                $("[type]").val("隐藏")
            }
            });
        })
    </script>
</head>
<body>
    <input  type="button" value="隐藏"> <br><br>
    <img src="css/faq03.jpg">
</body>

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

    <style>
        img{
        position:absolute;
        top:50px;
        left:50px;
    }

    </style>
    
    <script>
        $(function(){
            $("#b1").click(function(){
                $("[src]").animate(
                    {"position":"absolute","top":"50px","left":"1000px"},
                    5000,
                    function(){
                        alert("动画执行结束");
                    }
                );
            });
            $("#b2").click(function(){
                $("[src]").stop();
            }) 
        })
    </script>

</head>
<body>
    <input id="b1" type="button" value="开始动画">
    <br>
    <input id="b2" type="button" value="停止动画">
    <br><br>
    <img src="css/tu1.jpg" style="height: 400px; width: 400px;">
</body>

总结:

jQuery 选择器
jQuery对象与javascriptDOM对象转换
jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
jQuery添加html元素[append()/ after() / before()]
jQuery删除html元素[remove()/empty()]
jQuery控制css 【css(“css属性名”)

/ css(“css属性名”,”属性值”)

/css({“css属性名”:”属性值”,....})

/addClass(class类型样式)

/removeClass(class类型样式)

jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
jQuery的each方法

jQuery的AJAX操作

jQuery - AJAX的常用方法

$.ajax()执行异步 AJAX 请求

语法：$.ajax({name:value, name:value, ... })

url:"后端处理程序的访问路径"---后端处理程序的访问路径

type:"GET"/"POST" --- 规定请求的类型（GET 或 POST）

data:{userid:userid} --- 规定要发送到服务器的数据。

dataType:"xml"/"text"/"json" ----规定预期的服务器响应的数据类型

success:function(result,status,xhr) --- 规定当请求成功时运行的函数。

async:true/false ---布尔值，表示请求是否异步处理。默认是 true。

error:function(status,xhr,error) ---请求失败要运行的函数。

    <script>
        //javascript 的for each 方法
            // window.onload=function(){
            //     var pdom=document.getElementsByTagName("p");
            //     $(pdom).each(function(index){
            //         var size = index*10+20;
            //         $(this).css("font-size",size+"px");
            //     })
            // }
        //jquery 的 each()
                $("selector").each(function(index,[element]){  })
                $(function(){
                    var pdom=$("p");
                    pdom.each(function(index){
                        // index---元素下标
                        // element---当前元素的dom对象，可以使用this代替
                        var size=index*10+20;
                        $(this).css("font-size",size+"px");
                    })
                })
    </script>
</head>
<body>
    <p>测试遍历元素1</p>
    <p>测试遍历元素2</p>
    <p>测试遍历元素3</p>
    <p>测试遍历元素4</p>
</body>

$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据

语法

$.get(URL,data,function(data,status,xhr),dataType)

url----后端处理程序的访问路径

data---提交给后端处理程序的数据。

function(data,status,xhr)----当请求成功时运行的函数

dataType---"text"、"json" 预期的服务器响应的数据类型.

    <script>
        $(function(){
            $("#login").click(function(){
                var name=$("#name").val();//得到用户名
                var pass=$("#pass").val();//得到密码
                //var myurl = "http://localhost:8080/login?username="+name+"&password="+pass;
                //$.ajax({name:value, name:value, ... })
                //url:"后端处理程序的访问路径"---后端处理程序的访问路径
                //type:"GET"/"POST"  规定请求的类型（GET 或 POST）
                //data:{userid:userid}  规定要发送到服务器的数据。
                //dataType:"xml"/"html"/"text"/"json"  规定预期的服务器响应的数据类型
                //success:function(result,status,xhr)   规定当请求成功时运行的函数。
                //async:true/false  布尔值，表示请求是否异步处理。默认是 true。
                //error:function(status,xhr,error)   请求失败要运行的函数。
                $.ajax({
                    url:"http://localhost:8080/login?username="+name+"&password="+pass,
                    type:"GET",
                    dataType:"text",
                    success:function(resp){
                        var jsonobj=JSON.parse(resp);
                        // alert("resp-"+resp);
                        if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                        }else{
                           alert("用户名密码错误!");
                        }
                    },
                    async:true,
                    error:function(){}
                })
            })
          /*$("#login").click(function(){
                var name=$("#name").val();//得到用户名
                var pass=$("#pass").val();//得到密码
                $.ajax({
                    url:"http://localhost:8080/login?username="+name+"&password="+pass,
                    type:"POST",
                    dataType:"text",
                    success:function(resp){
                        var jsonobj=JSON.parse(resp);
                        // alert("resp-"+resp);
                        if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                        }else{
                           alert("用户名密码错误!");
                        }
                    },
                    async:true,
                    error:function(){}
                })
            })*/

          /*$.ajax({
                    url:"http://localhost:8080/login",
                    type:"POST",
                    data:{username:name,password:pass},
                    dataType:"text",
                    success:function(resp){
                       var jsonobj=JSON.parse(resp);
                       if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                       }else{
                           alert("用户名密码错误!");
                       }
                    },
                    async:true,
                    error:function(){}
                    })
                })*/
        })
    </script>
</head>

<body>
    <table border="1px">
        <tr align="center">
            <td colspan="2">
                <h2>测试Jquery的get</h2>
            </td>
        </tr>
        <tr align="center">
            <td>用户名:</td>
            <td><input id="name" type="text"></td>
        </tr>
        <tr align="center">
            <td>密码:</td>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr align="center">
            <td colspan="2"><input id="login" type="button" value="登陆"></td>
        </tr>
    </table>
</body>

    <script>
        $(function(){
            $("#login").click(function(){
                var name=$("#name").val();//得到用户名
                var pass=$("#pass").val();//得到密码
              /*$.get("http://localhost:8080/login?username="+name+"&password="+pass,
                function(resp){
                    var jsonobj=JSON.parse(resp);
                        // alert("resp-"+resp);
                        if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                        }else{
                           alert("用户名密码错误!");
                        }
                },"text");*/

                $.get("http://localhost:8080/login","username="+name+"&password="+pass,
                function(resp){
                    var jsonobj=JSON.parse(resp);
                        // alert("resp-"+resp);
                        if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                        }else{
                           alert("用户名密码错误!");
                        }
                },"text");
                })
         })
    </script>
</head>

<body>
    <table border="1px">
        <tr align="center">
            <td colspan="2">
                <h2>测试Jquery的get</h2>
            </td>
        </tr>
        <tr align="center">
            <td>用户名:</td>
            <td><input id="name" type="text"></td>
        </tr>
        <tr align="center">
            <td>密码:</td>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr align="center">
            <td colspan="2"><input id="login" type="button" value="登陆"></td>
        </tr>
    </table>
</body>

$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据

语法$.post(URL,data,function(data,status,xhr),dataType)

url----后端处理程序的访问路径

data---提交给后端处理程序的数据。

function(data,status,xhr)----当请求成功时运行的函数

dataType---"text"、"json" 预期的服务器响应的数据类型.

    <script>
        $(function(){
            $("#login").click(function(){
                var name=$("#name").val();//得到用户名
                var pass=$("#pass").val();//得到密码
              /*$.post("http://localhost:8080/login?username="+name+"&password="+pass,
                function(resp){
                    var jsonobj=JSON.parse(resp);
                        // alert("resp-"+resp);
                        if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                        }else{
                           alert("用户名密码错误!");
                        }
                },"text");*/

                var url="http://localhost:8080/login";
                var data={username:name,password:pass};
                $.post(url,data,function(resp){
                    var jsonobj=JSON.parse(resp);
                    if(jsonobj.success){
                            window.location.href="test 1016 5s.html";
                    }else{
                           alert("用户名密码错误!");
                       }
                },"text");
                })
         })
    </script>
</head>

<body>
    <table border="1px">
        <tr align="center">
            <td colspan="2">
                <h2>测试Jquery的get</h2>
            </td>
        </tr>
        <tr align="center">
            <td>用户名:</td>
            <td><input id="name" type="text"></td>
        </tr>
        <tr align="center">
            <td>密码:</td>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr align="center">
            <td colspan="2"><input id="login" type="button" value="登陆"></td>
        </tr>
    </table>
</body>

zhuxyyds

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 2

常用的 jQuery 事件方法$(document).ready(function)文档完全加载完后执行函数 click(function) 方法是当按钮点击事件被触发时会调用一个函数 dblclick(function)双击元素时，会发生 dblclick 事件。 mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。 mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。 hover(function.
复制链接

扫一扫