DOM

library是一个封装好的特定的集合方法和函数。

从封装一大堆函数的角度理解库

就是在这个库中封装了很多预先定义好的函数在里面比如获取元素、动画animate、hide、show等。

简单理解

文件里面对我们原生js代码进行了封装存放到里面。

这样我们可以快速高效的使用这些封装好的功能了。

1.1.2

意思就是查询js把js中的DOM操作做了封装我们可以快速的查询使用里面的功能。

jQuery

JavaScript

出现的目的是加快前端人员的开发速度我们可以非常方便的调用和使用它从而提高开发效率。

1.1.3

轻量级。

核心文件才几十kb不会影响页面加载速度。

跨浏览器兼容基本兼容了现在主流的浏览器。

链式编程、隐式迭代。

对事件、样式、动画支持大大简化了DOM操作。

支持插件扩展开发。

有着丰富的第三方的插件例如树形菜单、日期控件、轮播图等。

免费、开源。

1.2

https://jquery.com/官网即可下载指定版本即可。

各个版本的下载https://code.jquery.com/

1.2.2

src./js/jquery-1.12.4.js/script在文档最末尾插入

script

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

});​

结构渲染完毕即可执行内部代码不必等到所有外部资源加载完成jQuery

load

文件、css文件、图片加载完毕才执行内部代码。

更推荐使用第一种方式。

1.2.4

。

$是jQuery的顶级对象相当于原生JavaScript中的

window。

把元素利用$包装成jQuery对象就可以调用jQuery

$(function

获取来的对象叫jquery对象,div1就是jquery对象var

div1

要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

//1.将dom

srcjs/jquery-1.12.4.js/scriptstylevideo

{width:

document.querySelector(video);video.play();//jq对象

没有play()

/body/html总结实际开发比较常用的是把DOM对象转换为jQuery对象这样能够调用功能更加强大的jQuery中的方法。

1.3

src./js/jquery-1.12.4.js/scriptscript$(function

{var

$(div)console.log(divs1);//返回的是页面所有div

divs2

$(p,li)console.log(divs5);//交集选择器

查找li标签中

$(li.current)console.log(divs6);})

/script

src./js/jquery-1.12.4.js/scriptscript$(function

{//子代选择器

console.log($(divp))//后代选择器console.log($(div

p))})

筛选选择器顾名思义就是在所有的选项中选择满足条件的进行筛选选择。

常见如下

headscript

src./js/jquery-1.12.4.js/scriptscript$(function

{$(ul

li:even).css(color,yellow);})/script

/headbodyulleili多个里面筛选几个1/lili多个里面筛选几个2/lili多个里面筛选几个3/lili多个里面筛选几个4/lili多个里面筛选几个5/li/ul

/body

jQuery中还有一些筛选方法类似DOM中的通过一个节点找另外一个节点父、子、兄以外有所加强。

(过滤选择器)

headscript

src./js/jquery-1.12.4.js/scriptscript$(function

body//

console.log($(ul).parent())//查找ul的所有孩子//

console.log($(ul).children())//查找

console.log($(ul).children(li))//查找

console.log($(ul).find(li))//查找

不包括自己//

console.log($(ul).siblings())//查找

同辈元素//

console.log($(ul).nextAll())//查找

同辈元素//

console.log($(ul).prevAll())//当前元素

类选择器

console.log($(a).hasClass(box))//查找当前

第三个li元素

/headbodyh1/h1ulli多个里面筛选几个0olli123/li/ol/lili多个里面筛选几个1/lili多个里面筛选几个2/lili多个里面筛选几个3/lili多个里面筛选几个4/lili多个里面筛选几个5/li/ulolliolli1/liliolli2/li/ola

href

简单理解给匹配到的所有元素进行循环遍历执行相应的方法而不用我们再进行循环简化我们的操作方便我们调用。

//

})var

jq排他思想当前元素设置样式其余的兄弟元素清除样式。

//当前div

显示所有其他div清除样式这种写法

$(div).eq(0).show().siblings().hide()链式编程

blue);1.4

$(div).css(color);console.log(strColor);//rgb(0,

0)//

参数是属性名属性值逗号分隔是设置一组样式属性必须加引号$(div).css(color,

rgb(255,

$(div).removeClass(current);$(div).click(function

{//

3.切换类$(div).toggleClass(current);

});

{$(this).addClass(current).siblings().removeClass(current);$(.item).eq($(this).index()).show().siblings().hide();//$(.item).eq($(this).index()).css(display,block).siblings().css(display,none);})1.5

jQuery

动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。

1.5.1

{$(button).eq(0).click(function

{$(div).show(1000,

red);});});$(button).eq(1).click(function

{$(div).hide(500);});$(button).eq(2).click(function

})1.5.2.

bodybutton下拉滑动/buttonbutton上拉滑动/buttonbutton切换滑动/buttondiv/divscript

srcjs/jquery-1.12.4.js/scriptscript$(function

{$(button).eq(0).click(function

{//

slideDown()$(div).slideDown(500,

function

red)});})$(button).eq(1).click(function

{//

slideUp()$(div).slideUp(500);})$(button).eq(2).click(function

{//

slideToggle()$(div).slideToggle(500);})//

一般情况下我们都不加参数直接显示隐藏就可以了})/script

/body1.5.3

bodybutton淡入效果/buttonbutton淡出效果/buttonbutton淡入淡出切换/buttonbutton修改透明度/buttondiv/divscript

srcjs/jquery-1.12.4.js/scriptscript$(function

{$(button).eq(0).click(function

{//

fadeIn()$(div).fadeIn(500);})$(button).eq(1).click(function

{//

fadeOut()$(div).fadeOut(500);})$(button).eq(2).click(function

{//

fadeToggle()$(div).fadeToggle(500);})$(button).eq(3).click(function

{$(div).fadeTo(500,

自定义动画非常强大通过参数的传递可以模拟以上所有动画方法为animate()

语法规范如下:

bodybutton动起来/buttondiv/divscript

srcjs/jquery-1.12.4.js/scriptscript$(function

1000px},

动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。

stop()

fadeIn()$(div).stop().fadeIn(2000);

})1.6

attr(“属性”“属性值”)类似原生setAttribute()

注意attr()

srcjs/jquery-1.12.4.js/scriptscript$(function

{$(a).click(function

{//阻止默认事件e.preventDefault();console.log($(a).attr(href));//https://www.baidu.comconsole.log($(a).attr(ids));//idsconsole.log($(a).prop(href));//https://www.baidu.comconsole.log($(a).prop(ids));//undefined$(this).attr(href,

读取和设置

使用propconsole.log($(input).prop(type))$(input).prop(type,

true);})})/script

srcjs/jquery-1.12.4.js/scriptscript$(function

{//html()

html()console.log($(div).html());//我是div$(div).html(h1我是标题/h1);//把文本内容替换成h1标签//

获取设置元素文本内容

text()console.log($(div).text());//我是div$(div).text(我是替换的div)//

获取设置表单值

val()console.log($(input).val());//用户名$(input).val(输入用户名)})/script

typetext

元素操作主要讲的是用jQuery方法操作标签的遍历、创建、添加、删除等操作。

1.8.1

)each()方法遍历匹配每一个元素主要操作DOM对象2个参数index是每个元素的索引号element是每个DOM元素对象想要使用jquery方法需要将DOM对象转换为jquery对象$(element)

语法2

)$.each()方法遍历任何对象主要用于数据处理比如数组和对象2个参数index是每个元素的索引号element是遍历内容

headstylediv

srcjs/jquery-1.12.4.js/scriptscript$(function

{//index是下标element是dom元素$(div).each(function

(index,

{console.log(fn);}};$.each(obj,

function

/headbodydivdiv1/divdivdiv2/divdivdiv3/divdivdiv4/divdivdiv5/div

/body1.9

jQuery方法操作元素的创建、添加、删除方法很多重点使用部分如下

语法总和

把内容放到匹配元素内部的最后面类似原生的appendChild

外部添加

remove删除元素本身empty和html作用等价都可以删除元素里面的内容只不过html还可以设置内容

案例代码

src./js/jquery-1.12.4.js/scriptscript$(function

{//创建新元素var

出现$(ul).append(linewli2/li);$(ul).prepend(linewli2/li);//新元素作为同级元素出现

在下方显示$(ul).after(ul我是ul/ul);//新元素作为同级元素出现

在上方显示$(ul).before(ul我是ul/ul);//

删除元素//

包括本身元素$(ul).remove();$(ul).html();})/script

/headbodyinput

value按钮ullili1/li/uldiv我是div/div

/body

尺寸操作包括元素宽高的获取和设置且不一样的API对应不一样的盒子模型。

代码演示

srcjs/jquery-1.12.4.js/scriptscript$(function

{//

console.log($(div).width());//200//

$(div).width(400);//

console.log($(div).innerWidth());//300//

outerWidth()

console.log($(div).outerWidth());//320//

outerWidth(true)

marginconsole.log($(div).outerWidth(true));

//340})/script

我们将可以快速获取和子的宽高至于其他属性想要获取和设置还要使用

css()

offset()、position()、scrollTop()/scrollLeft()

具体介绍如下:

相对于文档的偏移坐标跟父级没关系有两个属性left、top。

offset().top用于获取距离文档顶部的距离offset().left用于获取距离文档左侧的距离可以设置元素的偏移

position()

返回被选中元素相对于带有定位的父级偏移坐标如果父级没有定位则以文档为准有两个属性left、top。

position().top用于获取距离定位父级顶部的距离position().left用于获取距离定位父级左部的距离该方法只能获取

scrollTop()

initial-scale1.0titleDocument/titlestyle*

{margin:

src./js/jquery-1.12.4.js/scriptscript$(function

{//offset()

console.log($(.fa***r).offset());//100

100//

console.log($(.fa***r).offset().top);//100//相对body的//

$(.son).offset(//

console.log($(.fa***r).position());//100

100//

console.log($(.fa***r).position().top);//100//postion

不能设置position

console.log($(document).scrollTop());//

});//给参数

$(document).scrollTop(100);})/script

/headbodydiv

$(“body,html”).animate({scrollTop:

0})

initial-scale1.0titleDocument/titlestyle*

{margin:

src./js/jquery-1.12.4.js/scriptscript$(function

{//scrollTop用法

scroll滚动事件$(document).scroll(function

滚动值//console.log($(document).scrollTop());if

{//显示返回顶部按钮$(.fixed).fadeIn(500)}

else

{//隐藏返回顶部按钮$(.fixed).fadeOut(500)}})//点击粉色盒子

回到0位置/返回顶部$(.fixed).click(function

{//animate

普通的事件注册不能做事件委托且无法实现事件解绑需要借助其他方法。

element.事件(

);其它事件和原生一致。

mouseover、mouseout、blur、focus、keydown、keyup、resize、scroll

演示代码

src./js/jquery-1.12.4.js/scriptscript$(function

{//this指的是.box$(this).css(backgroundColor,

blue);//var

因为普通注册事件方法的不足jQuery又开发了多个处理方法重点讲解如下

on():

$(‘.box’).css(‘backgroundColor’,

‘red’)

$(‘.box’).css(‘backgroundColor’,

‘orange’)

$(‘.box’).css(‘backgroundColor’,

‘blue’)

on()可以做事件委托就是把原来加在子元素身上的事件绑定在父元素上把事件委托给父元素

$(‘ul’).on(‘click’,

src./js/jquery-1.12.4.js/scriptscript$(function

{//on可以绑定多个事件$(.box).on({mouseover:

function

{alert(事件委托);})$(input).click(function

{var

$(li我是新添加的li/li)$(ul).append($ele)})})/script

/headbodydiv

classbox/divulli我是li/li/ulinput

typebutton

当某个事件上面的逻辑在特定需求下不需要的时候可以把该事件上的逻辑移除这个过程我们称为事件解绑。

$(‘p’).off();

解绑p元素所有事件处理程序$(‘p’).off(‘click’);

解绑p元素上面的点击事件$(‘p’).off(‘click’,‘li’);

解绑事件委托

srcjs/jquery-1.12.4.js/scriptscript$(function

{$(div).on({click:

{console.log(我点击了);//第一次可以点击然后解绑事件$(div).off(click)}});//点击li

把事件委托

{console.log(我是委托事件);//第一次可以点击然后解绑事件$(ul).off(click,

li)});//

{console.log(我只执行一次)})})/script

/head

bodydiv/divulli我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/li/ulp我是一个P标签/p

/body/html3.4

比如轮播图自动播放功能跟点击右侧按钮一致。

可以利用定时器自动触发右侧按钮点击事件不必鼠标点击触发。

由此

jQuery

第一种简写形式Element.trigger(‘type’);

第二种自动触发模式

src./js/jquery-1.12.4.js/scriptscript$(function

{//点击input时候

高大上//$(.box).trigger(click)})$(.box).click(function

{console.log(.box被点击了);});})/script

/headbodydiv

进行了封装兼容性更好获取更方便使用变化不大。

事件被触发就会有事件对象的产生。

element.事件(function

hrefhttps://www.baidu.com百度一下/ascript

srcjs/jquery-1.12.4.js/scriptscript$(function

{$(a).on(click,

{console.log(点击了div);//阻止默认事件e.preventDefault();})$(a).click(function

(e)

{e.preventDefault();});})/script

/body