jQuery总结
jQuery第一天
jQuery
jQuery是一个快速,简洁的JavaScript库
JavaScript库:是一个封装好的特定的集合(方法和函数)
学习jQuery本质:学习调用这些函数(方法)
j 就是 JavaScript;Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
JavaScript库
jquery,prototype,dojo,YUI
jQuery优点
轻量级,文件叫嚣,不影响页面加载
链式编程,隐式迭代
支持插件扩展开发
免费,开源
jQuery
jQuery入口函数
第一种
$(function () {
// 此处是页面 DOM 加载完成的入口
});
第二种
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
注意点:
等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。
jQuery 的顶级对象 $
$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 ,但一般为了方便,通常都直接使用 $ 。
$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
js的对象只能用JS的属性和方法
Jq的对象只能用JQ的属性和方法
用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】
jQuery 方法获取的元素就是 jQuery 对象【$('div')等】
jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)
相互转换
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM 对象转换为 jQuery 对象: $(DOM对象)
jQuery 对象转换为 DOM 对象(两种方式)
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
jQuery 常用API
1. jQuery 选择器
2. jQuery 样式操作
3. jQuery 动画效果
4. jQuery 属性操作
5. jQuery 文本属性值
6. jQuery 元素操作
7. jQuery 尺寸、位置操作
选择器
$('#id')==》指定id元素
$('*')==》所有元素
$('.class')==》指定class元素
$('div')==》根据标签获取元素
$('div,p,li')==》获取多个
$('li.class')==>交集获取
$('ul>li')==>子代
$('ul li')==>后代
筛选选择器
$('li:first'):第一个元素
$('li:last'):最后一个元素
$('li:eq(2)')==》索引为2 //注意:索引是从0开始的
$('li:odd')==》索引为奇数
$('li:even')==》索引为偶数
筛选方法
$('li').parent()父级
$('ul').children('li');子集【如果不加参数,获取所有的,如果添加指定的元素,按照指定的找】
$('ul').find('li')后代
$('li').siblings('li')兄弟
$('li'),nextAll();后面的
$('li').prevAll();前面的
判断是否具有某个类名:$('div').hasClass('aaa')
$('div').eq(index);指定索引方法【eq推荐用方法】
重点记住: parent() children() find() siblings() eq()
parents获取祖先元素方法
隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
排它思想
$(this).css('color','red');
$(this).siblings().css('color','');
链式编程
$(this).css('color', 'red').sibling().css('color', '');
样式操作
参数只写属性名,则是返回属性值【$(this).css(''color'');】
参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,
【$(this).css({ "color":"white","font-size":"20px"});】引号,值如果是数字可以不用跟单位和引号【$(this).css(''color'', ''red'');】
样式类操作
添加类【$(“div”).addClass(''current'');】
移除类【$(“div”).removeClass(''current'');】
切换类【$(“div”).toggleClass(''current'');】
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作,不影响原先的类名
动画效果
显示隐藏切换
show([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: 回调函数,在动画完成时执行的函数,每个元素执行一次。
滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]]) //参数同显示隐藏
事件切换 hover([over,]out)**
(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
(3)如果只写一个函数,则鼠标经过和离开都会触发它
stop()
(1)stop() 方法用于停止动画或效果。
(2) 注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画
淡入淡出
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])
animate
animate(params,[speed],[easing],[fn])
(1)params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
jQuery第二天
jQuery 属性操作
设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如 <a>元素里面的 href ,比如 <input>元素里面的 type。
prop('属性) //获取语法
prop(''属性'', ''属性值'') //设置属性语法
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性,我们称为自定义属性。比如给 div 添加 index=“1”。
attr(''属性'')
attr(''属性'', ''属性值'')
数据缓存 data()[了解]
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构,所以元素上无法查看。一旦页面刷新,之前存放的数据都将被移除。
jQuery 内容文本值
普通元素内容 html()**(相当于原生inner HTML)
获取:html() 设置:html(''内容'')
普通元素文本内容 text() (**相当与原生** innerText**)
获取:text() 设置:text(''文本内容'')
表单的值 val()**( 相当于原生value)
获取:val() 设置:val(''内容'') // 设置表单的值
jQuery第三天
jQuery** 元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:$("div").each(function(index, domEle) { xxx; })
\1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
\2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
\3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
语法2:$.each(object,function(index, element){ xxx;})
\1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
\2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
创建,添加,删除
语法:$(<li></li>); //创建后需要进行添加才能显示到页面
添加元素
element.append(''内容'') [把内容放入匹配元素内部最后面,类似原生 appendChild。] //element是父元素
element.prepend(''内容'') 把内容放入匹配元素内部最前面。
删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
②empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
jQuery 尺寸
width()、height()【只算width和height】
innerWidth()、innerHeight()【包含padding+width】
outerWidth()、outerHeight()【包含padding、border、width】
outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】
outerWidth(200,true)设置的时候数字放前面
以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
参数可以不必写单位。
jQuery 位置
offset() 方法设置或返回被选元素相对于**文档**的偏移坐标,跟父级没有关系。
offset(),offset().top //该方法有2个属性 left、top,若不指明,返回两个值
offset({ top: 10, left: 30 }); //设置的时候以对象传值
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
获取方法同offset,只能获取不能设置
scrollTop()、scrollLeft()设置**或获取元素被卷去的头部和左侧**
①scrollTop() 方法设置或返回被选元素被卷去的头部。
②不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
scroll事件
jQuery第四天
课程回顾:
元素操作:
元素遍历==>$(元素).each(function (index,elm) {代码})
$.each( 对象,function (index,elm) {} );
创建:$('标签');
添加:
内部添加:element.append(元素),element.prepend(元素)
外部添加:element.after(元素),element.before(元素)
移除:remove,empty,html('')
尺寸:
winth、height【内容】
innerWidth、innerHeight:【padding+内容】
outerWidth、outerHeight:【padding+border+内容】
outerWidth(true)、outerHeight(true)【margin+padding+border+内容】
位置:
文档:offset():offset.top、offset.left
定位元素:position():position().top、position().left
距离:scrollTop、scrollLeft
parents
jQuery 事件
目标:
能够说出4种常见的注册事件
能够说出 on 绑定事件的优势
能够说出 jQuery 事件委派的优点以及方式
能够说出绑定事件与解绑事件
jQuery事件注册**
语法:element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:element.on(events,[selector],fn)
\1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
\2. selector: 元素的子元素选择器 。
\3. fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1:
1、可以绑定多个事件,多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
on() 方法优势2:
可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live(),delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。
on() 方法优势3:
动态创建的元素,click()没有办法绑定事件,on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
案例:发布微博案例
①点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。
②点击的删除按钮,可以删除当前的微博留言。
事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次, 可以使用 one()来绑定事件。
自动触发事件trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
element.click() // 第一种简写形式
element.trigger("type")//第二种自动触发模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击
element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。
jQuery事件对象
事件被触发,就会有事件对象的产生。
【event==》事件对象】
element.on(events,[selector],function(event){})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
jQuery 其他方法
jQuery 插件
jQuery插件**
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。
**jQuery** **插件常用的网站:**
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/
**jQuery** **插件使用步骤:**
1. 引入相关文件。(jQuery 文件 和 插件文件)
2. 复制相关html、css、js (调用插件)。
图片懒加载或者(BOOTSTRAP插件)
(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意,此时的js引入文件和js调用必须写到 DOM元素(图片)最后面
注意:
1、要引入JQuery
2、插件JS【js引入文件和js调用必须写到 DOM元素(图片)最后面】
3、将图片 src 替换为 data-lazy-src
4、调用lazyLoadInit()
BOOTSTRAP插件
1、引入CSS、引入JQ、引入JS
2、.container
3、复制粘贴
jQuery多库共存
jQuery使用作为标示符,随着jQuery的流行,其他 js 库也会用这作为标识符,
这样一起使用会引起冲突。
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。
jQuery 解决方案:
把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
jQuery 变量规定新的名称:$.noConflict() var xx = $.noConflict();