JQuery

来源:互联网 发布:知乎挣钱 编辑:程序博客网 时间:2024/06/13 22:13
选择器
1、获取可见于不可见的元素
--$('span:hidden').addClass('class1');//获取所有不可见的span元素
--$('div:visible').addClass('class1'); //获取所有可见的div元素
2、if ($('#divContent').is(':visible'))
3、根据id获取元素
$('div[id]').show(2000);//有id的显示出来
$('div[id=div1]').show(2000); //id=div1的显示出来
$('div[id!=div1]').show(2000); //id!=div1的显示出来(包括没id的)
$('div[id^=s]').show(2000); //id以某些值开始的显示出来
$('div[id$=2]').show(2000);//获取给定的属性是以某些值结束的元素
$('div[id*=d]').show(2000); //获取给定的属性是包含某些值的元素
$('div[id^=d][title$=2]').show(2000); //获取满足多个条件复合属性的元素 
4、获取关系级元素
--$('#divMid').css('display', 'block'):设置id为'divMid'的层可见
--$('div span').css('display', 'block'):设置id为'divMid'的层里面的所有span元素可见,无论有几级嵌套
--$('div>span').css('display', 'block'):设置id为'divMid'的层里面的第一级span元素可见,此span元素里面的span元素不可见
--$('#divMid+div').css('display','block'):设置id为'divMid'的层后面的第一个div可见
--$('#divMid+span').css('display', 'block'):设置id为'divMid'的层后面的第一个span可见
--$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素
--$('#divMid').nextAll().css('display', 'block'):设置id为'divMid'的层后面的所有元素可见,无论是什么元素,必须与divMid平级,平级元素里面的嵌套元素不可见
--$('#divMid~div').css('display', 'block'):设置id为'divMid'的层后面的所有div元素可见,必须是平级的。
--$('#divMid~span').css('display','block');:设置id为'divMid'的层后面的所有span元素可见,必须是平级的。
5、子元素过滤选择器
$('li:first').addClass('classadd'); //第一个子元素
$('li:last').addClass('classadd'); //最后一个子元素
$('li:first').next().addClass('classadd'); //第二个
$('li:first').next().next().addClass('classadd');//第三个
$('li:eq(1)').addClass('classadd');//索引号获取元素
$('li:gt(0)').addClass('classadd');//索引号大于0的元素
$('li:lt(5)').addClass('classadd'); //索引号小于5的元素
$('li:even').addClass('classadd'); //索引号为偶数的元素
$('li:odd').addClass('classadd'); //索引号为奇数的元素
$('li:not(.class2)').addClass('classadd'); //class!=class2的元素
$('li:not(#myid)').addClass('classadd'); //id != "myid"的元素
$('h1:header').addClass('classadd'); //获取标题的元素
6、获取子元素
$('li:first-child').addClass('class1');//获取每个父元素下的第一个子元素
$('li:last-child').addClass('class1'); //获取每个父元素下的最后一个子元素
$('li:nth-child(1)').addClass('class1');//获取每个父元素下的第一个子元素
$('li:nth-child(2)').addClass('class1');//获取每个父元素下的第二个子元素
$('li:only-child').addClass('class1'); //获取每个父元素下的只有一个元素的子元素
$('li:nth-child(odd)').addClass('class1'); //获取每个父元素下的第奇数个子元素


7、显示、隐藏
--show(3000)
--hide(3000)
8、.css('属性','值')和addClass('变量名')
.变量名{ background-color:red;}
--$('*').addClass('变量名');
--$('*').css('background-color', 'red');
9、获取奇数、偶数行
--.classeven{ background-color:Aqua;}
--$('#mytb tr:nth-child(even)').addClass('classeven');
10、按钮定义方法
 $(function () {
     $('#mybtn').click(function () {
          $('#mydiv').show(5000);
     })
 })
<input type="button" id="mybtn" value="展开"  />
11、表单选择器(详见2012-3-12 PPT)
(1)注意':'前面一定要有空格
(2)快速定位表单对象
$('#divShow').html($('#form1 :input').length);
$('#form1 :text').addClass('div');
$('#form1 :password').addClass('div');
$('#form1 :radio').addClass('div');
$('#form1 :checkbox').addClass('div');
$('#form1 :image').addClass('div');
$('#form1 :file').addClass('div');
$('#form1 :submit').addClass('div');
$('#form1 :reset').addClass('div');                            
12、内容选择过滤器
$('div:contains(A)').addClass('classadd');//div层的内容中含有A的元素
$('div:empty').addClass('classadd'); //获取所有不包含子元素、文本的空元素
$('div:has(span)').addClass('classadd'); //获取含有选择器所匹配的元素的元素
$('div:parent').addClass('classadd'); //获取所有包含子元素或者文本的空元素