jQuery 的初步了解和常⽤API 的使⽤本篇笔记⽬标能说出jQuery是什么能够说出jQuery的优点能说出JQuery对象和DOM对象的区别能够使⽤jQuery常⽤API，如jQuery选择器、筛选选择器、jQuery筛选⽅法理解并能够使⽤链式编程理解并能运⽤排他思想能运⽤jQuery属性操作能运⽤jQuery⽂本值操作能运⽤jQuery元素操作能运⽤jQuery尺⼨和位置操作能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及⽅式
能够说出绑定事件与解绑事件
⼀、jQuery 初识
jQuery 概念
jQuery是⼀个快速、简介的JavaScript库，是⼀个封装好的特定的⽅法和函数的集合。学习jQuery就是为了快速学习和调⽤这些函数和⽅法。其宗旨是“Write less, do more.” 即写更少的代码，做更多的事情。
JavaScript库：
jQuery, Prototype, YUI, Dojo, Ext JS, 移动端的zepto, 都是对原⽣JavaScript的封装，内部都是⽤JavaScript实现的。JQuery 下载
jQuery 使⽤步骤下载jQuery⽂件引⼊jQuery ⽂件
使⽤
⼆、jQuery ⼊门
⼊⼝函数
第⼀种写法 （推荐写法）：
第⼆种写法：$(function () {    //此处是页⾯DOM 加载完成的⼊⼝})
1
2
3
注意点：等着DOM结构渲染完毕即可执⾏内部代码，不必等到所有的外部资源加载完成，jQuery帮我们完成了封装原⽣js中load = function () {}是等页⾯⽂档，外部js⽂件，css⽂件，图⽚加载完毕才执⾏内部代码。
jQuery 的基本使⽤
jQuery 的顶级对象 $$ === jQuery, 代码中可以相互代替，但为了⽅便。⼀般都直接⽤jQuery
$ 是jQuery的顶级对象，相当于原⽣js中的window，把它包装成jQuery对象，就可以调⽤jQuery的⽅法。
JQuery 对象和DOM 对象区分jQuery对象和DOM对象获取元素和修改样式的⽅法js对象只能⽤js的属性和⽅法jQuery对象只能⽤jQuery的属性和⽅法理解jQuery对象本质：利⽤$对象包装后产⽣的对象，以伪数组的形式存储
相互转换
原⽣js⽐jQuery更强⼤，原⽣的⼀些属性和⽅法在jQuery中没有封装，要想使⽤这些属性和⽅法就需要把jQuery对象转换为DOM对象才能使⽤
三、常⽤API
⽬录：$(document ).ready (function () {  //此处是页⾯DOM 加载完成的⼊⼝ });
1
2
3//jQuery 获取元素$('选择器（元素）')//原⽣js 获取元素document .querySelector ('选择器（元素）')document .getElementById ('btn');//jQuery 修改样式$('选择器（元素）').css ('属性','值')//原⽣js 修改样式btn .style .backgroundColor = "red"
1
2
3
4
5
6
7
8
9
10//DOM 对象转换为jQuery 对象 $(DOM 对象)var  btn = document .querySelector ('input');btn .style .background = 'red';=====>>$(btn ).css ('background','yellow');//jQuery 对象转换为 DOM 对象（两种⽅式）$('input')=====>>$('input')[0]$('input').get (0)
1
2
3
4
5
6
7
8
9
10
11
jQuery 选择器jQuery 样式操作jQuery 效果jQuery 属性操作jQuery ⽂本属性值jQuery 元素操作jQuery 尺⼨、位置操作
jQuery事件
jQuery 选择器
隐式迭代
遍历内部DOM元素（伪数组的形式存储）的过程就是隐式迭代。 html
js
jQuery 筛选选择器
jQuery 筛选⽅法 重点$('#id') // 指定id 元素$('*') // 所有元素$('.class') // 指定class 元素$('div') // 根据标签获取元素$('div,p,li') // 获取多个元素$('li.class') // 交集获取$('ul>li') // 获取⼦代$('ul li') // 后代
1
2
3
4
5
6
7
8<ul > <li >1</li > <li >2</li > <li >3</li > <li >4</li ></ul >
1
2
3
4
5
6//原⽣js var  lis = document .querySelectorAll ('li');for  (var  i = 0; i < lis .length ; i ++) {lis [i ].style .background = 'red';}//jQuery $('li').css ('background','red');//⽆需遍历循环，jquery 内部已操作，$('li)返回的就是伪数组形式，⽆论有⼏个元素1
2
3
4
5
6
7$('li:first')// 第⼀个元素$('li:last')// 最后⼀个元素$('li:eq(2)')// **索引**为2的元素$('li:odd')// **索引**为奇数的元素$('li:even')// **索引**为偶数的元素
1
2
3
4
5$('li').parent ()//⽗级$('li').children ()//⼦级--不添加参数，获取所有，有参数，按参数指定的$('li').find ()//后代$('li').siblings ()//兄弟$('li').nextAll ()//后⾯的$('li').prevAll ()//前⾯的
1
2
3
4
5
6
判断是否有某个类名指定索引⽅法 $('div').eq(index)推荐使⽤
添加事件
⼩练习：
html
排他思想
当前元素设置样式，其他兄弟元素清除样式。参考以上练习⼆。
链式编程
jQuery 样式操作
两种⽅法：直接修改css属性，或者操作类名$('div').hasClass ('aa') //返回布尔值
1$('li:eq(2)') //括号内必须是数字，给出值，不能是变量$('div').eq (index ) //index 可以是变量，**推荐**使⽤
1
2
3$('.btn1').click (function () {    $('.box').show ();});$('.btn2').click (function () {    $('.box').hide ();});
1
2
3
4
5
6<input type ="button " value ="点击1"><input type ="button " value ="点击2"><input type ="button " value ="点击3"><input type ="button " value ="点击4"><input type ="button " value ="点击5">
1
2
3
4
5//练习⼀：//点击哪个按钮，就打印哪个按钮$(input ).click (function  () {  console .log ($(this )); //伪数组形式    console .log ($(this )[0]);//元素});
1
2
3
4
5
6//练习⼆：//点谁让谁的背景颜⾊改变为红⾊，其他的不准改变$('input').click (function  () {    $(this ).css ('background','red').siblings ().css ('background','');});
1
2
3
4
5练习三：//点击哪个input 把点击的这个input 的索引值打印出来$('input').click (function  () {    var  index = $(this ).index ;    console .log (index );//jQuery ⾥直接就有index()⽅法，可直接使⽤});
1
2
3
4
5
6$(this ).css ('color', 'red').siblings ().css ('color', "");
1
直接操作css ⽅法
设置类样式
作⽤等同于原⽣js的classList，可以操作类⾥⾯的参数，注意参数不要加点
注意：原⽣js⾥的className会覆盖元素原先的类名，jQuery⾥⾯类操作只是对指定类进⾏操作，不影响原先的类名jQuery 效果
显⽰隐藏效果
滑动效果
事件切换$(this ).css ('color');//参数只写属性名，则是返回属性值$(this ).css ('color','red');//参数是属性名、属性值，逗号分隔，是设置⼀组样式，属性必须加引号，值如果是数字可不加单位和引号$(this ).css ({'color':white ,            'font-size':20});//参数可以是对象形式，⽅便设置多组样式。属性名和属性值⽤冒号隔开，属性如果是数字可以不加引号1
2
3
4$('div').addClass ('current');//添加类$('div').removeClass ('current');//移除类$('div').toggleClass ('current');//切换类
1
2
3show ([speed ,[easing ],[fn ]])hide ([speed ,[easing ],[fn ]])toggle ([speed ,[easing ],[fn ]])（1）参数都可以省略， ⽆动画直接显⽰。（2）speed ：三种预定速度之⼀的字符串(“slow”,“normal”, or “fast”)或表⽰动画时长的毫秒数值(如：1000)。（3）easing ：(Optional ) ⽤来指定切换效果，默认是“swing”，可⽤参数“linear”。
（4）fn :  回调函数，在动画完成时执⾏的函数，每个元素执⾏⼀次。
1
2
3
4
5
6
7
89slideDown ([speed ,[easing ],[fn ]])slideUp ([speed ,[easing ],[fn ]])slideToggle ([speed ,[easing ],[fn ]])（1）参数都可以省略。（2）speed ：三种预定速度之⼀的字符串(“slow”,“normal”, or “fast”)或表⽰动画时长的毫秒数值(如：1000)。（3）easing ：(Optional ) ⽤来指定切换效果，默认是“swing”，可⽤参数“linear”。
（4）fn :  回调函数，在动画完成时执⾏的函数，每个元素执⾏⼀次
1
2
3
4
5
6
7
8
9hover ([over ],out )$('div').hover (function  () {    // ⿏标进⼊要做的事情    $(this ).css ('background','blue');},function  () {    // ⿏标离开要做的事情    $(this ).css ('background','yellow');});（1）over :⿏标移到元素上要触发的函数（相当于mouseenter ）mouseenter ==mouseover （2）out :⿏标移出元素要触发的函数（相当于mouseleave ）mouseleave ==mouseout （3）如果只写⼀个函数，则⿏标经过和离开都会触发它1
2
3
4
5
6
7
8
9
10
11
12
13
jquery是什么有什么作用14
15

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。