jQuery

JQuery

介绍：JQuery是一个javascrapt框架,兼容css3,还兼容各种浏览器, 在企业开发中所占据的比例比较大。
基本语法：JS和JQ不能调用对方的属性和方法。
获取对象：jQuery(选择器) 或者 $(选择器) 。
JS和JQ对象的转换
1. 将dom对象转换为jq对象，语法为 $(dom对象)
2. 将jq对象转换为dom对象，语法为 jq对象[0]
页面加载的三种写法：
```
//js写法
window.onload=function(){alert("页面加载")};
//jq写法
$(document).ready(function(){alert("页面加 载")});
//jq简写
$(function(){alert("页面加载")});
```
- js原生如果写多个,会出现覆盖效果,jq中不会出现覆盖效果
- 加载时间优先于js ，顺序是 jq界面加载1-->jq界面加载2-->原生界面加载2
常用选择器（主要看帮助文档）
属性
1. attr
  1. 获取标签的指定数据的值 $("img").attr("src");
  2. 设置标签指定一个属性值 $("input").attr("value","张三");
  3. 设置标签的指定多个属性值 $("img").attr({ src: "test.jpg", alt: "Test Image" });
2. removeAttr(name)
  1. 移除指定属性 $("img").removeAttr("src");
3. prop
  1. 功能和 attr 相同,如果是标签原生属性推荐使用 prop
4. removeProp(name)
  1. 功能和 removeAttr 相同,如果是标签原生属性推荐使用 prop
5. 添加和删除class属性
  - ```
  addClass("属性值") //给元素添加class属性 
  removeClass("属性值") //给元素删除class属性 
  toggleClass("属性值") //如果存在（不存在）就删除（添加）一个类
```
6. html() :获取或改变指定元素的html元素以及文本
  - ```
  返回p元素的内容 $("p").html(); 
  设置p元素的内容 $("p").html("Hello <b>world</b>!");
```
7. text() :获取或者改变指定元素的文本
  - ```
  返回p元素的文本内容 $("p").text(); 
  设置p元素的文本内容 $("p").text("Hello world!");
```
8. val():获取或者改变指定元素的value值（一般是表单元素）
  - ```
  获取文本框中的值 $("input").val(); 
  设定文本框的值 $("input").val("hello world!");
```

节点

创建节点

var $li_1 = $("<li>新增节点：数据结构</li>");

添加节点

//通过父节点的jq对象调用append方法进行节点的添加,也可以通过子节点调用appendto父节点操作
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点 
$parent.append($li_1); // 添加到<ul>节点中，将$l i_1放在parent的后面追加 
$parent.prepend($li_1); // 添加到<ul>节点中，将$li_1放在parent的前面追加

删除节点 ：通过节点本身调用 remove() 方法,进行删除操作
清空所有子节点：通过父节点调用 empty() 清空其中的所有子节点

事件绑定

$("p").click(function(){ alert(this);});
$("p").on("click", function(){alert(this);});

遍历函数

获取元素个数

alert($("input").size()); 
alert($("input").length);

遍历

//遍历有两种方式 
1.$(ele).each(function(index,domElement){}); 
2.$.each($(ele),function(index,domElement){});
//第一个参数表示循环的索引从0开始,第二个参数表示取到 的dom对象(注意不是jq对象,是dom对象)

serialize() :序列化
1. 很多时候我们需要将表单数据进行提交,通过 serialize() 方法可以迅速将表单的数据进行序列化,转换的格式为 name 属性值=value属性值&name属性值=value属性值

jquery-confirm(提示框插件)

环境搭建
- 将插件中的 dist 文件夹中的 css 文件和 js 文件拷贝到web项目中
在页面中引入相应的两个文件。
通过查看插件中的 index.html 文件查看如何使用具体的提示框。

Validation(校验插件)

环境搭建
- 下载https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0
- jquery-validation-1.17.0\jquery.validate.min.js
- 中文支持：jquery-validation-1.17.0\distlocalization\messages_zh.min.js
使用方式
1. 因为Validation是JQuery中的插件,所以需要在导入JQuery 后,在导入Validation ,message.js 需要在 validate.js 之后
2. 需要给form设置一个id属性
3. 在页面加载的时候调用formId的 validate()

校验格式

校验类型	取值	描述
required	true\|false	必输字段
remote	url路径	ajax校验
email	true	必须输入正确格式的电子邮件
url	true	必须输入正确格式的网址
date	true	必须输入正确格式的日期
dateISO	true	日期(YYYYMMdd)
number	true	必须输入合法的数字(负数，小数)
digits	true	必须输入整数
creditcard	true	必须输入合法的信用卡号
equalTo	“#field”	输入值必须和#field相同
accept	“txt”	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength	5	输入长度最多是5的字符串(汉字算一个字符)
minlength	10	输入长度最小是10的字符串(汉字算一个字符)
rangelength	[5,10]	输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
range	[5,10]	输入值必须介于 5 和 10 之间
max	5	输入值不能大于5
min	10	输入值不能小于10

模板

$(function(){ 
    $("#formId").validate( 
        rules:{ 
            字段名:{ 
                校验类型:校验取值, 
                校验类型:校验取值 },
            字段名:{ 
                校验类型:校验取值, 
                校验类型:校验取值 } },
        messages:{ 
            字段名:{ 
                校验类型:提示信息, 
                校验类型:提示信息 },
            字段名:{ 
                校验类型:提示信息, 
                校验类型:提示信息 } 
        } 
    ); 
});

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Insert title here</title> 
        <script type="text/javascript" src="js/jquer y-1.12.4.min.js"></script> 
        <script type="text/javascript" src="js/jquer y.validate.min.js"></script> 
        <script type="text/javascript" src="js/messa ges_zh.min.js"></script> 
        <script type="text/javascript"> 
            $(function(){ 
                $("#checkForm").validate({ 
                    rules:{ 
                        user:{
                            required:true, 
                            minlength:6 
                        },pwd:{
                            required:true, 
                            email:true 
                        },rpwd:{
                            required:true, equalTo:"[name=pwd]" 
                            /*如果使用的是id */ /* equalTo:"#pwd" */ 
                        } },

                    messages:{
                        user:{
                            required:"用户名不能为空", 
                            minlength:"长度不能少于6位" 
                        },pwd:{
                            required:"密码不能为空", 
                            email:"必须输入email地址" 
                        },rpwd:{
                            required:"确认密码不能为空", 
                            equalTo:'两次密码不一致' 
                        } } }); 
            }); 
        </script> 
    </head> 
    <body> 
        <form action="#" id="checkForm"> 
            姓名 <input type="text" name="user"><br> 
            密码 <input type="text" name="pwd"><br> 
            确认密码<input type="text" name="rpwd"><br> 
            <input type="submit"> 
        </form> 
    </body> 
</html>

自定义校验插件
1. 在js中定义自定义校验方式
```
$
    .validator
    .addMethod("方法名称",function(value,ele,params){},"提示信息") 
```
  1. 方法名称 ,就是我们对校验规则起的名字
  2. function 方法的参数,是插件给我们传的值,参数名称可以任意,第一个参数是对应文本框中的值,第二个参数是对应的dom对象,第三个参数指的是表单校验规则中参数值
  3. 提示信息指的是如果上述 function 中的返回值是 false 的时候页面中默认显示的内容,如果在校验的时
    
    候又设置了 messages 的时候就以 message 为准

posted @ 2020-07-27 16:44 庄嘉豪阅读(243) 评论(0) 编辑收藏举报

刷新页面返回顶部

庄嘉豪

jQuery

JQuery

jquery­-confirm(提示框插件)

Validation(校验插件)

公告

jquery-confirm(提示框插件)