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>标签内的元素