jquery単語

26件
ジェイクエリー
1.5千文字の記事
  • 1
  • 0pt
掲示板へ

jquery(ジェイクエリー)とは、プログラムが苦手なデザイナーさんたちの救世主、もといJavaScriptライブラリの一種である。

モットーは、「少ない記述で、もっと多くのことをする」

概要

jQueryの最大の特長は、短いコードで、しかも直感的にプログラムを書けることである。その方法はプログラムより日常会話の言に近く、〇〇が△△した時、××せよ、というに書くことができる。

たとえば、idd1という値を持つ要素divに対し、クリックした時に、背景色を赤色に変えたい場合、このように記述する。

$('#d1').on('click',function(){  

    $(this).css({'background-color':'#f00'})

});

詳しい説明は省略するとして、$('#d1')がclickされたとき、CSSbackground-colrを#f00()にしなさいという意味である。このように主語、述がはっきりしているので、非常に解りやすい。

また、JavaScriptだとループ文などを使わないといけない面倒なケースも、jQueryなら一発で記述できたりする。例として、idc1tという値を持つチェックボックスで最初から値が選択されている場合である。

$('#c1').prop('checked',true);

これだけで済む。

他には、プルダウンメニューの中から一つ値を選択した時、その値を出したい場合はこのような記述ができる。

$('select').find('option').each(function(){
    $(this).on('change',function(){
        console.log($(this).val());
});

も、これで全くJavaScriptの知識が不要になるわけではなく、あくまで延長線上にあるライブラリなので、JavaScriptの知識は持っておくべきである。

Ajax実行

また、jQueryの魅は、それまでprototypeJSなどのライブラリを必要としていたAjaxルーチン実行において、簡潔なコードで実行できるようになったことも大きく、これがプログラマーからもjQueryが重宝されている理由である。受けとった値が複数の場合は、JSON形式が流になってきているが、テキスト化し、それをデリミタで分割する方法もある。

$.ajax({
    type: 'post',
    url: "hogehoge.php",
    data: {name: "piyo","location":"fuga"}},
    dataType: 'json',
).done(function(data){

}).fail(function(){

})

jQueryで制作されるもの

Queryが多用されている画面でお染みのものとして、以下のような仕掛けがある。これらは知識を付ければ自作もできるが、ライブラリを選択して使うのもオススメする。

関連動画

関連商品

関連項目

関連記事

親記事

子記事

  • なし

兄弟記事

【スポンサーリンク】

  • 1
  • 0pt
記事編集 編集履歴を閲覧

ニコニ広告で宣伝された記事

天外魔境II (単) 記事と一緒に動画もおすすめ!
提供: 火竜
もっと見る

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

jquery

1 ななしのよっしん
2020/01/04(土) 00:11:57 ID: wOLEPbI4xb
ReactとかVue.jsとかAngular
黒魔術のお友達かい?
👍
高評価
0
👎
低評価
0
2 ななしのよっしん
2020/01/09(木) 02:40:55 ID: Wczk7unZEl
いずれも公式ガイドが日本語訳されて勉強しやすくはなったな
ちなみに

Vue.js …html内の要素にディレクティブという黒魔術をかける
React …html内の要素にJSXという黒魔術の組織を設けて、その組織内でhtml錬金魔法をかける
Angular …htmlというかシステム全体に黒魔術がかかっている




👍
高評価
0
👎
低評価
0
3 ななしのよっしん
2021/02/15(月) 23:37:35 ID: YHruGsvNG2
似たようなものがいくつかあると、大体はどれか一つが鉄板として開発現場を支配する
それよりちょっと優秀なものがもしあっても、「できるを探す暇がない」で片づけられる
👍
高評価
0
👎
低評価
0
4 ななしのよっしん
2021/10/14(木) 21:11:08 ID: Wczk7unZEl
Svelteのことかー!!
👍
高評価
0
👎
低評価
0