首页 > 代码库 > jQuery第一篇 （帅哥）

jQuery第一篇 （帅哥）

2024-08-29 20:21:28   217人阅读

 

同学心目中的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选择器

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”)

选择id为demo的第一个元素

$(“#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 Javascipt跟jQuery的区别：

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 跟jQuery的ready函数区别：

a) 参考 1.4.2

 

jQuery第一篇 （帅哥）


联系
我们