jQuery 学习笔记

最新推荐文章于 2024-01-20 21:49:50 发布

noisy_wind

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量213

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/noisy_wind/article/details/104005843

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jQuery 的介绍

1. jQuery 的概念

jQuery 全称 JavaScript Query ，是 js 的一个框架，本质上仍然是 js 。

2. jQuery 的优点

(1). 强大的选择器
(2). 出色的 DOM 封装
(3). 出色的浏览器兼容性
(4). 强大的动画功能
(5). 体积小，压缩后只有100KB左右
(6). 可靠的事件处理机制
(7). 使用隐式迭代简化编程
(8). 丰富的插件支持

二、jQuery 的封装原理

1. 原因

js 的全局代码区只有一个，这样就会造成同名变量的值会被覆盖 (就近原则) 。jQuery 中就声明了很多的变量，所以要想办法避免重名。

2. 使用对象封装

使用对象封装，将代码封装到对象中。但是，对象如果被覆盖，则全部失效，风险极高。

// 对象封装
var obj = {};
obj.test = function(){
	alert("对象封装");
}

//标签调用，以 input 标签为例
<input type="button" value="测试test" onclick="obj.test()"/>

3. 使用工厂模式

使用工厂模式，将代码进行封装，把全局对象变为局部对象，但是并没有解决问题。

// 使用工厂模式
function getTest(){
	var obj = {};
	obj.test = function(){
		alert("工厂模式");
	}
	return obj;
}

4. 函数匿名自调用

只简单的将封装的函数名去除，可以避免覆盖，但是函数就没有办法调用了，只能使用匿名自调用的方式调用函数。

匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取。

// 匿名自调用方式调用函数
(function(){
	var obj = {};
	obj.test = function(){
	
	}
	alert("匿名自调用");
})()

5. 使用闭包

使用闭包，将数据一次性挂载到 window 对象下。
在全局区中不能够获取函数体内的数据，要使用更大作用域的变量来记录小作用域变量的值。简单理解为：用全局变量去记录局部变量的值。

(function(obj){
	obj.test = function(){
	
	}
})(window)  // 把 window 对象传进去，window 是关键字，所以不会被覆盖

// 调用
window.test();

三、jQuery 的选择器

1. 基本选择器

// id 选择器
$("#id属性值"); // 返回元素对象
$("标签名#id属性值"); // 返回元素对象

// 标签选择器
$("标签名"); // 返回元素数组

// class 选择器
$(".class属性值"); // 返回元素数组
$("标签名.class属性值"); // 返回元素数组

// 通配选择器
$("*"); // 返回元素数组

// 组合选择器
$("选择器1,选择器2,选择器3, ... ..."); // 返回元素数组

2. 层级选择器

// 选择祖先下的所有的后代元素
$("选择器1 选择器1的后代元素的选择器"); // 返回元素数组

// 选择父元素下匹配的所有的子元素
$("选择器1 > 选择器1的子元素的选择器") // 返回元素数组

！注意：

(1). jQuery 中选择器获取的是存储了 HTML 元素对象的数组(id选择器除外)。

(2). jQuery 获取的元素对象不能够直接使用 js 的内容，按照数组的取出方式将对象取出后可以使用 js 的内容。

四、jQuery 操作元素

this 表示 js 对象
$(this) 表示 jQuery 对象

1. jQuery 操作元素属性

var div = $("#id属性值");  // 获取元素对象
// 两种方式：
// div.attr("属性名");
// $("#id属性值").attr("属性名");
// 其他的操作也相同

// 获取：
对象名.attr("属性名"); // 返回该属性名的属性值
// 注意：此种方式不能获取 value 属性的实时数据。

// 修改：
对象名.attr("属性名","属性值");

// 去除：
对象名.removeAttr("属性名");

//获取 value 属性的实时数据：
对象名.val();


// 操作 checked、selected、readonly、disabled 使用 prop() 方法
对象名.prop("checked");  // 返回选择的状态，选择返回 true ，未选返回 false 
对象名.prop("checked",true);  // 置为选择状态
对象名.prop("checked",false);  // 置为未选状态

// 使用 each 进行遍历
对象名.each( function(i,this){} );  // 在遍历的时候会给每个对象默认指定 function 函数 i:对象的成员或数组的索引。 this：对应变量或内容

对象名.parents("标签名");  // 获取元素对象的祖先元素，标签名用于筛选出所需的标签

2. jQuery 操作元素文本内容

var div = $("#id属性值");  // 获取元素对象

// 获取：
对象名.html(); // 返回当前对象的所有内容，包括 HTML 标签
对象名.text(); // 返回当前对象的文本内容，不包括 HTML 标签

// 修改：
对象名.html("新的内容");  // 新的内容会将原有的内容覆盖，HTML 标签会被解析执行
对象名.text("新的内容");  // 新的内容会将原有的内容覆盖，HTML 标签不会被解析

3. jQuery 操作元素样式

var div = $("#id属性值");  // 获取元素对象

// 使用 css()
对象名.css("属性名");  // 返回当前属性的样式值
对象名.css("属性名","属性值");  // 增加 或者 修改元素的样式
对象名.css({"样式名":"样式值" , "样式名":"样式值" , ... ...});

//  使用 addClass()
对象名.addClass("class属性值");  // 在 css 中声明一个class样式，追加该class样式，不是覆盖。
对象名.removeClass("class属性值"); // 删除一个指定的类样式

if(对象名.hasClass("class属性值")){

}else{

}
// 上面的 if-else  等价于下面的 toggleClass
对象名.toggleClass("class属性值");

！注意：一个 class 属性可以有多个属性值。

4. jQuery 操作文档结构

var div = $("#id属性值");  // 获取元素对象
var newDiv = $("<div><p>啦啦啦</p></div>");

// (1). 内部插入(子元素)
对象名.append("内容");  // 在指定的元素对象内的后面 追加指定的内容
对象名.appendTo(元素对象或者选择器);  // 将指定的内容追加到对象的内部的后面。与 对象名.append("内容"); 正好相反
  // 例如：
div.append(newDiv);  
newDiv.appendTo(div);

对象名.prepend("内容");  // 在指定的元素对象内的前面 追加指定的内容
对象名.prependTo(元素对象或者选择器);  // 将指定的内容追加到对象的内部的前面。与 对象名.prepend("内容"); 正好相反

// (2). 外部插入(平级元素)
对象名.after("内容");  // 在指定的元素对象外的后面 追加指定的内容
对象名.insertAfter("元素对象或者选择器");  // 把对象名所表示的内容或对象 插入到另一个、指定的元素或元素集合外的后面。与 对象名.after("内容"); 正好相反。
  //例如：
div.after(newDiv);
newDiv.insertAfter(div);

对象名.before("内容");  // 在指定的元素对象外的前面 追加指定的内容
对象名.insertBefore("元素对象或着选择器");  // 把对象名所表示的内容或对象 插入到另一个、指定的元素或元素集合外的前面。与 对象名.before("内容"); 正好相反

// (3). 删除
对象名.empty();  // 删除匹配的元素集合中所有的子节点。子节点所占的内存也清空。
对象名.remove();   // 节点自己删除自己
对象名.parents("div").remove();  // 删除指定节点的祖先节点中的 div 标签 (如果不指定，则删除全部祖先节点)
对象名.children().remove();  // 删除指定节点的所有的孩子节点
对象名.find("div:first").remove();  // 删除指定节点的孩子节点中的第一个 div 标签

// (4). 新建
var newRow = $('<tr>''<td> </td>''<td>''<input type="file" name="photo" id="photo"/>''<input type="button" value="删除"  οnclick="delFileItem(this)"/>''</td>''</tr>');  // 在 js 中新建一行

五、jQuery 动态操作事件

var div = $("#id属性值");  // 获取元素对象

// 动态的给指定的元素对象追加指定的事件及其监听的函数
对象名.bind( "事件名" , function(){} ); //事件名包括：click(单击事件) submit(提交事件)  mouseover(鼠标悬浮事件) 等 
//  注意： js 中的是一次添加，多次添加时会出现覆盖
//		   jQuery 时追加的效果，可以实现给一个事件添加不同的监听函数

对象名.unbind("事件名");  // 移除指定的元素对象的指定事件
对象名.unbind();  // 移除指定的元素对象的所有事件
// 注意： js 方式添加的事件不能移除

对象名.one( "事件名" , function(){} );  // 给指定的元素对象添加一次性事件，事件被触发执行一次即失效
// 注意： 可以给事件添加多个一次函数，unBind 可以用来解绑

// 页面载入事件：
$(document).ready( function(){} );  // 页面加载事件。页面载入成功后会调用传入的函数对象
// 注意： 此方式可以给页面载入动态的增加多个函数对象，不会被覆盖

对象名.trigger("事件名");  // 触发执行指定元素的指定事件

对象名.submit();  // 动态的提交 form 表单

六、动画 animate

1. 隐藏、显示

$(" ").hide();  // 立即隐藏
$(" ").hide(5000);  // 5秒内隐藏
// 改变的是 width、height、opacity

$(" ").show();  // 立即显示
$(" ").show(5000);  // 5秒内显示
// 改变的是 width、height、opacity

2. 淡入淡出

$(" ").fadeIn(3000);  // 3秒内淡出
$(" ").fadeOut(3000);  // 3秒内淡入
// 改变的是 opacity

3. 滑入滑出

$(" ").slideUp(3000);  // 3秒内滑出
$(" ").slideDown(3000);  // 3秒内滑入
// 改变的是 height

七、表单验证

1. 原因

(1). 保证数据符合要求

(2). 降低服务器端的负担

2. 示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 1.对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件
			 * 2.表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
			 * 3.表单的验证和String对象有密切关系  length  charAt(i)  indexOf("@")
			 * 4.如果表单项内容为空，不是null，而是空字符串
			 * 	判断条件不能写 username == null 
			 *  而要写  username==""  或者  username.length ==0			 * 
			 * 5.验证出错要return false，验证无错要return true，并且 οnsubmit="return checkForm()"
			 * 6.onblur  光标离开文本框触发事件  onfocus  得到焦点
			 * 7.如何存放和显示错误信息
			 *  	方法1：<div id="usererror" style="display:inline"></div> 
			 * 		方法2： <span id="emailerror"></span>
			 * 8.选中文本
			 * $("#user").select();
			 */
			
			function checkForm(){
				//判断用户名是否正确
				var flag1 = checkUser();
				//判断邮箱是否正确
				var flag2 = checkEmail();
				//如果都正确，表单验证正确，否则验证错误
				if(flag1 && flag2){
					return true;
				}else{
					return false;
				}
			}
			
			function checkUser(){
				//清空之前的提示
				//$("#usererror").html("");
				$("#usererror").empty();
				//用户名不能为空
				var username = $("#user").val();
				if(username==""){
					//alert("用户名不能为空");
					$("#usererror").html("用户名不能为空");
					return false;
				}
				// 用户名长度大于6
				if(username.length <=6){
					//alert("用户名长度大于6");
					$("#usererror").html("用户名长度大于6");
					return false;
				}
				// 用户名中不能有数字  abc123
				for(var i=0;i<username.length;i++){
					var ch = username.charAt(i);
					if(ch >= '0' && ch <= '9'){
						//alert("用户名中不能有数字");
						$("#usererror").html("用户名中不能有数字");
						return false;
					}
				}
				return true;
			}
			function checkEmail(){
				//清空之前的提示信息
				$("#emailerror").html("");
				//邮箱格式正确 @  .
				var email = $("#email").val();
				if(email.indexOf("@")<0){
					//alert("邮箱中必须有@");
					$("#emailerror").html("邮箱中必须有@");
					return false;
				}
				if(email.indexOf(".")<0){
					//alert("邮箱中必须有.");
					$("#emailerror").html("邮箱中必须有.");
					return false;
				}
				return true;
			}
			function selectUser(){
				var user = $("#user").val();
				if(user =="please input username"){
					$("#user").val(""); //html("")
				}
				$("#user").select();  // 文本全选
				
			}
		</script>
	</head>
	<body>
			<table  id="center" border="0" cellspacing="0" cellpadding="0">
          <form action="doRegister.jsp" method="post" name="myform" onsubmit="return checkForm()">
           <tr>
              <td >您的姓名：</td>
              <td>
              	<input id="user" type="text" value="please input username" onfocus="selectUser()" onblur="checkUser()" />
              	<div id="usererror" style="display:inline"></div> 
              </td>
            </tr>
            
            <tr>
              <td >输入密码：</td>
              <td><input id="pwd" name="pwd" type="password"/></td>
            </tr>
            <tr>
              <td >再输入一遍密码：</td>
              <td><input id="repwd" type="password"/></td>
            </tr>
           <tr>
              <td >您的Email：</td>
              <td>
              	<input id="email" type="text" onblur="checkEmail()"/>
              	<span id="emailerror"></span>
              </td>
            </tr>   
            <tr>
              <td>&nbsp;</td>
              <td ><input name="btn"  type="submit"   value="注册" class="rb1"     /></td>
            </tr>
          </form>
        </table>

	</body>
</html>

八、正则表达式

1. 原因

(1). 简洁的代码

(2). 严谨的验证文本框中的内容

2. 简介

Regular Expression ，在代码中常简写为 regex
正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串
在很多文本编辑器里，正则表达式通常被用来检索、替换哪些符合某个模式的文本

3. 举例

(1). 匹配国内电话号码

/^1(3|4|5|7|8)\d{9}$/

(2). 匹配腾讯QQ号

/^[1-9][0-9]{4,11}$/

(3). 匹配中国邮政编码

/\d{6}/

(4). 匹配中国大陆身份证号

/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/

(5). 匹配 Email 地址

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

(6). 匹配中文字符

/[\u4e00-\u9fa5]/

4. 创建

// 以验证电话号码为例

// 定义电话号码(静态)
var reg = /13345678901/;
var reg = new RegExp("13345678901");
// 获取输入的电话号码(动态)
var reg = $("").val();
// 定义正则表达式的规则
var regex = /^1(3|4|5|7|8)\d{9}$/ ;
// 匹配
regex.test(reg);  // 匹配返回 true  ， 不匹配返回 false

5. 常用符号和用法

符号	描述
/ /	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于 [0-9]
\D	除了数字之外的任何字符，等价于 [^0-9]
\w	匹配一个数字、下划线或字母字符，等价于 [a-zA-Z0-9]
.	除了换行符之外的任意字符
{n}	匹配前一项 n 次
{n, }	匹配前一项 n 次，或者多次
{n,m}	匹配前一项至少 n 次，但是不能超过 m 次
*	匹配前一项 0 次或者多次，等价于 {0, }
+	匹配前一项 1 次或者多次，等价于 {1, }
?	匹配前一项 0 次或者 1 次，也就是说前一项是可选的，等价于 {0,1}

九、还有不清楚的查 API 吧

点击此处下载API

noisy_wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 学习笔记

文章目录一、jQuery 的介绍1. jQuery 的概念2. jQuery 的特点二、jQuery 的封装原理1. 原因2. 使用对象封装3. 使用工厂模式4. 函数匿名自调用5. 使用闭包一、jQuery 的介绍1. jQuery 的概念jQuery 全称 JavaScript Query ，是 js 的一个框架，本质上仍然是 js 。2. jQuery 的特点(1). 支持各种主流...
复制链接

扫一扫