jQuery文档学习笔记[筛选器 , 核心函数]

## jQuery选择器学习笔记
一选择器 $(" ") ,大部分返回的是一个元素集合Array<Element(s)> 少部分返回的是一个JQuery对象 ;
1普通组合实例 ;
1) $("div#lable table tr:nth-child(even)") 表示 id为lable的div元素中找到 所有的table里面 , 序号为偶数的tr ;
2) $("div.height") class为height的div ;
3) $("div#lable") id为lable的div ;
4) $("div#lable.height") id为lable ,class为 height的div ;
[注 : 选择器中
":" 冒号 表示,对前面所选择出来的元素的再次筛选 ,筛选的主体是紧挨着它的元素;
" " 空格 表示后面的是所有复核前面的后代元素[所有的,部分层次,在里面即可] ;
">" 大于号 表示 ,是前面的元素的直接子元素[第一层级子元素] ;
"." 点 表示class类 ;
"*"星号 表示所有元素 ;
"," 逗号 表示并集 ; 前后是独立的选择器 合并到一起 如 $("div , #lis") 标识 [所有的div] 和 [id为lis的元素] 的并集 ;
"+" 加号 表示 跟在前面的元素后面排列的元素 如$("label + input") 表示紧挨着 lable元素的input元素 ;
"~" 横s 表示 与前面同级的所有元素 , $("label ~ input") 标识lable后面所有与lablel 同级的input元素 ;
]
2 选择器分类; $("#idname");
1) 若id中含有特殊字符,比如 <span id = "niha[234]"></span>
则需转义 $("#niha\\[234\\]")
2) 对于元素 直接写入元素名即可; 如 $("span") 表示所有的span ;
3) CSS类 , 如 <span class= "dpan11"></span> 则用 : $(".dpan11")
4) ":" 冒号对前面选择器所做的补充条件 ;
5) 对索引值进行筛选:
1> :first 获取第一个元素 如 $('li:first');
2> :last 获取匹配的最后个元素 $('li:last')
3> :even 匹配所有索引值为偶数的元素，从 0 开始计数 ; $("tr:even")
4> :odd 匹配所有索引值为奇数的元素，从 0 开始计数 ; $("tr:odd")
5> :eq(index) 匹配一个给定索引值的元素 ; $("tr:eq(1)")
6> :gt(index) 匹配所有大于给定索引值的元素
7> :lt(index) 匹配所有小于给定索引值的元素
8> :not(selector) 去除所有与给定选择器匹配的元素 例如: $("input:not(:checked)") ; jQuery1.3支持复杂的 如 not(div a) 和 :not(div,a) ;
9> $("ul li:nth-child(2)") 在每个 ul 查找第 2 个li ;
10> $("ul li:first-child") 在每个 ul 中查找第一个 li ;
11> $("ul li:last-child") 在每个 ul 中查找最后一个 li ;
12> $("ul li:only-child") 在 ul 中查找li是唯一的子元素的 li,即查找出所有ul中的li 且该li是ul中唯一的子元素 ;
6) 针对元素属性 进行筛选;
1> $("div[id]") 查找所有含有 id 属性的 div 元素
2> $("input[name='newsletter']").attr("checked", true); 查找所有 name 属性是 newsletter 的 input 元素 , 并选中 ;
3> $("input[name!='newsletter']").attr("checked", true); 查找所有 name 属性不是 newsletter 的 input 元素 , 并选中 ;
4> $("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素 ;
5> $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素 ;
6> $("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素 ;
7> $("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input元素 ;
7) 针对输入框类型进行筛选 ;
1>$(":input") 查找所有的input元素
2>$(":text") 匹配所有的单行文本框
3>$(":password") 查找所有密码框
4>$(":radio") 匹配所有单选按钮
5>$(":checkbox")匹配所有复选框
6>$(":submit") 匹配所有提交按钮
7>$(":image")匹配所有图像域
8>$(":reset") 匹配所有重置按钮
9>$(":button") 匹配所有按钮
8) 其他特殊含义选择器 ;
1> :header 匹配如 h1, h2, h3之类的标题元素 ;
2> :animated匹配所有正在执行动画效果的元素
如: 只有对不在执行动画效果的元素1秒后执行一个动画特效 $("div:not(:animated)").animate({ left: "+=20" }, 1000);
3> :focus 触发每一个匹配元素的focus事件 $("#login:focus");
4> :contains(text) 匹配包含给定文本的元素 $("div:contains('John')") ;
5> :empty 匹配所有不包含子元素或者文本的空元素 $("td:empty")
6> :has(selector) 匹配含有选择器所匹配的元素的元素 如: 给所有包含 p 元素的 div 元素添加一个 text 类 $("div:has(p)").addClass("test");
7> :parent 匹配含有子元素或者文本的元素 , 返回值:Array<Element(s)>
8> $("tr:hidden") 匹配所有不可见[style="display:none"]元素，或者type为hidden的元素
9> $("input:enabled") = $("input:not(:disabled)") ; 查找所有可用的input元素
10> $("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
11> $("select option:selected") 匹配所有选中的option元素 ;
二 jQuery 核心函数:
1) jQuery([selector,[context]]) ,第二个参数可以省略, 我们经常用的选择器即是这个函数 ;
具体使用写法如 $("input:radio", document.forms[0]); 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
2) jQuery(html,props) , 第一个参数是 创建的标签 , 第二个参数是 设定标签里面的属性事件等 ,
用法:
1> $("<div>", {"class": "test",text: "Click me!",click: function(){$(this).toggleClass("test");}}).appendTo("body");
2>$("<input>", {type: "text",val: "Test",focusin: function() { $(this).addClass("active"); },focusout: function() {$(this).removeClass("active"); } }).appendTo("form");
3) $(function(){ // 文档就绪}); 当DOM加载完成后，执行其中的函数。可以一个页面中使用多个此函数 ; 等同于 $(document).ready();
4) $.holdReady 延迟就绪事件，直到已加载的插件。 当 $.holdReady(false);时 , 才会执行$(document).ready();方法 ;
$.holdReady(true);
$.getScript("myplugin.js", function() {$.holdReady(false);});
5) .cach(func) 循环函数 , 函数里面可以用return false来跳出循环 return true 调到下一个循环 ;
$("img").each(function(){$(this).toggleClass("example");});
$("img").each(function(i){this.src = "test" + i + ".jpg";});
6) $("img").size(); 对象里面元素的个数 ; 同 $("img").length;
7) .selector 返回选择器内容 ; $("div#foo ul:not([class])").selector //div#foo ul:not([class])
8) .context 返回 $() 函数的第二个参数的节点内容 ; 例如 $("ul", document.body).context.nodeName 则返回 body ;
9) .get(index) 取得其中一个匹配的元素 ; $(this).get(0)与$(this)[0]等价。
例如:
查找元素的索引值
HTML 代码:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>jQuery 代码:
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
10) .data(key,value) 在元素上存放数据 ; value可以是任何形式的值 key是字符串的
例如 :
$("div").data("blah", "hello");
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
$("div").removeData("blah"); //移除blah
三 jQuery对元素属性的操作 ;
1) attr(name|properties|key , value|function(index, attr)) 设置 或 返回 被选元素的属性值。function(index, attr)是返回被选元素的属性值的方法
例: $("img").attr("title", function() { return this.src }); //设置函数返回的值 ;
$("img").attr({ src: "test.jpg", alt: "Test Image" }); //设置多个
$("img").attr("src","test.jpg"); //设置
$("img").attr("src"); //获取
2) removeAttr(name) 从每一个匹配的元素中删除一个属性 如: $("img").removeAttr("src");
3) prop(name|properties|key,value|function(index, attr)) 获取 或者设置 在匹配的元素集中的第一个元素的属性值。
例:
$("input[type='checkbox']").prop("checked"); //获取
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true); //禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;}); //通过函数来设置所有页面上的没有选中的复选框被选中。
4) removeProp(name) 用来删除由.prop()方法设置的属性集
5) addClass(class|function(index, class)) 如果是函数 , 1参是当前元素的索引 2参是原来的class类;
例:
$("p").addClass("selected1 selected2");
$('ul li:last').addClass(function() {return 'item-' + $(this).index(); });
6) removeClass([class|function(index, class)])
7) toggleClass(class|fn [,sw]) 如果存在（不存在）就删除（添加）一个类。1参 可以使一个class也可以是一个返回class名的函数 ,2参[可选] 是true或者false的表达式 ;
例:
$("p").toggleClass("selected");//切换
var count = 0; $("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});
8) html([val | function(index, html)]) 设置 或者获取 元素的html内容 ,如是是函数的话 1参表示 元素集的索引 ,2参表示 对应元素的html值 ;
9) text([val| function(index, html)]) 设置 或者获取 元素的文本内容 用法 同html()方法 ;
10) val([val | function(index, value) | arr]) 里面有四种情况 ,为空 为获取 , 字符串或者function 则为设定 , 数组是 获取一个元素集合 , 得到值的集合 ;