jQuery学习笔记

1、初识jQuery

1.1、jQuery库中，$就是jQuery的一种简写形式，$.ajax()==jQuery.ajax()，如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。

 

1.2、$(document).ready(function(){

//执行的代码

});

网页中所有DOM结构绘制完毕后就执行，可能dom元素关联的东西并没有加载完。Window.onload是等页面所有内容加载完毕之后（包括图片）才执行，与之相似。

 

1.3、链式操作风格：对于同一个对象，可以有很多个操作写在一起顺序执行。

例如：一个简单的导航栏样式代码（点击展开子项，并且高亮显示当前项）

$(“leve > a”).click(function(){ //leve 是<li>元素的class名称

$(this).addClass(“testClassName”) //给当前元素添加“testClassName”样式

.next().show() //下一个元素显示

.parent().siblings().children(“a”).removeClass(“testClassName”)

//父元素的同辈元素的子元素<a>移除“testClassName”样式

.next().hide(); //他们的下一个元素隐藏

Return false;

});

 

1.4、DOM对象（document object model，文档对象模型），每一份dom都可以表示成一颗树，通过document.getElementById(“id”)等方法来获取，可以使用js中的方法，如innerHTNL、checked....

 

1.5、jQuery对象就是通过jQuery包装DOM对象后产生的对象，是jQuery独有的，与DOM对象不等价。$(“#id”).html等价于document.getElementById(“id”).innerHTML。两者方法不能混用。

 

1.6、jQuery对象和DOM对象相互转换

var $cr=$(“#id”);  //约定jQuery对象名前面加一个$区分，$cr是jquery对象；

var cr=$cr[0];     //cr是DOM对象

var cr=$cr.get(0);

 

var cr2=document.getElementById(“id”);//DOM对象转换为jQuery对象

var $cr2=$(cr2);

 

1.7、注意：平时用的jQuery对象都是$()函数制造出来的，$()函数就是一个jQuery对象制造工厂。

 

1.8、注意：判断是否被选中 $cr.is(“:checked”)等价于cr.checked，返回值都是boolean类型。

 

1.9、jQuery在其他库之后导入和其他库的产生冲突：jQuery可以随时使用JQuery.noConflict();将变量$的控制权移交给其他库，自己则使用jQuery()函数作为对象制造工厂，其他库将使用$。如果是之前导入则不用使用JQuery.noConflict();交出控制权。

 

1.10、$(“#id”);获取的永远是对象，因此不能用此方法来判断页面上有没有这个元素，因该用$(“#id”).length>0或者用$(“#id”)[0]转换为DOM对象来判断。

 

2 、jQuery选择器

2.1、基本选择器

·根据id选择：$(“#id”)选取id属性为相应值的元素；

·根据类名选择：$(“.className”)选取所有相同类名的元素；

·根据元素名称选择：$(“div”)选取所有的div元素；

·选取所有元素：$(“*”)；

·多种选择一起：$(“div,span,p.className”)选取所有div，span和拥有class为className的所有p标签。

 

2.2、层次选择器

·$(“div span”)选取div里面的所有span元素（所有后代元素），返回集合元素；

·$(“div > span”)选取div下面元素名为span的所有子元素；

·$(“#two”).next(“div”)选取紧接在id为two元素后面的下一个div同辈元素；

·$(“#two”).nextAll(“div”)选取id为two元素后面所有div同辈元素；

 

2.3、过滤选择器（使用较多的）

·$(“div:first”)选取页面中所有div元素中的第一个div元素；

·$(“span:last”)选择页面中所有span元素中的最后一个span元素；

·$(“:focus”)选择当前获取焦点的元素；

·$(“:header”)选择网页中所有<h>元素；

·$(“input:even”)选取索引是偶数的input元素；

·$(“input:old”)选取索引是奇数的input元素；

·$(“input:eq(index)”) 选择索引为index的input元素（index从0开始）；

·$(“input:not(.className)”)选取class不是className的input元素；

 

2.4、内容过滤选择器

·$(“div:contains(“我”)”) 选择文本含有“我”的div元素；

·$(“div:empty”) 选择不包含子元素（包括文本元素）的div空元素；

·$(“div:has(span)”) 选择含有span元素的div元素；

·$(“div:parent”) 选择拥有子元素（包括文本元素）的div元素。

 

2.5、可见性过滤选择器（常用）

·$(“:hidden”) 选择所有不可见元素，包括<input type=”hidden” />,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素；$(“input:hidden”) 只选择input元素；

·$(“div:visible”) 选取所有可见的div元素。

 

2.6、属性过滤选择器（常用的几种）

·$(“div[id]”) 选择拥有id属性的div元素；

·$(“div[id==test]”) 选择id属性等于test的div元素；

·$(“div[title!=test]”) 选择title属性不等于test的div元素（注意：没有title属性的div元素也会被选中）；

·$(“div[id][title]”) 联合使用。

 

2.7、子元素过滤选择器

·$(“div :nth-child(index/even/old/equation)”) 选择div父元素下的第index个子元素或奇偶子元素（注意索引从1开始）；

·$(“div.one :first-child”) 选择class为one的div父元素下的第一个子元素；

·$(“div.one :last-child”) 选择class为one的div父元素下的最后一个子元素；

·$(“div.one :only-child”) 如果class为one的div父元素下只一个子元素则选中，没有就不选中。

 

2.8、表单对象属性过滤选择器

·$(“input:checked”) 选择所有被选中的input元素；

·$(“select option:selected”) 选取所有被选中的选项元素；

·$(“#name :enabled”) 选择id为name的表单内所有可用元素；

·$(“#name :disabled”) 选择id为name的表单内所有不可用元素；

·$(“:input”) 选取所有的input，textarea,select,button元素；

·$(“:text”) 选择所有的单行文本框；

·$(“:password”);

·$(“:radio”);

·$(“:checkbox”);

·$(“:submit”);

·$(“:image”);

·$(“:reset”);

·$(“:button”);

·$(“:file”);

·$(“:hidden”);

 

3、jQuery中的DOM操作

3.1、创建节点

使用jQuer的工厂函数$()可以将你传入的html字符串包装成一个jQuery对象返回，然后再通过jQuery中的append()等方法插入文档中。

var html=”<div id=’test’>abcdefg</div>”;

Var $div=$(html);         //创建一个DOM对象，并包装成一个jQuery对象返回给$div

$(“#div2”).append($div);   //将$div插入到页面id属性为div2的元素中。

 

3.2、插入节点

·append();向匹配的元素内追加内容。

例：$(“p”).append(“<span>hello</span>”);→<p>哈哈<span>hello</span></p>

 

·appendTo();将新增的内容追加到匹配的元素中。

例：$(“<span>hello</span>”).appendTo(“p”);→<p>哈哈<span>hello</span></p>

 

·prepend();向匹配的元素内前置内容。

例：$(“p”).prepend(“<span>hello</span>”);→<p><span>hello</span>哈哈</p>

 

·prependTo();将新增的内容前置到匹配的元素中。

例：$(“<span>hello</span>”).prependTo(“p”);→<p><span>hello</span>哈哈</p>

 

·after();在匹配的元素之后插入内容。

例：$(“p”).after(“<span>hello</span>”);→<p>哈哈</p><span>hello</span>

 

·insertAfter();将内容插入到匹配的元素之后。

例：$(“<span>hello</span>”).insertAfter(“p”);→<p>哈哈</p><span>hello</span>

 

·before();在匹配的元素之前插入内容。

例：$(“p”).before(“<span>hello</span>”);→<span>hello</span><p>哈哈</p>

 

·insertBefore();将内容插入到匹配的元素之前。

例：$(“<span>hello</span>”).insertBefore(“p”);→<span>hello</span><p>哈哈</p>

 

3.3、删除节点

·remove();

从DOM中删除匹配的节点后，该节点所包含的所有后代节点将同时被删除。此方法返回被删除节点的引用，因此此后还可以继续使用被删除的节点对象。remove()方法中可以接收选择参数，比如remove(“div[title!=雷涛]”)。

·detach();

从DOM中删除匹配的节点后，不会把删除的元素从jQuery中删除掉，将来可以继续使用这些元素，与remove不同的是，此方法会保留删除元素的附加数据和绑定的事件。

·empty();

清空节点，包括所有后代节点。只会删除节点中内容，会保留节点本身（节点text文本也会被清空）。

 

3.4、复制节点

clone(true);此方法中传入参数true表示复制元素的同时复制元素中所绑定的事件。

 

3.5、替换节点

replaceWith();将匹配的元素替换成指定的html或者DOM元素；

replaceAll();将替换的内容替换指定匹配的元素，与replaceWith();颠倒操作；

注意：两者替换都不会保留被替换元素之前绑定的事件，新元素要重新绑定自己的事件。

 

3.6、包裹节点

·wrap(); 将所有匹配到的元素单独进行包裹；

例：$(“strong”).wrap(“<b></b>”);

→<b><strong>aaa</strong></b>

  <b><strong>bbb</strong></b>

 

·wrapAll(); 将匹配到的所有元素用一个元素来包裹；

例：$(“strong”).wrapAll(“<b></b>”);

→<b>

<strong>aaa</strong>

<strong>bbb</strong>

  </b>

 

·wrapInner(); 将每一个匹配到的元素的子内容（包括文本节点）用其他结构的标记包裹起来。

例：$(“strong”).wrapInner(“<b></b>”);

→<strong><b>aaa</b></strong>

  <strong><b>bbb</b></strong>

 

3.7、属性操作

·$(“div”).attr(“title”);

获取div的title属性值。

 

·$(“div”).attr(“title”,”雷涛”);

设置div的title属性值为“雷涛”。

 

·$(“div”).attr({“title” : ”雷涛” , “name” : “java”});

设置多个属性。

 

·$(“div”).removeAttr(“title”);

删除div元素的title属性。

 

3.8、样式操作

·$(“div”).attr(“class”,”className1”);

给div新增一个class=”className1”属性。

 

·$(“div”).addClass(“className2”);

给div的class属性中添加一个className2的属性，div的属性变为class=”className1 className2”。

 

·$(“div”).removeClass(“className1 className2”);

删除div元素的className1和className2样式。

 

·$(“#changeStyle”).toggle(function(){

//代码1

},function(){

//代码2

});

toggle()方法此处的作用是交替执行代码1和代码2，是行为上的重复切换。

 

·$(“div”).toggleClass(“className”);

让div在样式上重复切换。如果div有class=”className” 当点击“切换样式”按钮式就会移除className属性值，反之就会给div加上className属性值。

 

·$(“div”).hasClass(“className”);

判断div中是否含有值为className的class，有返回true，反之返回false。

 

3.9、设置、获取HTML、文本和值

·html();

类似于js中的innerHTML属性，用来获取或者设置某个元素中的HTML内容。

 

·text();

类似于js中的innerText属性，用来读取或者设置某个元素中的文本内容。

 

·val();

类似于js中的value属性，用来设置或者获取某个元素的值。无论元素是文本框，下拉列表还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选中的值的数组。

 

3.10、遍历节点

·children();

获取匹配元素的子元素集合。

 

·next();

获取匹配元素后面紧邻的同辈元素。

 

·prev();

获取匹配元素前面紧邻的同辈元素。

 

·siblings();

获取匹配元素前后的所有同辈元素。

 

·closest();

从元素本上开始向上逐级查找匹配的元素，并返回最先匹配的祖先元素。（首先检查当前元素是否匹配，不匹配则向上查找父元素。）

 

·parent();

获取匹配元素的父级元素，只返回一个元素节点。

 

·parents();

获取匹配元素的所有祖先元素，可能返回多个父元素节点。

 

3.11、 CSS-DOM操作

·css();

获取或者设置匹配元素的样式。

$(“#test”).css(“color”);//获取color样式的值；

$(“#test”).css(“color”,”red”);//设置id属性为test的颜色为红色；

 

·height();

获取或者设置匹配元素height属性。

 

·width();

获取或者设置匹配元素width属性。

 

·offset();

获取匹配元素在当前视窗的相对便宜，返回对象包含top和left两个属性。

→var offset=$(“div”).offset();

  var top=offset.top;

  var left=offset.left;

 

·position();

获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset一样返回top和left两个属性。

·scrollTOp();

获取元素滚动条距离顶端的距离。

·scrollLeft();

获取元素滚动条距离左侧的距离。

 

 

4、jQuery中的事件和动画

4.1、事件

4.1.1、加载DOM

·window.onload和$(document).ready()的执行时机

前者会等页面上所有元素（包括元素所有关联文件）完全加载完毕后才执行。$(document).ready()方法只需要DOM就绪就可以执行。因此后者执行的速度要快于前者。

 

·多次使用

window.onload事件一次只能保存对一个方法的调用，会自动用后面调用的方法覆盖前面的调用的方法，因此不能在现有的行为上添加新的行为。

$(document).ready()每次调用此方法都会给现有的行为追加新的行为，这些行为方法会根据注册的顺序依次执行。

 

·简写方式（两种）

→$(function(){

//业务代码

});

→$().ready(function(){

//业务代码

});

 

4.1.2、事件绑定

·当文档装载完毕后可以使用bind(type[,data],function)来匹配元素进行特定事件绑定。

type是事件类型（必须）：

blur，focus，load，

resize（窗口改变大小监听），

scroll（元素滚动监听），

unload（离开页面监听），

click，

dblclick（双击监听），

mousedown（当鼠标指针移动到元素上方，并按下鼠标按键时监听），

mouseup（当在元素上放松鼠标按钮时监听），

mousemove（当鼠标指针在指定的元素中移动时监听），

mouseover（当鼠标指针位于元素上方时监听），

mouseout（当鼠标指针从元素上移开时监听），

mouseenter（当鼠标指针穿过元素时监听），

mouseleave（在鼠标离开某个元素时监听），

change，select，submit，

keydown（当按钮被按下时监听，如果是输入框，则输入按下键盘是监听），

keyup（与keydown相反），

keypress（它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符就会发生 keypress 事件。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。），

error，

也可以自定义名称

 

data是可选参数，作为event.data属性值传递给事件对象的额外数据对象。

 

function是用来绑定的处理函数。

 

→$(“div”).bind(“click”,function(){

alert(“abc”);//为div绑定单击事件，点击弹出框。

})

→简写方式

$(“div”).click(function(){

alert(“abc”);//为div绑定单击事件，点击弹出框。

})

 

4.1.3、合成事件

·hover()方法

此方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个方法（enter）；当光标移出这个元素时，会触发指定的第二个方法（leave）。

→给div中的span绑定一个方法，当鼠标移动到上面时显示span下一个元素，鼠标移出时隐藏下一个元素。

$(function(){

$(“div span”).hover(function(){

$(this).next().show();

},function(){

$(this).next().hide();

});

});

 

·toggle(fn1,fn2,fn3...,fnN)方法

此方法用于模拟鼠标单击事件，第一次单击触发fn1方法，第N次单击触发fnN方法，一次触发，每次单击都会对这几个函数轮播调用。

→给div中的span绑定单击事件，点击显示span下一个元素，再一次点击则隐藏span下一个元素。

$(function(

$(“div span”).toggle(function(){

$(this).next().show();

},function(){

$(this).next().hide();

});

));

 

注意：toggle()方法在jQuery中还有另一个作用：切换元素的可见状态。如果是可见的就点击就隐藏，如果是隐藏的点击就显示，则上面的代码可修改为：

$(function(

$(“div span”).toggle(function(){

$(this).next().toggle();

},function(){

$(this).next().toggle();

});

));

 

4.1.4、事件冒泡

·什么是事件冒泡

当给多层嵌套的元素分别绑定click事件时，点击最里层的元素会从里到外依次触发各个元素的事件，事件会按照DOM的层次结构像水泡一样不断向上直至顶端，因此称为事件冒泡。

 

·事件对象

事件对象只有事件处理方法才能访问到，事件方法执行完毕后事件对象就被销毁了。

使用事件对象只需要想方法添加一个参数：

→$(“span”).click(function(event){

//...

});

 

·停止事件冒泡

在代码中使用stopPropagation()来停止事件冒泡，这样当执行完最里层的触发方法时，不会执行外层的方法。

→$(“span”).click(function(event){

alert(“执行了最里层的方法！”);

event.stopPropagation();

//也可以使用简写形式：return false；代替

});

 

·阻止默认行为

在表单验证中如果输入框不合规则就不能提交，此时可以使用preventDefault()方法来组织submit提交行为。

→如果输入框为空不能提交，为submit绑定点击事件

$(function(){

$(“#submit”).bind(“click”,function(event){

var value=$(“#userName”).val();

if(value==””){

alert(“用户名不能为空！”);

event.preventDefault();

//也可以使用简写形式：return false；替代。

}

});

});

 

4.1.5、事件对象属性

·event.type

获取事件的类型。

→$(“a”).click(function(event){

alert(event.type);//弹出结果：“click”

return false; //阻止链接跳转

});

 

·event.preventDefault();

 

·event.stopPropagation();

 

·event.target

获取触发事件的元素。

→$(“a[href=’http://www.baidu.com’]”).click(function(event){

var tg=event.target;//获取事件对象

alert(tg.href); //弹出结果：“http://www.baidu.com”

return false;

});

 

·event.pageX和event.pageY

获取到光标相对于页面的x坐标和y坐标，如果页面上有滚动条，则还要加上滚动条的宽度和高度。

 

·event.which

在鼠标单击事件中获取鼠标的左中右键，在键盘事件中获取键盘的按键。

→获取鼠标的按键

$(“a”).mousedown(function(event){

alert(event.which);

//1=鼠标左键；2=鼠标中键；3=鼠标右键。

});

→获取键盘按键

$(“input”).keyup(function(event){

alert(event.which);

});

 

·event.metaKey

jQuery中为键盘事件中获取<ctrl>按键。

 

4.1.6、移除事件

·unbind([type],[function]);

type是事件类型，比如click，mousedown等等。function是处理函数名。

注意：1、如果没有参数，则移除元素所有绑定的事件；

→$(“#btn”).unbind();

  2、如果事件类型type不为空，则只移除相应类型的事件；

→$(“#btn”).unbind(“click”);

  3、如果处理函数function不为空，则只移除相应function的事件。

→$(“#btn”).unbind(“click”,myfunctionName);

 

·one();

可以为元素绑定只能触发一次的处理函数，每个函数只能执行一次，执行完成后立即被删除。

→$(“#btn”).one(“click”,function(){

alert(“你点击了按钮！”);

});

 

4.1.7、模拟操作

·常用模拟

$(“#btn”).trigger(“click”);//等同于$(“#btn”).click();

 

·触发自定义事件

$(“#btn”).trigger(“myClick”);

 

·传递参数

$(“#btn”).trigger(“myClick”,[“hello”,”你好”]);

$(“#btn”).bind(“myClick”,function(msg1,msg2){

alert(msg1+msg2);//弹出结果为“hello你好”

});

 

·执行默认操作

triggerHandler();方法只触发为元素绑定的事件而不会执行浏览器默认操作。

 

4.2、jQuery动画（简单的几种）

4.2.1、show()方法和hide()方法

·hide()方法是将style中的display设置为none，并记住原先的display属性值；

·show()方法是将display方法复原为hide记住的属性值。

·速度关键字：slow（600毫秒）、normal（400毫秒）、fast（200毫秒）或者指定一个数字（单位是毫秒）

→$(“div”).show(“slow”);//同等于$(“div”).show(600);

      

4.2.2、fadeIn()方法和fadeOut()方法

·fadeOut()方法在指定的时间内降低元素的不透明度，直到元素完全消失（display：none）；fadeIn()方法则相反。

→点击div则div下一个元素慢慢消失（淡出），再点一次又慢慢显示（淡入）。

$(“div”).toggle(function(){

$(“div”).next().fadeOut();

},function(){

$(“div”).next().fadeIn();

});

 

4.2.3、slideUp()方法和slideDown()方法

·两个方法只会改变元素的高度。如果一个元素的display属性为none，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()正好相反，元素将由下至上缩短隐藏。

→

$(“div”).toggle(function(){

$(“div”).next().slideDown();

},function(){

$(“div”).next().slideUp();

});

 

 

5、jQuery ajax

·serialize()方法。

此方法能够将DOM元素内容序列化为字符串，主要用于ajax请求。不仅仅用于表单的序列化，其他的选择器也可以使用。serialize()方法会自动编码，因此在对于中文问题不必使用encodeURLComponent()方法进行编码。

→$(“#formId”).serialize();

  $(“:checkbox,:radio”).serialize();//将选中的值序列化为字符串。

 

·serializeArray()方法

与serialize()方法类似，只不过将DOM序列化后返回json格式的数据。

 

·$.param()方法

此方法是serialize()方法的核心，用来对一个数组或者对象按照key/value进行序列化。

→var obj={a:1,b:2,c:3};

var k=$.param(obj);

alert(k);//输出“a=1&b=2&c=3”;

 

 

 注意：此文档为本人看书学习笔记，分享出来意在相互交流学习，转载请注明出处。