我的jquery笔记

JQuery是个顶级对象，可以缩写为$

$(document).ready(function(){})类似于window.οnlοad=function(){};也可以直接用$(function(){});

jquery的这种写法是标签加载完毕了就运行，js中的window.onload是整个页面加载完毕了再运行。

$('#btn')获取到ID为btn的标签。

用jquery为标签注册的多个同类事件会依次执行，再js中会被最后依次注册的事件覆盖。

$.map(需要遍历的数组,处理数组的函数function(value,index){})  这个遍历会默认给函数传2个参数，第一个是遍历到的值，第二个是索引。

最后会返回一个数组。例如

var arr=[1,3,5,6,7];

var result=$.map(arr,function(value,index){ return value*2 });

$.each(数组,遍历的函数function(key,value){})  主要是用来遍历数组，没有返回值。这个遍历默认传一个键和值。

在each中想退出循环不能使用break，只能使用return false。

对于普通的数组，非键值对使用each遍历的时候，可以不使用参数，直接用this.获得的是数组中的值。

 

$(dom对象) 可以将一个dom对象转换成jquery对象。转换后则不能再调用dom对象中的那些成员了，只能使用jquery对象的成员。除非再转换回来。

jquery转换回dom  var dom=jquery[0]或者是var dom=jquery.get(0); 两个方法转换都是一样的。

所以$(document).ready()  就是把一个dom对象转换成了jquery对象。

jquery中的选择器

$('p')获取所有的p标签

$('#btn')id选择器

$('.a') 类选择器，所有class属性为a样式的所有标签。jquery中修改css样式是使用.css方法

$('.a').css('color','red');

$('div p') div下的p元素，层次选择器。

$('div > p')只选取div下的直接子元素p。其他后代的p元素不获取

$('div ~ p' )div后面的同级p标签   可以简化成$('div').nextAll('p'); 结果是一样的

$('div + p' )div后面的一个紧挨着的p标签兄弟 可以简化成$('div').next('p'); 结果也是一样的

如果想选取div前面的元素，就只能使用jquery中的函数$('div').prevAll('p')前面的兄弟级p元素和$('div').prev('p')紧挨着的一个兄弟元素p;

siblings();当前元素的所有兄弟元素。使用这些函数，会破坏链接编程，可以使用end()回到最近一次破坏前的链接

children()找元素里面的子元素的。

 

$('#btn,#p1,span') 多条件组合选择器，只要有一个条件满足的都会选择到。

$('p.a')标签选择器+类选择器，会找到应用了a样式的p标签。

通过选择器捕获到的对象，本身就是一个jquery对象。

在事件中，this还是表示当前触发事件的元素对象，这里的this 就还是dom对象。

$('p').click(function(){ alert(this.innerText) });  这里的this还是dom对象。

$('p').click(function(){ alert($(this).text)});  这里转换成了jquery对象使用

 

jquery的重要特征，链式编程，之所以能链式编程就是因为每次返回的都是对象本身，所以可以一直点下去。如果是获取一个值，则不能使用链式编程。

jquery选则器，如果选不到，返回的是一个长度为0的集合，也不会报错。所以，再jquery中判断一个选择器是否选中元素，可以判断length的长度，为0则表示没选中。

 

当有多个样式需要设置的时候，不需要写链式编程描述css，可以直接给css设置一个键值对。

jquery中给元素增加类样式。$('div').addClass('tst');

$('#dv').hasClass('tst');  判断这个div是否有应用tst样式。 

$('#dv').toggleClass('tst')  判断div是否有tst样式，有就删掉，没有就应用

 

过滤器

$('p:first')  找所有p标签中的第一个p标签。也可以写成$('p').first()

$('p:last')  同上，也可以写$('p').last();

$('p:eq(2)') 在p标签中找索引等于2的标签。

$('p:even') 找所有索引为偶数的p标签

$('p:odd') 找所有索引为奇数的p标签

$('p:not(.tst)')  找所有没应用tst样式的p

$('p:gt(1)')  找到所有索引大于1的p标签。

$('p:lt(3)') 找所有索引小于3的p标签。

$(':header')  找到h1-h6的对象。

 

属性选择器

$('input[type!=button]')

$('input[type=button]')

$('input[name^=a]') name属性以a开头

$('input[name$=a]') name属性以a结尾的

$('input[name=a][id][class]') 同时具备这3个属性，并且name为a的

$('#form1 :enabled') 获取到form1中所有启动了的元素

$('#form1 :disabled') 获取到form1中所有被禁用的元素

$('input:checked')  获取所有被选中的rdo 和checkbox。

$('select :selected')  获取下拉框中所有被选中的

属性选择器还有简化写法。

$(':checkbox')  所有复选框

$(':radio')   单选框

$(':text')   单行文本框

$(':button') 按钮

$(':image')  图片

$(':hidden')  页面上所有不可见的元素

$('div:contains(张)')  文本中包含张的。

$('div:empty')  文本中所有空的元素

$('div:has(p)') 所有div里面包含p标签的

$('div:parent') 所有有子元素或文本的div。

$('ul li:first-child') 选择每个ul下的第一个li.

 

$('div').after()  追加元素，追加在后面。

$('div').before()  追加元素，追加在前面。

empty()  清空元素内的所有内容。

unbind()  移除当前元素的所有事件

 

$('br').replaceWith('<hr/>')  找到页面上的br全部替换成<hr/>

$(':checkbox').val([2,4])  页面上所有checkbox的val属性为2和4的设置成checked状态

如果想设置谁被选中，val()内必须是一个数组。这种用法在radio和select中通用。

attr()后面也可以写个函数。attr('checked',function(){})这个函数里面可以操作隐式迭代

 

$('div').hover(function(){},function(){})   合成事件，第一个是鼠标在里面的事件，第二个是鼠标移出的事件。

 

$('div').toggle(function(){},function(){},function(){})  里面的匿名函数任意添加，注册的是单击事件，按了一次后，再按就是下一个匿名函数。

 

在jquery下使用事件相关的属性时，用法和火狐差不多。在参数中写个e就可以调用了。

$('p').click(function(e){e.stopPropagation})   禁止事件冒泡。

 

jquery中使用事件的属性。

e.pageX  e.pageY  相对于页面的鼠标的坐标。

$(this).offset().left  $(this).offset().top  相对元素的坐标。

e.offsetX   e.offsetY   获取鼠标相对于当前元素本身的偏移。

e.which   获取当前鼠标点击的是什么键，左键是1 中间键是2 右键是3

e.target  获取触发事件的元素。用在冒泡中。冒泡的起始位置。

e.type   可以判断当前是什么事件被触发了。

$(this).height  $(this).width  获取当前元素的高度和宽度

 

jquery动画

$(div).show()  显示

$(div).hide()  隐藏

$(div).toggle() 如果显示的则隐藏，隐藏的则显示

$(div).toggle(1000)  1秒钟内隐藏。会有缩放和透明的效果。

$(div).fadeOut(2000) 2秒内隐藏，会变透明到不见

$(div).fadeIn(2000)  2秒内显示，透明效果。

$(div).fadeToggle(2000)  切换隐藏和显示

$(div).fadeTo(2000,0.5)  显示到什么程度。

$(div).slideToggle(1000)  切换划动效果的显示隐藏。slideDown()  slideUp()

line-height样式和height样式设置一样可以居中

.animate({动画变化到什么样的效果},2000)  2秒内变化到那个效果。

$(:animated) 获取正在执行的动画

$(:animated).stop()   停止当前正在执行的动画。

$(:animated).stop(true)  停止当前正在执行的动画，并且清空正在列表等到执行的队列。动画会立即停止。

 

cookie是与浏览器相关的，不同浏览器存放的地方不同。

cookie是与域名相关的，不同站点，不同域名之间不能共享cookie

cookie用户可以控制的，能删除。

cookie有有效期限制。

cookie有大小限制。

使用cookie的方法

$.cookie('键','值',{expires:7,path:'/'})  设置cookie的有效期和cookie有效目录，如果不设置，则只是将cookie存储在内存中，当关闭页面的时候cookie就没了。

获取cookie直接使用$.cookie('键')就得到了设置的值

 

$.fn.extend{            给jquery对象注册新的函数方法，用来做插件。

    setTr:function(){   新的函数名字是setTr

    

    }

} 

 

min-height:350px;

_height:500px;      div溢出处理

转载于:https://www.cnblogs.com/kings0/archive/2013/03/03/2941633.html