来自 澳门金莎娱乐手机版 2019-09-11 14:01 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

使用简明教程

一、接纳网页成分 jQuery的大旨陈设和要害用法,正是"选取有个别网页成分,然后对其进展某种操作"。这是它有别于于别的函数库的有史以来特征。
利用jQuery的率先步,往往就是将二个抉择表达式,放进构造函数jQuery()(简写为$),然后拿走被入选的要素。

分选表明式能够是CSS采用器:

复制代码 代码如下:

$(document)//选拔一切文书档案对象
$('#myId')//选拔ID为myId的网页成分 
$('div.myClass')//选择class为myClass的div元素   
$('input[name=first]')//选拔name属性等于first的input成分

也能够是jQuery特有的表达式:

复制代码 代码如下:

$('a:first')//接纳网页中第一个a成分 
$('tr:odd')//采纳表格的奇数行 
$('#myForm :input')//选取表单中的input成分 
$('div:visible') //选取可知的div成分 
$('div:gt(2)')//选拔具备的div成分,除了前多个 
$('div:animated')//采用当前处于动画状态的div成分 

二、改动结果集 假如选中八个因素,jQuery提供过滤器,能够减弱结果集:

复制代码 代码如下:

$('div').has('p'); //接纳满含p元素的div成分 
$('div').not('.myClass'); //选择class不等于myClass的div元素 
$('div').filter('.myClass'); //选择class等于myClass的div元素 
$('div').first(); //选择第1个div元素 
$('div').eq(5); //选择第6个div元素

有一点时候,大家必要从结果集出发,移动到相近的相关要素,jQuery也提供了在DOM树上的运动方法:

复制代码 代码如下:

$('div').next('p'); //接纳div成分前边的率先个p成分 
$('div').parent(); //选择div成分的父成分 
$('div').closest('form'); //选拔离div近日的不胜form父成分 
$('div').children(); //采用div的享有子成分 
$('div').siblings(); //选取div的同级成分

三、链式操作 当选网页成分之后,就足以对它进行某种操作。
jQuery允许将装有操作连接在协同,以链条的方式写出来,比方:

复制代码 代码如下:

$('div').find('h3').eq(2).html('Hello');

大家能够如此拆封开来,正是上面那样:

复制代码 代码如下:

$('div')//找到div元素 
.find('h3')//采用之中的h3成分 
.eq(2)//选择第3个h3元素 
.html('Hello'); //将它的剧情改为Hello 

那是jQuery最让人有加无己、最利于的特点。它的规律在于每一步的jQuery操作,重回的都以叁个jQuery对象,所以差异操作能够连在一齐。

jQuery还提供了 .end() 方法,使得结果集能够倒退一步:

复制代码 代码如下:

$('div') 
.find('h3') 
.eq(2) 
.html('Hello') 
.end()//退回到选中全体的h3成分的那一步 
.eq(0)//选中率先个h3成分 
.html('World'); //将它的内容改为World 

四、成分的操作:取值和赋值 操作网页成分,最布满的须要是取得它们的值,或许对它们进行赋值。
jQuery使用同三个函数,来成功取值 (getter) 和赋值 (setter)。 到底是取值依然赋值,由函数的参数决定。
$('h1').html(); //html()未有参数,表示抽取h1的值 $('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值 
常见的取值和赋值函数如下:

复制代码 代码如下:

.html() 抽取或安装html内容
.text() 收取或设置text内容 
.attr() 抽取或设置有个别属性的值 
.width() 抽出或安装有些成分的上升的幅度 
.height() 收取或安装某些成分的万丈 
.val() 收取某些表单成分的值

需求细心的是,要是结果集带有多少个因素,那么赋值的时候,将对内部具备的要素赋值;取值的时候,则是只收取第二个成分的值(.text()例外,它抽取全数因素的text内容)。
五、成分的操作:移动 假定要活动选中的要素,有两种方法:一种是平昔移动该因素,另一种是活动其余因素,使得目的成分到达大家想要的岗位。

一旦大家选中了一个div元素,需求把它移动到p成分后边。

率先种办法是应用 .insertAfter() ,把div成分移动p元素前面:

复制代码 代码如下:

$('div').insertAfter('p');

第三种艺术是使用 .after() ,把p成分加到div成分后边:

复制代码 代码如下:

$('p').after('div');

外部上看,那二种艺术的效能是一样的,独一的例外就像是只是操作思想的区别。不过其实,它们有一个第一差别,那正是回来的因素不平等。第一种艺术重回div成分,第三种格局重回p成分。你能够依赖须求,选择到底使用哪一类方法。

运用这种情势的操作方法,一共有四对

复制代码 代码如下:

.insertAfter()和.after():在现成成分的表面,在此在此以前面插入元素 
.insertBefore()和.before():在现有成分的表面,在此从前方插入成分 
.appendTo()和.append():在现成元素的中间,从前面插入元素 
.prependTo()和.prepend():在现成成分的中间,从日前插入元素

六、成分的操作:复制、删除和开创

复制作而成分接纳 .clone()。
除去成分采纳 .remove()和.detach()。 两个的分别在于,后者不保留被删去成分的风云,前面一个保留,有助于重新插入文书档案时利用。

清空成分内容(不过不删除该因素)使用 .empty()。

创办新因素的艺术特别简单,只要把新因素直接传入jQuery的构造函数就行了:

复制代码 代码如下:

$('
Hello

'); 
$('
new list item
'); 
$('ul').append('
list item
');

七、工具方法 除此而外对中选的要素进行操作以外,jQuery还提供部分工具方法(utility),不必选凉月素,就足以一贯运用。
假定你通晓Javascript语言的持续原理,那么就能够领略工具方法的本质。它是概念在jQuery构造函数上的秘诀,即 jQuery.method(), 所以能够一向利用。而那叁个操作成分的措施,是概念在构造函数的prototype对象上的艺术,即 jQuery.prototype.method(), 所以必需转变实例(即选中元素)后使用。假若不驾驭这种不同,难点也非常的小,只要把工具方法知情成,是像javascript原生函数那样,能够一贯利用的法子就行了。

常用的工具方法有以下二种:

复制代码 代码如下:

$.trim() 去除字符串两端的空格。 
$.each() 遍历三个数组或对象。 
$.inArray() 再次来到二个值在数组中的索引地点。假设该值不在数组中,则赶回-1。 
$.grep() 再次来到数组中符合某种规范的因素。  
$.extend() 将八个指标,合併到第多个对象。  
$.makeArray() 将对象转化为数组。 
$.type() 判别目的的项目(函数对象、日期对象、数组对象、正则对象等等)。 
$.isArray() 判定有个别参数是还是不是为数组。 
$.isEmptyObject() 推断有些对象是还是不是为空(不带有别的性质)。 
$.isFunction() 判定有个别参数是还是不是为函数。 
$.isPlainObject() 判定有个别参数是不是为用"{}"或"new Object"建设构造的靶子。 
$.support() 判定浏览器是不是援助某些特性。

八、事件操作 jQuery能够对网页成分绑定事件。根据分化的风云,运转相应的函数。

复制代码 代码如下:

$('p').click(function(){ 
    alert('Hello'); 
});

脚下,jQuery首要支撑以下事件:

复制代码 代码如下:

.blur() 表单成分失去主题。 
.change() 表单成分的值发生变化 
.click() 鼠标单击 
.dblclick() 鼠标双击 
.focus() 表单成分别得到得主旨 
.focusin() 子成分得到主题 
.focusout() 子成分失去主旨 
.hover() 同一时候为mouseenter和mouseleave事件钦赐管理函数 
.keydown() 按下键盘(长日子开关,只回去叁个平地风波) 
.keypress() 按下键盘(长日子开关,将回到多少个事件) 
.keyup() 松手键盘 
.load() 成分加载实现 
.mousedown() 按下鼠标 
.mouseenter() 鼠标步入(步向子成分不接触) 
.mouseleave() 鼠标离开(离开子元素不接触) 
.mousemove() 鼠标在要素内部移动 
.mouseout() 鼠标离开(离开子成分也触及) 
.mouseover() 鼠标踏向(踏入子成分也触及) 
.mouseup() 放手鼠标 
.ready() DOM加载成功 
.resize() 浏览器窗口的大小产生改换 
.scroll() 滚动条的职位发生变化 
.select() 客户选中文本框中的内容 
.submit() 顾客递交表单 
.toggle() 依据鼠标点击的次数,依次运维多个函数 
.unload()  顾客距离页面

上述这一个事件在jQuery内部,都是 .bind() 的地利措施。使用 .bind() 能够更加灵敏地调节事件,举例为多少个事件绑定同三个函数:

复制代码 代码如下:

$('input').bind('click change', //同不经常候绑定click和change事件 
    function(){ 
        alert('Hello'); 
    } 
);

若果你只想让事件运转一回,那时能够应用 .one() 方法。

复制代码 代码如下:

$("p").one("click", function(){ 
alert("Hello"); //只运转一遍,现在的点击不会运作 
});

.unbind() 用来扫除事件绑定。

复制代码 代码如下:

$('p').unbind('click');

抱有的事件管理函数,都得以承受二个平地风波目的 (event object) 作为参数,比方下边例子中的e:

复制代码 代码如下:

$("p").click(function(e){ 
alert(e.type); //"click" 
});

其一事件目的有部分很有用的习性和章程:

复制代码 代码如下:

event.pageX 事件爆发时,鼠标距离网页左上角的水准距离
event.pageY 事件发生时,鼠标距离网页左上角的垂直距离
event.type 事件的体系(例如click)
event.which 按下了哪四个键
event.data 在事变目的上绑定数据,然后传入事件管理函数
event.target 事件针对的网页成分
event.preventDefault() 阻止事件的暗中同意行为(举个例子点击链接,会自行展开新页面)
event.stopPropagation() 停止事件向上层成分冒泡

在事件管理函数中,能够用this关键字,重返事件针对的DOM成分:

复制代码 代码如下:

$('a').click(function(){ 
if ($(this).attr('href').match('evil')){//假使承认为有毒链接 
e.preventDefault(); //阻止张开 
$(this).addClass('evil'); //加上表示有剧毒的class 

});

有三种方法,能够自行触发三个事变。一种是一贯运用事件函数,另一种是采纳.trigger()或.triggerHandler()。

复制代码 代码如下:

$('a').click();
$('a').trigger('click');

九、特殊效果 jQuery允许对象展现某个特殊效果。

$('h1').show(); //表现二个h1标题
常用的特殊效果如下:

复制代码 代码如下:

.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调节发光度
.hide() 遮盖成分
.show() 凸显成分
.slideDown() 向下开展
.slideUp() 向上卷起
.slideToggle() 依次张开或卷起有些成分
.toggle() 依次呈现或隐匿有些成分

除去 .show()和.hide(), 全体另外特效的暗中认可实施时间都以400ms(皮秒),可是你能够转移那几个设置。

复制代码 代码如下:

$('h1').fadeIn(300); // 300纳秒内淡入 
$('h1').fadeOut('slow'); //缓慢地淡出

在特效截止后,能够内定实施有些函数。

复制代码 代码如下:

$('p').fadeOut(300, function(){$(this).remove(); });

更复杂的特效,可以用 .animate() 自定义。

复制代码 代码如下:

$('div').animate( 

left : "+=50",//不断右移 
opacity : 0.2//钦定发光度 
},
300,// 持续时间 
function(){ alert('done!'); }//回调函数 
);

.stop()和.delay()用来终止或推迟特效的奉行。
$.fx.off借使设置为true,则关闭全部网页特效。

您只怕感兴趣的文章:

  • 比较简单的jquery教程 Easy Ajax with jQuery 普通话版全集
  • jquery教程限制文本框只可以输入数字和小数点示例分享
  • jquery教程ajax要求json数据示例

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:使用简明教程

关键词: