JQuery随笔
//区别 :后续操作变了
$('span').insertBefore( $('div') ).css('background','red'); //是对span操作
$('div').before( $('span') ).css('background','red'); //是对div操作
insertAfter---after
也都是一个原理
ev是事件的参数!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着 ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
所以好多事件函数都是这样写:
mydiv.onclick = function(ev){
if(!ev){ev = window.event;} //这句也可以简写成:ev=window.event||ev;
alert(ev.pageX+","+ev.pageY);
}
JQ对象
效果:
英文翻译:褪色:fade ;slide 幻灯片 ;toggle 切换; speend 速度;callback 回调; opacity 透明度 ;filter 过滤;has 包含 ;Conflict 冲突;params 参数;
.fadein() //淡入已隐藏的元素
.fadeout() //淡出已显示的元素
.fadeToggle() //淡入淡出显示隐藏的切换
.fadeTo(sppend,opacity,callback) //褪色成什么透明度 透明度0~1之间
.show() //显示
.hide() //隐藏
.toggle(speed,) //显隐切换
.slideDown() //使元素向下滑动
.slideUp() //使元素向上滑动
.slidetoggle() //上下滑动切换
.animate({params},speed,callback) //创建自定义动画
.stop() //用于动画或效果完成前对它们进行停止 适用于前面的效果方法
.stop(true) //停止当前活动的动画,并且清空动画队列
.stop(true,true) //立即完成当前活动动画,然后停下来
finish() //立即停止到所有你指定的目标点
.delay(1000) //延迟方法 可配合适用
事件:
三个基本过滤方法是:first(),last(),eq()//返回被选元素中带有指定索引号的元素
eq($(this).index)//index获取当前元素的index
祖先:.parent(),.parents(),.parentsUntil()
后代:.children(),.find()
同胞:.siblings()
.next()--.prev()
.nextAll()--.prevAll()
.nextUntil()--prevUntil()
$('div').on('click mouseover',function(){}) //on十分强大的一个方法
$('div').on({'click:function(){}'},{'mouseover:function(){}'}) //可以使用JSON格斯给不同事件响应添加不同功能
.off()//可阻止事件 -在on的function中写入
.scrollTop() //获取滚动距离
----------鼠标的方法-----------鼠标相对于文档的距离--------------
ev.pageX-----ev.pageX-$(this).offset().left; (相对于文档)也有ev.pageY
ev.clientX---(相对于可视区,同上面相差一个滚动条的距离)
ev.which----键盘方法,还能记录鼠标键值-----keycode(js中的键盘方法)
ev.preventDefault //阻止默认事件
ev.stoppropagation() //阻止冒泡操作
return false //阻止默认+阻止冒泡
function(ev){ev.pageX}
---------------------------------------------------------------------
.hover(移入函数,移除函数) //鼠标移入移出发生的方法
.each(function(){}) //循环
offset-偏移
.offset() //获取当前元素到文档某个方向的距离 --.offset().left;
.offsetparent() //获取到某个有定位父级的距离 --如果父级有定位,就是到父级的距离,否则就是到文档边边的距离了
.get() $('li').get(0).innerHTML //将JQ转成原生的JS
offsetWidth 原生JS 是获取不到隐藏的元素的值
outerWidth JQ 可以获取到隐藏的元素的值
.deatch() .remove() //两个方法基本一样,只不过deatch会保留删除这个元素的操作能力
.closest() 获取最近的指定的祖先节点(包括当前元素本身)
.clone() 复制 //可接受一个参数true,复制之间操作的行为
.wrapinner() //内部包装
.unwrap() //删除包装,删除父级 不包括body
$('li').slice(1,4).css(~~~) //截取指定节点的范围
.serialize() string:a=1&b=2&c=3 //数据串联成字符串
.serializeArray() Array //数据串联成JSON格式
事件委托~~(有提高性能的作用) .delegate() $('ul').delegate('li','click',function(){this.style.background='red';}) //将事件都给了ul
.undelegate() //阻止事件委托
.trigger() //主动触发 .trigger('click'); //主动执行事件 对自定义事件有帮助?
ev.data
ev.type
.on('click',{name:"hello"},function(ev){alert(ev.data.name);})
$.下的常用方法 (工具方法)
$.type(a); //可判断类型更多了 更强大 ,比原生的typeof更强大
$.trim(str); //去掉前后空格
$.inArray('b',arr) //类似于indexOf 没有找到就返回-1 有就返回当前字符的在arr中的下标
-------proxy-------------
$.proxy(函数,document) //改变this指向
$.proxy(show,document)(3,4) ~show(3,4)
也可以$.proxy(show,document,3,4) ~show(3,4)
传参是有两种方式
$.noConflict() //防止冲突的
var mm=$.noConflict(); //替代了$的功能;
$.parseJSON(str) //解析字符串位JSON
var str='{"name":"hello"}';//当然字符串需要时严格模式下才可以
$.makeArray //类数组转成真正的数组
------------------$.ajax------------------
$.ajax({Json格式}) //进行异步传输
{contentType:} //请求信息 在使用POST请求时需要设置
ajax()中抽象出来的方法
get()
post()
//简化的具体请求,更加简化了
$get('xxx.php',{'name':'helo',function(){}})
//post也一样
$.getJSON() //支持Jsonp的形式 请求JSON格式数据 指定callback=?
$getJSON('xxx.php?callback=show',function(data){})
//callback:对应的地址自动生成了show({})这样带数据的格式
callback=? 随机({}) //名字随机生成
----------------插件-----------------------
$ --$.extend //扩展工具方法的插件形式 $.xxx()
$.extend({
left:function(str){
return str.replace(/^\s+/,");
},
aa:function(){},
bb:function(){}
})
$.fn --$.fn.extend //扩展到JQ对象下的插件形式 $().xxx()
$.extend({
drag:function(str){
this.onmousedown(function(){})
},
aa:function(){},
bb:function(){}
})

浙公网安备 33010602011771号