jquery框架学习笔记.docx

框架学习笔记
Jquery框架学习:
1. toggle(function(),function(),...)每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。

$('img').toggle(
function(){
this.src="../image/b.jpg";
},
function(){
this.s</p><p style='padding:5px 0px;'>2、rc="../image/f.jpeg";
}
);

点击切换图片效果。

$('img').toggle(
function(){
this.src="../image/b.jpg";
},
function(){
this.src="../</p><p style='padding:5px 0px;'>3、image/f.jpeg";
}
);

当有多张图片时，会自动进行隐式遍历。底层已经写好。
2. hover鼠标移入移出时进行切换。
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
鼠标移入和移出时分别触发相应的事件。
3. 单击标题显示和隐藏内容。

$('h1').toggle(
function(){
$(this).next().hide();
},
function(){
$(this).next().show();
}
);

4.next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
法都将有效。
HelloHellon>Hello Again查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
延迟执行，放到该函数中的代码会延迟执行，直到body加载完毕后执行!
});
12. 单击换行号。

一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
14. html(val)设置每一个匹配元素的html内容。
15. html()取得第一个匹配元素的html内容。
16. Js对象和jquery对象的相互转化
1.js对象转jquery对象:
$(js对象).jquery方法;

2.jquery对象转js对象:
$(jquer对象)[0].js方法;

3.jquery中this和$(this)的区别:
this代表js对象
$(this)代表jquery对象
17. $(‘h1’)与$(this)为什么一个有单引号一个没有？
不加单引号如$(this)中的this代表一个js对象，而加上单引号如$(‘h1’)表示一种选择器， 选择要修饰的元素，h1为被选元素的代表。
18. 利用each()进行隔行换色:

QQQQQQ有索引值为偶数的的元素，从0开始计数。
查找表格的1、3、5...行（即索引值0、2、4...）
1>

$("img").size();计算文档中所有图片数量
22. Get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。(可以把jquery对象转换成js对象)。

$("img").get(0);
$(‘h1’).get(2).style.background=’#ccc’;(js对象的修饰)
23. Get( )取得所有匹配的 DOM 元素集合。(是一个集合，而不是单独某个元素).
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。

$("img").get().reverse();
选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。
$(‘h1’).get()[2].style.background=’#ccc’;
24. First() 获取第一个元素
list item 2者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
y对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
查找元素的索引值
27. Eq(index) 获取第N个元素
这个元素的位置是从0算起。

素.

28. Not(expr) 删除与指定表达式匹配的元素
果元素没有相应属性，则返回 undefined .

$("img").attr("src");
返回文档中第一个图像的src属性值。
32.attr(proper) 将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

$("img").attr({ src: "test.jpg" alt: "Test Image" });
[ ]
为所有图像设置src和alt属性。
33.attr(key,function(){});为所有匹配的元素设置一个计算的属性值。
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

$("img").attr("title", function() { return this.src });

把src属性的值设置为title属性的值。
选择器
1.基本选择器:
#ID 根据给定的ID匹配一个元素。
div class="notMe"选择器，并将匹配到的元素合并到一个结果内。
Newsletter:

bel>

ul>
$('li').first()
获取匹配的第一个元素
:last 获取最后个元素
$('li').last()
获取匹配的最后一个元素
:not 去除所有与给定选择器匹配的元素

$("input:not(:checked)")
查找所有未选中的 input 元素
:eq 匹配一个给定索引值的元素
e 1[attr*=value] 匹配给定的属性是以包含某些值的元素

$("input[name*='man']")
查找所有 name 包含 'man' 的 input 元素
[selector1][selector2]..... 复合属性选择器，需要同时满足多个条件时使用。

me="milkman" />

$("input[id][name$='man']")
找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
子元素选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
个子元素
t name="email" disabled="disabled" />

on>
type="password" />

>
$(":checkbox")
查找所有复选框
30. Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
Hello素（并选中这些克隆的副本），然后将它们前置到所有段落中。
Hello中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。
uld like to say: like to say: