一:优先选择页面原素
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结构设计价值观 – 阮一峰的网络日志。