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' />

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值