欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

jQuery 自学手册

花了两天时间系统性的学习jQuery,获益匪浅。之前摸着石头写的一些jQuery程序也得到了相应的改良,以下便是我这两天的学习心得...

花了两天时间系统性的学习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值
如果喜欢本文,请分享给朋友们