jQuery 自学笔记

Posted 2022-01-28 Xiu Yan

文章目录

• • 一、原生 JavaScript 与 JQuery 对比
  • 二、jQuery 的概念及基本使用步骤
  • 三、jQuery的入口函数
  • 四、$ 的含义
  • 五、Dom 对象和 jQuery 对象

---

一、原生 javascript 与 JQuery 对比

原生js的缺点

1、不能添加多个入口函数(window.onload)，如果添加了多个，后面的会把前面的给覆盖
2、js的api名字太长
3、代码冗余
4、js有些属性方法，有浏览器兼容问题
5、js容错率较低

JQuery的优点

1、可以写多个入口函数
2、api容易记忆
3、代码简洁（隐式迭代）
4、可以解决兼容性问题
5、容错率较高

---

二、jQuery 的概念及基本使用步骤

1、 概念：一个封装了很多方法的JavaScript库，学习这些方法如何使用。
2、 步骤：
① 引入JQuery文件
② 写一个入口函数。防止页面上的标签还没有被渲染出来就执行
③ 找到操作的元素（JQ选择器），去操作他（给他添加属性，样式，文本…）

$(document).ready(function()
	$('div').width(100).height(200).css('backgroundColor','red').text('哈哈');//链式编程
);

---

三、jQuery的入口函数

1、 jQuery入口函数的两种写法

$(document).ready(function()
	...             
);
$(function()
	...          
);

2、 jQuery入口函数和window.onload入口函数的区别

1. window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个。
2. 执行实际不同: jQuery入口函数要快于 window.onload
   jQuery入口函数要等待页面上dom树执行完后执行。
   window.onload 要等待页面上所有资源（dom树/外部css/js连接,图片）都加载完毕后执行。

---

四、$ 的含义

1、$ 是什么
如果报了这个错误: $ is not defined,就说明没有引入jQuery文件
2、jQuery文件结构
其实是一个自执行函数
$(function() window.jQuery = window.$ = jQuery; )

• 引入一个 js 文件, 是会执行这个 js 文件中的代码。
• jQuery 文件是一个自执行函数，引入 jQuery 文件就是执行这个 jQuery 文件中的代码，其实就是执行这个自执行函数。
• 这个自执行文件就是给 window 对象添加一个 jQuery 属性和 $ 属性。
  console.log(window);
  
• $ 其实是和 jQuery 是等价的，是一个函数。
  console.log(window.jQuery == window.$);
console.log(Object.prototype.toString.call($));
  

3、$是一个函数
参数传递不同，效果也不一样

• 如果参数传递的是一个匿名函数 - - - 入口函数
  $( function() … );
• 如果参数传递是一个字符串–选择器/创建一个标签
  $(’#one’); $(’<div>我是一个div标签</div>’);
• 如果参数是一个dom对象，那它会把 dom 对象转换成 jQuery 对象
  $( dom对象 );

---

五、Dom 对象和 jQuery 对象

1、Dom对象

• 原生js选择器获取到的对象
  document.getElementById("");
document.getElementByTagName("");
• 特点：只能调用 dom 方法或者属性，不能调用 jQuery 的属性或者方法
  var div1 = document.getElementById("one");
div1.style.backgroundColor="red";//dom属性
div1.css('backgroundColor','red');//jQuery属性设置失败

2、jQuery对象

• 利用 jQuery 选择器获取到的对象
  var div1 = $('#one');//通过jQuery选择器获取jQuery对象
• 特点：只能调用jQuery的方法或者属性，不能调用原生js dom对象的属性或者方法
  div1.css('backgroundColor','green');//jQ对象设置属性
div1.style.backgroundColor = 'red';//报错，jQ对象不能调用dom方法

3、jQuery对象长什么样
   jQuery对象是一个伪数组。jQuery对象其实就是 dom对象 的一个包装集。

  console.log(div1);
  
4、dom 对象转换成 jQuery 对象
   语法：$(dom对象)
   var div1 = document.getElementById("one");
   var $div1 = $(div1);
   console.log($div1);
   
5、jQuery 对象转换成 dom 对象

1. 利用下标
   var $divs = $('div');
var div1 = $divs[0];//获取jQuery对象（伪数组）中的第一个dom对象
console.log(div1);
2. 使用 jQuery 的方法 get();
   var $divs = $('div');
var div1 = $divs.get(0);
console.log(div1);