javaScript 框架 jQuery
1.自己封装dom操作
就是将document.getElementById("id")封装成一个方法，然后单独放到一个
js文件中，然后，直接可以调用这个方法获取标签对象
例如：
function $(name) {
//通过用户传递进来的name名称，也就是标签名称获取到标签对象
var element = document.getElementById(name);
return element;
}2.Dom和jquery之间的相互转化：
dom-->jquery :$(dom) dom就是js对象
jquery--->dom对象 jquery对象[0];或者 jQuery对象.get(0);
对象和jQuery对象的区别：
1. js对象是通过dom操作获取的对象，指的是页面上的一个标签对象；
2. jQuery对象是通过jQuery的手段获取到的一个类数组对象，里边包含的有JS对象；
3.页面加载，就是整个html文档加载完成时候执行
js中 window.load(){...}
jquery中 $(function(){...}) 或者 $(document).ready(funcition(){...}) 4.时间的绑定 （类似于js中的动态绑定）
例如有一个按钮 <button id="btn"></button>
现在给这个按钮动态的绑定一个点击事件
/**
步骤
1.首先，通过jquery中的选择器，来获取这个按钮标签的对象
2.利用jquery中的click方法给这个按钮绑定一个点击事件
**/
如下：$("#btn").click(function(){
....
})
5.jquery中常见的事件：click鼠标单击事件 blur失去焦点事件 change内容改变事件 submit表单提交事件
事件的切换【了解】 鼠标的移入移出事件:hover(fn1,fn2);
事件切换：
jq对象.hover(fn1,fn2);
fn1:mouseover 鼠标移入事件
fn2:mouseout 鼠标移出事件
6.选择器★
1.基本选择器
$("element") 元素选择器
$("#id") id选择器器
$(".class") class属性选择器
$("选择方式1，选择方式2") 将多个选择器选中的标签合并返回
例如：
var $2 = $(".ad1,#password");
$2.css("background-color","red"); //执行的结果就是这两个都是相同的效果
$("*") 选择页面上的所有标签
2.层级选择器
A B，获取A元素内部的所有的B元素，后代
A>B，获取A元素下的所有的B子元素 父子
A+B，获取到A元素同级下的一个B元素 一个兄弟（最大的兄弟）
A~B，获取到A元素同级下的所有的B元素 所有的兄弟
3.基本过滤选择器
:first 第一个元素
:last 最后一个元素
:even 索引值为偶数的元素
:odd 索引值为基数的元素
:eq(索引值) 索引值等于一个数的元素
:gt(索引值) 索引值大于一个数的元素
:lt(索引值) 索引值小于一个数的元素
:not('选择器2')选择某一个不为选择器2的元素
基本过滤选择器的原理：就是当jquery利用$()选择器选择了一些
元素以后，但是这个元素不是我们想要的
所以就需要利用过滤器过滤一下，留下某
一个元素或者一小部分元素，留下来就是
目标元素。
注意点：选择器中有多个括号嵌套的时候，除了数字角标不需要将里面的括号
用单引号括起来，其余的都需要将单引号括起来，演示如下：
例如：
/*可以理解从div数据中按照索引值去除div元素*/
//页面加载事件
$(function () {
//绑定事件
$("#btn1").click(function () {
//选择第一个div元素
$("div:first").css("background-color","red");
})
//"绑定事件
$("#btn2").click(function () {
//选择最后一个div元素
$("div:last").css("background-color","yellow");
})
//绑定事件
$("#btn3").click(function () {
//选择索引值为偶数的元素，从0开始
$("div:even").css("background-color","green");
})
//绑定事件
$("#btn4").click(function () {
//选择索引值为基数的div
$("div:odd").css("background-color","green");
})
//绑定事件
$("#btn5").click(function () {
$("div:eq(3)").css("background-color","red");
})
//绑定事件
$("#btn6").click(function () {
//选择索引值大于3div元素
$("div:gt(3)").css("background-color","red");
})
//绑定事件
$("#btn7").click(function () {
//选择class不为one的所有div元素
$("div:not('.one')").css("background-color","red");
})
4.属性过滤选择器
[attribute] $("input[name]") 过滤拥有指定属性的元素
[attribute=value] $("input[name=userName]") 过滤出属性值=value的元素
[attribute!=value] $("input[name!=password]") 过滤出属性值！=value的元素
[attribute^=value] $("input[name^=myClass]") 过滤出属性值以value开始的元素
[attribute$=value] $("input[name$=myClass]") 过滤出属性值以value结束的元素
[attribute*=value] $("input[class*=myClass]") 过滤出属性值含有value的元素
[attr1][attr2][attr3]... $("input[name=username][value!=张三]..."") 过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合
注意点：例如在 $("input[name=userName]") 写法中，[name='userName'] 加上括号和不加括号都是一样的效果，但是建议加上！
5.表单对象属性过滤选择器
:enable $("input:enable") 过滤可用的input元素对象，因为可以在form表单中设置有些表单对象可以使用，有些不可用！所
所以可以利用这个enable进行筛选！
:disable $("input:disable") 过滤不可用的元素
:checked $("input[type=checkbox]:checked") 过滤被选中元素(复选框、单选框等，不包括select中的option)
:selected $("select option:selected") 过滤被选中的元素select的option
6.可见性过滤选择器
可见：$("div:visible") 选取所有可见的div元素
不可见 $("div:hidden").show(); 选取所有不可见的div元素,可以利用jQuery中的 show()方法将它们显示出来
1. 隐藏域：<input type="hidden" name="id" value="520">
2. diaplay属性隐藏：<div style="display:none"></div> ;
7.jQuery的操作方法
1.jQuery的dom操作
(1) html代码 text文本 val值 的操作
val()是jQuery中方法，用来获取到表单标签中的value属性，前提是这个表单标签设置了value属性
* 如果是设置value属性，就是将属性值放在val函数中，如：val("属性值")
* 这个val()对应着js中的value方式获取
* 例如：
* //js
* var value = document.getElementById("username").value;
* //jQuery
* var val = $("input[name=username]").val();
*
* html是jQuery中获取某一个标签的中的所有内容，包括标签里面嵌套的标签,对应着js中的innnerHTML
*
* 获取：jQuery对象.html();
* 设置：jQuery对象.html("内容");
*
* text是jQuery中获取某一个标签中的标签体中的内容，不包含标签，对应着js中的innerTEXT
*
* 获取：jquery对象.text();
* 设置：jQuery对象.text("内容");
(2) 属性操作：attr()和prop()
对标签的普通属性的操作使用attr()方法更准确；
在获取checked或者selected属性值的时候建议使用prop()方法，其余都使用attr()方法；
(3) class属性操作和css样式操作
class属性操作：
addClass()：给元素添加class属性；
removeClass()：给元素移除class属性；
css属性操作：
css(cssName)：获取标签的css样式；
css(cssName,cssValue)：给标签添加css样式；
注意：如果是在css样式操作的时候，操作一个样式可以直接是jQuery对象.css("background-color","red");
如果是多组样式的操作时候，使用： jQuery对象.css({
"background-color":"red",
"border":"1px solid red"
})
(4) html标签的创建 插入 删除 操作
创建：$(html代码) 例如$("<span>我是一个span标签</span>");
插入：
内部插入：就是在一个标签的里面在插入一个之标签
分为：在这个标签的前面插入prepend (被动插入) prependTo (主动插入)
在这个标签的后面插入append (被动插入) appendTo (主动插入)
外部插入：就是将一个标签插入到和这个标签的同级的位置，是兄弟的关系
分为：在标签的前面插入一个同级节点 before (被动插入) insertBefore (主动插入)
在标签的后面插入一个同级节点 after (被动插入) insertAfter (主动插入）
删除操作：jQuery对象.empty() 删除的是这个标签的子标签，自身保留
jQuery对象.remove() 删除的是整个 包括自身
2.jQuery效果
1.元素的显示和隐藏
show(speed,fn)
hide(speed,fn)
toggle(speed,fn)
2.元素的滑动显示和隐藏
slideUp(speed,fn)
slideDown(speed,fn)
slideToggle(speed,fn)
3.元素的淡入淡出效果
fadeln(speed,fn)
fadeOut(speed,fn)
fadeToggle(speed,fn)
8 案例： 弹出广告，利用jQuery的效果来操作
表格的隔行换色，利用jQuery的样式css操作
全选全不选，jQuery操作方法中的属性操作，获取到总的复选框的选中状态，然后去改变分的复选框的选中状态
省市联动，利用change事件，然后配合jQuery操作方法中的html元素的创建 插入 删除 来操作
省市联动案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = ["石家庄", "邯郸", "保定", "秦皇岛"];
arr[1] = ["郑州市", "洛阳市", "安阳市", "南阳市"];
arr[2] = ["沈阳市", "锦州市", "大连市", "铁岭市"];
arr[3] = ["长春市", "吉林市", "四平市", "通化市"];
</script>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*步骤
* 需求：在选择省以后动态的加载对应的市
* 1.通过change事件，获取省的value值 val() 对应的市为 arr[value]
* 2.遍历数组，动态创建市的标签，插入到市的select中。
* */
/*页面加载事件*/
$(function () {
//获取到省的select标签对象
$("select[name='pro']").change(function () {
/*
* 注意：就是当用户选择一个省份，将市信息显示到市的select中以后，
* 当用户第二次来选择省份的时候，需要将市的select中的数据清空，也就是重新覆盖
*
* */
$("#city").html($("<option>--请选择--</option>"))
/*这种写法，不是太好理解，其实就是option被选中以后，会将value值给select,因为最后提交到服务器还是需要
select标签的name属性的，所以在select中也是可以直接访问到用户选择的option选项的
*/
/*var value = this.value;
alert(value);*/
//一般的写法，也是一种比较好理解的写法，使用了一个表单对象选择器
var value = $("select[name='pro'] option:selected").val();
//将这个value值给数据，当做数组的角标，因为这个value值正好是对应数组的角标
//利用var 来接收一个数组对象，这个数组中的元素都是一些基本元素
var any = arr[value];
//遍历数组，然后创建市的option，插入到市的select中即可！
$(any).each(function (index,element) {
//index为角标
//element为市，不是对象，因为这是一个普通的数组
//获取到市的select对象
$("#city").append($("<option>"+element+"</option>"));
})
})
});
</script>
</head>
<body>
<form action="#" method="get">
<select name="pro" >
<option>--请选择--</option>
<option value="0">河北</option>
<option value="1">河南</option>
<option value="2">辽宁</option>
<option value="3">吉林</option>
</select>省
<select id="city">
<option>-请选择-</option>
</select>市
</form>
</body>
</html>
jquery高级部分：
jQuery的插件 validate
jQuery插件定义： 插件就是将jQuery实现的某些特定的功能，进行封装，而我们可以按照
插件的语法去操作，就可以实现很多复杂的功能。
validate 插件
插件的语法：类似于json格式的语法
使用步骤：
1.导入jQuery文件，因为这个是依赖jQuery的
2.导入jQuery.validate.js文件
3.在页面加载的代码中，确定需要对哪个表单进行校验
4.获取到需要校验的表单对象 对象.validate({
rules:{
//规则
},
messages:{
//提示信息
}
})
例如：
/*页面加载事件*/
$(document).ready(function () {
//一定要知道你需要对那个表单进行校验，对id=fomrId
$("#formId").validate( {
rules :{
//校验规则
username:{
required:true
},
password:{
required:true,
minlength :4,
maxlength :6
},
repassword:{
required :true,
equalTo:$("input[name=password]")
},
card:{
//校验身份证号码的长度时候满足条件
//使用自己写的校验规则
checkCard:[12,18]
}
},
messages :{
//返回的消息
username :{
required:"用户名不可以为空"
},
password:{
required:"密码不可以为空",
minlength:"最小长度为4",
maxlength:"最大长度为6"
},
repassword:{
required:"请在输入一次密码",
equalTo:"两次输入不相同"
}
},
card:{
checkCard:"身份证的位数不满足条件！"
}
})
})
验证规则：例如上面代码中的 required:ture 就是一个验证规则是一条默认的验证规则，required为规则的名称 ture为规则的参数
自定义验证规则：在实际开发中，默认的规则不满足需求的时候，就需要自己定义验证规则从而达到表单校验的任务！
自定义验证规则的语法：
$.validator.addMethod(name , method , message);
说明：name为规则的名称 例如 required
method为 执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。
message为错误提示信息
注意：name和message都需要使用单引号引用起来
method 是处理函数 格式如下：
funcition(value,element,params){}
说明：value 为从文本框中获取到的值，也是用户输入的值
element为这个文本框的对象
params 为用户在使用这个验证规则的时候，传递进来得参数 例如 ： checkCard :[15,18]
例如：(这是一个自定义身份证规则的验证规则)
$.validator.addMethod('checkCard',function (value,element,params) {
if(value.length==params[0]||value.length==params[1]){
//长度属于这两个都是合法的，放行
return true;
}else{
return false;
}
},'身份证号码长度必须是{0}位或者{1}位数字');
对自定义validate中的参数的理解：
1.以上的{0} {1} 获取到是在使用这个规则的时候，checkCard:[参数1，参数2]，但是这个{0}方式在message中使用
2.从使用规则的那边传递过来的参数就是这个方法中的params，可以通过params[0] 和 params[1] 访问到第一个参数和第二个参数
this关键字总结：只有js中有this关键字
1.在动态绑定事件中，this指向的是被绑定事件的js标签对象；
2.在遍历的过程中，this指向的是被遍历到的那个元素；
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。