Jquery常用

最新推荐文章于 2023-08-07 10:43:23 发布

lizhenfu123

最新推荐文章于 2023-08-07 10:43:23 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/lizhenfu123/article/details/25431001

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery的基本使用技巧，包括页面加载方法、事件绑定、元素显示隐藏及AJAX应用等。通过实例详细展示了如何利用jQuery简化DOM操作，实现动态网页效果。

1、加载页面方法
$(document).ready(function(){
//编写代码
})

$(function(){
//编写代码
})

$().ready(function(){
    //编写代码
})
2、事件绑定
bind(type [,data] , fn);
其中type是事件类型：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove
、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error
其中 data可选是传递给事件对象的额外数据对象
fn用来绑定的处理函数
例子：
$(function(){
    $("#panel").bind("click",function(){
     $(this).next().show();
})
})

例子：
$(function(){
    $("#panel").bind("click",function(){
     var $content = $(this).next();
  if($content.is(":visible")) //如果是现实状态
  {
      $content.hide();
  }

})
})
例子:
$(function(){
    $("#panel h5.head").mouseover(function(){
     //编写代码
});
});
3、show和hide
show()和hide()不带任何参数时立即现实和消失
show(6000)或hide(6000)在指定时间内显现或消失毫秒
4、ajax
load(url [, data] [, callback]) //能载入远程html代码并插入dom中。
load("test.html" , function(){
    //编写代码
})

.load("test.html" , function(responseText,textStatus,XMLHttpRequest){
    //responseText     请求返回的内容
//textStatus       请求状态 sucess、error、timeout、notmodified
//XMLHttpRequest   XMLHttpRequest对象

})

$.get("get2.php",{
       username:$("#username").val(),
       content:$("#countent").val()
       }, function(data,textStatus){   //回调函数 data返回的内容，textStatus请求状态
           alert(data.result);
},"json");

$.post("get2.php",{
       username:$("#username").val(),
       content:$("#countent").val()
       }, function(data,textStatus){   //回调函数 data返回的内容，textStatus请求状态
           alert(data.result);
},"json");

$.ajax({
        type: "post", //以post方式与后台沟通
        url : "login.php", //与此php页面沟通
        dataType:'json',//从php返回的值以 JSON方式解释
        data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p
        success: function(json){//如果调用php成功
                          $('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置
        }
});