Maison > interface Web > js tutoriel > Analyse détaillée des fonctions et attributs couramment utilisés dans jquery_jquery

Analyse détaillée des fonctions et attributs couramment utilisés dans jquery_jquery

WBOY
Libérer: 2016-05-16 16:56:26
original
890 Les gens l'ont consulté

Dom :
Attribut : attribut
$("p").addClass (type de style défini en css); ajouter du style à un élément
$("img").attr({ src: "test.jpg",title:"test Image"}); Ajouter des attributs/valeurs à un élément. Le paramètre est map
$("input").attr({"checked", "checked"}) );
$("img").attr("title", function() { return this.src }); Ajouter des attributs/valeurs à un élément
$("Element Name").html ( ); Récupère le contenu (élément, texte, etc.) dans l'élément
$("element name").html("new stuff"); 🎜>$ ("Element Name").removeAttr("Attribute Name") Supprime l'attribut spécifié et la valeur de l'attribut d'un élément
$("Element Name").removeClass("class") Supprime le spécifié style à partir d'un élément
$("Element Name").text(); Récupère le texte de l'élément
$("Element Name").text(value);
$(" Nom de l'élément").toggleClass(class) Annuler lorsque l'élément existe dans le style dans le paramètre. S'il n'existe pas, définissez ce style
$("nom de l'élément d'entrée").val( ); Obtenir la valeur de l'élément d'entrée
$("input element name").val(value); Définir la valeur de l'élément d'entrée sur value

Manipulation :

$("Element Name").after(content); Ajouter du contenu après l'élément correspondant
$("Element Name").append(content); Insérer du contenu comme contenu du element Aller à l'arrière de l'élément
$("element name").appendTo(content); ajouter l'élément
$("element name").before(content); "Nom de l'élément").clone(Expression booléenne) Lorsque l'expression booléenne est vraie, clonez l'élément (sans paramètres, il est traité comme vrai)
$("Nom de l'élément").empty() Copiez l'élément Le contenu est défini sur vide
$("Element Name").insertAfter(content); Insérer l'élément après le contenu
$("Element Name").insertBefore(content); Insérer l'élément dans le contenu Avant
$("Element").prepend(content); Utiliser le contenu comme partie de l'élément et le placer au début de l'élément
$("Element").prependTo(content); contenu, placez-le au début du contenu
$("Element").remove(); Supprime tous les éléments spécifiés
$("Element").remove("exp"); Element
$("Element").wrap("html"); Utiliser du HTML pour entourer l'élément
$("Element").wrap(element); Utiliser l'élément pour entourer l'élément

Traversing :

add(expr) ajoute un nouvel ensemble d'éléments correspondants 'expr' à l'ensemble d'éléments correspondants actuel pour former un nouvel ensemble d'éléments correspondants ;


Exemple :


$(document) .ready( function(){
$("div").css("border", "2px solid red")
.add("p")//L'élément P dans le document aura un couleur d'arrière-plan du style CSS jaune ;
.css("background", "jaune");


children(expr) obtient l'ensemble de sous-ensembles de premier niveau de chaque élément à partir de l'ensemble d'éléments correspondant actuel pour former un nouvel ensemble d'éléments
contains(str) correspond à l'ensemble d'éléments contenant la variable text str dans l'ensemble et renvoie l'élément correspondant Collection
end() est utilisé pour revenir à l'objet jQuery avant d'appeler la fonction find() ou parents() (ou autre fonction de parcours)

Exemple
$("#div1").find("p").hide().end().hide()
Le premier hide() est pour la balise p puis utilisez end () termine la référence à la balise p et renvoie à la balise #div1
Donc le deuxième hide() fonctionne pour #div1
Si end() n'est pas ajouté, les deux hide() fonctionneront pour p Les balises fonctionnent

filter(expression)
find(expr)
La différence entre filter et find :
filter sélectionnera parmi un ensemble d'éléments sélectionnés
find sélectionnera parmi un ensemble d'éléments sélectionnés Sélectionner ; ;




Test 2




Si on utilise la méthode find() :
var $find = $("div").find( ".rain");
alert( $find.html() ) ;
affichera : Test 1
Si vous utilisez la méthode filter() :
var $filter = $("div") .filter(".rain");
alert( $filter.html() );
Affichera : Test 2

La différence est la suivante :

find() recherchera les éléments avec la classe rain dans l'élément div.
Et filter() filtre les éléments dont la classe est rain en div.
L'une consiste à opérer sur son sous-ensemble et l'autre à filtrer les éléments de sa propre collection.

is(expr)//Détermine si l'ensemble existant fait partie de l'ensemble 'expr' ou égal. Si oui, renvoie vrai, sinon renvoie faux

next(expr)//Obtenir un ensemble contenant les éléments frères immédiatement suivants de chaque élément dans l'ensemble d'éléments correspondant.

not(el)//Il n'y a aucun élément dans l'ensemble correspondant qui répond aux exigences de filtrage

Exemple :

$("div").not(".green, #blueone")
$("input:not(:checked) span")
$('tr:not ([th]):impair')

parent(expr) obtient un ensemble d'éléments qui contient l'élément parent unique de tous les éléments correspondants

parents(expr)//Obtient un ensemble de tous les éléments ancêtres de chaque élément dans l'ensemble d'éléments correspondant
prev (expr) obtient l'ensemble des éléments frères et sœurs immédiatement précédents de chaque élément dans l'ensemble d'éléments correspondant
siblings(expr) obtient l'ensemble de tous les éléments frères et sœurs de chaque élément dans l'ensemble d'éléments correspondant

Core :

$(html).appendTo("body") équivaut à écrire un bout de code html dans le corps
$(elems) pour récupérer un élément sur le DOM
$( function( ){……..}); Exécuter une fonction
$("div > p").css("border", "1px solid gray"); Trouver les nœuds enfants p de tous les divs et ajouter styles
$("input:radio", document.forms[0]) Rechercher tous les boutons radio dans le premier formulaire de la page actuelle
jQuery propose deux méthodes pour développer des plug-ins, à savoir :
jQuery .extend(object) étend la classe jQuery elle-même. Ajoute de nouvelles méthodes à la classe.

Exemple

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a >


$.min(3,4); //return 3
jQuery.fn.extend(object) ajoute des méthodes à l'objet jQuery, qui est une extension de jQuery.prototype

Exemple


Copier le code


Le code est le suivant :


$.fn <                               } 
});
Exemple : 1




Copier le code


Le code est le suivant :


$(" span") .click(function){

$("li").each(function(){

$(this).toggleClass("example");

});

} );


Exemple : 2

Copier le code Le code est le suivant :

$(" bouton") .click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor ", " jaune ");
if ($(this).is("#stop")) {
$("span").text("Arrêté à l'index div #" index);
return false ;
}
});
});

Événement jQuery : événement

ready(fn); $(document).ready() Notez qu'il n'y a pas d'événement onload dans le corps, sinon la fonction ne peut pas être exécutée. Dans chaque page, de nombreuses fonctions peuvent être chargées et exécutées, et elles sont exécutées dans l'ordre fn.

Exemple :
$(document).ready(function(){alert("aa");}

bind( type, [data], fn ) lie une ou plusieurs fonctions de gestionnaire d'événements à un événement spécifique (comme un clic) de chaque élément correspondant. Les attributs de type d'événement possibles sont : flou, focus, chargement, redimensionnement, défilement, déchargement, clic, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error

Exemple 1 :
$('#myBtn').bind("click",function(){ 
alert('click');
});

Exemple 2 :
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, gestionnaire)

one( type, [data], fn ) lie une ou plusieurs fonctions de gestionnaire d'événements à un événement spécifique (comme un clic) de chaque élément correspondant. Ce gestionnaire d'événements n'est exécuté qu'une seule fois sur chaque objet. Les autres règles sont les mêmes que pour la fonction bind().
type(String) : type d'événement.
data(Object) : (facultatif) Objet de données supplémentaire transmis à l'objet événement en tant que valeur de la propriété event.data.
fn(Function) : La fonction de gestionnaire liée à l'événement de chaque élément correspondant.

trigger(type, [data]) déclenche un certain type d'événement sur chaque élément correspondant.
$("p").click( function (event, a, b) {
// Dans un événement de clic normal, a et b sont des types indéfinis
// Si déclenché avec l'instruction suivante , puis a pointe vers "foo" et b pointe vers "bar"
} .trigger("click", ["foo", "bar"]); toggle( fn, fn ) si un élément correspondant est cliqué, la première fonction spécifiée est déclenchée, et lorsque vous cliquez à nouveau sur le même élément, la deuxième fonction spécifiée est déclenchée.
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);

Exemple :
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 ' ' message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) Cette méthode spécifique déclenchera un événement spécifique (spécifié Un type d'événement) , tout en annulant l'action par défaut du navigateur pour cet événement
unbind( [type], [data] ) Dissocier, supprime l'événement lié de chaque élément correspondant.
$("p").unbind() supprime tous les événements liés sur tous les paragraphes
$("p").unbind( "click" ) supprime les événements de clic sur tous les paragraphes

Exemple :

Copier le codeLe code est le suivant :

var foo = function () {
// Code pour gérer un événement
};
$("p").bind("click", foo); // ... la fonction foo sera déclenchée lors d'un paragraphe est cliqué
$("p").unbind("click", foo); // ... ne sera plus jamais déclenché foo

hover(over, out) over et out sont des méthodes. Lorsque la souris passe sur un élément correspondant, la première fonction spécifiée sera déclenchée. Lorsque la souris quitte cet élément, la deuxième fonction spécifiée sera déclenchée.
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);


元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述,支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
if($("#in").val()=='关键字'){
$("#in").val("")};
}).blur(function(){
if($("#in").val()==''){
$("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

  • Request Complete.
  • ");
    });
    ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxError(function(request, settings){
    $(this).append("
  • Error requesting page " + settings.url + "
  • ");
    });
    ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxSend(function(evt, request, settings){
    $(this).append("+ "});

    ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
    当AJAX请求开始(并还没有激活时)显示loading信息
    $("#loading").ajaxStart(function(){
    $(this).show();
    });

    ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
    当所有AJAX请求都停止时,隐藏loading信息。
    $("#loading").ajaxStop(function(){
    $(this).hide();
    });

    ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
    当AJAX请求成功完成时,显示信息。
    $("#msg").ajaxSuccess(function(evt, request, settings){
    $(this).append("

  • Successful Request!
  • ");
    });

    jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
    设置默认的全局AJAX请求选项。
    $.ajaxSetup({
    url: "/xmlhttp/",
    global: false,
    type: "POST"
    });
    $.ajax({ data: myData });

    serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
    function showValues() {
    var str = $("form").serialize();
    $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

    serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
    从form中取得一组值,显示出来
    function showValues() {
    var fields = $(":input").serializeArray();
    alert(fields);
    $("#results").empty();
    jQuery.each(fields, function(i, field){
    $("#results").append(field.value + " ");
    });
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

    JQuery Effects 方法说明

    show( ) 显示隐藏的匹配元素。
    show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
    hide( ) 隐藏所有的匹配元素。
    hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
    toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
    切换为可见的。
    slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
    "滑动"的方式显示出来。
    slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来。
    slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示。
    fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
    queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
    queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
    queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
    dequeue( ) 执行并移除动画序列前端的动画
    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
    animate( params, options ) 创建自定义动画的另一个方法。作用同上。


    JQuery Traversing 方法说明

    eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
    filter( expr ) 返回与指定表达式匹配的元素集合,可以使用","号分割多个expr,用于实现多个条件筛选.
    ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
    is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
    表达式就返回true。
    map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
    not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
    slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
    add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
    children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
    contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素
    find( expr ) 搜索所有与指定表达式匹配的元素。
    next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
    nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
    parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
    parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
    prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
    prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
    siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
    andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
    添加background类属性
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");
    end( ) 结束当前的操作,回到当前操作的前一个操作
    找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
    $("p").find("span").end().css("border", "2px red solid");

    JQuery Selectors选择器方法说明

    基本选择器
    $("#myDiv") 匹配唯一的具有此id值的元素
    $("div") 匹配指定名称的所有元素
    $(".myClass") 匹配具有此class样式值的所有元素
    $("*") 匹配所有元素
    $("div,span,p.myClass") 联合所有匹配的选择器

    层叠选择器
    $("form input") 后代选择器,选择ancestor的所有子孙节点
    $("#main > *") 子选择器,选择parent的所有子节点
    $("label + input") 临选择器,选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

    $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    基本过滤选择器
    $("tr:first") 匹配第一个选择的元素
    $("tr:last") 匹配最后一个选择的元素
    $("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
    $("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
    $("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
    $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
    $("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
    $("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
    $(":header") 匹配所有标题
    $("div:animated") 匹配所有正在运行动画的所有元素

    内容过滤选择器
    $("div:contains('John')") 匹配含有指定文本的所有元素
    $("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
    $("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
    $("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
    $("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域
    $("div:visible") 匹配所有可见的元素

    Sélecteur de filtre d'attribut
    $("div[id]") correspond à tous les éléments avec l'attribut spécifié
    $("input[name='newsletter']") correspond à tous les éléments avec la valeur d'attribut spécifiée
    🎜>$("input[name!='newsletter']") correspond à tous les éléments qui n'ont pas la valeur d'attribut spécifiée
    $("input[name^='news']") correspond à tous les éléments avec la valeur d'attribut spécifiée valeur d'attribut se terminant par value Les éléments commençant par
    $("input[name$='letter']") correspondent à toutes les valeurs d'attribut spécifiées. Les éléments se terminant par value
    $("input[name*='man'] ") correspondent à tous les éléments spécifiés. Les éléments dont les valeurs d'attribut contiennent des caractères de valeur
    $("input[id][name$='man']") correspondent à tous les éléments qui correspondent à plusieurs sélecteurs en même temps

    Sélecteur de filtre d'élément enfant
    $("ul li:nth-child(2)"),
    $("ul li:nth-child(odd)"), correspond au nième élément du parent element Élément enfant
    $("ul li:nth-child(3n 1)")

    $("div span:first-child") correspond au premier élément enfant de l'élément parent
    $("div span:last-child") correspond au dernier élément enfant de l'élément parent
    $ (" div button:only-child") correspond au seul élément enfant

    de l'élément parent

    Sélecteur d'élément de formulaire
    $(":input") correspond à tous les éléments de saisie du formulaire, y compris tous les types d'entrée, zone de texte, sélection et bouton
    $(":text") correspond à tous les types de texte L'entrée l'élément
    $(":password") correspond à tous les éléments d'entrée de type password
    $(":radio") correspond à tous les éléments d'entrée de type radio
    $(":checkbox") correspond à tous les éléments d'entrée de tapez la case à cocher
    $(":submit") correspond à tous les éléments d'entrée de type submit
    $(":image") correspond à tous les éléments d'entrée de type image
    $(": reset") correspond à tous les éléments d'entrée de type reset
    $(":button") correspond à tous les éléments d'entrée de type bouton
    $(":file") correspond à tous les éléments d'entrée de type file
    $(":hidden") correspond à toutes les entrées éléments de type cachés ou champs cachés du formulaire

    Sélecteur de filtre d'élément de formulaire
    $(":enabled") correspond à tous les éléments de formulaire utilisables
    $(":disabled") correspond à tous les éléments de formulaire inutilisables
    $(":checked ") correspond à tous les éléments sélectionnés elements
    $("select option:selected") correspond à tous les éléments sélectionnés

    Description de la méthode CSS JQuery

    css( name ) accède à l'attribut style du premier élément correspondant.
    css( Properties ) Définit un objet "paire nom/valeur" comme propriété de style de tous les éléments correspondants.
    $("p").hover(function () {
    $(this).css({ backgroundColor:"jaune", fontWeight:"bolder" });
    }, function () {
    var cssObj = {
    backgroundColor : "#ddd",
    fontWeight : "",
    color : "rgb(0,40,244)"
    }
    $(this). css(cssObj);
    });
    css( name, value ) Définit la valeur d'un attribut de style sur tous les éléments correspondants.
    offset( ) obtient la position du premier élément correspondant par rapport à la fenêtre visuelle actuelle. L'objet renvoyé a deux attributs,
    top et left, et les valeurs d'attribut sont des entiers. Cette fonction ne peut être utilisée que sur les éléments visibles.
    var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " offset.left ", top: " offset.top ) ;
    width() obtient la valeur de largeur du premier élément correspondant actuel, et
    width( val ) définit la valeur de largeur spécifiée pour chaque élément correspondant.
    height( ) obtient la valeur de hauteur du premier élément correspondant actuel, et
    height( val ) définit la valeur de hauteur spécifiée pour chaque élément correspondant.

    Description de la méthode JQuery Utilities
    jQuery.browser
    .msie signifie ie
    jQuery.browser.version lit les informations de version du navigateur de l'utilisateur
    jQuery.boxModel détecte la version du navigateur de l'utilisateur pour la page actuelle Indique si elle est basée sur le modèle de boîte CSS du W3C
    jQuery.isFunction( obj ) Vérifie si le paramètre passé est une fonction
    function stub() { }
    var objs = [
    function () {},
    { x:15, y:20 },
    null,
    stub,
    "function"
    ];
    jQuery.each(objs, function ( i) {
    var isFunc = jQuery.isFunction(objs[i]);
    $("span:eq( " i ")").text(isFunc);
    });
    jQuery.trim( str ) Supprime les espaces aux deux extrémités d'une chaîne. Utilisez des expressions régulières pour supprimer les espaces aux deux extrémités d'un caractère donné
    jQuery.each( object, callback ) Un itérateur général qui peut être utilisé pour parcourir de manière transparente objets et tableaux
    jQuery. extend(target, object1, [objectN]) étend un objet, modifie l'objet d'origine et le renvoie Il s'agit d'un outil puissant d'héritage. Cet héritage est implémenté en passant par valeur au lieu du prototype. en méthode de chaîne JavaScript.
    Fusionner les objets paramètres et options et renvoyer l'objet paramètres modifiés
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: " bar" };
    jQuery.extend(paramètres, options);

    Fusionnez les objets par défaut et options, et l'objet par défaut n'a pas été modifié. La valeur de l'objet options est passée à vide au lieu de la valeur de l'objet par défaut.

    Copier le code Le code est le suivant :

    var vide = {}
    var defaults = { validate : false, limit : 5, name : "foo" };
    var options = { validate : true, name : "bar" };
    var settings = $.extend(vide, valeurs par défaut, options);
    jQuery.grep( array, callback, [invert] ) supprime les éléments du tableau via une fonction de filtre
    $.grep( [0,1,2], function(n,i){
    retourner n > 0;
    });

    jQuery.makeArray( obj ) Convertit un objet de type tableau en un tableau réel
    Convertit la collection d'éléments div sélectionnée en un tableau
    var arr = jQuery.makeArray(document.getElementsByTagName("div ")) ;
    arr.reverse(); // utiliser une méthode Array sur la liste des éléments dom
    $(arr).appendTo(document.body);
    jQuery.map( array, callback ) Utiliser une méthode pour modifier un élément dans un tableau, puis renvoyer un nouveau tableau
    jQuery.inArray( value, array) Renvoie la position de la valeur dans le tableau, si elle n'est pas trouvée, renvoie -1
    jQuery.unique (array) Supprimez tous les éléments en double dans le tableau et renvoyez le tableau trié
    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal