JQuery 小记

  1. 1.选择器     
  2.     (1)通配符：     
  3.     $("input[id^='code']");//id属性以code开始的所有input标签   
  4.     $("input[id$='code']");//id属性以code结束的所有input标签   
  5.     $("input[id*='code']");//id属性包含code的所有input标签   
  6.     (2)根据索引选择     
  7.     $("tbody tr:even"); //选择索引为偶数的所有tr标签   
  8.     $("tbody tr:odd");  //选择索引为奇数的所有tr标签   
  9.     (3)获得jqueryObj下一级节点的input个数     
  10.     jqueryObj.children("input").length;     
  11.     (4)获得class为main的标签的子节点下所有<a>标签     
  12.     $(".main > a");      
  13.     (5)选择紧邻标签     
  14.     jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div，nextAll获取所有   
  15.     (6)根据索引选择     
  16.     $("div").eq(0);//获取第一个div标签   
  17. 2.筛选器     
  18.     (1)not     
  19.     $("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签   
  20. 3.其他     
  21.     (1)创建一个文本框     
  22. var inputObj = $("<input type='text'/>");     
  23.     (2)取得文本框内容     
  24.     jqueryObj.html();//html   
  25.     jqueryObj.text();//纯文本   
  26.     (3)取得标签属性值     
  27.     jqueryObj.val();//取得标签value值   
  28.     jqueryObj.attr("属性名如：name");//取得标签属性值   
  29.     (4)向dom节点添加对象     
  30.     inputObj.appendTo(jqueryObj); //将新创建的对象追加到jqueryObj里   
  31.     inputObj.trigger("focus").trigger("select");//使文本框插入之后被选中
  32.     (5)改变CSS样式  
  33.     inputObj.css({zIndex:3}); //给样式赋值
  34.     inputObj.css("zIndex");  
  35.     (6)延迟     
  36. var timeoutId = setTimeout(function(){  },300);//延迟300毫秒，再执行函数   
  37.     clearTimeout(timeoutId);//解除延迟，使未执行的函数不再执行   
  38.     (7)定时间隔时间  
  39. var timerId = setInterval(function(){  },300);//每间隔300毫秒，再执行函数  
  40.     clearInterval(timerId);//解除定时，使未执行的函数不再执行 
  41.     (8)动画  
  42.     inputObj.animate{"top":3,"left":3},300,function(){  });  
  43. 4.事件     
  44. //处理文本框上的键盘操作   
  45.     jqueryObj.keyup(function(event){     
  46. var keyCode = event.which;//获取当前按下键盘的键值，回车键为13   
  47.     }     
  48.     mouseover(fn),mouseout(fn)//鼠标移进，移出    
  49. 5.效果     
  50.     show(),toggle(),slideDown(),slideUp(),slideToggle(),fadeIn(),fadeOut(),fadeTo()     
  51. 6.工具函数     
  52.     $('#someField').val($.trim($('#someField').val()));//消除空格，语法：$.trim(value)   
  53. 7.常用函数封装     
  54.     (function($){     
  55.         $.extend({     
  56. //操作多个多选框   
  57.             controlAllCheckBox:function(tableId,isSelectAll){     
  58. if(tableId==undefined){     
  59. throw new Error("tableId 不能为空");                 
  60.                 }     
  61. else{     
  62. if(isSelectAll==undefined){     
  63. throw new Error("isSelectAll 不能为空");                 
  64.                     }     
  65. else{     
  66. if(isSelectAll==true){     
  67.                             $("#"+tableId+" :checkbox").each(function(){     
  68.                                 $(this).attr('checked','true');     
  69.                             })     
  70.                         }     
  71. else{     
  72.                             $("#"+tableId+" :checkbox").each(function(){     
  73.                                 $(this).attr('checked','');     
  74.                             })     
  75.                         }     
  76.                     }     
  77.                 }     
  78.             },     
  79. //取得选中的checkbox中的id   
  80.             getCheckedIds:function(tableId){     
  81. var checkboxs = $("#"+tableId+" :checkbox:checked");     
  82. if(checkboxs.size()==0){     
  83. throw new Error("没有选中记录");               
  84.                 }     
  85. else {     
  86. var ids = "";     
  87.                     checkboxs.each(function(){     
  88. if(ids==''){     
  89.                             ids+=$(this).attr('id');     
  90.                         }     
  91. else{     
  92.                             ids+=","+$(this).attr('id');     
  93.                         }     
  94.                     })     
  95. return ids;     
  96.                 }     
  97.             }     
  98.         })     
  99.     })(jQuery);

jquery写作方式：

               //完整的写法
　　　　jQuery(document).ready(function()　{　alert("Hello");　});

　　　　//jQuery　可简写为　$
　　　　$(document).ready(function()　{　alert("Hello");　});

　　　　//$(document)　可以简写为　$()
　　　　$().ready(function()　{　alert("Hello");　});

　　　　//$(document).ready()　也可以简写为　$()
　　　　$(function()　{　alert("Hello");　});

window.onload与$(function(){})区别

window.onload() 发生在页面载入完成时,

$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);

基本选择
代码：

<div　id="div1">AAA</div>
<div　class="class1">BBB</div>
<span id="div3">CCC</span>

<div class="class2"><span>222</span></div>

<div class='class3'><span id='span2'>hello world</span></div>

<div class='class3'><label id='span2'>label</label></div>

根据 id 选择$("#div1")

根据class选择$(".class1")

根据标签名选择$('span')

选择所有的对象$("*")

混合选择$("#div1,.class1,span")

分层选择$(".class2 span")或者$(".class2").find('span')

只从子层中选择    $(".class2>span")

选择所有紧跟在 div 后面的 span     $(".class2+span")

选择 #id2 后面同一层级的所有(*)对象    $("#id2~*").

混合使用 $(".class3 label,.class2>span")

选择同一层级的其他元素$("#div1").siblings();

选择同一层级的其他 span $("#div1").siblings('span');

特殊字符含义

#　　指示　id　

.　　指示　class　
*　　全选　
,　　多选　
空格　后代　
>　　子　
~　　兄弟　
+　　下一个　
:　　子(多功能)　

()　　函数式的过滤与查找

选取子对象

代码

定位子对象

<h3>AAA</h3>

<ul>　

               <li>我那年深月久的苦乐年华</li>

　　　　<li> “90后”应该补的课究竟有哪些？</li>

　　　　<li>北京下的不是雪，而是“珍珠米</li>

            <li>一句“没想过”让我走出迷雾</li>

</ul>

<ul>

　　　　<li> 麻辣生活，自信勇敢会是最给力！</li>

</ul>

<ul>

　　　　<li>上海给力N日游之奢华恒隆是这样</li>

　　　　<li>从这个世界走来一个小小的我--蝉想</li>

　　　　<li>恋爱是不是一场明码交易？</li>

</ul>　

获取所有标题对象  $(":header")

获取 first   $("li:first")或$("li").first()或$("li").get(0)

获取每组的 first  $("li:first-child")或$("ul li:first-child")

获取 last  $("li:last")或$("li").last()

获取每组的 last $("li:last-child")或$("ul li:last-child")

获取第几个 $("li:eq(2)")或$("li").eq(2)  //eq 是 0 开始

获取第几个之后的 $("li:gt(2)") //gt是0开始

获取第几个之前的$("li:lt(2)")//lt是0开始

获取索引数是偶数的 $("li:even")//even是0开始

获取索引数是奇数的$("li:odd")//odd是0开始

获取每小组第偶数个$("li:nth-child(even)")//nth-child是1开始

获取每小组第奇数个$("li:nth-child(odd)")//nth-child是1开始

获取每小组第几个:$("li:nth-child(2)")//nth-child是1开始的

表达式获取第几个$("li:nth-child(3n-1)")//n是从1开始的

如果是父元素中唯一的子元素 $("li:only-child")

not是取其反  $("li:not(li:only-child)")

根据属性来选择

代码

<div id="names">names</div>

<div id="hello"  name='ss'>hello</div>

<div id="spans"  name='spanname'><span>中国人</span></div>

<div id="worlds">worlds</div>

<div id="empty"></div>

指定元素包含id的$("div[id]")

指定元素中不包含id的$("div:not([id])")

名称为ss的元素 $("div[name='ss']")

名称不为ss的元素$("div[name!='ss']")

元素符合以world开始的$("div[id^='world']")

以o结束的$("div[id$='o']")

id 中包含ll的$("div[id*='ll']")

多个条件的，有id属性并且name中包含d的$("div[id][name*='d']")

查找内容中包括world的$("div:contains('world')")

查找包括span 的$("div:has('span')")

查找空的div     $("div:empty")

查找父元素$("div:parent")

hidden和visible分别对应隐藏和显示的元素

$("div:hidden")//获取隐藏的元素

$("div:visible")//获取显示的元素

表单元素的获取

:input匹配  <input />      <select></select>    <textarea></textarea>   <button />

:text匹配<input type='text' />

:password匹配<input type='password' />

:radio 匹配<input type='radio' />

:checkbox 匹配<input type='checkbox' />

:submit 匹配<input type='submit' />

:button 匹配<input type='button' /> <button />

:reset 匹配<input type='reset' />

:image 匹配<input type='image' />

:file 匹配<input type='file' />

:enabled匹配所有可用的input

:disabled匹配所有不可用的input

:checked 匹配所有选中的单选复选按钮

:selected 匹配所有选中的option

posted on 2011-08-27 08:51  LongSky  阅读(233)  评论(0)  编辑  收藏  举报

导航