ゼロから学ぶjQuery(1)--基礎知識
36461 ワード
なぜ急にjqueryにジャンプしたのか聞かないでください.前の点はあまり理解していないとしか言いようがありません.ここだけは理解しやすいです.jQuery jQueryは少し印象的な人が多いかもしれません.使いやすいクエリーです.jQueryを利用してノードの内容を簡単に検索する前に私たちが使っていたのは
見ていると面倒ですが、jQueryを使うとコード量を大幅に短縮できますし、jQueryを使うにも便利です.
var p=document.getElementById('ds');
見ていると面倒ですが、jQueryを使うとコード量を大幅に短縮できますし、jQueryを使うにも便利です.
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
，
emm …，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>
， jQuery
jQuery $という で、セレクタの を します
$; // jQuery(selector, context)
jQuery;function b(e, t)
$この とjQueryは1つの で、なぜjQueryがこのように がこのページで をチェックして たのか...しかし には たちの$はすでに されているので、jQueryがこの を する があります. 、 じ のJQueryを すればいいです.csdnのように、 を けるためです.jQuery.noConflict(); // $
$; // undefined
jQuery; // jQuery(selector, context)
なクエリー は、 のページを にとります.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.red
{color:red;
}
.green
{
background-color:green;
}
</style>
</head>
<body>
<p id ='test' class="red"> hahahah</p>
<p id ='12' class="red green"> yingying</p>
<form>
pwd<input type=password name="password"></input>
id<input type=text name="username"></input>
</form>
</body>
</html>
jQuery idプロパティの p=$('#12');//Object { 0: p#12.red.green, length: 1 } ，id #
に#を ける. されるオブジェクトはjQueryオブジェクトです.
ラベルで (つまり<>のような)するにはラベル を くだけでいいですp=$('p');//Object { 0: p#test.red, 1: p#12.red.green
, length: 2, prevObject: {…} }
p.length;//
2
classで するには、class の に1つ することに してください.p=$('.red');
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} } // `class="red"`
、 くのノードには のclassがあり、redとgreenを に むノードを できます.vp=$('.red')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }// ！
1つのノードにはidとclassのほかに くの があり、1つのフォームで に するなど、 に するのが です.p=$('[name="username"]')
Object { 0: input, length: 1, prevObject: {…} } // < name="username">, ' ， "
p=$('[type="password"]')
Object { 0: input, length: 1, prevObject: {…} } // < type="password">
の にスペースなどの が まれている は、 で む があります.
では、 または を して することもできます.p= $('[name^=user]');
Object { 0: input, length: 1, prevObject: {…} }// name user DOM
p=$('[type$=word]')
Object { 0: input, length: 1, prevObject: {…} }// name word DOM
この は にclassプロパティで するのに しており、classに の が まれている を けません.p=$('[class^=red]')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }// class `red` DOM
コンビネーション とは、 の セレクタを み わせて することです.$('[name=username])のinputを すると、フォームの にも つかる がありますが、 したいだけで、このように くことができます.p=$('input[name=username]')
Object { 0: input, length: 1, prevObject: {…} }// username
に、tagとclassを み わせて することもよくあります.p=$('p.red')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }// p class red dom
のセレクタは、 のセレクタを み わせて します. $('p,input');
Object { 0: p#test.red, 1: p#12.red.green, 2: input, 3: input, length: 4, prevObject: {…} }
$('p.red,p.green');// <p class="red"> <p class="green">
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }
p.red.グリーンは1 も2 も ばれているので2 るはずですが、 ばれた はHTMLに てくる に べられていて、 する はないので1 しか てこないので してください
もちろん、 から までクエリーしてページ を することもできます.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="game" name="game">
<ul class="MOBA">
<li class="pc1">DOTA</li>
<li class="pc2">LOL</li>
<li class="pc3">300 </li>
<li class="mobile"> </li>
</ul>
<ol class="sport">
<li class="water"> </li>
<li class="land"> </li>
<ol>
</div>
<form class="game">
<p> <input type=text name="game"></input></p>
</form>
</body>
</html>
ここでは を していません.もちろん、 には じ が れる があることを けるために、treeの に うほうがいいです.$('ul.MOBA li.pc1');
Object { 0: li.pc1, length: 1, prevObject: {…} }
$('div.game li.pc1');
Object { 0: li.pc1, length: 1, prevObject: {…} }
$('ul.MOBA li')
Object { 0: li.pc1, 1: li.pc2, 2: li.pc3, 3: li.mobile, length: 4, prevObject: {…} }
$('div[name=game] li')
Object { 0: li.pc1, 1: li.pc2, 2: li.pc3, 3: li.mobile, 4: li.water, 5: li.land, length: 6, prevObject: {…} }
をname がgameのdivに する.ページにdivがたくさんある 、 のフォームのliは されません.
も $('form.game p input')
Object { 0: input, length: 1, prevObject: {…} } // form <p> <input>
$('ul.MOBA>li.pc1')
Object { 0: li.pc1
, length: 1, prevObject: {…} } // dota
$('div.game>li.pc1')
Object { length: 0, prevObject: {…} } // [],
, .> な に うのでさっきの$('ul.MOBA li'); / / DOTA、LOL 300 . 4
$('ul.MOBA li:first-child');
Object { 0: li.pc1, length: 1, prevObject: {…} }// DOTA
$('ul.MOBA li:last-child')
Object { 0: li.mobile, length: 1, prevObject: {…} }//
$('ul.MOBA li:nth-child(2)')
Object { 0: li.pc2, length: 1, prevObject: {…} }// N .N 1
$('ul.MOBA li:nth-child(odd)')
Object { 0: li.pc1, 1: li.pc3, length: 2, prevObject: {…} }//
$('ul.MOBA li:nth-child(even)')
Object { 0: li.pc2, 1: li.mobile, length: 2, prevObject: {…} }//
いくつかの があります<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<form class="game">
<p> <input type=text name="game1"></input></p>
<p> <input type=file name="game2"></input></p>
<p> <input type=checkbox name="game3">DOTA</input><input type=checkbox name="game4">LOL</input></p>
<p> <input type=radio name="game5"> </input><input type=radio name="game5"> </input></p>
<p> <input type=hidden name="game1"></input></p>
</form>
</body>
</html>
もう つ...:file$('input:file')
Object { 0: input, length: 1, prevObject: {…} }// <input type="file">， input[type=file] ；
:checkbox $('input:checkbox')
Object { 0: input, 1: input, length: 2, prevObject: {…} }// ， input[type=checkbox] ;
:radio $('input:radio')
Object { 0: input, 1: input, length: 2, prevObject: {…} } // ， input[type=radio] ；
:hidden $('input:hidden')
Object { 0: input, length: 1, prevObject: {…} }// input
:visible $('input:visible')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, length: 6, prevObject: {…} } // input
:checked $('input:checked')
Object { 0: input, length: 1, prevObject: {…} }// ， ， dota
$('input:disabled');// ，
Object { length: 0, prevObject: {…} }
$('input:enabled')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input, length: 7, prevObject: {…} }// <input>、<select>
:input $(':input');// <input>，<textarea>，<select> <button>
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input
, length: 7, prevObject: {…} }
$('input')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input, length: 7, prevObject: {…} }
2つの が じように じて、どうして1つ いことを りません
もちろん も です$('input:checkbox:checked')//
Object { 0: input, length: 1, prevObject: {…} }
$('input:radio:checked')//
Object { length: 0, prevObject: {…} }
$('input[type=radio]:checked');//
:focus var x;
var int=self.setInterval(function(){
x=$('input:focus')
},10000)
x;
Object { 0: input, length: 1, prevObject: {…} }// input
の の を して、カーソルを$('input:focus')で することができて、 は で しました...