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>标签内的元素
相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
89510194 2020-06-06
Web全栈笔记 2020-06-04
tztzyzyz 2020-05-31
开心就好 2020-05-27
牵手白首 2020-05-19
牵手白首 2020-05-16
donghongbz 2020-05-15
tztzyzyz 2020-05-15
hehekai 2020-05-08