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提供了一个等待网页中文档结构加载完成后执行的事件函数
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
n
)
该
事
件
可
以
写
多
次
,
写
有
简
介
语
法
,
(document).ready(fn) 该事件可以写多次,写有简介语法,
(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()
|