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.0jquery.validate.min.js
- 中文支持：jquery-validation-1.17.0distlocalizationmessages_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 为准

相关阅读:
hibernate_0100_HelloWorld
MYSQL子查询的五种形式
 JSF是什么?它与Struts是什么关系?
nop指令的作用
 htmlparser实现从网页上抓取数据（收集）
The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter. Struts tags are only usable when the
FCKeditor 在JSP上的完全安装
 Java遍历文件夹的2种方法
 充电电池和充电时间说明
 吃知了有什么好处
原文地址：https://www.cnblogs.com/---------zjh---------/p/13386221.html

jQuery

JQuery

jquery­-confirm(提示框插件)

Validation(校验插件)

jquery-confirm(提示框插件)