JQuery下

最新推荐文章于 2023-12-05 12:00:55 发布

是乔乔

最新推荐文章于 2023-12-05 12:00:55 发布

阅读量509

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/caoyujiao520/article/details/54342772

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、循环each

$(对象).each(function(){});

$.each(对象,function(){});

<script>
			var arr=new Array("昨天","今天","明天");
			//写法一：
			$(arr).each(function(){
				alert(this);
			});
			//写法二：
			$.each(arr,function(){
				alert(this);
			});
			//写法三：有索引
			$(arr).each(function(index,ele){
				alert(index+"==>"+this);
			});
			//写法四：有索引
			$.each(arr,function(index,ele){
				alert(index+"==>"+this);
			});
		</script>

二、html text val

赋值操作：若带有标签html会解析，text直接输出

<body>
	<div id="myDiv" style="border: 1px solid red; width: 200px ; height: 50px;">
	</div>
</body>
<script>
	//.html解析标签
	$("#myDiv").html("<a href=''>浅笑安然</a>");	
	//.text不解析标签
	$("#myDiv").text("<a href=''>你若安好</a>");
</script>

.html显示： .text显示：

取值操作：html会获得标签，text只获得文本

<body>
	<div id="myDiv" style="border: 1px solid red; width: 200px ; height: 50px;">
	</div>
</body>
<script>
	//.html解析标签
	$("#myDiv").html("<a href=''>浅笑安然</a>");	
	//1.html会获得标签
	alert($("#myDiv").html());
	//2.text只获得文本
	alert($("#myDiv").text());
		
	//.text不解析标签
	$("#myDiv").text("<a href=''>你若安好</a>");
	//3.html会获得标签
	alert($("#myDiv").html());
	//4.text只获得文本
	alert($("#myDiv").text());
</script>

1.html解析标签 2.text获得文本

val操作：.val()里参数为空为取值，参数不为空为赋值

<body>
	<div id="myDiv" style="border: 1px solid red; width: 200px ; height: 50px;">
		<input type="text" id="username" value="阳光"/>
	</div>
</body>
<script>
	//取值操作：
	alert($("input").val());
	//赋值操作：
	$("input").val("你好")
	alert($("input").val());
</script>

三、省市二级联动升级版

//页面加载
$(function(){
        //改变省操作
	$("#provinceId").change(function(){
	        //根据数组角标获得对应city
		var city=arr[this.value];
		//重置市
		$("#cityId").html("<option value=''>----请-选-择-市----</option>");
		//循环遍历省里的市
		$(arr).each(function(){
			//方式一：添加市到下拉框
			$("#cityId").append("<option>"+this+"</option>");
			//方式二：
			var cityObj=$("<option></option>").text(this);
			$("#cityId").append(cityObj);
		});
	});
});

四、文档处理

内部插入：

A.append(B) = B.appendTo(A)

A.prepend(B) = B.prependTo(A)

外部插入：

after before

五、查找

hide()隐藏

prev()前面的兄弟元素

nextAll()后面的所有兄弟元素

children()子元素

parent()父元素

siblings()同级元素

六、校验

1.类校验Class

<html>
	<head>
		<meta charset="UTF-8">
		<title>类校验</title>
		<script type="text/javascript" src="../js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="../js/jquery.validate.js" ></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			$(function(){
				//手动方式，表单使用校验
				$("#formId").validate();
			});
		</script>
	</head>
	<body>
		<!--类校验-->
		<form id="formId" action="">
			用户名：<input type="text" name="username" class="required" /> <br/>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

2.属性校验

<form id="formId" action="">
	用户名：<input type="text" name="username" required="true" number="true" /> <br/>
	<input type="submit" value="提交"/>
</form>

3.数据校验：data-rule-属性

<form id="formId" action="">
	用户名：<input type="text" name="username" data-rule-required="true" data-rule-number="true" /> <br/>
</form>

使用data：

alert($("#username").data("rule-required"));
//或者
alert($("#username").data("ruleRequired"));

4.静态校验（重点）

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="../js/jquery.validate.js" ></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			//页面加载
			$(function(){
				//form表单校验
				$("#formId").validate({
					//rule规则
					rules:{
						username:"required",
						password:{
							required:true,
							number:true,
							rangelength:"[2,5]"
						},
						repassword:{
							equalTo:"[name=password]"
						},
						birthday:{
							dateISO:true
						},
						cardId:{
							//自定义校验方法
							cardIdCheck:[15,18]
						}
					},
					//messages：提示信息
					messages:{
						username:"用户名不能为空",
						password:{
							required:"密码不能为空",
							number:"密码必须是数字",
							rangelength:"长度是2-5位"
						}
					}
				});
			});
			//自定义校验
			$.validator.addMethod("cardIdCheck",function(value,element,params){
				if(value.length!=params[0] && value.length!=params[1]){
					return false;
				}
				return true;
			},"此处应填入{0}或{1}");
		</script>
	</head>
	<body>
		<form id="formId" action="#" method="get">
			用户名：<input type="text" name="username"/> <br/>
			身份证<input type="text" name="cardId" /> <br/>
			密码：<input type="password" name="password"/> <br />
			密码：<input type="password" name="repassword"/> <br />
			生日：<input type="text" name="birthday"/> <br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

小结：JQuery整体是优化js后的轻量级版本，里面的很多内容都比较杂，很多时候觉得自己会了，可是真正敲得时候就知道自己的不足了，有种看到什么都感觉我见过，真的敲时又是错误百出，而且越是乱的东西，越是应该找出它们内在的逻辑，形成自己的思维导图。