jQuery学习笔记

1.jQuery 和JavaScript

jQuery内部就是JavaScript实现的,封装了大量的JavaScript代码提供了功能函数
即JavaScript函数库

$
jQuery操作的时候,提供了一个核心函数,jQuery()用于操作对应的jQuery对象
jQuery源码中对jQuery()函数进行了名称上的优化,使用$()代替

对象的转换:项目在开发过程中获取到的对象可能回事js对象,也可能回事jQuery对象,此时,为了方便操作,需要掌握如何相互转换

jQuery对象转换成js对象
jQuery -> jQuery[index]
js对象转换为jQuery对象
jObj -> $(jsObj)

2.网页加载事件

在网页特效开发过程中,某些代码需要网页中的文档结构或者图片资源完整加载之后才能智慧型,原生JavaScript中提供了window.onload加载事件
该事件需要等到页面中所有资源数据加载完成后才能执行,且在同一个页面只能写一次,如果写多次,最后一次的事件代码会覆盖前面的代码
jQuery提供了一个等待网页中文档结构加载完成后执行的事件函数 $(document).ready(fn)该事件可以写多次,写有简介语法,$(function(){})

3.选择器

选择器	介绍
$(’#id’)	id选择器
$(’.class’)	类选择器
$(‘tag’)	标签选择器
$(‘ul>li’)	子类选择器
$(‘ul li’)	后代选择器
$(‘p,span,div’)	群组选择器
$('a:even)	伪类选择器
$(‘div[id=“box”]’)	属性选择器
$(’:input’)	表单元素选择器
…	…

4.节点遍历

(1)隐式迭代

jQuery选择器 ,可以根据指定的选择器语法,一次选择多个标签,如class选择器,可以直接给多个标签设置对应的样式

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>

$('.item').click(functionn(){
	alert('li被点击了')
})

(2)显示遍历

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>

$('.item').each(function(index,jsobj){
	console.log(index,jsobj)
})

(3)遍历父节点

父节点在项目中区分为直接父节点和鲜卑节点
jq.parent()获取直接父节点
jq.parents() 获取先辈节点

(4)遍历子节点

网页效果开发中,子节点包含直接子节点和后代节点
jq.children([str])获取直接子节点
jq.find([st])获取后代节点
jq.eq(index)获取对应索引号的节点
jq.first()和获取第一个节点
jq.last()获取最后一个节点

(5)遍历兄弟节点

jq.prev() 获取上一个兄弟标签
jq.prevAll() 获取前面所有兄弟标签
jq.next()获取下一个兄弟标签
jq.nextAll()获取下面的兄弟节点
jq.siblings() 获取所有的兄弟节点

5.基础操作-属性样式内容

jq.html()/jq.text() 获取闭合标签内容
jq.html(‘dat’)/jq.text(‘dat’) 设置闭合标签内容
jq.val() 获取表单元素的内容
jq.val(‘dat’) 设置表单元素的内容
jq.attr(‘attrname’,‘attevalue’)设置属性
jq.pro(‘propname’,‘propvalue’)设置属性
jq.css(‘styleName’,‘stylevalue’)设置样式值

6.标签样式处理

jq.addClass(name)给指定标签对象添加一个class属性值
jq.removeClass(name)给指定标签对象移除一个class属性
jq.toggleClass(name)判断指定标签上有没有某个class有就移除,没有就添加
jq.hasClass(name)判断标签上是或否存在某个class值,返回布尔值

7.BOM操作

BOM本身指代了浏览器对象模型,网页中构建标签对象的时候,对象定位,对象尺寸,边距都属于浏览器对象模型的一些属性操作,jQuery对于标签对象的定位,尺寸和边距进行了封装,提供了对应的函数

函数	介绍
jq.width()	获取指定元素的宽度样式width
jq.innerWidth()	获取指定元素的宽度样式width+padding
jq.outerWidth()	获取指定元素的宽度样式width+padding+border
jq.outerWidth(true)	获取指定元素的宽度样式width+padding+border+margin
jq.offset()	获取指定元素在网页文档中的偏移位置
jq.offset().left	获取指定元素在网页文档中的距离左侧的位置
jq.offset().top	获取指定元素在网页文档中的距离顶部的位置
$(window).width()	获取浏览器窗口宽度
$(window).height()	获取浏览器窗口高度
$(document).width()	网页文档宽度
$(document).height()	网页文档高度
jq.scrollTop()	标签对象滚动条卷去的高度
$(window).scrolloTop()	浏览器窗口中滚动条卷去的高度

8.DOM操作

(1)创建标签

var jq = $(’<标签名>’): 网页文档中创建一个新的标签

(2)插入标签

jq.appendTo(jq2)/jq2.appedn(jq)将jq标签添加到jq2子标签的最后一个位置
jq.prepend(jq2)/jq2.prependTo(jq)将jq2标签添加到jq标签子标签第一个位置
jq.after(jq2)/jq2.insertAfter(jq)在jq后面添加一个兄弟标签jq2
jq.before(jq2)/jq2.insertBefore(jq)在jq前面添加一个兄弟标签jq2

(3)删除标签

jq.remove() 删除当前标签
jq.detach() 删除当前标签,但是保留标签的事件
jq.emptu()删除/清除$(parent)内部所有子元素

(4)替换标签

newjq.replaceAll(oldjq)删除了被替换的标签对象,将要替换的标签保存到替换的位置
old.replacewith(new)

(5)克隆标签

jq.clone()

9.事件对象

属性名称	描述
event.pageX	鼠标光标在网页文档中的X坐标
event.pageY	鼠标光标在网页文档中的Y坐标
event.clientX	鼠标光标在浏览器窗口中的X坐标
event.clientY	鼠标光标在浏览器中的Y坐标
event.stopPropagation()	阻止冒泡
event.preventDefault()	阻止默认行为

事件绑定

jq.click(fn)事件的快捷绑定方式,页面中已有元素上绑定事件比较常用
jq.bind(‘click’,fn) 1.7版本以后弃用
jq.live(‘click’,fn) 支持事件委托的绑定方式 3.0 1.7版本以后弃用
jq.delegate(‘click’,fn) 支持事件委托的绑定方式 3.0以后版本弃用
jq.on(‘click’,fn) 事件绑定标处理函数
jq.on(‘click’,child,fn)时间委托绑定方式
jq.one(‘click’,fn) 在目标元素上,绑定一个一次性事件

事件取消
ele.click(null)取消快捷事件,如果事件出现复杂操作不推荐使用这种操作方式
ele.unbind(event,fn)取消bind绑定的事件
ele.die(event,fn)取消live绑定的事件
ele.undelegate(event,fn)取消delegate绑定的事件
ele.off(event,fn)取消on绑定的事件

10.内置动画

显示/隐藏
hide([speed][,easing][,fn]) 隐藏选择的元素
speed:可选值slow(600ms),normal(400ms),fast(200ms)还可以是表示毫秒的整数
easing:动画效果,默认swing(慢-快-慢),可选liner(线性动画)
fn 动画执行完成后的回调函数

show() 显示选择的元素
toggle() 切换选择的元素的显示状态

滑动动画

slideUp() 将一个元素向上收起直到隐藏
slideDown() 将一个元素向下拉开直到完整显示
slideToggle()使用滑动效果显示/隐藏指定元素

淡入淡出

fadeOut() 透明度变小直到隐藏
fadeIn() 透明度变大直到完全显示
fadeToggle() 透明度变化切换
fadeTo(value) 透明度变化到某个状态

11.自定义动画

animate(params,[speed][,easing][,fn])
params: 表示必选参数
speed 表示运动速度
easing 表示切换方式
fn 表示回调函数

stop([clearQueue],[jumpToEnd])终止正在执行的动画序列
参数1:清除动画队列,将所有排队的动画直接清空
参数2:jumpToEnd直接跳到动画末尾
一般在操作中使用第一参数
jq.stop(true).animate()

延迟动画delay(duration)让一个动画经过一定的事件之后再去执行
duration延迟时间
jq.stop(true).delay(800).animate()

12.拓展

$.each()

节点遍历，jQuery中有限推荐隐式迭代，若需要对元素进行个性化操作，推荐$.each的遍历方式,其次推荐$(selector).each()遍历
$.map()
如果要对数据进行转化操作的话，推荐使用$.map()进行语法上的优化，提高开发效率

$.extend([deep],target,object…)

该函数只要用于对象数据合并操作，在项目中的数据处理应用场景为两部分
1.JSON子面对象数据合并
2.深拷贝

//场景1
var a = {name: 'zhangsan' }
var b = {age: 17}
var tgt = {}
$.extent(tgt,a,b)

//场景2
var a = {name:'zhangsan',age: 15,hobby:['ball','swim']}
var tgt = $.extend(true,{},a)

13.JSON字面对象

语法中使用花括号，包含起来的key.value的形式的数据，可以通过key描述特征属性，value描述特征属性的数据，最后形成一个描述某个复杂事务的语法结构，称为JSON字面对象
实际项目中，一般使用JSON来传递数据，就需要在JSON格式的字符串和对象之间进行转换

JSON字符串-> 对象 JSON.parse(str)
JSON对象 -> 字符串 JSON.stringify(obj)

14.jQuery插件

jQuery社区可以下载对应效果的插件，引入到HTML网页中 进行使用
用户也可以通过特定的语法封装对应的插件来使用

封装对象级别的插件
对象几倍插件，可以让jQuery选择器选择标签后，得到的jQuery对象来调用插件

jQuery.fn.extend({
	'插件名称': function([ 参数 ]) {
			插件中处理数据的代码
}
}) 
$('selector').插件名称([数据])

全局函数插件
jQuery语法中，提供了用户扩展自身的、封装自定义插件的操作函数

 $.extend({
	'全局插件名称' : function([参数]) {处理函数}
})
$.全局插件名称([数据])

14.移动端特效开发

jQuery最早的版本中，为了保证大部分浏览器的兼容性，在自己的源码中保留了大量处理兼容性问题的代码，导致jQuery核心文件的体积较大，不太适合当时的移动端开发，第三方根据jQuery使用习惯，推出了移动端的特效开发框架：Zepto,完全参照了jQuery，所以PC端项目转移到移动端项目基本没有学习成本