资源描述
框架学习笔记
Jquery框架学习:
1. toggle(function(),function(),...)每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
<script>
$('img').toggle(
function(){
this.src="../image/b.jpg";
},
function(){
this.src="../image/f.jpeg";
}
);
</script>
点击切换图片效果。
<body>
<img src="../image/f.jpeg" id="imgId">
<img src="../image/f.jpeg">
<img src="../image/f.jpeg">
</body>
<script>
$('img').toggle(
function(){
this.src="../image/b.jpg";
},
function(){
this.src="../image/f.jpeg";
}
);
</script>
当有多张图片时，会自动进行隐式遍历。底层已经写好。
2. hover鼠标移入移出时进行切换。
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
鼠标移入和移出时分别触发相应的事件。
3. 单击标题显示和隐藏内容。
<script>
$('h1').toggle(
function(){
$(this).next().hide();
},
function(){
$(this).next().show();
}
);
</script>
4.next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected")
5. hide()隐藏显示的元素。
$("p").hide()隐藏所有段落。
6. show()显示隐藏的匹配元素。
如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
<p style="display: none">Hello</p>
$("p").show()
7.click()在每一个匹配元素的click事件中绑定一个处理函数。
点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：mousedownmouseupclick
$("p").click( function () { $(this).hide(); });
将页面内所有段落点击后隐藏。
8. parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。
<div><p>Hello</p><p>Hello</p></div>
$(“p”).parent();
查找每个段落的父元素。
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
$("p").parent(".selected")
查找段落的父元素中每个类名为selected的父元素。
9.prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev()
找到每个段落紧邻的前一个同辈元素。
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected")
找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
10.children()取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").children()
查找DIV中的每个子元素。
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children(".selected")
在每个div中查找 .selected 的类。
11. $(function(){
//延迟执行，放到该函数中的代码会延迟执行，直到body加载完毕后执行!
});
12. 单击换行号。
<body>
<h1>QQQ1</h1>
<h1>QQQ2</h1>
<h1>QQQ3</h1>
<h1>QQQ4</h1>
<h1>QQQ5</h1>
</body>
<script>
$('h1').each(function(i){
$(this).click(function(){
$(this).html(i+1);
});
});
</script>
13.each()以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的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()进行隔行换色:
<body>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
</body>
<script>
$('h1').each(function(i){
if(i%2==0){
$(this).css({"background":"#888"});
}else{
$(this).css({"background":"red"});
}
});
</script>
19. :even (选择器) 匹配所有索引值为偶数的的元素，从0开始计数。
查找表格的1、3、5...行（即索引值0、2、4...）
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:even")
20. :odd (选择器) 匹配所有索引值为奇数的元素，从 0 开始计数
查找表格的2、4、6行（即索引值1、3、5...）
$("tr:odd")
例：<body>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
<h1>QQQQQQQQ</h1>
</body>
<script>
$('h1:even').css({"background":"#888"});
$('h1:odd').css({"background":"green"});
</script>
21. Size() jQuery 对象中元素的个数。(取得jquery对象的个数)。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size();计算文档中所有图片数量
22. Get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。(可以把jquery对象转换成js对象)。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);
$(‘h1’).get(2).style.background=’#ccc’;(js对象的修饰)
23. Get( )取得所有匹配的 DOM 元素集合。(是一个集合，而不是单独某个元素).
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get().reverse();
选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。
$(‘h1’).get()[2].style.background=’#ccc’;
24. First() 获取第一个元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').first()
获取匹配的第一个元素
25. Mouseenter(function(){}) 鼠标移入时触发的事件。
26. Index([subject]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('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，不传递参数，返回这个元素在同辈中的索引位置。
查找元素的索引值
27. Eq(index) 获取第N个元素
这个元素的位置是从0算起。
<p> This is just a test.</p> <p> So is this</p>
$("p").eq(1)
获取匹配的第二个元素.
28. Not(expr) 删除与指定表达式匹配的元素
<p>Hello</p><p id="selected">Hello Again</p>
$("p").not( $("#selected")[0] )
从p元素中删除带有 select 的ID的元素
29. 综合案例:
<script>
$('p').hide().first().show(); 把p标签的内容先全部隐藏，然后再让第一行显示。
$('button').mouseenter(function(){
ids=$(this).index('button'); 当鼠标移入时获取当前按钮的位置。
$('p').eq(ids).show(); 让p标签集合的位置为ids的内容显示出来。
$('p').not($('p').eq(ids)).hide(); 除了位置为ids的外，其余内容全部隐藏。
});
</script>
30. Attr(key,value) 为所有匹配的元素设置一个属性值。
<img/>
<img/>
$("img").attr("src","test.jpg");
为所有图像设置src属性。
31. attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined .
<img src="test.jpg"/>
$("img").attr("src");
返回文档中第一个图像的src属性值。
32.attr(proper) 将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
<img/>
$("img").attr({ src: "test.jpg", alt: "Test Image" });
[ <img src= "test.jpg" alt:="Test Image" /> ]
为所有图像设置src和alt属性。
33.attr(key,function(){});为所有匹配的元素设置一个计算的属性值。
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
<img src="test.jpg"/>
$("img").attr("title", function() { return this.src });
<img src="test.jpg" title="test.jpg" />
把src属性的值设置为title属性的值。
选择器
1.基本选择器:
#ID 根据给定的ID匹配一个元素。
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv");
查找 ID 为"myDiv"的元素。
Element 根据给定的元素名匹配所有元素
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div");
查找一个 DIV 元素。
.class 根据给定的类匹配元素。
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
$(".myClass");
查找所有类是 "myClass" 的元素.
* 匹配所有元素
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
$("*")
找到每一个元素
Selector1,selector2,selector3...将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span id=”qq”>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass,#qq")
找到匹配任意一个类的元素。
2. 层级选择器
Ancestor descendant 在给定的祖先元素下匹配所有的后代元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form input")
找到表单中所有的 input 元素
祖先与后代的关系。
Parent >child 在给定的父元素下匹配所有的子元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form > input")
匹配表单中所有的子级input元素。
父亲与儿子的关系。
Prev + next 匹配所有紧接在 prev 元素后的 next 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("label + input")
匹配所有紧跟在 label 后面的 input 元素
相邻兄弟关系。
Prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
一个选择器，并且它作为第一个选择器的同辈
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form ~ input")
找到所有与表单同辈的 input 元素
所有的兄弟姐妹。
3. 基本选择器
:First获取第一个元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').first()
获取匹配的第一个元素
:last 获取最后个元素
$('li').last()
获取匹配的最后一个元素
:not 去除所有与给定选择器匹配的元素
<input name="apple" />
<input name="flower" checked="checked" />
$("input:not(:checked)")
查找所有未选中的 input 元素
:eq 匹配一个给定索引值的元素
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:eq(1)")
查找第二行
:gt 匹配所有大于给定索引值的元素
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)")
查找第二第三行，即索引值是1和2，也就是比0大
:lt 匹配所有小于给定索引值的元素
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:lt(2)")
查找第一第二行，即索引值是0和1，也就是比2小
属性选择器
[attr] 匹配包含给定属性的元素。
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]")
查找所有含有 id 属性的 div 元素
[attr=value] 匹配给定的属性是某个特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
$("input[name='newsletter']").attr("checked", true);
查找所有 name 属性是 newsletter 的 input 元素
[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
$("input[name!='newsletter']").attr("checked", true);
查找所有 name 属性不是 newsletter 的 input 元素
[attr^=value] 匹配给定的属性是以某些值开始的元素
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
$("input[name^='news']")
查找所有 name 以 'news' 开始的 input 元素
[attr$=value] 匹配给定的属性是以某些值结尾的元素
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
$("input[name$='letter']")
查找所有 name 以 'letter' 结尾的 input 元素
[attr*=value] 匹配给定的属性是以包含某些值的元素
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
$("input[name*='man']")
查找所有 name 包含 'man' 的 input 元素
[selector1][selector2]..... 复合属性选择器，需要同时满足多个条件时使用。
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
$("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)
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:nth-child(2)")
在每个 ul 查找第 2 个li
:first-child 匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:first-child")
在每个 ul 中查找第一个 li
:last-child 匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:last-child")
在每个 ul 中查找最后一个 li
表单对象属性
:enabled 匹配所有可用元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")
查找所有可用的input元素
:disabled 匹配所有不可用元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:disabled")
查找所有不可用的input元素
:checked 匹配所有选项中的被选中元素(复选框、单选框等，不包括select中的option)
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
$("input:checked")
查找所有选中的复选框元素
:selected 匹配所有选中的option元素
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
$("select option:selected")
查找所有选中的选项元素
(针对于下拉菜单select).
表单
:checkbox 匹配所有复选框
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button</form>
></button>
$(":checkbox")
查找所有复选框
30. Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
<b>Hello</b><p><b>Hello</b>, how are you?</p>
31. appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。
<p>I would like to say: </p>
<div></div><div></div>
$("p").appendTo("div");
结果如下:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
32. Append(content) 向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
向所有段落中追加一些HTML标记。
[ <p>I would like to say: <b>Hello</b></p> ]
后追加
33. Prepend(content) 向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
向所有段落中前置一些HTML标记代码。
[ <p><b>Hello</b>I would like to say: </p> ]
前追加
33. :first和first()时有区别的。First()是配合this来使用的。
其他类似的特一样。
过滤选择器
Slice(start,[end]) 选取一个匹配的子集
<p>Hello</p><p>cruel</p><p>World</p>
$("p").slice(0, 1).wrapInner("<b></b>");
选择第一个p元素
[ <p><b>Hello</b></p> ]
串联选择器
add(expr) 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
