JQuery简单入门

作者: lvyweb | 来源:发表于2017-07-08 20:53 被阅读142次

第一章：jQuery 简介

为什么要学习jQuery?

js的缺点

什么是jQuery？

jquery的官网：http://jquery.com/

官方说法
说白了：jQuery就是一个js库，使用jQuery，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js）

学习jQuery，主要是学什么呢？

API：application programming interface：应用程序编程接口，换句话说，API就是方法。
注意：方法调用的时候，都带小括号(),使用jQuery的方法的时候，不要忘了小括号。

怎样使用jQuery？

下载

可以去官网直接下载
通过通过Bower工具安装，bower install jquery
可以通过 CDN（内容分发网络）引用它。
eg:从谷歌或微软引用 jQuery，请使用以下代码之一：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

使用jQuery实现div动态展示案例的步骤

1)引包（引入jQuery文件）
<script src="jquery-1.11.1.js"></script>
2)入口函数

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

3)功能实现

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

div动态展示案例中JavaScript与jquery的对比

js与jQuery对比图

第二章：jQuery详细解释

版本介绍

大版本分类
分为 1.x和2.x以及3.x
区别：2.x版本不再支持IE6/7/8
同一版本分类
有两个版本的 jQuery 可供下载：
jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。
jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。

引包的注意点

忘记引包或者引包在入口函数的后面。

jQuery忘记引包
引包路径错误(404)

jQuery路径引包路径错误

入口函数

jQuery入口函数的两种写法

//第一种写法

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

 //第二种写法
$(function() {});

对比JavaScript的入口函数jQuery的入口函数,执行时机

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象与DOM对象之间的转换

什么是DOM对象？

使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。

var btn = document.getElementById(“btnShowDiv”);
var divs = document.getElementsByTagName(“div”);

dom对象只可以使用dom对象的方法和属性

domObject.innerHTML = “dom对象设置文本”;
domObject.style.display= “block”;//dom对象显示对象
domObject.onclick = function() {}//dom对象绑定事件

什么是jquery对象？

jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回对象都是jquery对象。

$(“div”);//标签选择器返回的jquery对象。
$(“#btnShowDiv”);//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $(“div”);
$obj.html(“jquery对象设置文本的方法”);
$obj.show();//jquery对象显示文本
$obj.click(function() {});//jquery对象绑定事件

错误的用法

$(“div”).innerHTML;//jquery对象不能调用dom方法
document.getElementById(“btnShowDiv”).show();//dom对象不能调用jquery方法。

jQuery对象和DOM对象的相互转换

jquery对象转DOM对象

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

DOM对象转jquery对象

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

区分jQuery和JavaScript

JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。

第三章：jQuery 选择器

基本选择器

总结：跟css的选择器用法一模一样。

层级选择器

过滤选择器

这类选择器都带冒号：

过滤选择器

筛选选择器

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

筛选选择器

第四章：jQuery操作样式

1、css操作

功能：设置或者修改样式，操作的是style属性

设置单个样式

//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色

设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

获取样式

//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值。

2、class操作

添加样式类

//name：需要添加的样式类名，注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);

移除所有样式类

//不带参数，移除所有的样式类
removeClass()
//例子，移除div所有的样式类
$(“div”).removeClass();

移除单个样式类

//name:需要移除的样式类名
removeClass(“name”);
//例子，移除div中one的样式类名
$(“div”).removeClass(“one”);

判断是否有样式类

//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$(“div”).toggleClass(“one”);

经验总结：
1.如果操作到的样式非常少，可以考虑css方法
2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

第五章：jquery动画

显示与隐藏

显示(show)与隐藏(hide)是一组动画：

show方法详解：

show([speed], [callback]);
    //speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
//callback(可选):执行完动画后执行的回调函数

hide方法详解：

与show方法的用法完全一致。
show/hide：修改的是元素的width、height、opacity。

滑入与滑出

滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似
slideUp/slideDown,使用方法与show/hide基本一致。

slideUp(speed, callback);
//speed(可选)：动画的执行时间
     1.如果不传，默认为normal，注意区分show/hide。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
   3.固定字符串，slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数

淡入与淡出

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

fadeIn(speed, callback);
//speed(可选)：动画的执行时间
     1.如果不传，默认是normal。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
   3.固定字符串，slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数

淡入淡出切换：

fadeToggle(speed, callback);
//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

淡入淡出到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

fadeTo(speed, value, callback)//可以设置具体的透明度
//speed（必须）
//value  0-1之间的数值(比如0.4)，表示淡到某一个值。
//callback(可选) 回调函数

fade系列方法：修改的是元素的opacity

动画小结

1.jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2.动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3.淡入淡出到某个值：fadeTo方法。
4.show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

第六章：jquery操作DOM(节点)

创建元素

//$(htmlStr)
//htmlStr：html格式的字符串
$(“<span>这是一个span元素</span>”);

添加元素

添加新建的元素：

//方法一：将jQuery对象添加到调用者内部的最后面。 
var $span = $(“<span>这是一个span元素</span>”);
$(“div”).append($span);

//方法二：参数传字符串，会自动创建成jquery对象
$(“div”).append(“<span>这是一个span元素</span>”);

添加已经存在的元素

var $p = $(“p”);
$(“div”).append($p);
//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。
//类似的用法：append  prepend  after before

使用html方法创建元素

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

清空元素

empty：清空指定节点的所有元素，自身保留(清理门户)

$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

清空元素的第二种方法

$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

删除元素

remove：相比于empty，自身也删除（自杀）
$(“div”).remove();

克隆元素

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();

第七章：jquery操作DOM

jQuery操作属性

设置单个属性

//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
attr(name, value);
//用法举例
$(“img”).attr(“title”,”哎哟，不错哦”);
$(“img”).attr(“alt”,“哎哟，不错哦”);

设置多个属性

//参数是一个对象，包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
    title:"哎哟，不错哦",
    alt:"哎哟，不错哦",
    style:"opacity:.5"});

获取属性

//传需要获取的属性名称，返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);

注意：
1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.获取属性时，如果该属性不存在，那么会返回undefined

jQuery操作值与内容

val方法
val方法用于设置和获取表单元素的值，例如input、select、textarea的值

//设置值
$(“#name”).val(“张三”);
//获取值
$(“#name”).val();

html方法

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

text方法

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。

jQuery操作尺寸

height
设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

//返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）

width
设置获取获取宽度，与高度操作功能一样

//带参数表示设置宽度
$(“img”).width(200);
//不带参数获取宽度
$(“img”).width();

第八章：jQuery事件机制

jQuery事件的发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件绑定

click(handler)          单击事件
mouseenter(handler)     鼠标进入事件
mouseleave(handler)     鼠标离开事件
scroll(handler)         滚动事件
//缺点：一次只能绑定一个事件

bind事件绑定

不推荐使用，jQuery1.7版本后被on取代

//绑定多个事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点：不支持动态创建出来的元素绑定事件。

delegate事件绑定

支持动态绑定事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

on事件绑定

jQuery1.7之后，jQuery用on统一了所有事件的处理方法

on事件绑定

优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

例子：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});

事件解绑

unbind() 方式（不用）

作用：解绑事件

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

undelegate() 方式（不用）

作用：解绑事件

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（重点）

作用：解绑事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑 
$(selector).off( “click”, “**” );

事件触发

简单事件触发

$(selector).click(); //触发 click事件

trigger方法触发事件

$(selector).trigger(“click”);

补充

each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

JQuery简单入门

第一章：jQuery 简介

为什么要学习jQuery?

什么是jQuery？

学习jQuery，主要是学什么呢？

怎样使用jQuery？

下载

使用jQuery实现div动态展示案例的步骤

div动态展示案例中JavaScript与jquery的对比

第二章：jQuery详细解释

版本介绍

引包的注意点

入口函数

jQuery对象与DOM对象之间的转换

什么是DOM对象？

什么是jquery对象？

错误的用法

jQuery对象和DOM对象的相互转换

区分jQuery和JavaScript

第三章：jQuery 选择器

基本选择器

层级选择器

过滤选择器

筛选选择器

第四章：jQuery操作样式

1、css操作

设置单个样式

设置多个样式

获取样式

2、class操作

添加样式类

移除所有样式类

移除单个样式类

判断是否有样式类

切换样式类

第五章：jquery动画

显示与隐藏

show方法详解：

hide方法详解：

滑入与滑出

淡入与淡出

动画小结

第六章：jquery操作DOM(节点)

创建元素

添加元素

清空元素

删除元素

克隆元素

第七章：jquery操作DOM

jQuery操作属性

jQuery操作值与内容

jQuery操作尺寸

第八章：jQuery事件机制

jQuery事件的发展历程

简单事件绑定

bind事件绑定

delegate事件绑定

on事件绑定

on事件绑定

事件解绑

unbind() 方式（不用）

undelegate() 方式（不用）

off方式（重点）

事件触发

简单事件触发

trigger方法触发事件

补充

each方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程