ホームページ >ウェブフロントエンド >jsチュートリアル >Jqueryを始めるための方法の経験分析
Jqueryを始めるための方法の経験分析
- 黄舟オリジナル
- 2017-07-31 11:04:201286ブラウズ
まず 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 入門チュートリアル
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 トラバーサル
7.jQuery マニュアル を学習する必要があります。
JQuery の学習は継続的な適用と革新のプロセスであり、継続が成功の鍵です。以上がJqueryを始めるための方法の経験分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。