jQuery学习笔记（学习视频教程）1
一、jQuery 对象和 DOM 对象
1、由jQuery对象转DOM对象
1）获取一个jQuery对象
var $btn = $("button");
2) jQuery 对象是一个数组
alert($btn.length);
3) 可以通过数组的下标转换为DOM对象
alert($btn[1].firstChild.nodeValue);
2、由DOM对象转换为jQuery对象
1） 选取一个DOM对象
var btn = document.getElementById("btn");
2） DOM 对象转jQuery对象： 使用$()进行包装
alert("---"+ $(btn).text());
（一般jQuery对象以$开头）
二、选择器
1、基本选择器
#id $("#btn1") id 为btn1的元素
.class $(".mini") class为mini的元素
element $("div") 所有的div
* $("*") 所有元素
select1,select2,.. $("span,#two") 所有的 span元素和id为two的元素
2、层级选择器
ancestor descendant $("body div") 选择 body内的所有 div 元素
parent > child $("body > div") 在 body内, 选择子元素是 div 的.
prev + next $("#one + div") 选择 id为 one 的下一个 div 元素
prev ~ siblings $("#one + div") 选择 id为 two 的元素后面的所有 div 兄弟元素
// $("#two").siblings("div") id为two的元素的所有是div的兄弟元素
// $("#one + span") 选择器选择的是近邻 #one 的 span 元素, 若该span和 #one不相邻, 选择器无效.
// $("#one").nextAll("span:first") 选择 id 为 one 的下一个 span 元素
// $("#two").prevAll("div") id 为 two 的元素前边的所有的 div 兄弟元素
3、过滤选择器
1）基本过滤选择器
:first $("div:first") 选择第一个 div 元素
:last $("div:last") 选择最后一个 div 元素"
:not $("div:not(.one)") 选择class不为 one 的所有 div 元素
:even $("div:even") 选择索引值为偶数的 div 元素
:odd $("div:odd") 选择索引值为奇数的 div 元素
:gt $("div:gt(3)") 选择索引值为大于 3 的 div 元素
:eq $("div:eq(3)") 选择索引值为等于 3 的 div 元素 (索引从0开始从前到后递增)
:lt $("div:lt(3)") 选择索引值为小于 3 的 div 元素
:header $(":header") 选择所有的标题元素(即
:animated $(":animated") 择当前正在执行动画的所有元素
2) 内容过滤选择器
:contains $("div:contains('di')") 选择 含有文本 'di' 的 div 元素
:empty $("div:empty") 选择不包含子元素(或者文本元素) 的 div 空元素
:has $("div:has(.mini)") 选择含有 class 为 mini元素的 div 元素
:parent $("div:parent") 选择含有子元素(或者文本元素)的div元素 (非空的div元素)
等同于$("div:not(:empty)")
4、 可见性选择器
:hidden $("div:visible") 选取所有可见的 div 元素
:visible $("div:hidden") 选择所有不可见的 div 元素
//$("div:hidden").show(2000).css("background","#ffbbaa");
// show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位
//jQuery 的很多方法支持方法的连缀,即一个方法的返回值来时调用该方法的 jQuery 对象: 可以继续调用该对象的其他方法.
//val() 方法可以返回某一个表单元素的 value 属性值.
5、属性选择过滤器
[attribute] $("div[title]") 选取含有 属性title 的div元素.
[attribute=value] $("div[title='test']") 选取 属性title值等于'test'的div元素.
[attribute!=value] $("div[title!='test']") 选取 属性title值不等于'test'的div元素(没有属性title的也将被选中).
[attribute^=value] $("div[title^='te']") 选取 属性title值 以'te'开始 的div元素.
[attribute$=value] $("div[title$='est']") 选取 属性title值 以'est'结束 的div元素.
[attribute*=value] $("div[title*='es']") 选取 属性title值 含有'es'的div元素.
[attrSel1][attrSel2][attrSelN] $("div[id][title*='es']") 组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值 含有'es'的 div 元素.
$("div[title][title!='test']") 选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素.
6、子元素选择器 --（选取子元素，需要在选择器前添加一个空格.）
:nth-child $("div.one :nth-child(2)") 选取每个class为one的div父元素下的第2个子元素.
:first-child $("div.one :first-child") 选取每个class为one的div父元素下的第一个子元素.
:last-child $("div.one :last-child") 选取每个class为one的div父元素下的最后一个子元素.
:only-child $("div.one :only-child") 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.
7、表单选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域(选择不到
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素，或者type为hidden的元素 style="display:none"或者 type为hidden
8、表单对象选择器
:enabled $(":text:enabled").val("尚硅谷") 对表单内 可用input 赋值操作.
:disabled $(":text:disabled") 对表单内 不可用input 赋值操作.
:checked $(":checkbox[name='newsletter']:checked").l.. 获取多选框选中的个数.
:selected $("select :selected").val() 获取多选框选中的内容.
//实际被选择的不是 select, 而是 select 的 option 子节点所以要加一个 空格.
// 因为 $("select :selected") 选择的是一个数组,当该数组中有多个元素时,通过 .val() 方法就只能获取第一个被选择的值了.
// jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在得到的 DOM 对象, 而不是一个 jQuery 对象
// $("select :selected").each(function(){
alert(this.value);
});
val() 获取或设置表单元素的value属性值
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
text()
由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
attr()
从第一个匹配元素中获取一个属性的值
each()
注： 以上的笔记来自尚硅谷的免费视频教程，共享出来供自己温习以及其他小伙伴参考，如有侵权请告知。