首页 > 代码库 > jQuery第一篇 (帅哥)

jQuery第一篇 (帅哥)

 

同学心目中的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 版本  不再支持IE678

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. Jswindow.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行
  2. jQuery的入口函数 是在 html所有标签都加载之后,就回去执行。

1.5 Js创建对象

三种方式:

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

12的区别:

推荐使用第一个方式

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

1.6 jQuery基本选择器

1.6.1 回顾CSS选择器

CSS选择器回顾

符号

说明

用法

#id

Id选择器

#id{ color:red; }

.class

类选择器

.class{ //}

Element

标签选择器

P { //}

*

通配符选择器

配合其他选择器来使用

,

并集选择器

div,p{}

 空格

后代选择器

div span{}

选择div下面所有后代的span

>

子代选择器

div > span{}

+

紧邻选择器

div+p

选择div紧挨着的下一个p元素

 

 

 

 

 

1.6.2 jQuery基本选择器

基本选择器

符号

说明

用法

$(#demo)

选择iddemo的第一个元素

$(“#demo”).css(“background”,”red”)

$(.liItem)

选择所有类名(样式名)为liItem的元素

$(“.liItem”). css(“background”,”red”);

$(div)

选择所有标签名字为div的元素

$(“div”). css(“background”,”red”);

$(*)

选择所有元素

少用或配合其他选择器来使用

$(“*”). css(“background”,”red”)

$(.liItem,div)

选择多个指定的元素,这个地方是选择出了 .liItem元素和div元素

$(“.liItem,div”). css(“background”,”red”)

 

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

 

1.7 jQuery是什么

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

 

1.7.1 JavasciptjQuery的区别:

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

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

 

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

1.8 jQuery其他选择器

1.8.1 层级选择器

 

符号

说明

用法

 空格

后代选择器

选择所有的后代元素

$(“div span”). css(“background”,”red”);

>

子代选择器

选择所有的子代元素

$(“div > span”). css(“background”,”red”)

+

紧邻选择器

选择紧挨着的下一个元素

$(“div + p”). css(“background”,”red”)

~

兄弟选择器

选择后面的所有的兄弟元素

$(“div ~ p”). css(“background”,”red”)

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

 

1.8.2 过滤选择器

基本过滤选择器

符号

说明

用法

:eq(index)

index是从0开始的一个数字,选择序号为index的元素。选择第一个匹配的元素。

$(“li:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是从0开始的一个数字,选择序号大于index的元素

$(“li:gt(2)”). css(“background”,”red”)

:lt(index)

Index是从0开始的一个数字,选择小于index 的元素

$(“li:lt(2)”). css(“background”,”red”)

:odd

选择所有序号为奇数行的元素

$(“li:odd”). css(“background”,”red”)

:even

选择所有序号为偶数的元素

$(“li:even”). css(“background”,”red”)

:first

选择匹配第一个元素

$(“li:first”). css(“background”,”red”)

:last

选择匹配的最后一个元素

$(“li:last”). css(“background”,”red”)

 

属性选择器

符号

说明

用法

$(a[href])

选择所有包含href属性的元素

$(“a[href]”). css(“background”,”red”)

$(a[href=http://www.mamicode.com/itcast])

选择href属性值为itcast的所有a标签

$(“a[href=http://www.mamicode.com/’itcast’]”). css(“background”,”red”)

$(a[href!=baidu])

选择所有href属性不等baidu的所有元素,包括没有href的元素

$(“a[href!=’baidu’]”). css(“background”,”red”)

$(a[href^=web])

选择所有以web开头的元素

$(“a[href^=’web’]”). css(“background”,”red”)

$(a[href$=cn])

选择所有以cn结尾的元素

$(“a[href$=’cn’]”). css(“background”,”red”)

$(a[href*=i])

选择所有包含i这个字符的元素,可以是中英文

$(“a[href*=’i’]”). css(“background”,”red”)

$(a[href][title=])

选择所有符合指定属性规则的元素,都符合才会被选中。

$(“a[href][title=’我’]”). css(“background”,”red”)

 

筛选选择器参考上课讲的 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 jQueryready函数区别:

a) 参考 1.4.2

 

jQuery第一篇 (帅哥)