JQ基础笔记（一）

JQuery基础（一）

本篇主要介绍了JQuery的作用、使用步骤、基本知识和静态方法

---

JQuery是JavaScript库

• 简化JavaScript代码操作
• 集成了JavaScript、DOM、CSS和Ajax，兼容不同的浏览器

API：http://api.jquery.com

使用步骤

1. 下载JQ文件：www.jquery.com
2. 本地引用：<script type="text/javascript" src="jquery-3.4.1.js">，也可外部引用
3. 入口函数：
   原生JS的固定写法
   window.onload = function(ev){ your codes }
   JQ固定写法，也可以把$换成jQuery
$(document).ready(function(){ your codes });
   简化写法
   $(function(){ your codes });

一些事情

• 一般选择1.x版本，可查看到百度、腾讯官网都使用1.x，它支持IE6、7、8
• UNcompress（未压缩、开发版）适合开发阶段阅读源代码
• 生产版 适合发布生产，由于其体积更小，加载更快

jQuery初步

jQ与JS的区别

1.加载模式

• 原生JS会等到DOM元素和图片加载完毕才执行
• JQ不会等图片加载完毕，只等DOM元素加载完毕，就执行

2.入口函数

• 原生JS若写了多个入口函数，后面会覆盖前面
• JQ多个入口函数，不会覆盖前面

$符号冲突解决
在引入其他框架时，可能会出现符号冲突的问题

• 方式一：jQuery.noConflict()须在编写其他jQuery代码之前写。释放$符号的使用权，后面用jQuery代替
• 方式二：定义符号代替var h$ = jQuery.noConflict();这里用h$用代替了$

核心函数$()

• 接受一个函数$(function () { alert(); });

• 接受一个字符串选择器var $b1=$(".box1");//按类选择 var $b2=$("#box2");//按id选择

• 接受一个代码片段

JQ对象 是一个伪数组

静态方法与实例方法
1.创建

• 静态方法：创建类——类名.自定义方法名=function(){}
• 实例方法：创建类——类名.prototype.自定义方法名=function(){}

2.调用

• 静态方法：类名.自定义方法名
• 实例方法：创建类的对象——对象名.自定义方法名

一些静态方法

• each 遍历数组
  JQ方式：（参数位置代表的意义固定，但参数名随意，下同）
  $.each(yourArr,function (index,value) { console.log(index,value); })
  JS方式：
  yourArr.forEach(function (t, number) { console.log(number,t); })

• map 遍历数组，并支持在回调函数中进行处理
  JQ方式：
  $.map(yourArr,function (t, number) { console.log(number,t); });
  JS方式：（ts代表yourArr数组，包括其中每个元素）
  yourArr.map(function (t, number, ts) { console.log(number,t,ts); });

• $.trim() 返回一个字符串：去除原字符串两端的空格

• $.isWindow() 判断Window对象

• $.isFunction() 判断函数 参数为jQuery时返回true

• $.isArray() 判断 真数组 对象

• $.holdReady(true);可以阻止入口函数执行，holdReady(false);入口函数执行

注：

1. jQuery本质是一个匿名函数，可以查看源代码结构
2. JQuery的each和map的区别
   each静态方法，默认返回遍历的原数组对象，不支持在回调函数中进行处理
   map静态方法默认返回一个空数组，支持在回调函数中进行处理

以上，本篇主要介绍了JQuery的作用、使用步骤、基本知识和静态方法。