Jqueryを始めるための方法の経験分析-jsチュートリアル-php.cn

Jqueryを始めるための方法の経験分析

黄舟

リリース： 2017-07-31 11:04:20

オリジナル

1266 人が閲覧しました

まず jquery と js の違いを理解してください。コードは簡潔で、セマンティクスは理解しやすく、学習は速く、ドキュメントは豊富です。 jQuery は軽量のスクリプトであり、そのコードは非常に小さく、最新バージョンの JavaScript パッケージはわずか約 20K です。 jQuery は、CSS1 ～ CSS3 と基本的な xPath をサポートします。 jQuery はクロスブラウザーであり、サポートするブラウザーには IE 6.0 以降、FF 1.5 以降、Safari 2.0 以降、Opera 9.0 以降が含まれます。 jQuery を他の関数で拡張するのは簡単です。 JS コードと HTML コードを完全に分離できるため、コーディング、保守、変更が容易になります。

jQuery を Web ページに追加する方法はたくさんあります。次の方法を使用できます:

jquery.com から jQuery ライブラリをダウンロードする

Google から jQuery をロードするなど、CDN から jQuery をロードする

Jqueryを始めるための方法の経験分析

推奨学習コース Jquery 入門チュートリアル

1.を使用します

jQuery をダウンロード

ダウンロードできる jQuery には 2 つのバージョンがあります:

製品バージョン - 実際の Web サイトで使用され、合理化され、圧縮されています。

開発バージョン - テストおよび開発用 (非圧縮、読み取り可能なコード)

上記の両方のバージョンは、jquery.com からダウンロードできます。

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

ログイン後にコピー

コースリンク: http://www.php.cn/code/3688.html

2. jquery 構文: 構文は、将来 jquery を適用するための鍵です。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表格</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 <script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
// $(document).ready(function(){
// alert(1)
// });
// $(document).ready(function(){
// alert(2)
// })
 </script>
</head>
<body>
<div id="box">jQuery语法</div>

</body>
</html>

ログイン後にコピー

コースリンク: http://www.php.cn/code/3692.html

3.jQuery 要素セレクター、#id セレクター、.class 選択デバイスなど。 .

 <title>php中文网(php.cn)</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("#test").hide();
 });
 });
 </script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">#id选择器，点击我会隐藏</p>
<button>点我</button>
</body>

ログイン後にコピー

コースリンク:http://www.php.cn/code/3695.html

4.jQueryイベント

<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#p1").mouseenter(function(){
 alert("您的鼠标移到了 id=p1 的元素上!");
 });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>

ログイン後にコピー

コースリンク： http://www.php.cn/code/3704.html

5.jQuery エフェクト; 非表示と表示、フェードインとフェードアウト、アニメーション、アニメーションの停止など。リンク: http://www.php.cn/course/113.html

第 2 章 jQuery の効果

6.jQuery トラバーサル、祖先、子孫、同胞、フィルタリングなど

<head>
 <meta charset="utf-8">
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("p").toggle();
 });
 });
 </script>
</head>
<body>

<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>

ログイン後にコピー

コースリンク: http://www.php.cn/course/113.html 第 4 章 jQuery トラバーサル

jQuery マニュアルを学習する必要があります。

JQuery の学習は継続的な適用と革新のプロセスであり、継続が成功の鍵です。

以上がJqueryを始めるための方法の経験分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。