锐客网

  1. 首页 > it技术 > >

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()

【jQuery学习笔记（学习视频教程）1】注： 以上的笔记来自尚硅谷的免费视频教程，共享出来供自己温习以及其他小伙伴参考，如有侵权请告知。




















    推荐阅读


    上一篇：宏叶福彩三胆

    下一篇：Android自定义圆角对话框