jQuery第一篇 （帅哥）

标签：容错   3.1   java   strong   重用   1.4   其他   是什么   document   

同学心目中的jQuery：

简单易用，功能强大，对移动端来说，体积稍大。

1.1 回顾前面学到的js我们遇到的一些痛点

1. window.onload 事件有个事件覆盖的问题，我们只能写一个
2. 代码容错性差
3. 浏览器兼容性问题
4. 书写很繁琐，代码量多
5. 代码很乱，各个页面到处都是
6. 动画效果，我们很难实现

1.2 jQuery解决问题

解决了我们上面遇到所有问题

1.3 jQuery的基本使用

min：它是压缩过的版本

区别：我们开发过程中，会用未压缩的版本，或者压缩的。

 项目上线的时候，我们要用压缩过的版本。

版本问题：

1. 1.xxx 版本 jQuery-1.11.1.js
2. 2.xxx 版本  不再支持IE6、7、8

1.3.1 引包

1.要把我们的jQuery源文件拿到我们的项目里面来

2.在我们的页面中引用jQuery文件

问题：

如果遇到这种问题，那肯定是没有引用我们的jQuery源文件。

用jQuery之前，先引入jQuery，然后，再去写我们的jQuery代码。

1.3.2 入口函数

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

$(function(){});

1.3.3 事件处理程序

1. 事件源

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

jQuery方式：$(“#id”)

1. 事件

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

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

区别：jQuery的事件不带on

1. 事件处理程序

Js 书写方式:

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

// 语句

}

jQuery 书写方式:

$(“#id”).click(function(){

// 语句

});

1.4 jQuery详细介绍

1.4.1 $问题

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

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

var $ = “我是$符号”;

jQUery的两个变量：$ 和 jQuery

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

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

1. Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
2. jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。

1.5 Js创建对象

三种方式：

1. var obj = {};
2. var obj1 = new Object();
3. var obj2 = Object.create();

1跟2的区别：

推荐使用第一个方式

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

1.6 jQuery基本选择器

1.6.1 回顾CSS选择器

1.6.2 jQuery基本选择器

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

1.7 jQuery是什么

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

1.7.1 Javascipt跟jQuery的区别：

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

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

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

1.8 jQuery其他选择器

1.8.1 层级选择器

层级选择器选择了选择符 后面那个元素，比如，div  >  p，是选择>后面的p元素。

1.8.2 过滤选择器

筛选选择器参考上课讲的 11 筛选选择器.html

1.9 mouseover事件跟mouseenter事件的区别：

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

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

1.10 DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:

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

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

DOM对象转换成jQuery对象：

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

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

btn -> $(btn);

1.11几个面试题：

1. js对象创建的有几种方式（三种）

a) 1.var obj = {};

b) 2. var obj = new Object();

c) 3. ECMAScript5里面提供的一个方法：Object.create(参数);

1. window.onload 跟jQuery的ready函数区别：

a) 参考 1.4.2

jQuery第一篇 （帅哥）

标签：容错   3.1   java   strong   重用   1.4   其他   是什么   document   

原文地址：http://www.cnblogs.com/shaoshuai0305/p/6230554.html