jQueryセレクタおよびイベント
23637 ワード
セレクタ1、基本セレクタcssのフロントエンドの新しいメンバーを理解するには、基本セレクタはcssセレクタのように、現在divがあるように、class名はaaaと呼ばれています.
この要素はjQueryで取得できます
同様にjQueryはidセレクタ、要素セレクタ、フルセレクタ(*)と複数のセレクタを組み合わせたベースセレクタ2、属性セレクタ1もサポートする.[attribute]プロパティセレクタは、特定のプロパティを含む要素を一致させ、あるプロパティを持つ要素を判断します.
2.[attribute=value]プロパティセレクタ所与のプロパティに一致する値がvalueの要素
3.[attribute!=value]プロパティセレクタ指定したプロパティに一致する値がvalueの要素に等しくない
4.[attribute^=value]プロパティセレクタ所与のプロパティに一致する値がvalueで始まる要素
5.[attribute$=value]属性セレクタ所与の属性に一致する値がvalueで終わる要素である
6.[attribute*=value]プロパティセレクタ指定したプロパティの値に一致するvalueの要素を含む
7.[selector 1][selector 2][selectorN]複数の属性セレクタ複合属性セレクタで、複数の条件を同時に満たす必要がある場合に使用します.複数の属性値は交差例をとります.
三、基礎フィルター1.$(「div:first」)すべてのdiv要素の最初のdiv要素を選択
2.$(「div:last」)すべてのdiv要素の最後のdiv要素を選択
3.$("input:not(.myClass))classがmyClassでないinput要素を選択
4..$(「input:even」)偶数のインデックスを選択するinput要素
5.$(「input:odd」)選択インデックスが奇数のinput要素
6.$(「input:eq(1))インデックスが1に等しいinput要素を選択
7.$(「input:gt(1))インデックスが1より大きいinput要素を選択します(注:1より大きく、1を含まない)
8.$(「input:lt(1))インデックスが1未満のinput要素を選択します(注意:1未満、1を除く)
9.$(": header")Webページのすべてのh 1、h 2を選択...
10.$(「div:animated」)アニメーションを実行するdiv要素の例を選択します.
四、コンテンツフィルタセレクタ1.$(「div:contains(「私」)テキスト「私」を含むdiv要素を選択
2.$(「div:empty」)サブ要素(テキスト要素を含む)を含まないdiv空の要素を選択
3.$(「div:has(p))p要素を含むdiv要素を選択
4.$(「div:parent」)サブエレメント(テキストエレメントを含む)を持つdivエレメントを選択
五、可視性フィルタ1..$(":hidden")すべての非表示要素を選択
六、属性フィルタセレクタ1.$(「div[id])属性idを持つ要素を選択
2.$(「div[title=test])属性titleが「test」のdiv要素を選択
3..$(「div[title!=test」)属性titleが「test」に等しくないdiv要素を選択します(属性titleのないdiv要素も選択されます).
4..$(「div[title^test])属性titleを選択して「test」で始まるdiv要素
5.(「div[title=test])属性titleを選択して「test」で終わるdiv要素
6..$(「div[title*=test])属性titleが「test」を含むdiv要素を選択
7.. (「div[id][title='test’」)属性idを持ち、属性titleが「test」で終わるdiv要素を選択
七、サブエレメントフィルタセレクタ1.nth-child(index/even/odd)各親要素の下のindex番目のサブ要素またはパリティ要素を選択します.eq(index)は1つの要素にのみ一致し、合計0から計算されます.nth-childは各親要素にサブ要素を割り当て、nth-child(index)のindexは1から始まります.
2.:first-childは単一の要素のみを返します.first-childセレクタは、親要素ごとに$(「ul li:first-child」)などの最初の要素を一致させます.各ulの最初のli要素を選択
3.last-child各親要素の最後のサブ要素を選択します.lastは単一の要素を返します.last-childセレクタは、各親要素に最後のサブ要素、例えば$(「ul li:last-child」)各ulの最後のli要素を選択します.
4.:only-childエレメントマスターの親エレメントの唯一の子エレメントが一致する場合、親エレメントに他のエレメントが含まれている場合は一致しません.
たとえば、$(「ul li:only-child」)ulで唯一のサブエレメントであるliエレメントを選択します.nth-child()セレクタは、一般的なサブエレメントフィルタセレクタです.詳細は、次のとおりです.
:nth-child(even)各親要素のインデックス値が偶数の要素を選択できます.
:nth-child(odd)親要素ごとにインデックス値が奇数の要素を選択できます.
:nth-child(2)親要素ごとにインデックス値が2に等しい要素を選択できます.
:nth-child(3 n)親要素ごとにインデックス値が3の倍数の要素を選択できます(nは0から始まります)
:nth-child(3 n+1)親要素ごとにインデックス値が(3 n+1)の要素を選択できます.
(nは0から始まる)例えば:$(‘div.one:nth-child(2)’).css(「background」,「red」)は、classがoneのdiv親要素の下にある2番目のサブ要素の背景色を変更することを示す
$(‘div.one:first-child’).css(「background」,「red」)は、各classがoneのdiv親要素の下にある最初のサブ要素の背景色を変更することを示す
$(‘div.one:last-child’).css(「background」,「red」)は、各classがoneのdiv親要素の最後のサブ要素の背景色を変更することを示す
$(‘div.one:only-child’).css(「background」,「red」)は、classがoneのdiv親要素の下にサブ要素が1つしかない場合、このサブ要素の背景色を変更することを示す.
八、フォームオブジェクト属性フィルタセレクタ1.$(「#form 1:enabled」)idを「form 1」として選択したフォーム内のすべての使用可能な要素
2.$(#form 1:disabled)idを「form 2」として選択したフォーム内の使用できないすべての要素
3.$(「input:checked」)選択したすべてのinput要素を選択
4.$(「select:selected」)計算されたすべてのオプション要素を選択
5.$(":input")選択すべてのinputを選択
6.$(":text")すべての単行テキストボックスを選択
7.$(": password")すべてのパスワードボックスを選択
8.$(": radio")すべてのラジオボックスを選択
9.$(": checkbox")すべてのチェックボックスを選択
10.$(":submit")すべてのコミットボタンを選択
11.$(": image")すべての画像ボタンを選択
12.$(": reset")すべてのリセットボタンを選択
13.$(": button")すべてのボタンを選択
14.$(": file")すべてのアップロードドメインを選択
15.$(": hidden")すべての非表示要素を選択
jQueryブラウザイベントおよびドキュメントロードイベント1、マウスイベントマウスイベントは、ユーザがマウスカーソルを移動する、または任意のマウスボタンでクリックしたときにトリガーされる.clickイベント:clickイベントは、ユーザーがエレメントでマウスの左ボタンをタップし、同じエレメントで左ボタンを放したときにトリガーされます.(‘p′).click(function()alert(‘clickfunctionisrunning!′););.dbclickイベント:dbclickイベントは、ユーザーが迅速に連続した2回のクリックを完了した後にトリガーされ、ダブルクリックの速度はオペレーティングシステムの設定に依存します.通常、ダブルクリックイベントはページではあまり使用されません.(‘p’).dbclick(function(){ alert(‘dbclick function is running !’); }); .mousedownイベント:mousedownイベントは、ユーザーがマウスボタンを叩くとトリガーされ、keydownイベントとは異なり、マウスを押すとトリガーされます.(‘p′).mousedown(function()alert(‘mousedownfunctionisrunning!′););.mouseupイベント:mouseupイベントは、ユーザーがマウスを離すとトリガーされ、マウスを押す要素と同じ要素で離すとclickイベントもトリガーされます.(‘p’).mouseup(function(){ alert(‘mouseup function is running !’); }).click(function(){ alert(‘click function is running too !’); }); .mouseoverイベント:mouseoverイベントは、ユーザーがある要素から別の要素にマウスを移動するときにトリガーされ、その要素から使用できることを知る必要がある場合はrelatedTagrgetプロパティです.mouseoutイベント:mouseoutイベントは、親エレメントから子エレメントに移動するか、キーボードを使用してエレメントにジャンプするなど、ユーザーがマウスをエレメントから移動するときにトリガーされます.mouseenterイベント:mouseenterイベントは、ユーザーカーソルが要素に入ったときにトリガーされます.(‘p′).mouseenter(function()alert(‘mouseenterfunctionisrunning!′););.mouseleaverイベント:mouseleaverイベントは、ユーザーのカーソルが要素から離れたときにトリガーされます.(‘p’).mouseleaver(function(){ alert(‘mouseleaver function is running !’); }); (7)と(8)の2つのイベントは一般的に結合して使用され,jQueryではhoverという関数を用いてこの2つの関数の代わりに使用することができる.(‘p’).hover(function(){ alert(‘mouseenter function is running !’); },function(){ alert(‘mouseleaver function is running !’); }); 二、キーボードイベント1、keydown():キーボードが押されたときにトリガーされます.
2、keyup():キーボードを押して起きたイベントです.
3、keypress():ボタンを叩くとトリガーされ、同じボタンを押して持ち上げると理解できます.
三、ブラウザイベント及びドキュメントロードイベントブラウザイベント:1.error() 2. resize() 3. scroll()ドキュメントのロード:1$(function(){});
2 $(document).ready(function () { });
3 window.onload = function () { }
<div class=“aaa”>Adiv>この要素はjQueryで取得できます
$(“.aaa”).css(“color”,”red”);
//$(“.aaa”) div
</script> 同様にjQueryはidセレクタ、要素セレクタ、フルセレクタ(*)と複数のセレクタを組み合わせたベースセレクタ2、属性セレクタ1もサポートする.[attribute]プロパティセレクタは、特定のプロパティを含む要素を一致させ、あるプロパティを持つ要素を判断します.
2.[attribute=value]プロパティセレクタ所与のプロパティに一致する値がvalueの要素
3.[attribute!=value]プロパティセレクタ指定したプロパティに一致する値がvalueの要素に等しくない
4.[attribute^=value]プロパティセレクタ所与のプロパティに一致する値がvalueで始まる要素
5.[attribute$=value]属性セレクタ所与の属性に一致する値がvalueで終わる要素である
6.[attribute*=value]プロパティセレクタ指定したプロパティの値に一致するvalueの要素を含む
7.[selector 1][selector 2][selectorN]複数の属性セレクタ複合属性セレクタで、複数の条件を同時に満たす必要がある場合に使用します.複数の属性値は交差例をとります.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
<style type="text/css">
.back{
background-color: #1a71a8;
}
style>
head>
<body>
<input type="text"tabindex="1" name="username" id="user-one">
<input type="text"tabindex="2" name="password" id="user-two">
<input type="text"tabindex="3" name="location" id="user-three">
<input type="text"tabindex="4" name="sex" id="user-four">
<script type="application/javascript">
$(function () { $("input[name='username']").css("background-color","#c6c6c6"); $("input[name='password']").addClass("back"); $("input[name*='l']").addClass("back");
$("input[id$='two']").addClass("back");
});
script>
body>
html>三、基礎フィルター1.$(「div:first」)すべてのdiv要素の最初のdiv要素を選択
2.$(「div:last」)すべてのdiv要素の最後のdiv要素を選択
3.$("input:not(.myClass))classがmyClassでないinput要素を選択
4..$(「input:even」)偶数のインデックスを選択するinput要素
5.$(「input:odd」)選択インデックスが奇数のinput要素
6.$(「input:eq(1))インデックスが1に等しいinput要素を選択
7.$(「input:gt(1))インデックスが1より大きいinput要素を選択します(注:1より大きく、1を含まない)
8.$(「input:lt(1))インデックスが1未満のinput要素を選択します(注意:1未満、1を除く)
9.$(": header")Webページのすべてのh 1、h 2を選択...
10.$(「div:animated」)アニメーションを実行するdiv要素の例を選択します.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
<style type="text/css">
.back{
background-color: #e99494;
}
div{
width: 100px;
height: 100px;
background-color: #70bfef;
}
style>
head>
<body>
<div >div>
<div class="tagbug">div>
<div>div>
<script type="application/javascript">
$(function () {
var animaIt=function () {
$(".tagbug").fadeToggle("slow");
}
});
script>
body>
html>四、コンテンツフィルタセレクタ1.$(「div:contains(「私」)テキスト「私」を含むdiv要素を選択
2.$(「div:empty」)サブ要素(テキスト要素を含む)を含まないdiv空の要素を選択
3.$(「div:has(p))p要素を含むdiv要素を選択
4.$(「div:parent」)サブエレメント(テキストエレメントを含む)を持つdivエレメントを選択
五、可視性フィルタ1..$(":hidden")すべての非表示要素を選択
六、属性フィルタセレクタ1.$(「div[id])属性idを持つ要素を選択
2.$(「div[title=test])属性titleが「test」のdiv要素を選択
3..$(「div[title!=test」)属性titleが「test」に等しくないdiv要素を選択します(属性titleのないdiv要素も選択されます).
4..$(「div[title^test])属性titleを選択して「test」で始まるdiv要素
5.(「div[title=test])属性titleを選択して「test」で終わるdiv要素
6..$(「div[title*=test])属性titleが「test」を含むdiv要素を選択
7.. (「div[id][title='test’」)属性idを持ち、属性titleが「test」で終わるdiv要素を選択
七、サブエレメントフィルタセレクタ1.nth-child(index/even/odd)各親要素の下のindex番目のサブ要素またはパリティ要素を選択します.eq(index)は1つの要素にのみ一致し、合計0から計算されます.nth-childは各親要素にサブ要素を割り当て、nth-child(index)のindexは1から始まります.
2.:first-childは単一の要素のみを返します.first-childセレクタは、親要素ごとに$(「ul li:first-child」)などの最初の要素を一致させます.各ulの最初のli要素を選択
3.last-child各親要素の最後のサブ要素を選択します.lastは単一の要素を返します.last-childセレクタは、各親要素に最後のサブ要素、例えば$(「ul li:last-child」)各ulの最後のli要素を選択します.
4.:only-childエレメントマスターの親エレメントの唯一の子エレメントが一致する場合、親エレメントに他のエレメントが含まれている場合は一致しません.
たとえば、$(「ul li:only-child」)ulで唯一のサブエレメントであるliエレメントを選択します.nth-child()セレクタは、一般的なサブエレメントフィルタセレクタです.詳細は、次のとおりです.
:nth-child(even)各親要素のインデックス値が偶数の要素を選択できます.
:nth-child(odd)親要素ごとにインデックス値が奇数の要素を選択できます.
:nth-child(2)親要素ごとにインデックス値が2に等しい要素を選択できます.
:nth-child(3 n)親要素ごとにインデックス値が3の倍数の要素を選択できます(nは0から始まります)
:nth-child(3 n+1)親要素ごとにインデックス値が(3 n+1)の要素を選択できます.
(nは0から始まる)例えば:$(‘div.one:nth-child(2)’).css(「background」,「red」)は、classがoneのdiv親要素の下にある2番目のサブ要素の背景色を変更することを示す
$(‘div.one:first-child’).css(「background」,「red」)は、各classがoneのdiv親要素の下にある最初のサブ要素の背景色を変更することを示す
$(‘div.one:last-child’).css(「background」,「red」)は、各classがoneのdiv親要素の最後のサブ要素の背景色を変更することを示す
$(‘div.one:only-child’).css(「background」,「red」)は、classがoneのdiv親要素の下にサブ要素が1つしかない場合、このサブ要素の背景色を変更することを示す.
八、フォームオブジェクト属性フィルタセレクタ1.$(「#form 1:enabled」)idを「form 1」として選択したフォーム内のすべての使用可能な要素
2.$(#form 1:disabled)idを「form 2」として選択したフォーム内の使用できないすべての要素
3.$(「input:checked」)選択したすべてのinput要素を選択
4.$(「select:selected」)計算されたすべてのオプション要素を選択
5.$(":input")選択すべてのinputを選択
6.$(":text")すべての単行テキストボックスを選択
7.$(": password")すべてのパスワードボックスを選択
8.$(": radio")すべてのラジオボックスを選択
9.$(": checkbox")すべてのチェックボックスを選択
10.$(":submit")すべてのコミットボタンを選択
11.$(": image")すべての画像ボタンを選択
12.$(": reset")すべてのリセットボタンを選択
13.$(": button")すべてのボタンを選択
14.$(": file")すべてのアップロードドメインを選択
15.$(": hidden")すべての非表示要素を選択
jQueryブラウザイベントおよびドキュメントロードイベント1、マウスイベントマウスイベントは、ユーザがマウスカーソルを移動する、または任意のマウスボタンでクリックしたときにトリガーされる.clickイベント:clickイベントは、ユーザーがエレメントでマウスの左ボタンをタップし、同じエレメントで左ボタンを放したときにトリガーされます.(‘p′).click(function()alert(‘clickfunctionisrunning!′););.dbclickイベント:dbclickイベントは、ユーザーが迅速に連続した2回のクリックを完了した後にトリガーされ、ダブルクリックの速度はオペレーティングシステムの設定に依存します.通常、ダブルクリックイベントはページではあまり使用されません.(‘p’).dbclick(function(){ alert(‘dbclick function is running !’); }); .mousedownイベント:mousedownイベントは、ユーザーがマウスボタンを叩くとトリガーされ、keydownイベントとは異なり、マウスを押すとトリガーされます.(‘p′).mousedown(function()alert(‘mousedownfunctionisrunning!′););.mouseupイベント:mouseupイベントは、ユーザーがマウスを離すとトリガーされ、マウスを押す要素と同じ要素で離すとclickイベントもトリガーされます.(‘p’).mouseup(function(){ alert(‘mouseup function is running !’); }).click(function(){ alert(‘click function is running too !’); }); .mouseoverイベント:mouseoverイベントは、ユーザーがある要素から別の要素にマウスを移動するときにトリガーされ、その要素から使用できることを知る必要がある場合はrelatedTagrgetプロパティです.mouseoutイベント:mouseoutイベントは、親エレメントから子エレメントに移動するか、キーボードを使用してエレメントにジャンプするなど、ユーザーがマウスをエレメントから移動するときにトリガーされます.mouseenterイベント:mouseenterイベントは、ユーザーカーソルが要素に入ったときにトリガーされます.(‘p′).mouseenter(function()alert(‘mouseenterfunctionisrunning!′););.mouseleaverイベント:mouseleaverイベントは、ユーザーのカーソルが要素から離れたときにトリガーされます.(‘p’).mouseleaver(function(){ alert(‘mouseleaver function is running !’); }); (7)と(8)の2つのイベントは一般的に結合して使用され,jQueryではhoverという関数を用いてこの2つの関数の代わりに使用することができる.(‘p’).hover(function(){ alert(‘mouseenter function is running !’); },function(){ alert(‘mouseleaver function is running !’); }); 二、キーボードイベント1、keydown():キーボードが押されたときにトリガーされます.
2、keyup():キーボードを押して起きたイベントです.
3、keypress():ボタンを叩くとトリガーされ、同じボタンを押して持ち上げると理解できます.
三、ブラウザイベント及びドキュメントロードイベントブラウザイベント:1.error() 2. resize() 3. scroll()ドキュメントのロード:1$(function(){});
2 $(document).ready(function () { });
3 window.onload = function () { }
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
<style type="text/css">
.back{
background-color: #70bfef;
}
style>
head>
<body>
<fieldset>
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="text" tabindex="5">
fieldset>
<script type="application/javascript">
$(function () {
$("fieldset").delegate("input","focus blur",function () {
var inp=$("this");
setTimeout(function () {
inp.toggleClass("back",inp.is(":focus"));
},100);
});
});
script>
body>
html><html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: #b6b6b6;
}
p{
width: 200px;
height: 200px;
background-color: #e99494;
}
style>
head>
<body>
<div>
<p>p>
div>
<script type="application/javascript">
$(function () {
// $("div").delegate("p","click",function () {
// alert(" P ");//
//// }) ;
// $("div").bind("click mouseover",function (evt) {
// if(evt.type=="click"){
// alert("akakka");
// }
// else if(evt.type=="mouseover"){
// alert("g ");//
// }
// });
// $(window).resize(function () {
// alert(" ");//
// });
// var textone=function () {
// alert("dianji");
// }
// $("div").on("click",textone);//on
//
$("p").bind("click",function (evt) { alert(evt.currentTarget+"++++"+evt.delegateTarget+"+++"+evt.pageX);//
})
});
script>
body>
html>