parent() --查找父节点
parents()--查找祖先节点 --parents(‘div’)--在所有祖先节点中找到div
***closest()--当前元素指定的最近的祖先元素,必须要接受一个参数--(只能选择到一个唯一的元素)--他的祖先节点包括自身
attr()----设置或返回元素属性
sibling()--兄弟节点--sibling(div)--所有div 的兄弟节点
创建元素
$(function () {
$(function () {
document.createElement('div');//原生
$('<div id="box">hellow word</div>')//JQ
})
})
添加节点
jianshu()把元素添加到指定节点的里面的最后---appendChildren()
$('div').append($div)
appendTo() 与append相反 $div appendTo($('div'))
prepend() 把元素添加到指定节点里面的最前面
$('div').prepend($div)
prependTo() --$div.prependTo($('div'))
before() 把元素添加到指定节点的前面(添加到外面)---insertBefore
$('div').before($div)
insertBefore()---$div.insertBefore($('div'))
after() 把元素添加到指定节点的后面
$('div').after($div)
insertAfter()--$div.after($('div'))
两种方法的区别于比较:例如$('div').before($div).css('background','red');---后续(css('background','red'))改变的是前面的元素($('div'))
$div.insertBefore($('div')).css('background','red');--后续改变的是也是前面的元素($div) 不过 元素不同 --看需求!
以上默认操作行为都是剪切
--end--
remove()---删除元素---$('要删除的元素').remove();
clone()----克隆-------var $div=$('div').clone()---克隆一个元素--默认操作行为克隆结构 不会克隆事件---.clone(true)--深度克隆 可以复制事件
index()----索引值,代表当前元素在所有兄弟元素排第几(从0开始);--$('#span').index('span')--在所有的span标签中查找此时和兄弟节点没关系!
outerWidth()---元素节点的绝对宽度(padding+border+width)--outerWidth(true)--(padding+border+width+margin)
innerWidth()---(不包含border)
width(200)-----设置宽度为200px;
innerWidth(200)-(width=200-padding)
outerWidth(200)-(width=200-padding-border)
outerWidth(200,true)--(width=200-padding-border-border)
$(window).height()-----可视区的高度
$(document).height()---页面的的高度;
scrollTop()------------滚动距离;
$(document).scrollTop(200)----设置滚动距离
$(document).scrollTop()==$(document).height()-$(window).height()---到达底部时的滚动距离
$(obj).offset().top------元素距离Y轴的距离-距离值 相对于页面
$(obj).position().left---不认margin值 定位距离
$(obj).offsetParent()----找到相对定位的父级--$(obj).offset().left-$(obj).offsetParent().offset().left
事件对象:
ev.pageX---鼠标的坐标相对于 页面X轴
ev.eventX--鼠标的坐标相对于 可视区X轴
ev.which---键盘的键值
ev.target--事件源 --当前元素---事件委托
ev.stopPropagation()---阻止冒泡
ev.preventDefault()----阻止默认事件
return false;---------阻止默认事件和冒泡
事件委托:
写法 $('obj').delegate('被委托元素','事件',fn)
ev.delegateTarget()---(找到)委托人
$(ev.delegateTarget).undelegate()--解除绑定
trigger---主动触发 $('#input').trigger('click')--调用input的点击事件|| $('#input').click()--调用input的点击事件
命名空间---$('div').on('click.abc',function(){})--加命名空间 还是原来的点击事件 只不过加了个识别符--trigger('click.abc')--区别对待
JS中的运动
.hide||show('normal'):--正常速度 默认400 改变-时间 宽高 背景色 里面可以直接添加时间 改变时间的值
toggle()-如果元素隐藏就让他显示 如果显示就让他隐藏 hide()/show()合体
fadeOut() || fadeIn()淡入淡出 -默认时间400
fadeToggle()--淡入淡出 fadeOut() || fadeIn()-合体版
sideUp()||sideDown()---显示隐藏 改变高度
sideToggle---显示隐藏-合体版
animate()-**-参数: 1、对象{width:'300',height:'300'}设置样式属性 和值
2、时间 默认是400
3、运动形式 --swing(缓冲-快慢快)--linear(匀速)
4、回调函数 --
5、数值运算--{width:'+=100'}--每次触发事件 width会累加
6、json 形式-{duration:1000,easing:'linear',complete:function(){alert('回调')}}
7、step--可以检测定时器的每一次的变化-(可拓展-非常有意思 里面有一个比例值-pos)配置参数×
8、delay()--在链式运动中 可以起到 延时的作用括号内接受时间值
stop()--停止运动 默认情况下 只停止当前运动(在链式运动中只停止当前的链的运动 不会影响后面的运动)如果接受一个true 就会全部停止
如果接受值为两个 true(stop(true,true))那么就会停止到当前链式的运动的目标点,不会影响后面的运动
清空队列行为--
finish()--停止运动效果 所有运动都会到达指定目标点
parseJSON--把类似json形式的字符串转换成真正的json
网友评论