花了两天时间系统性的学习jQuery,获益匪浅。之前摸着石头写的一些jQuery程序也得到了相应的改良,以下便是我这两天的学习心得:
选择器 Selectors:
$("*") //选择所有标签 $("div:animated") //选择正在动画中的div标签 $('a[hreflang|=en]') //选择包含en的a标签,并且en后面只能跟"-" $("input[name*='man']") //选择name属性中包含'man'的input标签 $("input[name~=man]") //选择name属性中包含'man'但只能和空格相连的input标签,如 $("input[name~=man]") 匹配 <input name="milk man" /> $("input[name$='letter']") //选择以'letter'结尾的input标签 $("input[name='newsletter']") //选择name属性等于'newsletter'的input标签 $("input[name!=newsletter]") //选择name属性不等于'newsletter'的input标签 $("input[name^='news']") //选择name属性中以'news'开头的input标签 $(":button") //匹配按钮 $("form input:checkbox") //匹配多选按钮 $("input:checked") //选择已勾选的按钮 $("ul.topnav > li") //选择 ul.topnav 下一辈的 li 标签 $(".myClass") //选择普配class名myClass的标签 $("div:contains('John')") //选择包含'John'字符串的div标签 $("form input") //匹配form标签下的所有input $("input:disabled") //匹配已禁用的input $("div") //选择div标签 $("td:empty") //选择空的td标签 $("input:enabled") //选择启用的input标签 $("td:eq(2)") //选择第3个td标签 $("tr:even") //选择偶数的tr标签(0,2,4...) $("input:file") //选择文件域 $("div span:first-child") //选择每个div标签下的第1个span标签(可能有多个) $("tr:first") //选择第1个tr标签(只有一个) $("td:gt(4)") //选择第5个td标签后的所有td标签(包含第5个) $("div[id]") //选择包含id属性的div标签 $("div:has(p)") //选择包含p标签的div标签 $(":header") //选择h1,h2,h3,h4,h5,h6标签 $(":hidden") //选择隐藏的标签 $("#myDiv") //选择id为myDiv的标签 $("input:image") //选择图像域 $(":input") //选择input标签 $("div span:last-child") //选择div下的最后一个span标签(可能有多个) $("tr:last") //选择最后一个tr标签(只有一个) $("td:lt(4)") //选择第5个以前的td标签(不包含第5个) $("input[id][name$='man']") //多重属性选择,选择包含id属性和name属性以'man'结尾的input标签 $("div,span,p.myClass") //多重选择,选择div标签,span标签和class名为myClass的p标签 $("label + input") //选择前面是label标签的input标签 $("#prev ~ div") //选择id为prev之后的所有同辈div标签 $("input:not(:checked) + span") //选择前面是未勾选的多选按钮的span标签 $("ul li:nth-child(2)") //选择ul标签下第2个li标签 $("tr:odd") //选择奇数的tr标签 $("div button:only-child") //选择div下只有一个button的input标签 $("td:parent") //选择含有子元素或文本的td标签 $("input:password") //选择密码框 $("input:reset") //选择重设按钮 $("select option:selected") //选择已被选的选项 $(":submit") //选择提交按钮 $("form input:text") //选择文本输入框 $("div:visible") //选择显示的div元素
属性 Attributes:
$('p').addClass('myClass yourClass'); //增加class名: myClass yourClass $('p').removeClass('myClass noClass').addClass('yourClass'); //移除class名: myClass noClass, 并增加class名: yourClass $('ul li:last').addClass(function() { return 'item-' + $(this).index(); }); //增加以"item-索引值"的class名 $("p").toggleClass("selected"); //如果p标签下存在selected类,就删除该类,否则添加该类 $("em").attr("title") //返回em标签的title值 $("img").attr("src","test.jpg"); //设置图片路径为"test.jpg" $("img").attr("title", function() { return this.src }); //为所有img标签添加值为图片路径的title $("img").attr({ src: "test.jpg", alt: "Test Image" }); //批量设置标签属性 $("p:last").hasClass("selected") //判断最后一个p标签是否包含'selected'的class名 $('div.demo-container').html(); //返回类名为demo-container的div标签下的html内容,相当于innerHTML $('div.demo-container').html('<p>true</p>'); //设置类名为demo-container的div标签下的html内容为'<p>true</p>',相当于innerHTML $('div.demo-container').text(); //返回类名为demo-container的div标签下的html转为实体的内容 $("#multiple").val() //返回#multiple的value值