jQuery常用方法

选择器注意事项:

①属性选择器的@属性问题:版本升级后放弃了@符号,例

$("div[@title = 'test']")

 正确写法去掉@符号,若出现代码报错则查看版本是否最新版,及是否有@符号

②遍历方法后代:children(),find() 祖先:parent()和parents()方法的区别:

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直父)
        <span>span</span>
      </li>
    </ul>
 </div>
 <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

children()表示所选标签的子代,只有子代

$(document).ready(function(){
  $("div").children()
})

parent()表示所选标签的父代,只有父代 

$(document).ready(function(){
  $("span").parent()
})

   find()表示所选标签的后代,一直向下直到最底一代

$(document).ready(function(){
  $("div").find("span")
})

   parents()表示所选标签的父代,一直向上直到最顶一代

$(document).ready(function(){
  $("span").parents()
})

   以上四种方法均可以使用筛选条件,如

children("#id1")

  表示儿子代中id为id1的后代

(注释:同辈元素siblings(),next())

siblings() 方法返回被选元素的所有同胞元素

next() 方法返回被选元素的下一个同胞元素,但是该方法只返回一个元素

③获取/失去焦点

focus(),获取焦点,如$("#input1").focus()

购物车页面点击按钮时有

$('#name:focus').siblings('.num').text(data)

 区分同辈下的按钮

blur(function(){}),失去焦点时触发函数function,如

$("input2").blur(function(){
    alert("失去焦点")
})

 ④文档操作 text()方法

text() 方法方法设置或返回被选元素的文本内容

(1)设置文本内容:(点击按钮时覆盖改写<p>标签内元素)

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").text("Hello")
  })
})

改写 <p>标签内的元素为Hello

(2)返回文本内容:(点击按钮时返回<p>标签内元素)

$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").text())
  })
})

 直接输出<p>标签内的元素

 

 

相关推荐