初试HTML之JQuery（菜鸟学习篇）

前言：

HTML的学习进度逐渐加快，JS和JQuery的学习初步结束。总结了一些前辈指导和书籍上的资料。本篇文章仍会不断更新。

---

W3School jQuery 参考手册

---

一、回顾JS（JavaScript）当前遇到的痛点

1.Window.Onload时间有个时间覆盖的问题，只能写一个。

2.代码容错性差

3.浏览器的兼容器差

4.书写很繁琐，代码量多

5.代码很乱，各个页面到处都是

6.动画效果，很难实现。

二、JQuery解决当前问题

min：它是压缩过的版本

区别：我们在开发过程中，会使用未压缩或者是压缩的版本。项目上线的时候，我们一定使用压缩过的版本。

1.1XXX版本  query-1.11.1.js

1.2   2.2XXX版本   不再支持 IE6，7，8

2.引包

要把我们的JQuery源文件

在我们的页面中引入我们的JQuery的文件

问题：

如果遇到这种问题，那肯定是没有引用我们的JQuery的源文件，在去写JQuery的源代码。

事件处理程序

事件源

Js方式：document.getElementById(“id”)

jQuery方式：$(“#id”)

事件

Js方式:document.getElementById(“id”).onclick

jQuery方式: $(“#id”).click

区别：jQuery的事件不带on

l事件处理程序

Js书写方式:

document.getElementById(“id”).onclick  = function(){

//语句

}

jQuery书写方式:

$(“#id”).click(function(){//语句

});

jQuery详细介绍

$问题

a)Js命名归法：下划线、字母、$、数字

b)但是不能以数字作为开头

var $

= “我是$符号”;

jQUery的两个变量：$和jQuery

jQuery占用了我们两个变量：$和jQuery

js入口函数跟jQuery入口函数的区别：

1.Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行

2.jQuery的入口函数是在html所有标签都加载之后，就回去执行。

Js创建对象

三种方式：

1.var  obj = {};

2.var  obj1 = new Object();

3.var  obj2 = Object.create();

1跟2的区别：

推荐使用第一个方式

第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

---

jQuery基本选择器

回顾CSS选择器

jQuery基本选择器

规律：$(selector).css(“background”,”red”);

jQuery是什么

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

jQuery其他选择器

层级选择器

过滤选择器

属性选择器

mouseover事件跟mouseenter事件的区别：

mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。

mouseenter/mouseleave事件，鼠标经过的时候只会触发一次

DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:

方式一：$(“#btn”)[0]

方式二：$(“#btn”).get(0)

DOM对象转换成jQuery对象：

$(document)->把DOM对象转成了jQuery对象

var btn = document.getElementById(“bt n”);

btn->$(btn);