jQueryをゼロから学ぶ (3) jQueryのパッケージ化を管理する set_jquery

1. 概要
jQuery セレクターを使用して jQuery ラッパー セットを取得した後、それを操作する必要があります。この章では、まず要素を動的に作成する方法を説明し、次に jQuery ラッパー セットを管理する方法を学びます。


2. はじめに
このシリーズの 2 番目と 3 番目の記事には API が多すぎます。めまいがするかもしれませんが、これらは基本であり、基礎がしっかりしている必要があります。実際には、後で使用するときにこれらのリストを参照したり、公式の API 手順を確認したりできます。
この章の内容はほとんどありません。主に、要素の動的作成と jQuery パッケージング セットのさまざまな機能の操作について説明します。

1.間違ったプログラミング方法
要素を動的に作成するために JavaScript を使用することが多く、コンテナの HTML コンテンツを直接変更するプログラマが多くいます。 たとえば、


をコピーします。コード

コードは次のとおりです: < ;html xmlns="http://www.w3.org/1999/xhtml">

< ;head>

div>





上記の例では、動的に div 要素を追加しましたtestDiv の内容を変更してページにアクセスします。ただし、これは間違ったアプローチであることに注意してください。


エラーの原因:

(1) の構造IE6 では、ネットワークの速度が低下するか、ページのコンテンツが大きすぎる場合に、「操作を終了してください」というエラーが表示されます。つまり、「ページの読み込み中にページの DOM モデルを変更しないでください。」 "
(2) HTML コンテンツを変更して要素を追加することは、DOM 規格に準拠していません。実際の作業でも遭遇します。このメソッドを使用してコンテンツを変更すると、追加された要素が表示されなくなります。ブラウザごとに表示エンジンが異なるため、一部のブラウザではすぐに問題が発生しますが、Dom の CreateElement を使用してオブジェクトを作成すると、ほとんどすべてのブラウザで問題ありません。ただし、jQuery では、完全な HTML 文字列が渡されると、内部で innerHTML も使用されます。 . したがって、innerHTML 関数の使用が完全に否定されるわけではありません。
ので、今後はこれを放棄し、以下で紹介する正しいプログラミング方法を使用してください。新しい要素

以下では、要素を作成する 2 つの正しい方法を紹介します。


(1) HTML DOM を使用して要素を作成します。

DOM とは?
JavaScript を使用すると、HTML ドキュメント全体を再構築できます。ページ上の項目を追加、削除、変更、または並べ替えることができます。
ページ上の何かを変更するには、JavaScript が HTML ドキュメント内のすべての要素にアクセスする必要があります。このエントリは、HTML 要素を追加、移動、変更、または削除するためのメソッドおよびプロパティとともに、ドキュメント オブジェクト モデル (DOM) を通じて取得されます。
1998 年に、W3C は第 1 レベルの DOM 仕様をリリースしました。この仕様により、HTML ページ内のすべての個々の要素へのアクセスと操作が可能になります。
すべてのブラウザがこの標準を実装しているため、DOM 互換性の問題を見つけることはほとんど不可能です。

DOM を JavaScript で使用して、HTML、XHTML、および XML ドキュメントを読み取り、変更できます。

DOM は、さまざまな部分 (コア、XML、HTML) とレベル (DOM レベル 1/2/3) に分割されます。
コア DOM
は、構造化された Document オブジェクトの一連の標準を定義します

XML DOM

は、XML ドキュメントのオブジェクトの標準セットを定義します。
HTML DOM
は、HTML ドキュメントのオブジェクトの標準セットを定義します。
この記事では、HTML DOM を使用して要素を作成する方法については詳しく説明しません。簡単な例を次に示します。


コードをコピーします


コードは次のとおりです:

//Dom 標準を使用して要素を作成しますvar select = document.createElement("select"); select.options[0] = new Option ("アドイン 1" , "値 1"); select.options[1] = 新しいオプション("アドイン 2", "値 2"); select.size = "2"; >var オブジェクト = testDiv.appendChild (選択);
dom 要素を document.createElement メソッドを使用して作成し、appendChild メソッドを使用して指定されたオブジェクトに追加できます。
(2) jQuery 関数を使用して要素を作成します。
jQuery オブジェクトで作成する場合は、Div 要素を作成するなど、より簡単です:
$("

動的に作成された div

")
私たちは主にjQuery コア クラスを使用するライブラリ内のメソッド:

jQuery( html, ownerDocument )
戻り値: jQuery

HTML の元の文字列に基づいて Dom 要素を動的に作成します。

html パラメータは HTML 文字列です。この関数は jQuery 1.3.2 で改善されました。

HTML 文字列が属性のない要素である場合、document.createElement が内部で要素の作成に使用されます。例:

コードをコピー コードは次のとおりです:

//jQuery は内部で document.createElement を使用して要素を作成します:
$("

").css("border" ,"solid 1px #FF0000" ).html("Dynamicly created div").appendTo(testDiv);

それ以外の場合は、innerHTML メソッドを使用して要素を作成します:

コードをコピー コードは次のとおりです:

//jQuery は内部で innerHTML を使用して要素を作成します:
$("< ;div style="border:solid 1px #FF0000"> ;動的に作成された div

").appendTo(testDiv);

3. オブジェクトに要素を追加します
上記の 2 つの方法である要素の作成を使用できますが、前述したように、要素の追加や削除など、ページの読み込み時にページの DOM 構造を変更してはなりません。
従来は、window .onload を使用して上記の目的を達成します。

コードをコピーします コードは次のとおりです。次のように:

//DOM がロードされた後、要素を追加
//従来のメソッド
window.onload = function() { testDiv.innerHTML = "

動的に作成された div

"; }

DOM が完全に読み込まれた後に新しい要素を追加することは可能ですが、残念ながらブラウザによってウィンドウが実行されます。 onload 関数は、DOM ツリーが構築された後だけでなく、すべての画像や他の外部リソースが完全に読み込まれてブラウザ ウィンドウに表示された後も機能するため、特定の画像やその他のリソースの読み込みに時間がかかる場合、訪問者に表示されます。不完全なページ、または画像が読み込まれる前に必要な依存関係を実行する場合でも、動的に追加された要素のスクリプトによってスクリプト エラーが発生する可能性があります。解決策は、DOM が解析されるのを待って、画像をロードする前に関数を実行することです。外部リソースがロードされます。jQuery でこれを可能にします:

コードをコピーします コードは次のとおりです:

//jQuery は動的に作成された $(document).ready (function) メソッドを使用します

$(document).ready(
function() { testDiv.innerHTML = "

動的に作成された $(document).ready(function) メソッド

" }
);


または単純な構文を使用します:

コードをコピー コードは次のとおりです:

//jQuery は $(function) メソッドを使用します

$(
function() { testDiv.innerHTML = "

$(function) メソッドを使用

" }

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("

")的形式创建对象.
四.管理jQuery包装集元素
既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.

我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.

jQuery提供了一系列的函数用来管理包装集:

1.过滤 Filtering

名称	说明	举例
eq( index )	获取第N个元素	获取匹配的第二个元素: $("p").eq(1)
filter( expr )	筛选出与指定表达式匹配的元素集合。	保留带有select类的元素: $("p").filter(".selected")
filter( fn )	筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。	保留子元素中不含有ol的元素: $("div").filter(function(index) {   return $("ol", this).size() == 0; });
is( expr ) 注意: 这个函数返回的不是jQuery包装集而是Boolean值	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。	由于input元素的父元素是一个表单元素，所以返回true: $("input[type='checkbox']").parent().is("form")
map( callback )	将一组元素转换成其他数组（不论是否是元素数组） 你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立	把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){   return $(this).val(); }).get().join(", ") );
not( expr )	删除与指定表达式匹配的元素	从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] )
slice( start, end )	选取一个匹配的子集	选择第一个p元素: $("p").slice(0, 1);

2.查找 Finding

名称	说明	举例
add( expr )	把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。	动态生成一个元素并添加至匹配的元素中: $("p").add("Again")
children( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。	查找DIV中的每个子元素: $("div").children()
closest( [expr] )	取得与表达式匹配的最新的父元素	为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) {   $(e.target).closest("li").toggleClass("hilight"); });
contents( )	查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容	查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("");
find( expr )	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。	从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同: $("p").find("span")
next( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。	找到每个段落的后面紧邻的同辈元素: $("p").next()
nextAll( [expr] )	查找当前元素之后所有的同辈元素。 可以用表达式过滤	给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after");
offsetParent( )	返回第一个有定位的父类(比如(relative或absolute)).
parent( [expr] )	取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。	查找每个段落的父元素: $("p").parent()
parents( [expr] )	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。	找到每个span元素的所有祖先元素: $("span").parents()
prev( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。	Find the immediately preceding sibling element of each paragraph: $("p").prev()
prevAll( [expr] )	Find all sibling elements before the current element Can be filtered using expressions.	Add a class to all divs before the last one: $("div:last").prevAll().addClass("before");
siblings( [expr] )	Gets an element set containing all unique siblings of each element in the matched element set. Can be filtered with optional expressions.	Find all siblings of each div: $("div").siblings()

3. Chaining

名称	说明	举例
andSelf( )	加入先前所选的加入当前元素中 对于筛选或查找后的元素，要加入先前所选元素时将会很有用。	选取所有div以及内部的p，并加上border类: $("div").find("p").andSelf().addClass("border");
end( )	回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。 如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。	选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素: $("p").find("span").end()

Name

Description
Example



andSelf( ) Add the previously selected element to the current element It will be useful when you want to add previously selected elements to filtered or searched elements. Select all divs and the internal p, and add the border class: $("div").find("p").andSelf().addClass("border") ; end( ) Go back to the last "destructive" operation. That is, change the matching element list to the previous state. If there has been no previous destructive operation, an empty set is returned. The so-called "destructive" refers to any operation that changes the matched jQuery element. This includes any function in Traversing that returns a jQuery object - 'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice' - plus 'clone' in Manipulation. Select all p elements, find and select the span child element, and then go back and select the p element: $("p").find("span"). end()5. Examples of commonly used functions[To be continued] 6. SummaryThe content of this article is relatively small Less, it mainly explains how to dynamically create elements and manage jQuery packaging sets. The interface document lists too many examples, and I haven’t had time to write the examples yet. I have to sleep and go to work tomorrow, so please forgive me and I will make up for it when I have time in the future! Author: Zhang ZiqiuSource: http://www.cnblogs.com/zhangziqiu/

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブックマークガジェット作成のjs理論_javascriptスキル次の記事：ブックマークガジェット作成のjs理論_javascriptスキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル