2016-10-31 21 views
1

これはばかげた質問のように思えるかもしれませんが、JS/JQueryの入門者として2つの列メニューを作成するためのシンプルな.jsファイルを作成しています。私はJSやJqueryを使用しているかどうかに応じて異なるコードを使用する必要がある、私が必要とするものにソリューションを見つけました。私は何を使用しているのかわかりません。これは、私がこれをすべて始める前に、私がbxSliderを使用するためにJQueryライブラリを既に含んでいたという事実(下記参照)が混乱しています。jQueryが特定のWebアプリケーションで使用されているかどうかを確認する方法は?

<!-- jQuery library (served from Google)--> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!-- bxSlider Javascript file --> 
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 

<!--Other javascript--> 
<script src="<?php bloginfo('template_directory'); ?>/js/menu-two-cols.js"></script> 

そして、これが私の「メニュー-2-cols.js」である:私は...ここに

基本的なものは全くの誤解だ場合、これが私のHTMLヘッドからreleventエリアで

謝罪これまでのファイル:

function menuTwoCols() { 

var browserH = $(window).height(); 

if (browserH > 630) { 
    //do nothing - menu can stay as a single column 
}else{ 
    //do everything below 

//make width auto for measurement for this child 
$('.menu-header li:nth-child(6) li').css({'width':'auto'}); 

var maxOdd = 0; 
var maxEven = 0; 
var listItemNum = $(".menu-header li:nth-child(6) li").length; 

console.log("First level menu (6) ODD num widths"); 
$('.menu-header ul li:nth-child(6) ul li:nth-child(odd)').each(function() { 
    var $this = $(this); 
    var colWidth = $this.outerWidth(); 
    if (colWidth > maxOdd) { 
     maxOdd = colWidth; 
    } 
console.log(colWidth); 
}); 
console.log("Max Odd = " + maxOdd); 

console.log("First level menu (6) EVEN num widths"); 
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)').each(function() { 
    var $this = $(this); 
    var colWidth = $this.outerWidth(); 
    if (colWidth > maxEven) { 
     maxEven = colWidth; 
    } 
console.log(colWidth); 
}); 

console.log("Max Even = " + maxEven);  

var maxBoth = maxOdd + maxEven; 
var maxOddPc = ((maxOdd/maxBoth) * 100)+"%"; 
var maxEvenPc = ((maxEven/maxBoth) * 100)+"%"; 

console.log("Max BothPx = " + maxBoth + '\n' + 
      "Max Odd% = " + maxOddPc + '\n' + 
      "Max Even% = " + maxEvenPc + '\n' + 
      "List Item Num = " + listItemNum + '\n'); 

console.log("Text content"); 
console.log($('.menu-header ul li:nth-child(6) ul').text() + ' _ '); 

//make changes to widths if no space for single column 
$('.menu-header ul li:nth-child(6) > ul').css('width', maxBoth); 
$('.menu-header li:nth-child(6) li:nth-child(odd)').css('width', maxOddPc); 
$('.menu-header li:nth-child(6) li:nth-child(even)').css('width', maxEvenPc); 
$('.menu-header ul li:nth-child(6) ul li:nth-child(2)').css({'border-top':'5px solid #fff'}); //top white line 

}//end of if statement 

} 
+4

jQuery * is * JavaScript。それは別の言語ではなく、図書館です。 –

+0

$または "jQuery"名前空間で始まるものはすべてJqueryです。これはjQueryを使用していることを知っているあなたのキャッチです。 javascriptのためのそのラッパー、舞台裏のバニラjs。 – Fida

+0

私は基本的にそれを理解しています - JavaScriptやJQueryのような.jsファイルのコードを少し見て、どうすればいいですか?違いは何ですか?上記の.JSファイルは何ですか? – Slab

答えて

2

jQueryは、javascriptで最も有用で一般的に使用されているライブラリの1つです。 Javascriptはフロントエンド開発で一般的に使用される言語です。しかし、さまざまなタスクを実行するために公開するAPIに関して、ブラウザ間には多くの矛盾があります。したがって、その時点で、jQueryはクロスブラウザAPIの違いを抽象化し、使用するジェネリックインターフェイスを提供するようになります。したがって、あなたのコードは、ブラウザに依存するさまざまなAPIの問題に関心がもはやありません。それがあなたを助けることを願ってください。 詳細については、https://en.wikipedia.org/wiki/JQueryを参照してください。

一般に、jQueryを含むコードでは、jQueryセレクタ関数のエイリアスである '$'が大量に使用されます。

例:

- :jQueryライブラリがあなたのランタイム環境かどうかの一部である場合、あなたのコードでは、このような上記以外の指標から

$('.menu-header li:nth-child(6) li') 
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)') 

など、いくつかのセレクタがあり、あなたも、検索するには、次のトリックを使用することができます

F12キーを押します。コンソールに移動します。 jQueryと入力し、Enterキーを押します。 enter image description here

あなたのアプリがjQueryを使用していない場合は、エラーが発生します。

+0

を使用するときにJQueryを使用していますが、コードを見るだけでどのように違いがあるのでしょうか? – Slab

+0

これはまさに私が知りたかったものです - とてもシンプルですが、見つけにくいです!どうもありがとう。 – Slab

+0

コンソールにjQueryを入力することについての追加情報をもう一度おねがいします - 私はjQueryを使っています! – Slab

2

通常、$の存在は、通常は無償ですが、jQueryに排他的ではありません。基本的に、jQueryは、変数jQueryの下に名前空間(すべてのコード、関数変数などをカプセル化する擬似オブジェクト)を作成します。通常、この変数も別の変数$にエイリアスしますが、jQueryだけではこれを実行するライブラリ/フレームワークではありません。

最終的には、コードを最初から最後まで辿ることが唯一の方法です。 HTMLファイルはsomepointでjQueryをインポートする必要があります。そのため、ページにsrcという値の単語が含まれている<script>タグが表示されている場合は、おそらくjQueryをどこかで使用しています。しかし、som jsファイルの$(document).ready(function($) ...またはjQuery(document).ready(function($) ... を確認してください。

0

関連するドキュメントをお読みください。

基本的には、jQueryの抽象化ライブラリは、統一された方法で、ブラウザの違いを処理するためにJavaScriptで書かれました。過去のすべてのフロントエンドの問題を解決するためのハンマーとしてよく使用されていました。

es6-shimのようなシムライブラリのようなツールやbabelのようなツールは、もはや必須ではありません。

関連する問題