jquery核心

转载

mb5fe55992193c7 2017-05-22 15:49:00

文章标签 表单 jquery对象数据背景色学python 文章分类 代码人生

1、找到所有 p 元素，并且这些元素都必须是 div 元素的子元素
$("div > p");

2、设置页面背景色
$(document.body).css("background","black");

3、隐藏一个表单中所有元素
$(myForm.elements).hide();

4、在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("input:radio", document.forms[0]);

5、当DOM加载完成后，执行其中的函数
$(function){
    //文档就绪
}

6、对于每个匹配的元素所要执行的函数，迭代两个图像，并设置它们的 src 属性
$("img").each(function(i){
    this.src="test"+i+".jpg"
        });
//[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]


7、计算文档中所有图片数量；
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size*();
$("img").length;


8、get用法;
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);   //[ <img src="test1.jpg"/> ]


9、get与reverse结合用法;
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get().resverse();    //[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
    
    
10、查找元素的索引值
<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，不传递参数，返回这个元素在同辈中的索引位置。 


11、在一个div上存取数据
<div></div>
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined
    
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;


12、从元素中删除之前添加的数据：
$("#btn2").click(function(){
    $("div").removeData("greeting");
    alert("Greeting is: " + $("div").data("greeting"));
});