1. jQueryの概要1. jQuery
とは何ですか？
JQueryは高速で簡潔なJavaScriptフレームワークであり、プロトタイプに次ぐ優れたJavaScriptコードライブラリ（またはJavaScriptフレームワーク）です。jQueryの設計の目的は、「より少なく、より多くのことを書く」ことです。JavaScriptの一般的に使用される関数コードをカプセル化し、便利なJavaScriptデザインパターンを提供し、HTMLドキュメント操作、イベント処理、アニメーションデザイン、およびAjax相互作用を最適化します。
jQueryのコア機能は、次のように要約できます。ユニークなチェーン構文と短くて明確な多機能インターフェースを備えています。効率的で柔軟なCSSセレクターを備え、CSSセレクターを拡張できます。便利なプラグイン拡張メカニズムと豊富なプラグインを備えています。jQueryは、IE 6.0以降、FF 1.5以降、Safari 2.0以降、Opera 9.0以降など、すべての主要なブラウザと互換性があります。
jQueryは現在、最も広く使用されているJavaScript関数ライブラリです。統計によると、世界の上位100万のWebサイトの46％が他のライブラリよりもはるかに多くjQueryを使用しています。マイクロソフトは、jQueryを公式ライブラリとして使用しています。
さらに、jQueryを実行するために必要な条件は単純です。コンピューター、スマートフォン、または最新のブラウザーを実行できるデバイスです。jQueryのブラウザー要件も非常に無料です。公式Webサイトには、jQueryをサポートする次のブラウザーがリストされています
。FirefoX2.0以降、
Internet Explorer 6以降、
Safari 3以降、
Opera 10.6
以降
、Chrome 8 以降、jQuery言語の機能と利点
ドキュメント要素をすばやく取得します。jQueryの選択メカニズムは、Cssのセレクターに基づいて構築されています。これは、DOMドキュメントの要素をすばやくクエリする機能を提供し、JavaScriptでページ要素を取得する方法を大幅に強化します。
美しいページ動的効果を提供します。一連のアニメーション効果がjQueryに組み込まれており、非常に美しいWebページを開発できます。多くのWebサイトでは、フェードインやフェードアウトなどの動的な特殊効果や要素の削除など、jQueryの組み込み効果を使用しています。
更新せずにAJAX Webページを作成します。AJAXは非同期のJavaScriptとXMLの略です。非常に機密性が高く、更新されないWebページを開発できます。特に、PHP Webサイトなどのサーバー側のWebページを開発する場合は、サーバーと通信する必要があります。 Webページを更新し、AJAX特殊効果を使用した後、ページを部分的に更新して動的効果を提供できます。
JavaScript言語の機能強化を提供します。jQueryは、要素の反復や配列処理などの基本的なJavaScript構造を強化します。
イベント処理の強化。jQueryはさまざまなページイベントを提供し、プログラマーがHTMLに過剰なイベント処理コードを追加することを回避できます。最も重要なのは、そのイベントハンドラーがさまざまなブラウザーの互換性の問題を排除することです。
Webページのコンテンツを変更します。jQueryは、Webページのテキストの変更、Webページの画像の挿入または反転など、Webページのコンテンツを変更できます。jQueryは、元のJavaScriptコードの処理方法を簡素化します。
利点：
jQueryはJavaScriptライブラリです。
jQueryはJavaScriptプログラミングを大幅に簡素化します。
jQueryは簡単に習得
できますが、jqueryはJSと同じではないことに注意してください。
3. jQuery公式サイト
jqueryは、関数ライブラリ、jsファイルです。このjsファイルをスクリプトタグで紹介することにより、ページを使用できます。ダウンロードアドレス：
jQuery公式ウェブサイト：http://jquery.com/
4. jQueryの読み込み
要素をページの先頭に取得するステートメントを記述します。要素が読み込まれていないため、jqueryはこの問題を解決する準備ができたメソッドを提供し、その速度はネイティブのwindow.onloadよりも高速です。
2番目に、jQueryセレクター
1、
Webページ要素を選択する基本的なセレクター、およびそれにいくつかの操作を実行します。jqueryセレクターjqueryセレクターは要素をすばやく選択できます。選択ルールはCSSスタイルと同じです。length属性を使用して、選択が成功したかどうかを判断します。 。
jqueryの使用法のアイデア1：Webページ要素を選択し、それに対して何らかの操作を実行する
2、セレクター装飾フィルター
3、セレクター関数フィルター
4、セレクター転送
a48d960 on 6 Sep 2019
0 contributors
155 lines (127 sloc) 4.18 KB
RawBlameHistory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 0 auto;
margin-top: 50px;
}
.box h1 {
color: green;
font-size: 20px;
line-height: 35px;
font-weight: bold;
border: 1px dashed gray;
padding-left: 10px;
}
.box li {
list-style: none;
padding: 10px 15px;
border: 1px dashed gray;
}
.box li span {
background-color: gray;
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
}
.box li:nth-child(-n+3) span {
background-color: green;
color: white;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
.content img {
width: 80px;
height: 120px;
float: left;
}
.content p {
width: 180px;
height: 120px;
float: right;
font-size: 12px;
}
.current .content{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('li').mouseenter(function () {
$(this).addClass('current');
});
$('li').mouseleave(function () {
$(this).removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li>
<span>1</span> 木兰
<div class="content ">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>2</span> 木兰
<div class="content ">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>3</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>4</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>5</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
