JQuery学习笔记

最新推荐文章于 2024-09-13 21:00:00 发布

一个菜鸟的笔记

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量452

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_45697138/article/details/109007991

版权

1、对JQuery的认识

jQuery的好处：

对HTML文档遍历和操作、事件处理、动画以及Ajax变得更简单
可以写多个入口函数
相比JavaScript可以写得更少，做得更多
通过jQuery查找DOM元素要比原生js快捷很多
jQuery其实就是一个封装了很多方法的JS库，里面封装了一大堆的方法便于开发

原生JS的缺点：

不能添加多个入口函数（window.onload），如果添加了，后面的会把前面的覆盖。
原生JS的api名字太长，代码冗余
有的属性或者方法，有浏览器兼容问题
容错率较低，前面代码出了问题，后面的代码执行不了

jQuery的官网：http://jquery.com/

2、关于JQuery的版本

官方下载地址：http://jquery.com/download/

大版本分类：

1.x版本：能够兼容IE678浏览器
2.x版本：不能兼容IE678浏览器
3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩和未压缩版：

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

3、JQuery入口函数

使用jQuery的步骤：

下载并引入jQuery库
编写入口函数
找到需要操作的元素（用jQuery选择器），去操作该元素（添加属性，样式等）
实现功能

jQuery入口函数的两种方法

//第一种写法
$(document).ready(function(){
});
//第二种写法(推荐使用）
$(function(){
});

原生JS和jQuery入口函数加载模式的区别：

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的（不能添加多个入口函数）
jQuery中可以编写多个入口函数，后面的不会覆盖前面的

3.1 jQuery核心函数

//$()；就代表调用jQuery的核心函数

<script src="js/jquery-1.12.4.js"></script>
<script>
//接收一个函数：
$(function(){
	alert("hello");
	//1.接收一个字符串选择器
	//返回一个jQuery对象，对象中保存了找到的DOM元素
	var $box1 = $(".box1");
	var $box2 = $("#box2");
	console.log($box1);
	console.log($box2);
	//2.接收一个字符串代码片段
	//返回一个jQuery对象，对象中保存了创建的DOM元素
	var $p = $("<p>这是一个段落</p>");
	console.log($p);
	$box1.append($p);
	//3.接收一个DOM元素
	//会被包装成一个jQuery对象返回给我们
	var span = document.getElementsByTagName("span")[0];
	console.log(span);//原生dom对象
	var $span=$(span);
	console.log($span);
});
</script>
<body>
<div class="box1"><div>
<div id="box2"></div>
<span>这是一个span</span>
</body>

补充：

如果报了这个错误：$ is not defined，就说明没有引入jQuery文件。
$等价于jQuery，是一个函数。传递参数不同，效果也不一样。
如果参数传递的是一个匿名函数，则就是入口函数$(function(){})。
如果参数传递的是一个字符串，则是选择器$(’#one’)；如果字符串是标签，则会创建一个标签。
如果参数是一个dom对象，就会把dom对象转换成jQuery对象。

4、DOM对象和jq对象

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象（原生JS选择器获取到的对象）。特点：只能调用dom方法或者属性，不能调用jQuery的属性或方法。
jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。特点：只能调用jQuery的方法或属性。
jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）(ps:伪数组：有0到length-1的属性，并且有length属性）
DOM对象与jQuery对象的方法不能混用。

//DOM对象
var div1 = document.getElementByld("one");
console.log(div1);
>><div id="one"></div>

//jQuery对象
var $div1=$("#one");
console.log($div);
>>jQuery.fn.init [div#one, context: document,selector: "#one"]
//jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集

4.1 DOM对象和jQuery对象的相互转换：

因为jQuery对象不能使用dom的方法，如果jQuery没有封装我们需要的方法，则可以将jq对象转换成dom对象。

//DOM对象转换成JQuery对象(只需要用$（）把dom对象包装起来，就可以获得一个jQuery对象了）
var cr=document.getElementByld("cr");//dom对象
var $cr = $(cr);//转换成jQuery对象
//$(document).ready(function(){});就是典型的DOM对象转jQuery对象

//jQuery对象转换成DOM对象
//1.使用下标取出来
//2.使用jQuery方法 get（）
var $cr = $("#cr");//jquery对象
var cr=$cr[0];//dom对象 也可以写出var cr=$cr.get(0);

ps:

$()函数就是一个jquery对象的制造工厂.
如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象

5、静态方法

5.1 静态和实例方法

直接添加给类的就是静态方法，如下：

//定义类
function AClass(){
}
AClass.staticMethod = function(){
alert("staticMethod");
}
//静态方法通过类名调用
AClass.staticMethod();
//给类添加一个实例方法
AClass.prototype.instanceMethod=function(){
alert("instanceMethod");
}
//实例方法通过类的实例调用
//创建一个实例对象
var a = new AClass();
//通过实例调用实例方法
a.instanceMethod();

5.2 each和map方法

each方法：
原生的forEach方法只能遍历数组，不能遍历伪数组； jQuery的each方法时可以遍历伪数组

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5,length:53}//伪数组
//原生的forEach
arr.forEach(function (value, index) {
	console.log(index, value);
});
/*
   第一个参数：遍历到的元素
   第二个参数：当前遍历到的索引
*/

//利用jQuery的each静态方法遍历数组(常用)
$.each(arr, function (index, value) {
	console.log(index, value);
});
/*
第一个参数：当前遍历到的索引
第二个参数：遍历到的元素
*/

map方法：原生js的map方法和原生forEach一样不能遍历伪数组；jq的map则和jQuery的each一样 map静态可以遍历伪数组
jQuery中的each静态方法和map静态方法的区别：
each方法默认的返回值就是遍历谁就返回谁
map方法默认的返回值是一个空数组
each方法不支持在回调函数中对遍历的数组进行处理
map方法可以在回调函数中通过return对遍历的数组进行处理然后生成新数组

5.3 trim、isArray、isFunction、isWindow方法

trim方法：
$.trim();
作用：去除字符串两端的空格
参数：需要去除空格的字符串
返回值：去除后的字符串
eg：

var str = "    xj    ";
var res = $.trim(str);
console.log("----" + str + "----");//去除前
console.log("----" + res + "----");//去除后

isWindow方法：
$.isWindow();
作用：判断传入的对象是否是window对象
返回值：true/false

var res = $.isWindow(w);
console.log(res);

isArray、isFunction使用方法和isWindow方法一样

6、jQuery选择器

6.1 什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：jQuery选择器返回的是jQuery对象。
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

6.2 基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class");	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

ps:和css的选择器用法一样。

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

文档工具站: jQuery API

7、动画

show( )；不加参数，则没有动画效果
参数1：代表动画的时长，毫秒数，也可以是代表时长的毫秒数,fast（200）,normal（400）,slow（600）；
参数2：代表动画执行完之后的回调函数
eg：$( p ).show(2000, function（）{ })；
hide( )；和show同理。
toggle( )；切换。如果元素是隐藏状态则切换为动画显示。若是显示状态则隐藏。
slideDown( )；