jQuery的存在，是为了能够以更少的代码实现更多的功能
jQuery是由JavaScript写的，可以认为就是一个强大JS文件
基本语法：
$(selector).action()
小结：
$()里的内容用来定位html中的对象，相当于完成了DOM的获取对象功能，后边的action表示一个动作，和JavaScriptDOM操作相比可以大大简化代码数量。
在jQuery中的事件都是把on去掉的事件，比如click（onclick）
实例:
在jQuery中，this表示的是DOM对象
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
在jQuery里，很多时候都要使用到$符号，可以简化书写：
浏览器加载完成时触发：
$(function(){});
没有选择器没有动作、表示加载完成后触发
括号里为要触发的函数
相当于JavaScript中的onload事件
在jQuery里，所有的jQuery代码都会在页面DOM资源完全加载后开始运行，所以不会出现找不到对象的错误。
$(alert("hello"));
//网页加载后显示hello
各种选择器：
jQuery选择器定位类似css的选择器，JavaScriptDOM没有选择器，只可以用形如document.getElement的方法
使用id定位：
$(“#xxx”)； //定位到id为xxx的对象
使用class定位:
$(".xxx"); //定位到class为xxx的一组对象
使用标签定位:
$("p"); //定位标签为p的一组对象
奇偶选择器：
奇数：add
偶数：even
使用方法：
没用使用函数的方式，使用奇偶选择器只要再括号里加上 :xxx 即可
$("#p:even") //选中偶数（包括0）
$("#p:odd"); //选中奇数
类似的还有:
:first //选中第一个
:last//选中最后一个
子孙选择器：
类似css：
选择在包围里的p标签，包括孩子、孙子，（多代）
$("div p");
选择直接孩子，只有一代：
$("div > p");
属性选择器：
$("p[name='1']"); //选择name为1的对象
$("p[name|='1']"); //选择name中前缀为1的对象
$("p[name~='1']");
```需要注意的时，jQuery获取到的对象时jQuery对象，使用DOM方式获取的时DOM，不可以混用，jQuery和DOM对象中的方法都是不一样的。
但是jQuery还提供了一个退路：使用get(0)即可获取该jQuery对象对应的DOM对象，但是一般少用。
###### jQuery操作方式和JavaScriptDOM操作方式实现：
一下以id为“p”的标签操作做对比：
显示隐藏对象：
```javascript
$("#p").show();
//document.getElementById("p").style.display = "block";
使用jQuery操作对象属性：
$("#p").prop("")
其他jQuery的action函数：
参数格式：
（毫秒数，回调函数）
例如：
hidden(1000,function(){alert("123")});
//动画持续1秒，完成后执行回调函数
相同参数的函数和总类：
hidden();//隐藏对象(移出)
show();//显示对象（移入）
toggle();//控制对象的显示和隐藏，可以看作是一个开关
slideUp();//滑动退出（上拉）
slideDown();//滑动出现（下滑）
slideToggle();//滑动出现或退出
fadeIn();//淡入
fadeOut();//淡出
fadeToggle();//淡入或淡出
fadeTo()
参数不一样，可以设置毫秒值和透明度，如（1000，0.5）：一秒后透明度变为0.5
animate();
参数为{params},speed,callback
第一个是类似css的样式数据，可以从当前样式变到指定样式
注意，{}中的数据按照 , 隔开,数值必须使用引号（单双均可），否则不生效。
部分例子：
隐藏显示对象：
$("#p").hidden();
//document.getElementById("p").style.display = "none";
修改对象包含的文字信息：
$("#p").text("good");
// document.getElementById("p").innerText = "good";
添加点击事件：
$("#p").click(function(){alert("good");})
//document.getElementById("p").addEventListener("click",function(){alert("good");})
{
width:'50px',
height:'50px'
}
第二个是速度，不是必须参数
第三个是回调函数，不是必须参数
注意：
在jQuery的animate里，样式数据并不是完全等于css中的书写方式，属性没有‘-’符号，使用驼峰命名法命名属性。
如：
fontSize//font-size
多个函数可以在同一行对同一个对象使用：
$("#p").fadeIn(1000).fadeOut(1000);
设置属性：
如果只有一个参数，表示获取，如果有两个值，表示设置属性为某值:
$("#p").prop();
validation使用
jQuery是个轻量级的工具，也可以让开发者在此基础上继续开发插件
例如插件validation：
可以使用label标签设置提示信息的位置：
//abc为某标签的name属性
<label for="abc" class="error"></label>
可以设置自己定义的提示信息：
messages:{
username:{
required:"还没有输入信息",
maxlength:"最大长度为6",
minlength:"最小长度为3"
},
...
}
（validation使用完整实例）：
以下使用菜鸟在线jquery
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script-->
<script>
$(function (){
$("#register").validate({
rules:{
username:{
required:true,
maxlength:6,
minlength:3
},
password:{
required:true,
maxlength:15,
minlength:8
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
username:{
required:"不可以不填",
maxlength:"最大长度为6",
minlength:"最小长度为3"
},
password:{
required:"不可以不填",
maxlength:"最大长度为15",
minlength:"最小长度为8"
},
confirm_password:{
required:"不可以不填",
equalTo:"两次输入不一致"
},
email:{
required:"不可以不填",
email:"格式有问题"
}
}
});
});
</script>
</head>
<body>
<form id="register" >
用户名:<input id="username" name="username" type="text"><br>
密码:<input id="password" name="password" type="password"><br>
验证密码:<input id="confirm_password" name="confirm_password" type="password"><br>
Email:<input id="email" name="email" type="email"><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
