投稿
  1. 极客之音首页
  2. 技术随笔

JQuery基础 1

小半 • • 技术随笔 • 阅读 62

导读：本篇文章讲解 JQuery基础 1，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

​ 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: {
        //定义错误消息
    }
});

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/81673.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！