jquery基础
一、选择器
$("#id") id选择器 $(".class") class选择器 $("a") ->所有a标签 标签选择器 $("#id,.class,a") 多重选择 $("#id a") ->id下层的a标签,全部递归 层级选择 $("#id>a") ->id下层的a标签,只找子级 层级选择 $(":[input_type]") input选择器 $("[custom_attribute]") 自定义属性选择 $("[custom_attribute='value']") 自定义属性选择 $("#id").find(input[attribute = "value"]) ->id下层的属性为value的input标签
二、筛选
$(a:first) 找到第一个a标签 $(a:last) 找到最后一个a标签 $(a:eq(索引值)) 找到第一个a标签,索引值从0开始 $(a:gt(索引值)) 大于索引值 $(a:lt(索引值)) 小于索引值 $(:header) $找到h标签 $(this).next() 下一个 $(this).prev() 上一个 $(this).parent() 父级 $(this).children() 子级 $(this).sibling() 兄弟标签
三、样式操作
addClass removeClass toggleClass
四、属性操作
attr("a") 查看属性 attr("a","v") 增加属性 removeAttr("a") prop("checked") 效果同attr,用于checkbox、radio prop("checked",true)
五、示例
示例一
1 <script src="jquery.js"></script> 2 <script> 3 function check_all() { 4 $(':checkbox').prop('checked',true); #查找所有checkbox,使其选中 5 } 6 function cancel_all() { 7 $(':checkbox').prop('checked', false); #查找所有checkbox,使其不被选中 8 } 9 function reverse() { 10 $(':checkbox').each(function () { 11 this.checked = this.checked? false:true #反转checkbox的checked属性 12 }) //1.X版本 13 } 14 $(".edit").click(function () { 15 var texts = $(".dialog>input") 16 var tds = $(this).parent().prevAll() 17 18 $(texts[0]).val( $(tds[1]).text() ) 19 $(texts[1]).val( $(tds[0]).text() ) 20 21 $(".dialog").removeClass("hide") 22 $(".mask").removeClass("hide") 23 }) 24 25 $(".cancel").click(function () { 26 $(".dialog").addClass("hide") 27 $(".mask").addClass("hide") 28 }) 29 </script>
示例二
1 <script src="jquery.js"></script> 2 <script> 3 $(".header").click(function () { 4 //选中标签的父级的兄弟的class含有‘content’的标签,增加‘hide’样式 5 $(this).parent().siblings().find('.content').addClass('hide') 6 $(this).next().removeClass('hide') //移除下一个标签的‘hide’样式 7 }) 8 </script>