JQuery是一个js的工具。它对原生的js进行封装,帮助开发人员提供js的开发效率。jQuery有大量插件提供给开发人员使用,解决浏览器的兼容问题,实现简单的动画效果。
1 jquery的用法
第一步:在html文件中引入jQuery库;
第二步:创建jQuery对象;
第三步:调用JQuery对象方法操作网页的内容;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("页面加载完成...");
});
</script>
</head>
<body>
</body>
</html>
2 jquery对象和DOM对象的区别
与DOM对象不同,JQuery对象是对DOM对象的封装后产生的对象。
创建jQuery对象的语法格式:
如果需要把jQuery对象转换成DOM对象,可以调用jQuery对象的get()方法。例如:
jQuery对象.get(0)
jQuery对象.get()[0]
注意:DOM对象不能够使用jQuery对象的属性和方法,同样地,jQuery对象也无法使用DOM对象的属性和方法。
3 选择器
作用:查找页面中的元素。
3.3.1 基本选择器
1)ID选择器:通过元素的ID属性查找元素,返回元素的JQuery对象。
语法格式:$("#ID")
2)标签选择器:通过标签名查找元素。
语法格式:$(“标签名”)
3)组合选择器:同时把多个选择器的结果组合在一起,返回一个包含所有结果的数组。
$(“selector1,selector2,…, selectorN”)
4)后代选择器:可以获取指定元素的后代元素。
$(“selector1 selector2”) : 获取selector1下的所有后代selector2。
$(“selector1 > selector2”):获取selector1下所有的直接后代selector2。
3.3.2 添加筛选条件
$(“selector:first”):获取第一个selector元素;
$(“selector:last”):获取最后一个selector元素;
$(“selector:eq(i)”):根据索引获取selector元素;
$(“selector:checked”):查询有 checked 属性的selector元素;
$(“selector:selected”):查询有 selected 属性的selector元素;
$(“selector:hidden”); 查询隐藏的selector元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js" ></script>
<script>
$(document).ready(function() {
// 获取第一个input元素
//alert($("input:first").val());
// 获取最后一个input元素
// alert($("input:last").val());
// 获取指定索引的input元素
// alert($("input:eq(1)").val());
// 获取有checked属性的input元素
// alert($("input:checked").val());
// 获取有selected属性的元素
//alert($("option:selected").val());
// 获取隐藏的元素
alert($("select:hidden").html());
});
</script>
</head>
<body>
用户名:<input type="text" id="userName" value="mickey"/><br/>
密码:<input type="text" id="userPass" value="123"/><br/>
性别:<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
所选课程:<select style="display:none">
<option value="java">Java</option>
<option value="front">前端</option>
<option value="php" selected>PHP</option>
</select>
</body>
</html>
3.3.3 筛选方法
eq(i): 根据索引获取元素
first(): 取第一个
last(): 取最后一个
prev():获取上一个同辈的元素;
next():获取下一个同辈的原素;
parent():获取父元素;
children():获取所有子元素的集合;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js" ></script>
<script>
$(document).ready(function() {
// 获取第一个input
//alert($("input").first().val());
// 获取最后一个input
// alert($("input").last().val());
// 获取指定索引的input
// alert($("input").eq(1).val());
// 获取下一个同辈的元素
// alert($("#userName").next());
// 获取上一个同辈的元素
// alert($("#userPass").prev().get(0).nodeName);
// 获取父元素
// alert($("#userPass").parent().get(0).nodeName);
// 获取所有子元素
$(document.body).children().each(function(i) {
alert(this.nodeName);
});
});
</script>
</head>
<body>
用户名:<input type="text" id="userName" value="mickey"/><br/>
密码:<input type="text" id="userPass" value="123"/><br/>
性别:<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
所选课程:<select style="display:none">
<option value="java">Java</option>
<option value="front">前端</option>
<option value="php" selected>PHP</option>
</select>
</body>
</html>
3.3.4 操作属性
$(“selector”).prop(“属性名”):获取元素的属性
$(“selector”).prop(“属性名”, “属性值”):设置元素属性
$(“selector”).prop({“属性名”: “属性值”, “属性名”: "属性值 "}) :设置多个属性
prop和attr的区别?
prop设置或获取元素的固有属性,而attr能够设置或获取元素的任何属性。
3.3.5 设置或获取文本
html():相当原生js的innerHTML属性。
text():相当原生js的textContent属性。
val():相当原生js的value属性。
3.3.6 文档处理
$(selector).append(“html元素”):往selector中追加子元素。
$(“html元素”).appendTo(selector):同上
$(selector).prepend(“html元素”):往selector中的最前面添加子元素。
$(“html元素”).prependTo(selector):同上
$(selector).before(“html元素”):在selector前面添加新元素。
$(“html元素”).insertBefore(selector):同上
$(selector).after(“html元素”):在selector后面添加新元素。
$(“html元素”).insertAfter(selector):同上
$(selector).remove():删除元素
$(selector).empty():把selector下所有子元素删除。
4 事件绑定
bind:给html元素绑定事件。
on:同上。
one:给html元素绑定事件,但是该事件只会执行一次。
用法:
$(selector).bind(type, [data], function(eventObj) {
事件处理函数...
})
unbind:解除元素中绑定的事件。
$(selector).unbind(type, [data, fn])
JQuery也可以通过事件函数绑定事件:
- click(fn):绑定单击事件
- change(fn):绑定内容改变事件
- toggle(fn1, fn2, fn3, …):给元素绑定多个click事件。第一次click的时候会调用fn1函数,第二次click的时候回调用fn2函数,第三次click的时候回调用fn3函数,以此类推。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js" ></script>
</head>
<body>
<button>Click me</button>
<button>unbind</button>
<script>
/*// 绑定事件
var buttonNode = document.getElementsByTagName("button")[0];
buttonNode.onclick = function() {
alert("Click me");
}
$("button:first").bind("click", function(e) {
alert(e.type);
})
// 使用事件函数绑定事件
$("button:first").click("jacky", function(e) {
alert(e.data);
});
$("button:last").bind("click", function(e) {
$("button:first").unbind("click");
});*/
$("button:first").toggle(function(e) {
alert("click1...");
}, function(e) {
alert("click2...");
});
</script>
</body>
</html>
事件对象的方法:
- data:获取时间传入的参数;
- stopPropagation: 阻止事件向外传播;
- preventDefault:阻止事件的默认行为;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js" ></script>
</head>
<body>
<div>
<button>Click me</button><br />
<a href="http://baidu.com">百度</a>
</div>
<script>
$("button").click(function(e) {
alert("button...");
// 阻止事件传播
e.stopPropagation();
});
$("div").click(function(e) {
alert("div...");
});
$("a").click(function(e) {
alert("a click...");
// 阻止元素的默认行为
e.preventDefault();
});
</script>
</body>
</html>
5 jQuery插件
5.1 日期插件
插件的使用:
第一步:下载插件,并把插件引入到项目中。
jquery-ui.css
jquery-ui.js
第二步:在html页面中引入jquery-ui.css和jquery-ui.js文件;
第三步:初始化插件;
<input type="text" id="birthdate" />
$("#birthdate").datepicker({dateFormat:"yy-m-dd"});
5.2 validation插件
作用:表单验证
使用步骤:
第一步:下载插件并解压缩;
第二步:把jquery.validation.min.js文件拷贝到项目的js文件夹下;
第三步:初始化插件;
第四步:添加校验规则;
如果要显示中文提示,需要引入messages_cn.js库。
自定义错误消息:
// 初始化消息
$.extend($.validator.messages, {
required: "该字段不允许为空",
minlength: "该字段的长度不能够少于{0}"
});
还有,可以通过js定义验证规则:
$(表单控件).validate({
rules: {
// 定义规则
},
messages: {
//定义错误消息
}
});