《jQuery的基本用法》

2022-11-30 0 1,060

一:优先选择页面原素

jQuery的基本上结构设计价值观和主要就用语,是”优先选择某一页面原素,接着对其展开这种操作方式”。

采用jQuery的第二步,常常是将两个优先选择函数,放入缺省jQuery()(缩写为$),接着获得被选上的原素。

$(document) //优先选择整座文件格式第一类 $(#myId) //优先选择ID为myId的页面原素 $(div.myClass) // 优先选择class为myClass的div原素 $(input[name=first]) // 优先选择name特性等同于first的input原素 $(a:first) //优先选择页面中第二个a原素 $(tr:odd) //优先选择表单的偶数行 $(#myForm :input) // 优先选择配置文件中的input原素 $(div:visible) //优先选择由此可见的div原素 $(div:gt(2)) // 优先选择大部份的div原素,除前四个 $(div:animated) // 优先选择现阶段处在动画电影状况的div原素

二:发生改变结论集

jQuery能提供更多各式各样强悍的冷却系统,对结论集展开甄选,增大优先选择结论,还能在DOM树下终端。

$(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原素 $(div).next(p); //优先选择div原素前面的第二个p原素 $(div).parent(); //优先选择div原素的父原素 $(div).closest(form); //优先选择离div前段时间的这个form父原素 $(div).children(); //优先选择div的大部份子原素 $(div).siblings(); //优先选择div的同价位原素 $(div).prev(); //优先选择div的前两个同价位原素

三:拉艾操作方式

jQuery最后选上页面原素后,能对它展开一连串操作方式,并将全数操作方式相连在一同,以链的方式写出。

基本原理是每一步的jQuery操作方式,回到的都是两个jQuery第一类,因此相同操作方式能相相连。

$(div).find(h3).eq(2).html(Hello); $(div) //找到div原素    .find(h3) //优先选择其中的h3原素    .eq(2) //优先选择第3个h3原素    .html(Hello); //将它的内容改为Hello .end() //退回到选上大部份的h3原素的那一步

四:原素能取值和赋值

jQuery能采用同两个函数,来完成取值(getter)和赋值(setter),到底是取值还是赋值,由函数的参数决定。

$(h1).html(); //html()没有参数,表示取出h1的值 $(h1).html(Hello); //html()有参数Hello,表示对h1展开赋值

常见取值和赋值的函数:

.html() 取出或设置html内容   .text() 取出或设置text内容   .attr() 取出或设置某一特性的值   .width() 取出或设置某一原素的宽度   .height() 取出或设置某一原素的高度   .val() 取出某一配置文件原素的值

注意:结论集包涵多个元素时,赋值将对其中大部份的原素赋值;取值则是只取出第二个原素的值(.text()例外,它取出大部份原素的text内容)。

五:原素终端

jQuery能通过直接终端目标原素或者终端其他原素,使得目标原素达到我们想要的位置。

假定我们选上了两个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的缺省就行了:

$(<p>Hello</p>);   $(<li class=”new”>new list item</li>);   $(ul).append(<li>list item</li>);

七:修改原素的特性

素特性,attr是attribute(特性)的缩写,是js中setAttribute()和getAttribute()的简化。

$(selector).attr(attribute) //回到被选原素的特性值。 $(selector).attr(attribute,value) //设置被选原素的特性和值。 $(selector).attr(attribute,function(index,oldvalue)) //用函数回到值设置被选原素的特性和值。 $(selector).attr({attribute:value, attribute:value …}) //为被选两个以上的原素设置特性和值。

八:常用的工具方法

$.trim() 去除字符串两端的空格。 $.each() 遍历两个数组或第一类。 $.inArray() 回到两个值在数组中的索引位置。如果该值不在数组中,则回到-1。 $.grep() 回到数组中符合这种标准的原素。 $.extend() 将多个第一类,合并到第二个第一类。 $.makeArray() 将第一类转化为数组。 $.type() 判断第一类的类别(函数第一类、日期第一类、数组第一类、正则第一类等等)。 $.isArray() 判断某一参数是否为数组。 $.isEmptyObject() 判断某一第一类是否为空(不含有任何特性)。 $.isFunction() 判断某一参数是否为函数。 $.isPlainObject() 判断某一参数是否为用”{}”或”new Object”建立的第一类。 $.support() 判断浏览器是否支持某一特性。

本文借鉴了jQuery结构设计价值观 – 阮一峰的网络日志。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务