JQuery快速入门

Write less, do more, I like jQuery.

公司主营业务:成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出浦城免费做网站回馈大家。

JQuery快速入门

 

JQuery快速入门

jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。其是由John Resig于2006创建的开源项目,极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、开发Ajax等操作,最有特色的形式是$(document).ready(function() {});其省略形式为:$(function() {});。

在使用jQuery时,需要注意jQuery对象和DOM对象的区别,通常对于jQuery对象,会在变量前加$,如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。

jQuery对象转化为DOM对象: var $cr = $('#cr');var cr = $cr[0];

DOM对象转化为jQuery对象: var cr = document.getElementById('cr');var $cr = $(cr);

此外,在使用多个不同的javascript库时,有可能会出现库之间的冲突,可以通过如下方式解决。

JQuery快速入门

jQuery.noConflict();
jQuery(function() {
jQuery('p').click(function() {
alert(jQuery(this).text());});});//推荐下面的方式var $j = jQuery.noConflict();
$j(function() {});

JQuery快速入门

 

JQuery快速入门

在介绍jQuery选择器之前,首先引入CSS选择器,如下表所示。

选择器类型示例
标签选择器td{}
ID选择器#note{}
类选择器div.classname{}
群组选择器其实就是选择器的组合 td,p,div,a{}
后代选择器#links a{}
通配选择器*{}
其他选择器伪类选择器、子选择器、临近选择器和属性选择器

那么相应的jQuery也会提供对应的选择器,并增加部分自定义的选择器用于方便操作,主要包括基本选择器、层次选择器、过滤选择器、表单选择器等4类选择器。

jQuery选择器示例
基本选择器
#id, .class, element最基本的id,类,元素选择器
*匹配所有元素, $("*")
selector1,selector2,…将每一个选择器匹配到元素合并后一起返回
层次选择器
$("ancestor descendant")$('div span')选取
里所有的元素
$("parent>child")$('div>span')选取
元素下的子元素
$("prev+next")$('.one+div')选取class为one的下一个
元素
$("prev~siblings")$('#two~div')选取id为two的元素后面所有
兄弟元素
过滤选择器
:first, :last选择第一个/最后一个元素
:not(selector)去除所有与给定选择器匹配的元素
:even, :odd选取索引为偶数/奇数所有的元素,初始索引为0开始
:eq(index),gt(index),:lt(index)选取索引等于/大于/小于index的元素
:header选取所有标题元素
:animated选取当前正在执行动画的元素
:contains(text)选取含有文本内容的为text的元素
:empty选取不包含子元素或者文本的空元素
:has(selector)选取含有选择器所匹配元素的元素
:parent选取含有子元素或者文本的元素
表单选择器
:input获取所有,