JQ基本语法、插件介绍

5JQ

5.1$.ajax

语法:

$.Ajax(JSON);

JSON包含常用参数

Url:服务器的地址,获取数据获知推送数据的地方。

Data:要提交过去,给服务器的数据,根据业务需要去添加,不如登录的接口需要传递“用户名和密码”,获取数据信息,不需要传递任何参数。

数据类型:JSON对象。键值对的“键”和服务器保持一致,包括键明的大小写。

Type:数据提交的方式。GET/POST/PUT/DELETE    为了规范,必须大写。

Timeout:设置请求等待时间。时间单位:毫秒   一般人的等待时间是十秒。

Success:请求成功,返回处理。

Error:请求失败

dataType:预期的服务器响应的数据类型。

5.2$.get( )

<script>
    $(document).ready(function () {
        $("#button1").click(function() {
            var user = $("#username"),
                    psw = $("#password"),
                    url = "http://dev.huadianedu.com/TestAjax/servlet/LoginServlet",
                    data = {username:user.val(),password: psw.val()};
            $.get(url, data, success);

        });
        functionsuccess(date, status) {
            var result = JSON.parse(date);
            alert(result + status);
        }

    });
</script>

url:服务器的地址,需要将  传给服务器的参数,手动拼接到URL后面。

handle(data,status):请求之后的处理函数。函数包括两个参数,只处理网络错误之外的处理

data:服务器返回数据

status:请求的状态。


 

 

6.JQ插件

6.1:validate

1.required:必填字段

<label for="text1">用户名:</label><input id="text1" requiredtype="text"><br>

 

2:email:验证邮箱格式,支持很多形式的邮箱

 

3.url,验证网址

 

4.maxlength,输入字符的最大长度

 

验证:驼峰提示,两个不一样时,出错

$.validator.setDefaults({
    submitHandler:function(){
        alert("验证成功!")
    }
});
$("#form1").validate({
    rules:{
        password:{
            required:true,
            maxlength:"6"
       
},
        repassword:{
            equalTo:"[name=password]"
       
}
    }
});

 

6.2accordion

依据标题和内容来自动选择折叠

$("#div1").accordion();

 

Header:定义以那个标签来折叠

Event:定义折叠的事件。例如:mouseover,鼠标移上去就可以折叠打开。

Animate:定义是否有订花。默认true有动画效果。

Disable:禁用折叠

Destroy:销毁折叠

/*$("#div1").accordion("destroy");*/  //破坏折叠

 

6.3预选框

<body>
<label for="text1">查询</label>
<input id="text1" type="text">
</body>
<script>
    $(function(){
        var content=[
                "",
                "华点",
                "华点欢迎你!",
        ];
        $("#text1").autocomplete({
              source:content
       
});
    });
</script>

 

 

6.4growl

title:消息提示

 message:提示的内容

1.growl:默认的样式,后面不加关键词

$("#btn1").click(function(){
    $.growl({title:"消息提示",message:"提示内容"});
});

 

2.notice

$.growl.notice({title:"消息提醒",message:"提示内容"});

 

3.warnimg

$.growl.warning({title:"消息警告",message:"提示内容"});

 

4. error

$.growl.error({title:"消息错误",message:"提示内容"});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值