总结jQuery学习笔记-带你由浅入深学习jQuery（1）

最新推荐文章于 2024-05-01 00:32:04 发布

搬码日记

最新推荐文章于 2024-05-01 00:32:04 发布

阅读量451

点赞数 12

文章标签： jQuery jQuery知识点 JavaScript学习

本文链接：https://blog.csdn.net/KamRoseLee/article/details/79576506

版权

JavaScript中的数据类型回顾一下：

javascript的数据类型：

number 数值型

String 字符串类型

boolean 真假值

function 函数

object 对象

null 空值

NAN 非数值

undefined 未定义

javascript中的注释：

单行注释 //

多行注释 /**/

JavaScript函数的定义：

第一种函数的定义方式

使用function关键字定义。

function 函数名(参数列表) {

函数体

}

第二种函数的定义方式：

var 函数名 = function(参数列表){

}

JavaScript中自定义对象：

Object形式的自定义对象

var 变量名 = new Object();

变量名.属性名 = 值;

变量名.方法名 = function(){}

对象的访问：

变量名.属性名/方法名();

花括号形式的自定义对象

var 变量名 = {

属性名 : 值,

方法： function(){}

};

对象的访问：

变量名.属性名/方法名()；

JavaScript中常用事件。

onload事件页面加载完成之后

onclick事件单击事件

onblur事件失去焦点

onchange事件内容发生改变，常用于下拉列表，和文本输入框

onsubmit事件表单提交事件。

静态注册事件：静态注册指的是直接使用标签的事件属性。在事件属性中赋于事件响应的代码。这种方式我们称之为静态注册。

动态注册事件：先获取标签对象，然后通过标签对象.事件名=function(){} 这种形式我们称之为动态注册。

window.onload = function(){

1、先获取标签对象

2、通过标签对象.事件名=function(){}

}

DOM 全称是Document Object Model 文档对象模型

Document对象的常用方法：

document.getElementById() 通过id属性查找标签对象。

document.getElementsByTagName() 通过标签名查找标签对象集合。这个集合的操作跟数组一样。集合中的元素顺序，是这些标签在html页面中，从上到下的顺序。

document.getElementsByName()通过name属性查找标签对象集合。这个集合的操作跟数组一样。集合中的元素顺序，是这些标签在html页面中，从上到下的顺序。

节点对象的常用属性和方法：

属性：

childNodes：返回当前节点的全部孩子节点

firstChild：返回第一个子节点

lastChild：返回最后一个子节点

parentNode：返回父节点

previousSibling：返回上一个兄弟节点

nextSibling：返回下一个兄弟节点

方法：

appendChild 添加子节点

-------------------------------------------------------------------------------------------------上述为对JavaScript的一个回顾

下面为jQuery的引入------------------------------------------------------------------------------------------------------------

JQuery介绍

什么是JQuery ?

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

JQuery核心思想！！！

它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

JQuery流行程度

jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

JQuery好处！！！

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

JQuery 的初体验！！！

需求：使用JQuery给一个按钮绑定单击事件?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 	window.onload = function(){
// 		//1.获取标签对象
// 		var btnObj = document.getElementById("btnId");
// 		//2.通过标签对象.事件名=function(){}
// 		btnObj.onclick = function(){
// 			alert("这是原生的js的单击事件");
// 		}
// 	}
	
	//1.先引入jquery的类库
// 	alert($);
	//2.页面加载完成之后
	$(function(){
		//3.先获取标签对象
		var $btnObj = $("#btnId"); // 相当于document.getElementById("btnId");
		//4.绑定事件
		$btnObj.click( function(){		
			alert("这是jquery的单击事件");
		} );
	});
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

常见问题？

1、使用jquery一定要引入jquery库吗？答案：是

2、jquery中的$到底是什么？答案：是一个函数

3、怎么为按钮添加点击响应函数的？答案：

$(function(){ ///先页面加载完成之后。

1、获取标签对象

2、通过标签对象.click( function(){} );

});

Jquery 核心函数 $()

$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数

1、传入参数为 [ 函数] 时：

$(function(){})

功能相当于

window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时：

$("<span>12</span>");创建标签对象相当于

var span = document.createElement(“span”);

span.innerHTML = “12”;

3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)

$(“#id属性值”); 相当于document.getElementById();

$(“标签名”); 相当于document.getElementsByTagName();

$(“.class”); 通过class属性来查

4、传入参数为 [DOM对象 ] 时：

$(dom对象)

var btnObj = document.getElementById(“btn01”);

var $btnObj = $( btnObj );

JQuery对象和dom对象区分

什么是jquery对象，什么是dom对象

Dom对象

1.通过getElementById()查询出来的标签对象是Dom对象

2.通过getElementsByName()查询出来的标签对象是Dom对象

3.通过getElementsByTagName()查询出来的标签对象是Dom对象

4.通过createElement() 方法创建的对象，是Dom对象

【object HtmlxxxxElement】

JQuery对象

5.通过JQuery提供的API创建的对象，是JQuery对象

6.通过JQuery包装的Dom对象，也是JQuery对象

7.通过JQuery提供的API查询到的对象，是JQuery对象

【object object】

问题：JQuery对象的本质是什么？

JQuery对象本身是一个数组 + 一系列的JQuery函数组成。

其中，这个数组中每个元素都是dom对象。

Jquery对象和Dom对象使用区别

jquery对象，在使用上，不能使用dom对象的属性和方法。

dom对象也不能使用jquery对象的属性和方法。

Dom对象和Jquery对象互转

1、dom对象转化为jquery对象（*重点）

vardivObj = doucment.createElement(“div”);

转成jquery对象

var $divObj = $( divObj );

2、jquery对象转为dom对象（*重点）

var$jqueryObj = $(“标签名”);

var dom对象 = $jqueryObj[下标];

搬码日记

关注

12
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
总结jQuery学习笔记-带你由浅入深学习jQuery（1）

JavaScript中的数据类型回顾一下： javascript的数据类型： number 数值型 String 字符串类型 boolean 真假值 function 函数 object 对象 ...
复制链接

扫一扫