jquery中最常用的API有哪些

2025-09-27 05:01:07

jquery中最常用的API有哪些

一、总结

一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法

1、jQuery Object Accessors有哪些方法?

jQuery.index(element),返回该jQuery对象在集合中的索引

jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index, domElement){this};

jQuery.size(),返回jQuery对象集合的大小

jQuery.length,相当于size()方法

jQuery.get(),获取原生DomElement对象的Array

jQuery.get(index),获取原生DomElement对象

jQuery.eq(position),获取jQuery对象集合中的一个jQuery对象

2、Data相关方法有哪些?

jQuery.data(name)jQuery.data(name, value)jQuery.removeData(name)

24、数据缓存方法

该类方法是jQuery.data()方法和jQuery.removeData()的另一种形式,增加的elem参数是DOM Element

$.data(elem, name),取出elem上name的值$.data(elem, name, value),设置elem上name的值为value$.removeData(elem, name),删除elem上的name$.removeData(elem),删除elem上的所有缓存数据

3、如何在jQuery对象集合中进行过滤?

以下几类方法有点像把选择符Filter进行方法化,比如$(“label:eq(4)”),取到第4个

jQuery.is(expr),返回boolean,比如$(this).is(“:first-child”),判断一个元素,是不是其父节点的第一个子节点

jQuery.eq(index),$(“div”).eq(2),取出第2个

元素

jQuery.filter(expr),比如$(“div”).filter(“.middle”),会从div元素中筛选出属于middle的class的元素;再比如$(“p”).filter(“.selected, :first”),会取出是selected类,或者是第一个元素的

元素,这个可以用$(“p.class, p:first”)来代替这个方法,会从初始的结果集中,筛选保留一部分

jQuery.filter(fn),类似于上一个函数,可以传进去一个function,用这个function的返回值,进行筛选function callback(index){// index == position in the jQuery object// this means DOM Elementreturn boolean;}

jQuery.not(expr),是和filter(expr)相反的方法,不是和is(expr)相反的方法。该方法把满足expr的元素给排除掉,比如$(“div”).not(“.green,

#blue”),把class是green或者id是blue的元素过滤掉

jQuery.slice(start, end),从jQuery对象集合中选出一段

4、jquery工具方法有哪些?

$.isArray(obj),检测一个对象是否是数组$.isFunction(obj),检测一个对象是否是函数$.trim(str),去除string的空格$.inArray(value, array),返回value在array中的下标,如果没有找到则返回-1,比如$.inArray(123, ["john",1,123,"f"])将会返回2$.unique(array),去除array中的重复元素,该方法只对DOM Element有效,对string和number无效

二、开发中常用的Jquery的一些方法的总结

下面是在前端开发中经常使用到的一些标签属性,有空的时候就总结了一下:

(1)$(selector).html():方法返回或者设置被选元素的内容,ps:在一定的程度上可以等同于value

分为两种情况:

1)$(selector).html():返回元素的内容,跟value等同

2)$(selector).html("world"):设置被选元素的内容

(2)$(selector).attr():方法设置或者返回被选元素的属性值

分为两种情况:

1)$(selector).attr(attribute):返回被选元素的属性值

example:

返回一张图片的宽度width

$(".img").attr("width");

2)$(selector).attr(attribute,value):设置被选元素的属性值

example:

设置一张图片的宽度为200,原来为100

$(selector).attr("width","200")

(3)$(selector).addClass():向被选元素添加一个或者多个类

这里的类指的是class属性,比如在样式表中定义一个标签的css

.hello{

width:100px;

}

使用的方法为:$(selector).addClass("hello");

(4)eval(String)执行括号内的表达式或者是语句必须为字符串

(5)$(selector).each(function(index,element){})

一般的使用方法是:

$(selector).each(function(key){

alert($(selector)[key]);

})

(6)$(selector).data():方法向被选元素附加数据或者获取数据

1)从被选元素中返回数据:

$(selector).data(name);

2)向元素附加元素:

$(selector).data(name,value);

data里面传的也可以是对象

$(selector).data(Object);

参考:总结一下JQuery的常用API - CSDN博客https://blog.csdn.net/kennsand/article/details/53967994

三、jQuery1.7.1 API的整理和总结

0、总述

jQuery框架提供了很多方法,但大致上可以分为3大类:获取jQuery对象的方法、在jQuery对象间跳转的方法,以及获取jQuery对象后调用的方法

其中第一步是怎样获取jQuery对象。大致来说,是通过最核心的$()方法,将页面上的元素(或者在页面上不存在的html片段)包装成jQuery对象。

$()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+等)、过滤器(包括:过滤器和[]过滤器)。

通过以上3种的组合,“查询”得到想要操作的元素或者元素集合,作为$()的参数,得到jQuery对象(或者jQuery对象的集合)

第二步是在jQuery对象间的跳转。也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么可以通过一系列的跳转方法,比如parent()、next()、children()、find()等,或者过滤筛选的方法,比如eq()、filter()、not()等,来得到最终想要操作的jQuery对象。

用跳转和过滤方式得到的jQuery结果,往往通过比较复杂的表达式组合,可以达到同样的目的。

比如说$(“div”).eq(3),也可以用$(“div:eq(3)”)达到同样的目的。

又比如说$(“div”).find(“span”),可以用$(“div span”)取到同样的元素。

方法是很灵活的,要根据具体的情况来选择。一般来说,HTML页面写得越规范,使用jQuery就越简单

还有一种情况,在得到了jQuery()对象之后,想要判断其是否满足条件,那么可以调用is()、hasClass()等方法,返回一个boolean值,进行后续的判断。这类方法也可以归到这类。

第三步是在获取准确的jQuery对象之后,调用其上的各种方法,来进行操作。这一步反而是比较简单的了。

后面就是对jQuery框架各种方法的简要介绍,更详细的内容,还是以官方API为准

1、$(…)

$() 一切的核心,可以跟4种参数

$(expression),比如$(“#id”)、$(“.class”)等,返回jQuery对象,或者jQuery对象的集合$(html),比如$(“hello world”),返回jQuery对象,或者jQuery对象的集合$(element),比如$(document.body),返回jQuery对象,或者jQuery对象的集合$(*),所有元素

2、jQuery Object Accessors

jQuery.index(element),返回该jQuery对象在集合中的索引

jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index, domElement){this};

jQuery.size(),返回jQuery对象集合的大小

jQuery.length,相当于size()方法

jQuery.get(),获取原生DomElement对象的Array

jQuery.get(index),获取原生DomElement对象

jQuery.eq(position),获取jQuery对象集合中的一个jQuery对象

3、Data相关方法

jQuery.data(name)jQuery.data(name, value)jQuery.removeData(name)

4、选择符

multiple(selector1, selector2),可以选择多个元素或者表达式,包装成jQuery对象的集合例子:$(“div,span”)

id(id)例子:$(“#id”)

class(class)例子:$(“.class”)

element(element)例子:$(“div”)

all例子:$(“*”)

descendant例子:$(“table tr td”)

child(parent, child)例子:$(“#id > span”),和上一个descendant的区别在于,descendant只要是后代就会被选中,而child必须是直接子节点,不包括孙子节点

next(prev, next)例子:$(“label + input”),选中的是label标签的下一个input标签,返回jQuery对象的集合

siblings(prev, siblings)例子:$(“#prev ~ div”),选中的是#prev之后的所有div标签,返回jQuery对象的集合,有点像next,但是范围更大

Basic Filters$(“:header”),选中所有header,包括

等$(“tr:odd”),选中所有奇数行$(“tr:even”),选中所有偶数行$(“:animated”),选中所有当前有特效的元素,$(“div:animated”),选中当前所有有特效的
$(“tr:first”),选中第一行$(“tr:last”),选中最后一行$(“input:not(:checked)”),选中所有没有“checked”的input元素$(“td:gt(4)”),选中所有index是4之后的td$(“td:lt(4)”),选中所有index是4之前的td$(“td:eq(4)”),选中index是4的td,可以用$(“td”).eq(4)来实现同样的效果

Content Filters$(“div:contains(‘John’)”),选中所有包含”John”字符串的div$(“td:empty”),选中所有内容为空的td$(“div:has(p)”),选中包含有

元素的

元素,返回jQuery对象集合$(“td:parent”),选中所有包含子节点的元素,包括文本也可以算是子节点

Visibility Filters$(“span:hidden”),选中所有隐藏的$(“span:visible”),选中所有可见的

Attribute Filters$(“div[id]“),选中包含id属性的

元素$(“input[name$='letter']“),选中包含某个属性的元素,这个属性名是以’letter’结尾的$(“input[name^='letter']“),选中包含某个属性的元素,这个属性名是以’letter’开头的$(“input[name*='man']“),选中包含某个属性的元素,这个属性的属性名里包含’man’$(“input[name='newsletter']“),选中包含一个属性的元素,这个属性的名字是’newsletter’$(“input[name!='newsletter']“),选中所有不包含’newsletter’属性的元素$(“input[id][name$='man']“),选中包含id属性,和以’man’结尾属性的元素

Child Filters$(“ul li:nth-child(2)”),选中自身是

    元素的第二个子节点的
  • 元素,注意这个计算是从1开始的,不是从0开始$(“div span:firstChild”),选中自身是
    元素的第一个子节点的元素$(“div span:lastChild”),选中自身是
    元素的最后一个子节点的元素$(“div span:onlyChild”),选中自身是
    元素的唯一子节点的元素

    Forms$(“:button”),所有

最新发表
友情链接