Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)

Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)
ul liの前のアイコン1をキャンセルします
クリア値1
値を1に設定
ラベル中央値1をクリア
ラベルの中央値を1に設定する
html()、text()、val() を区別します。 1
ラベルを編集可能な状態1に設定する
ラベルを編集不可状態1に設定する
2 つの Ajax、1 つの A、1 つの B、A の実行後に B を実行する必要があります。
時間間隔は1回だけ実行され、指定されたミリ秒数後に関数を呼び出したり、式を計算したりします2
時間間隔、複数回実行、指定されたミリ秒数ごとに関数を呼び出すか、式を計算する2
jQuery すべて選択/すべて選択解除/選択の反転 2
選択オプション3
DIVを常に画面上の特定の位置に固定する

ul liの前のアイコンをキャンセル

コードをコピー
コードは次のとおりです。

ウル
{
リストスタイルタイプ:なし;
}

明確な価値

コードをコピー
コードは次のとおりです。

$("#city").val("");

値の設定

コードをコピー
コードは次のとおりです。

$("#city").val("北京");

ラベルの中央値をクリアする

コードをコピー
コードは次のとおりです。

$("#ML1").html("");

ラベルの中央値を設定する

コードをコピー
コードは次のとおりです。

$("#ML1").html("北京");

タグの値を再読み込みする場合、html()、text()、val() を区別するために、まず元の値をクリアする必要があることがよくあります。

コードをコピー
コードは次のとおりです。

<input type="aaa" value="bbb">ccc</input>
text() はラベルの中央のコンテンツ 1234 を出力します。
val() は、値属性の値 bbb を出力します。
html() は HTML 全体を出力します: <input type="aaa" value="bbb">ccc</input>。
val()はjQuery用に書かれています

ラベルを編集可能に設定する

コードをコピー
コードは次のとおりです。

$("input").removeAttr("readonly"); //すべての入力タグは編集可能です
$("textarea").removeAttr("readonly"); //すべてのtextarea(部門プロファイル)タグは編集可能です
$("input:button").removeAttr("disabled"); //すべてのボタン(左フレームと右フレームの移動)のラベルは編集できません

ラベルを編集不可に設定する

コードをコピー
コードは次のとおりです。

$("input").attr("readonly", "readonly"); //すべての入力タグは編集できません
$("textarea").attr("readonly", "readonly"); //すべてのtextarea(部門プロファイル)タグは編集できません
$("input:button").attr("disabled", "disabled"); //すべてのボタン(左フレームと右フレームの移動)のラベルは編集できません

2 つの Ajax、1 つは A、もう 1 つは B です。B は A の実行後に実行する必要があります。Ajax は非同期にロードされるため、各 Ajax は互いに干渉することなくほぼ同時に実行されます。ただし、Ajax リクエストで別の Ajax の戻り値から値を取得したい場合があります。このとき、この状況が発生します。解決策は 3 つあります。
1. A という名前の Ajax の CallBack に B という名前の Ajax リクエストを書き込みます。
2. A の実行を監視する時間間隔関数を記述し、A が終了したら B を呼び出します。
3. Ajax の async を false に設定しますが、通常はすべて false に設定する必要があります。

時間遅延、一度だけ実行、指定されたミリ秒数後に関数を呼び出したり式を計算したりします。

コードをコピー
コードは次のとおりです。

Var st o = setTimeout (その時点で実行される関数または式、遅延時間 (ミリ秒単位))。
window.clearTimeout(sto) はそれを無効にし、サイクルの実行をキャンセルします。

時間間隔、複数回実行、指定されたミリ秒数ごとに関数を呼び出すか、式を計算する

コードをコピー
コードは次のとおりです。

varstv = setInterval ("alert('3000msごとにポップアップします!')",3000);
window.clearInterval(stv) はそれを無効にし、サイクル実行をキャンセルします。

jQuery すべて選択/すべて選択解除/反転

コードをコピー
コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>すべて選択、すべて選択しない、反転</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(関数() {
$("#selectAll").click(function (){//すべて選択
$("#ckList :チェックボックス").attr("チェック済み", true);
});
$("#unSelect").click(function (){//すべて選択解除
$("#ckList:checkbox").attr("チェック済み", false);
});
$("#reverse").click(function (){//選択を反転する
$("#ckList:チェックボックス").each(関数() {
$(this).attr("チェック済み", !$(this).attr("チェック済み"));
});
});
});
</スクリプト>
</head>
<本文>
<div id="ckList">
<input type="checkbox" value="値 1" />値 1

<input type="checkbox" value="値 2" />値 2

<input type="checkbox" value="値 3" />値 3

<input type="checkbox" value="値 4" />値 4

</div>
<input type="button" value="すべて選択" id="selectAll" />
<input type="button" value="すべて選択解除" id="unSelectAll" />
<input type="button" value="Reverse" id="reverse" />
</本文>
</html>
選択オプション
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="サーバー">
<タイトル></タイトル>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//全て
関数 All() {
var tt = $("#st")[0];
(var i = 0; i < tt.length; i++) の場合 {
アラート(tt[i].text);
}
}
//現在選択されている
関数 Aselected() {
var tt = $("#st")[0];
(var i = 0; i < tt.length; i++) の場合 {
if(tt[i].selected) {
アラート(tt[i].text);
アラート(tt[i].値);
}
}
}
</スクリプト>
</head>
<本文>
<form id="form1" runat="サーバー">
<div>
<select id = "st" multiple="複数">
<option value="1">ああ</option>
<option value="2">bbbbb</option>
<option value="3">ccccc</option>
<option value="4">ddddd</option>
</選択>
<入力タイプ="テキスト" id="tt"/>
<input type="button" onclick="すべて();" value="すべて"/>
<input type="button" onclick="Aselected();" value="現在選択されています"/>
</div>
</フォーム>
</本文>
</html>

DIVを画面上の特定の位置に固定する

コードをコピー
コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="サーバー">
<タイトル></タイトル>
<スタイル タイプ="text/css">
#右下
{
位置: 固定;
幅: 90ピクセル;
高さ: 90px;
背景: #eee;
下: 40px;
右: 20px;
背景色: #DCFCE9;
境界線: 8px ダブル #06F867;
テキスト配置: 中央;
パディング: 10px;
マージン: 10px;
}
</スタイル>
</head>
<本文>
<script type="text/javascript">
(var i = 0; i < 100; i++) の場合 {
ドキュメント.write((i + 1) + "
");
}
</スクリプト>
<div id="low_right">
右下隅
</div>
</本文>
</html>

<<:  MySQL サービスとデータベース管理

>>:  純粋な CSS で実装された 3 つの通知バーのスクロール効果

推薦する

CSS3を使用してトランジションとアニメーション効果を実現する

JS アニメーションの代わりに CSS アニメーションを使用する必要があるのはなぜですか? Java...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

MySQL における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...

Dockerはコンテナ外のコンテナ内でコマンドを実行します

コンテナ内でコマンドを実行したいが、コンテナに入りたくない場合があります。ではどうすればいいでしょう...

vue 要素 el-transfer にドラッグ機能を追加

コア資産管理プロジェクトでは、el-transfer にドラッグ アンド ドロップによる並べ替えと、...

CSS--overflow:hidden のプロジェクト例

以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

WeChatアプレットはユーザーログインモジュールサーバーの構築を実装します

サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

メタタグの詳しい説明(メタタグの役割)

個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...

IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォント ソリューションを表示します。

数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...