JQuery随笔

//区别 :后续操作变了
    
    $('span').insertBefore( $('div') ).css('background','red');   //是对span操作
    
    $('div').before( $('span') ).css('background','red');    //是对div操作

 

insertAfter---after

appendTo()-append()

prepend()-prependTo()

也都是一个原理

 

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(){}

})

posted @ 2015-09-03 22:39  Jeff_lzf  阅读(114)  评论(0)    收藏  举报