第26章　jQuery - noConflict()メソッド

# **jQuery - noConflict()メソッド**

***

それでもjQueryを使用しながら、自分のページで他のフレームワークを使用したい場合はどうしますか？

## **jQueryとその他のJavaScriptフレームワーク**

ご存知のとおり。jQueryはjQueryのショートカットとして$記号を使います。

Angular、Backbone、Ember、Knockoutなど、他にも多くの一般的なJavaScriptフレームワークがあります。

他のJavaScriptフレームワークもショートカットとして$記号を使用するとどうなりますか？

2つの異なるフレームワークが同じショートカットを使用していると、そのうちの1つが機能しなくなる可能性があります。

jQueryチームはすでにこれについて考えており、`noConflict()`メソッドを実装しました。

## **jQueryのnoConflict()メソッド**

この `noConflict()` メソッドは$ shortcut識別子の保留を解除し、他のスクリプトがそれを使用できるようにします。

ショートカットの代わりにフルネームを書くだけで、もちろんjQueryを使うことができます。

#### **例**
[sample26-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery is still working!");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button>Test jQuery</button>

</body>
</html>
```

#### **実行結果**

<pre>
		<span class="nocode">
		<iframe style="position:relative;width:100%;height:200px" src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
      <script>
        $.noConflict();
        jQuery(document).ready(function(){
          jQuery(&quot;button&quot;).click(function(){
            jQuery(&quot;p&quot;).text(&quot;jQuery is still working!&quot;);
          });
        });
      </script>
      <body>

<p>This is a paragraph.</p>
        <button>Test jQuery</button>

</body>
  </html>'" ></iframe></span></pre>

content

第26章 jQuery - noConflict()メソッド

第26章　jQuery - noConflict()メソッド