@cpt
2015-05-18T08:52:31.000000Z
字数 9440
阅读 880
读书笔记
基础选择器
1.id、Element、class、*选择器
2.sele1,sele2,seleN选择器
有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：$("sele1,sele2,seleN")其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(".class")、$("selector")选择器等.
3.ance desc选择器
在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")。其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。
4.parent>child选择器
与ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$("parent > child")。child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系.
5.prev + next选择器
俗话说“远亲不如近邻”，而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$("prev + next").其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素.
6.prev ~ siblings选择器
与prev + next层次选择器相同，prev ~ siblings选择器也是查找prev元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$("prev ~ siblings")其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
过滤性选择器
1.过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？在下面的示例代码中你可能注意到我们会使用$("li:first")注意：书写时以“：”号开头
2.如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用:eq(index).其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。
3.:contains(text)过滤选择器.
与:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。注意：li:contains('土豪')土豪为什么必须加单引号呢？因为它是一个字符串，而不是一个变量，所以不加单或双引号的话是会报错的。
4.:has(selector)过滤选择器
除了使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。
例如：获取指定包含某个元素名的全部<li>元素，并改变它们显示文字的颜色。
$("li:has('?')").css("background-color:red");
5.:hidden过滤选择器
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
例如：调用:hidden选择器获取不可见的<p>元素，并将该元素的内容显示在<div>元素中.
$("div").html($("p:hidden").html());
6. :visible过滤选择器
与:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
例如：用:visible选择器获取可见的<p>元素，并将该元素的内容显示在<div>元素中。
$("div").html（$("p:visible").html());
7. [attribute=value]属性选择器
属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
例如：使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色。
$("li[title='我最爱']").css("color","red");
8. [attribute!=value]属性选择器
与上述的=选择其刚好相反，用法相同。
9. [attribute*=value]属性选择器
介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。
例如：使用[attribute*=value]属性选择器，获取属性title值中包含某一指定内容(例如：lyon)的全部<li>元素，并设置它们显示的文字颜色。
$("li[title*='lyon']").css("color","red");
10. :first-child子元素过滤选择器
使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
例如：如果想把页面中每个ul中的第一个li获取到，并改变其颜色。
$("li:first-child").css("color","red");
11. :last-child子元素过滤选择器
用法与:first-child相同，意义不同。
表单选择器
1. :input表单选择器
如何获取表单全部元素？:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。
例如：使用:input表单选择器获取表单元素，并向这些元素增加一个CSS样式类别，修改它们在页面中显示的边框颜色。
$("#formone :input").css("border-color","red");
2. :text表单文本选择器
:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。对于<textarea>区域文本、按钮元素无效。
例如：在表单中添加多个元素，使用:text选择器获取单行的文本输入框元素，并修改字的边框颜色。
$("#formone :text").addClass("red");
3. :password表单密码选择器
如果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。
4. :radio单选按钮选择器
表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。
例如：，使用:radio选择器获取表单中全部的单选按钮元素，并将它们的选择状态设为不可用。
$("#formone :radio").attr("disabled",true);
5. :checkbox复选框选择器
表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
例如：调用:checkbox选择器获取表单中的全部复选框，并使用attr方法将它们的属性设为选中状态
$("#formone :checkbox").attr("checked",true);
6. :submit提交按钮选择器
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。
例如：调用:submit选择器获取表单中的提交按钮元素，并使用addClass()方法修改该元素的背景色。
$("#formone input:submit").addClass("background-color","red");
7. :image图像域选择器
当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。
例如：在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式。使用:image选择器只能获取<input>图像域，而不能获取<img>格式的图像元素。
$("#formone :image").addClass("red");
8. :button表单按钮选择器
表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
9. :checked选中状态选择器
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。
例如：在表单中添加多个复选框和单选按钮，其中有一些元素处于选中状态，使用:checked获取并隐藏处于选中状态的元素。
$("#formone :checked").hide();
10. 与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
例如：使用:selected选择器获取处于选中状态的<option>元素，并调用text()方法获取它们的内容，显示在页面中id为show的div中.
$("#show").html("选中的内容为" + $("#formone :seleted").text());
1. $().attr()
作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
2. $().html()和$().text()
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
3. $().addClass()和$().css()
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中
4. $().removeAttr(name)和removeClass(class)
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名
5. $().append()
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
6. $().appendTo()
appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：$(content).appendTo(selector)参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。
7. $().before()和$().after()
使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：$(selector).before(content)和$(selector).after(content)其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
8. $().clone()
调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：$(selector).clone()其中参数selector可以是一个元素或HTML内容。
9. $().replaceWith()和$().replaceAll()
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：$(selector).replaceWith(content)和$(content).replaceAll(selector)参数selector为被替换的元素，content为替换的内容。
10. $().wrap()和$.wrapInner()
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
11. $().each()
使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：$(selector).each(function(index))参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
12. $().remove()和$().empty()
remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。
1. 页面加载时触发ready()事件
ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：$(document).ready(function(){})等价于$(function(){});
例如，当触发页面的ready()事件时，在<div>元素中显示一句话。
$(function(){
$("#show").html("我被加载了！");
});
//等价于
$(document).ready(function(){
$("#show").html("我被加载了！");
});
2. 使用bind()方法绑定元素的事件
bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
例如：绑定按钮的单击事件，单击按钮时，该按钮变为不可用
$(function(){
$("#button").bind("click mouseout",function(){
$(this).attr("disabled","true");
});
});
3. 使用hover()方法切换事件
hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：$(selector).hover(over，out);over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
例如：当鼠标移到<div>元素上时，元素中的字体变成金黄色
$(function(){
$("div").hover(
function(){
$(this).addClass("orange");
},
function(){
$(this).removeClass("orange");
});
});
4. 使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换(即该方法参数为空)，绑定多个函数的调用格式如下：$(selector).toggle(fun1(),fun2(),funN(),...)其中，fun1，fun2就是多个函数的名称.注意：toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的.
例如：使用toggle()方法控制元素的显示与隐藏属性。
$(function(){
$("#btn").bind("click",function(){
$("div").toggle();
});
});
5. 使用unbind()方法移除元素绑定的事件
unbind()方法可以移除元素已绑定的事件，它的调用格式如下：$(selector).unbind(event,fun)其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。
例如：使用unbind()方法移除已绑定的全部事件.
$(function(){
$("div").bind("click",function(){
$(this).removeClass("backcolor").addClass("color");
}).bind("dblclick",function(){
$(this).removeClass("color").addClass("backColor");
});
$("#btn").bind("click",function(){
$("div").unbind();
$(this).attr("disabled",true);
});
});
6. 使用one()方法绑定元素的一次性事件
one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：$(selector).one(event,[data],fun).参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
例如：使用one()方法绑定<div>元素的单击事件，在事件中，获取点击数值，来改变显示内容的字体大小。
$(function () {
var intI = 0;
$("div").one("click", function () {
intI++;
$(this).css("font-size", intI + "px");
});
});
由于使用了one()方法绑定<div>元素的单击事件，因为事件函数只能执行一次，执行完成后，无论如何单击，都不再触发。字体大小也不再变化。
7. 调用trigger()方法手动触发指定的事件
trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：$(selector).trigger(event)。其中event参数为需要手动触发的事件名称。
8. 文本框的focus和blur事件
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。
例如：在触发文本框的“focus”事件时，<div>元素显示提示内容
$(funtion(){
$("input").bind("focus",function(){
$("div").html("这是提示内容，你必须做.....");
});
$("input").bind("blur",function(){
if($(this).val().length==0)
$("div").html("长度不能为空");
});
});
9. 下拉列表框的change事件
当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。
例如：绑定下拉列表的change事件，改变下拉列表框的颜色。
$(function(){
$("#seltest").bind("change",function(){
if($(this).val() == "苹果")
$(this).css("background-color","red");
else
$(this).css("background-color","green");
});
});
10. 调用live()方法绑定元素的事件
与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：$(selector).live(event,[data],fun)。参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
例如：使用live()方法绑定页面中元素的单击事件，而这个按钮是通过追加的方式添加到页面中的。
$(function(){
$("#btntest").live("click",function(){
$(this).attr("disabled",true);
});
$("body").append("<input id='btntest' type='button' value='点击就不可用了'>");
});
注意：从 jQuery 1.7 开始，不再建议使用 .live() 方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。