js VS jQuery

js DOM要素を取得する8つの方法:
1、ID取得:getElementByIdは要素を返し、コンテキストはdocumentのみ
2、name属性で取得:getElementsByNameは要素のセットを返します.コンテキストはdocumetでなければなりません.
3、ラベル名で取得:getElementsByTagNameは要素のセットを返します.コンテキストはdocumentでも要素でもいいです.
4、クラス名で取得:getElementsByClassNameは要素のセットを返します.コンテキストはdocumentでも要素でもいいです.
5、HTMLの入手方法:document.documentElementはHTMLというラベルを専門に取得しています
6、bodyを取得する方法:document.bodyはbodyというラベルを専門に取得しています
7、セレクタによって1つの要素を取得する:querySelectorは1つの要素を返して、コンテキストはdocumentであることができて、1つの要素であることができます
8、セレクタで要素のセットを取得する:querySelectorAllは要素のセットを返し、コンテキストはdocumentであってもよいし、要素であってもよい
jQueryがDOM要素を取得する方法は、jQueryセレクタ、jQuery遍歴関数の2つに分けられます.
jQueryの動作は要素を取得してから有効になる必要がありますので、セレクタはjQueryのベースです.
1、基本セレクタ:
$("#div 1"):idがdiv 1の要素を選択
$(.test):classをtestの要素として選択
$(*):すべての要素を選択
$(「div,span,p.myClass」):すべてのdiv,span、およびmyClassを持つpラベルの要素のセットを選択します.
2、階層セレクタ:
$("div span");孫、曽孫を含むdivのすべてのspanを選択します
$(「div>span」)divの子spanを選択
$(".one+div"):classをoneの次の世代div要素として選択
$("#two~div"):idがtwoの要素の後ろにあるすべての同世代div要素を選択
3、フィルタセレクタ:
$(「div:first」):すべてのdiv要素の最初のdiv要素を選択
$(「div:last」):すべてのdiv要素の最後のdiv要素を選択
$("input:not(.myClass):classがmyClassでないinput要素を選択
$(「input:even」):偶数のインデックスを選択するinput要素
$(「input:odd」):インデックスが奇数のinput要素を選択
$(「input:eq(1):インデックスが1に等しいinput要素を選択し、0から計算します.
$(「input:gt(1)」):インデックスが1より大きいものを選択し、1を含まないinput要素を0から計算します.
$(「input:lt(1)」):インデックスが1未満で1を含まないinput要素を選択
$(":header"):Webページのすべてのhラベルを選択
$(「div.animated」):アニメーションを実行するdiv要素を選択
$(":focus"):現在フォーカスされている要素を選択
4、コンテンツフィルタセレクタ:
$(「div:contains(「マイ」):テキスト「マイ」を含むdiv要素を選択
$(「div:empty」):サブエレメント(テキスト)を含まないdiv空のエレメントを選択
$(「div:has(p)」):p要素を含むdiv要素を選択
$(「div:parent」):サブエレメント(テキスト)を持つdivエレメントを選択
5、可視フィルタセレクタ:
$(":hidden"):display:noneを含むすべての非表示要素を選択します.visibility:hidden
$(「div:visible」):表示されるdiv要素をすべて選択
6、属性フィルタセレクタ:
$(「div[id]):id属性を持つdiv要素を選択
$(「div[title=test]):属性titleをtestとするdiv要素を選択
$(「div[title!=test]):属性titleがtestに等しくないdiv要素を選択し、属性titleがない要素も選択します.
$(「div[title^=test]):属性titleを選択してtestから始まるdiv要素
$(「div[title$=test]):属性をtestで終了するdiv要素を選択
$(「div[title*=test]):属性titleにtestを含むdiv要素を選択
$(「div[title|=「en」):属性titleがenに等しいか、enを接頭辞とする要素を選択します.
$(「div[title~="uk"]):属性titleがスペースで区切られた値にUKを含む要素を選択
$(「div[id][title$="test"]):属性idを持ち、属性titleがtestで終わるdiv要素を選択します.
7、サブエレメントフィルタセレクタ:
$(div.one:nth-child(2):classをoneとして選択した2番目のサブエレメントインデックスは1から始まります.
$(div.one:first-child):classをoneの最初のサブエレメントとして選択
$(div.one:last-child):classをoneの最後の要素として選択
$(「div.one:only-child」):子要素が1つしかないclassがoneの要素の下にある子要素を選択
8、フォームオブジェクト属性フィルタセレクタ
$(「#form 1:enabled」)idがform 1のフォーム内のすべての使用可能な要素を選択します.
$(#form 1:disabled):idがform 1のフォーム内の使用できない要素をすべて選択します.
$(「input:checked」):選択したすべてのinput要素を選択
$(「select option:selected」):選択したすべてのオプション要素を選択
注意:#idをセレクタとして取得するのはdocumentではなくjQueryオブジェクトである.getElementByID(id)で得られたDOMオブジェクトは,両者が等価ではない.だから彼らの方法はお互いに使えない.
html()はjQueryの中の方法です
is(":checked")は、jQueryオブジェクトが選択されているかどうかを判断し、ブール値を返すjQueryのメソッドです.
show()はjQueryのメソッドで、その機能は表示要素で、show(3000)は無から全表示まで3000ミリ秒かかります
css(name,value)要素にスタイルを設定する
test(string)一致するすべての要素のテキスト内容を設定する
フィルタ(expr)は、指定した式に一致する要素のセットをフィルタします.
addClass(class)一致する要素に指定したクラス名を追加
removeClass(class)一致する要素から指定したクラスを削除
is(":visible")要素が表示されているか否かを判断し、ブール値を返す
hide();要素を隠す
例:
1、第7条から後ろのブランドを隠す、最後の1条を除く
jQuery:

var category = $('ul li:gt(6):not(:last)');   0  ，     
category.hide();//  hide（）  

js:

for (var i =0;i=7&&i!=oLi.length-1) {//    7          
				oLi[i].style.display = 'none';//     
			}
		}

2、ボタンをクリックすると、すべてのブランドが表示され、一部のブランドがハイライト表示され、ボタンが変色する
jQuery:

$('div.more>a').click(function () {
    category.show();
    $(this).find('span').css('background','white')
			.text('      ');
			$('ul li').filter(":contains('  '),:contains('  ')").addClass('promoted');
}

js:

var oWarp =document.getElementsByClassName('SubCategoryBox')[0];
var oMore = oWarp.getElementsByClassName('more')[0];
var oSpan = oMore.getElementsByTagName('span')[0];
oSpan.style.background = 'white';
		oSpan.innerHTML='      ';
		for (var i = 0;i

3、再度ボタンをクリックし、元の隠し状態に戻す
jQuery:

category.hide();
			$(this).find('span').css('background','#ccc')
			.text('      ');
			$('ul li').removeClass('promoted');

js:

oSpan.style.background = '#ccc';
		oSpan.innerHTML='      ';
		for (var i =0;i=7&&i!=oLi.length-1) {
				oLi[i].style.display = 'none';
			}
		}