前端(四)——JQuery(引入、语法、事件、特效、)、DOM(常用方法,取、删元素、选择器)、validation插件(表单验证)
一、JQuery介绍与引入方式
1、简介
简介不多描述,百度到处都有,这里稍微介绍一下:
1.jquery就是对js的封装的一个框架。
2.优化HTML文档操作,事件处理,动画设计,ajax交互。
3.jquery兼容各种主流的浏览器。
2、jquery的引入
a、直接引入
1.下载的地址:https://jquery.com/
2.jquery-1.8.3.js——开发的版本。
jquery-1.8.3.min.js——压缩的版本,体积小。
b、使用 cdn 引入
cdn 引入意思是直接使用网络上的 jquery 文件,不需要进行下载,直接使用。
百度cdn:
新浪 cdn:
Google cdn:
二、JQuery 语法
1、准备函数
jquery 的准备函数相当于 js 的 onload 。
1.使用jquery,必须使用 $ (美元)符号。
2.jquery准备函数的特点:
A.jquery:准备函数有多种写法。
B.jquery:准备函数优先于js的准备函数加载。
C.jquery:准备函数可以定义多个,都是会执行的。
<script>
window.onload=function(){
alert("1111");
}
window.onload=function(){
alert("2222");
}
$(function(){
alert("3333");
});
$(document).ready(function(){
alert("4444");
})
</script>
2、 jquery 与 js 之间的转换
a、jquery 转换成 js
jquery对象.get(0) 或者 jquery对象[0]
b、js 转换成 jquery
$(js对象)
3、基本选择器
注意:类选择器与标签选择器,返回单标签的时候,是jquery对象,返回数组的时候是js对象。
<script>
//使用id选择器获取
function showInfo01(){
alert($("#tv_uname").val());
}
//类选择器
function showInfo02() {
//alert($(".tv_class").val())
var jsStr = $(".tv_class");
alert(jsStr.length);
}
//标签选择器
function showInfo03(){
var jsStr = $("input");
for(var i=0;i<jsStr.length;i++){
alert(jsStr[i].value);
}
}
</script>
4、事件
注意:jquery 的事件都没有 on。
这里只举部分例子,详细的请自行百度:
<p>第一个段落</p>
<input type="text" />
<script>
// $("p").click(function(){
// $(this).hide();
// })
$("p").dblclick(function(){
alert("1111");
// $(this).show();
});
// $("p").mouseover(function(){
// alert("22222");
// })
// $("p").mouseout(function(){
// alert("33333");
// });
// $("p").hover(function(){
// alert("44444");
// },function(){
// alert("55555");
// })
$("input").blur(function(){
$(this).css({"background-color":"#cccccc"})
});
$("input").focus(function(){
$(this).css({"background-color":"#ffffff"})
});
</script>
5、jquery 特效
特效这块自行尝试。
a、显示与隐藏
<body>
<div></div>
<input type="button" value="显示" id="tv_show" />
<input type="button" value="隐藏" id="tv_hide" />
<input type="button" value="显示与隐藏" id="tv_show_hide" />
<script>
$("#tv_show").click(function(){
$("div").show(2000,function(){
alert("1111")
});
});
$("#tv_hide").click(function(){
$("div").hide(2000,function(){
alert("2222");
});
})
$("#tv_show_hide").click(function(){
$("div").toggle(2000,function(){
alert("3333");
});
})
</script>
</body>
b、淡入淡出
<body>
<div></div>
<input type="button" value="显示" id="tv_show" />
<input type="button" value="隐藏" id="tv_hide" />
<input type="button" value="显示与隐藏" id="tv_show_hide" />
<script>
$("#tv_show").click(function(){
$("div").fadeIn(2000,function(){
alert("1111");
});
// $("div").show(2000,function(){
// alert("1111")
// });
});
$("#tv_hide").click(function(){
$("div").fadeOut(2000,function(){
alert("2222");
});
// $("div").hide(2000,function(){
// alert("2222");
// });
})
$("#tv_show_hide").click(function(){
$("div").fadeToggle(2000,function(){
alert("3333");
});
// $("div").toggle(2000,function(){
// alert("3333");
// });
})
</script>
</body>
c、滑动效果
<body>
<div></div>
<input type="button" value="显示" id="tv_show" />
<input type="button" value="隐藏" id="tv_hide" />
<input type="button" value="显示与隐藏" id="tv_show_hide" />
<script>
$("#tv_show").click(function(){
$("div").slideDown(2000);
// $("div").fadeIn(2000,function(){
// alert("1111");
// });
// $("div").show(2000,function(){
// alert("1111")
// });
});
$("#tv_hide").click(function(){
$("div").slideUp(2000);
// $("div").fadeOut(2000,function(){
// alert("2222");
// });
// $("div").hide(2000,function(){
// alert("2222");
// });
})
$("#tv_show_hide").click(function(){
$("div").fadeToggle(2000,function(){
alert("3333");
});
// $("div").toggle(2000,function(){
// alert("3333");
// });
})
$("#tv_show_hide").click(function(){
$("div").slideToggle(2000);
// $("div").fadeToggle(2000,function(){
// alert("3333");
// });
// $("div").toggle(2000,function(){
// alert("3333");
// });
})
</script>
</body>
4、自定义
注意:在自定义动画中,设置动画的时候,需要给 html 标签设置定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
position: relative; /*设置*/
}
</style>
</head>
<body>
<div></div>
<input type="button" id="tv_btn" value="点击" />
<input type="button" id="tv_btn01"value="停止" />
<script>
$("#tv_btn01").click(function(){
$("div").stop();
})
$("#tv_btn").click(function(){
$("div").slideUp(5000);
/*$("div").animate({*/
// height:'toggle'
// left:'250px',
// width:'+=300px',
// height:'+=300px',
// opacity:'0.5'
/*});*/
})
</script>
</body>
</html>
三、JQuery DOM
1、常用方法、设置、取值
2、追加元素
3、删除元素
4、jquery 操作 css 类选择器
注意:这里添加类选择器时,不用加 # 或者 . 这些符号。
5、jquery 操作 css
语法:$(选择器).css({样式})
6、jquery 常用的选择器
a、过滤选择器
b、层级选择器
c、属性选择器
四、validation 插件的使用
1、插件简述
JQuery框架中有着大量的功能插件,每种插件都有自己独有的功能。
validation 插件的作用就是在于表单的验证。如果是自己写表单验证的规则,则代码会非常多,而且现在也有现成的插件使用,所以干脆直接用现成的插件。
2、插件导入
3、插件的使用
由于是表单的验证,所以自行写 input 语句,来验证功能:
a、为指定表单加入校验
b、为校验加入规则
c、规则速查表
举个例子:
也可以将提示的错误信息改成红色样式:
4、为规则自定义错误信息
我们可以自己自定义当用户输入错误时输出的信息: