jQuery入門--基礎編1

基礎編1

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery--2.2.4

【変数の宣言と代入】
変数の宣言
　　var 変数名 = 値；又は、var 変数名; 変数名 = 値；
　　let 変数名 = 値；又は、let 変数名; 変数名 = 値；
       const 変数名 = 値；

【変数名のルール】
　・unicode文字、_、＄の3つを使う
　＄変数はJQueryのオブジェクトを入れる場合
　例文
　let $title = $(",main-title");

ダメなのは
　・最初に数字を使うこと
　・予約語

【代表的なメソッド】
1）alert()メソッド
アラートを表示する

2）html()メソッド
要素を取得と、設定をする

3)text()メソッド
特定のHTML要素内にあるテキスト情報を取得と、設定する

取得
$("セレクタ").html();
$("セレクタ").text();

サンプルコード
「index.html」にコードを書く

「test.js」にコードを書く

$(function(){

    let html = $("p").html();

    let text = $("p").text();

    alert(html);

    alert(text);

 });
ブラウザを立ち上げ、「OK」ボタンを押して行く

設定
$("セレクタ").html(値);

$("セレクタ").text(値);

サンプルコード
「index.html」のコードを下記のように書き換える

「test.js」のコードを下記のようにする

ブラウザを立ち上げる

【CSSの値の設定と取得するメソッド】
・取得
$("セレクタ").css("プロパティ");

・設定
$("セレクタ").css("プロパティ","値");

サンプルコード

「style.css」のコードを下記のようにする

.item01 {

    color: red;

}

「test.js」のコードを下記のようにする

$(function(){

    $(".item02").css("color","blue");

    let color = $(".item01").css("color");

    alert(color);

 });

ブラウザをリロードする

【属性の取得・設定】
・取得
$("セレクタ").attr("属性");

・設定
$("セレクタ").attr("属性"、"値");

【親子要素の参照】

 

・親要素

$("セレクタ").parent();
・子要素

$("セレクタ").children();

 

サンプルコード

「test.js」のコードを下記のようにする

$(function(){

    $(".item02").children().attr("href","https://www.yahoo.com");

    let url = $(".item01").children().attr("href") ;

    alert(url);

 });
ブラウザを立ち上げる


【クラスの追加・削除】
・追加
$("セレクタ").sddClass("クラス");
・削除
$("セレクタ").sddClass("クラス");

サンプルコード

「style.css」のコードを下記のようにする

.red {

    color: red;

}

「test.js」のコードを下記のようにする

$(function(){

    $(".item01").addClass("red");←加える

    alert("赤を入れ替える")

    $(".item02").removeClass("red");←削除

 });

ブラウザを立ち上げる


【幅・高さの取得と設定】
・取得
$("セレクタ").width();
$("セレクタ").height();
設定
$("セレクタ").width(値);
$("セレクタ").height(値);

【paddingまでの幅・高さの設定と取得】
・取得
$("セレクタ").innerWidth();

$("セレクタ").innerheigth();
設定

$("セレクタ").innerWidth(値);

$("セレクタ").innerheigth(値);

【borderまでの幅・高さの設定と取得】
・取得
$("セレクタ").outerWidth();

$("セレクタ").outerheigth();
設定

$("セレクタ").outerWidth(値);

$("セレクタ").outerheigth(値);

 

【marginまでの幅・高さの取得】
取得

$("セレクタ").outerWidth(true);

$("セレクタ").outerheigth(true);

 

jQuery入門--スクロールで動くボタンを元に戻す

スクロールで動くボタンを元に戻す

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery--3.7.1

【戻りボタンの作成】
ブラウザを開く

「index.html」にコードを書く

「style.css」のコード
.square{

    width: 50px;

    height: 50px;

    background-color: blue;

    color: #ffff;

    /*文字の配置*/

    text-align: center;

    /*行間の調整*/

    line-height: 50px;

    /* 画面上部に貼り付ける*/

    position: fixed;

}

【ボタンを右下に移動させる】

ブラウザを再リロードする


・「style.css」のコードを下記のように書く

.square{

    width: 50px;

    height: 50px;

    background-color: blue;

    /*文字の色*/

    color: #ffff;

    /*文字の配置*/

    text-align: center;

    /*行間の調整*/

    line-height: 50px;

    /* 画面上部に貼り付ける*/

    position: fixed;

    /*左辺からの距離*/

    left: 280px;

    /*下辺からの距離*/

    bottom: 20px;

}

【スクロールして、ボタンを見え隠れさせる】

ブラウザをリロードして、スクロールして行くと、ある時点でボタンが現れる。

「index.js」コードを書く

$(function(){

   $('.square').hide();

   $(window).scroll(function(){

     if($(this).scrollTop() > 200){

      $('.square').fadeIn();

     } else {

      $('.square').fadeOut();

     }

   })

  });

【ゆっくり戻るボタンの作成】
ブラウザをリロードし、ボタンを押すとTopに戻る

「index.js」コードを書く

$(function(){

   $('.square').hide();

   $(window).scroll(function(){

     if($(this).scrollTop() > 200){

      $('.square').fadeIn();

     } else {

      $('.square').fadeOut();

     }

   });

      $('.square').click(function(){

        $('body,html').animate({

            scrollTop:0

        },500);

      });

  });

数値(Numeric)クラス

数値(Numeric)クラス

【開発環境】
OS：Win10（64ビット）
Ruby 3.0.1
VSCodeバージョン: 1.57.1

【Integerクラス】
Integerクラスは整数を扱う場合に使う。

記述
→Integer(num)


【Floatクラス】
Floatクラスは浮動小数点数を扱う場合に使う

記述
→Float(num)

【注意】
整数オブジェクトに特異メソッドを追加する事はできません
2.4.0 から Fixnum, Bignum は Integerに統合されました。

よって、
Integer.induced_from(num)
Float.induced_from(num)
のように表記できない

サンプルプログラム

Python--タプル--9（並び替えsorted 関数）

タプルの要素を昇順または降順に並び替える（sorted 関数）

【開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
Python の統合開発環境：IDLE
IDLEの操作は別サイト参照のこと

【要素を並び替える】
要素を並び替えるには組み込み関数の sorted 関数を使用
・書式
newlist = sorted(iterable)

サンプルコード
Python 3.8.5 (tags/v3.8.5:580fbb0, Jul 20 2020, 15:57:54) [MSC v.1924 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license()" for more information.
>>> mytuple = ("C", "A", "B")
>>> # 並べ替えを行う
>>> newlist = sorted(mytuple)
>>> print(newlist)
['A', 'B', 'C']
>>> # リストからタプルを作成する
>>> newtuple = tuple(newlist)
>>> print(newtuple)
('A', 'B', 'C')
>>>

【要素の値のデータ型が異なっていた場合】
・整数と浮動小数点数の場合
サンプルコード
>>> numtuple = (5, 3.14, 4.78, 4)
>>> newlist = sorted(numtuple)
>>> print(tuple(newlist))
(3.14, 4, 4.78, 5)
>>>

・数値と文字列が混在している場合
>>> mytuple = ("80", 75, 45, "68")
>>> newlist = sorted(mytuple)
エラー
Traceback (most recent call last):
File "", line 1, in <module>
newlist = sorted(mytuple)
TypeError: '<' not supported between instances of 'int' and 'str'
>>>

【並べ替えるときの昇順と降順を切り替える】
・降順で並び替えをする場合
書式
newlist = sorted(iterable, reverse=True)

サンプルコード
>>> colortuple = ("Blue", "Red", "Green", "White", "Black")
>>> upcolortuple = tuple(sorted(colortuple))　＃昇順
>>> downcolortuple = tuple(sorted(colortuple, reverse=True))　＃降順
>>> print("Orig:", colortuple)
Orig: ('Blue', 'Red', 'Green', 'White', 'Black')
>>> print("ASC: ", upcolortuple)　＃昇順
ASC: ('Black', 'Blue', 'Green', 'Red', 'White')
>>> print("DESC:", downcolortuple)　＃降順
DESC: ('White', 'Red', 'Green', 'Blue', 'Black')
>>>

【要素の値を他の関数に渡して帰ってきた値を使って並び替える】
並び替えを行うときに、要素の値をそのまま使って比較するのではなく、一度指定した関数に要素の値を渡して帰ってきた値を使って比較する。
・書式
newlist = sorted(iterable, key=関数名)

・絶対値
>>> mytuple = (5, -4, -7, 6)
>>> tuple(sorted(mytuple))
(-7, -4, 5, 6)
>>> tuple(sorted(mytuple, key=abs))　＃絶対値
(-4, 5, 6, -7)
>>>

・文字列の長さを使って並び替えをする場合（len 関数）
>>> mytuple = ("apple", "pen", "desk", "banana")
>>> tuple(sorted(mytuple))　＃タプル
('apple', 'banana', 'desk', 'pen')
>>> tuple(sorted(mytuple, key=len))　＃文字数
('pen', 'desk', 'apple', 'banana')
>>>

iexplore.exeについて

スーパーセキュリティ

【注意】
スーパーセキュリティでiexplore.exeをブロックされてると、Internet Explorerが起動できなくなるので、それをブロックされないように設定しておく