jquery についてはかなりのことがあり、書き留めておくと将来の参照に役立ちます。これもかなり便利ですね。
JquerySelector
$(document).ready(function(){})
$(function(){})取得した オブジェクト が jQuery オブジェクトの場合、変数 の前には $, が付きます。 例: var $variable=jQueryObject
Selector
1, ページ上に要素が存在するかどうかを判断します: if($(“#tt”).length>0){} または if($(“#tt”)[0]){};
2, 基本セレクター
$(“#test”) 选择id为test的元素 |
$(“.test”)选择class为test的所有元素 |
$(“p”)选择所有的e388a4556c0f65e1904146cc1a846bee标签 |
$(“*”)选择页面上的所有元素 |
$(“span ,#two”)选择页面上所有的45a2772a6b6107b401db3c9b82c049c2标签和id为two的元素 |
$("#test") idが test |
を選択します。 🎜> | $(".test") テストのすべての要素 /td>
|
| $("p") すべての e388a4556c0f65e1904146cc1a846beeタグ |
| $("*")ページ上のすべての要素を選択します |
| $(“span ,#two”)すべての タグと id を持つ要素
|
は 2 です
3、层次选择器
$("p span")表示选取
$(“p span”)表示选取p中的所有的span元素 |
$(“parent>children”)选取parent下所有children的子元素 |
$(‘.one span')选取class为one的下一个span元素 |
$(‘.one~p')选取class为one的后面的所有的p兄弟元素 |
p中のすべてのspan元素 |
$(“parent>children”)选取親下すべて子の子元素 |
$('.one span')选取class一つの下一スパン元素 |
$('.one~p')选取class1 つのの後面のすべてのp兄弟元素 |
$('.one span') は $(".one").next("span")
$('one~p')$(“.one”).nextAll(“p”)
$(“.one”).siblings(“p”)
と同等4、 に関係なく、class のすべての兄弟要素
p
を 1 として選択します。 フィルターセレクター
(1)基本フィルター
| $(“p :first”)すべて選択 p最初の p 要素内の要素
|
| $(“p:last”) すべて選択p最後のp要素
|
| $(“input:not(.myClass)”) を選択します>input 要素 $( "input:even") | 偶数
入力要素|
$ ("input:odd")奇数の 入力を選択インデックス |
|
$("input:eq (1)")入力 を選択します。 element |
|
$( "input:gt(1)")インデックスが大きい input 要素を選択します1 より大きい ( | 1
より大きいには 1| は含まれません)
|
$("input:lt(1)")インデックスが 1 より小さい input 要素 > (1 を除く 1 未満) |
| $(" : 頭er”)すべて選択 h1、h2...
|
| $ ( "p:animated") アニメーションを実行している p 要素
|
🎜>(2)コンテンツ フィルター$("p:contains('I
$(“p:contains(‘我')”)选取含有文字“我”的p元素 |
$(“p:empty”)选取不包含子元素（包含文本元素）的p空元素 |
$(“p:has(p)”)选取含有p元素的p元素 |
$(“p:parent”)选取拥有子元素（包含文本元素）的p元素 |
')")テキスト「I」を含む pElement$(“p:empty”)子要素 (テキスト要素を含む) を含まない要素を選択します p空の要素$(“p:has(p)”)p を含む選択 要素の >p 要素 $(“p:parent”) は、所有する子要素 ( p 要素 テキスト要素を含む)(3)可視性フィルター セレクター
(“:hidden”)
$(“:hidden”)选取所有不可见的元素。包括b36110a7fe5a79730b35a3506f95a3b4,6f943d4c784aa7acf613167b36fd38d7和949ab30bebc0876d788c24b8c95c515a等元素。如果只想选取d5fd7aea971a85678ba271703566ebfd元素，可以使用$(“input:hidden”) |
$(“p:visible”)选取所有可见的e388a4556c0f65e1904146cc1a846bee元素 |
すべての非表示要素を選択します。 b36110a7fe5a79730b35a3506f95a3b4、6f943d4c784aa7acf613167b36fd38d7、 およびその他の要素。 d5fd7aea971a85678ba271703566ebfd 要素のみを選択したい場合は、$("input:hidden") |
$("p:visible")表示されているものをすべて選択 e388a4556c0f65e1904146cc1a846bee 要素 |
（4） プロパティ过滤选择器
|
$(“p[id]”)
$(“p[id]”)选取拥有属性id的元素 |
$(“p[title=test]”)选取属性title为test的p元素 |
$(“p[title!=test]”)选取属性title不是test的p元素（没有属性title的p也会被选取） |
$(“p[title^=test]”)选取属性title以test开始的p元素 |
$(“p[title$=test]”)选取属性title以test结束的p元素 |
$(“p[title*=test]”)选取属性title包含test的p元素 |
$(“p[id][title$='test']”)选取拥有属性id，并且属性title以test结束的p元素 |
选取拥有プロパティid の元素 |
$(“p[title=test]”)属性タイトルはテストのp元素 |
$("p[title!=test]")选取属性title不是 testのp元素（プロパティなしtitleのp也会被选取） | $(“p[title^=test]”)选取属性titleよりテスト開始のp元素 |
$("p[title$=test]")选取プロパティtitleよりテスト结束的p元素 |
$(“p[title*=test]”)选取プロパティタイトル包含テストのp元素 |
$("p[id][title$='test']")选取拥有属性id、およびプロパティtitleのためテスト结束のp元素 |
表>(5)子要素フィルター セレクター
|
:eq(index)
:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 |
|
:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。
例如$(“ul li:first-child”)选取每个ul中第一个li元素
|
:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素 |
$(“ul li:only-child”)在ul中选取是唯一子元素的li元素 |
は 1 つの要素のみに一致しますが、:nth-child はすべての親要素に一致します。子要素と一致し、 :nth-child(index)のindexは1から始まり、:eq(index)から計算されます 0 |
| :first-child セレクターは、各親要素の最初の子要素と一致します。 たとえば、$("ul li:first-child")は、各 ul の最初の li要素
|
$("ul li:only-child")在 ul |
の唯一の子要素である li 要素を選択します。:nth-child() セレクターは、非常によく使用される子要素のフィルタリング セレクターです。詳細な機能は次のとおりです。
1.:nth-child(even) は、各親要素のインデックス値が偶数である要素を選択できます
2. :nth-child(odd) は、各親要素のインデックス値が奇数である要素を選択できますnumber
3.:nth-child(2) は、各親要素 2 に等しい要素を選択できます🎜>4.nth -child(3n) は、各親要素のインデックス値が の倍数である 0 から始まる要素 (n ) を選択できます。 3 ) 5.nth-child(3n 1) は、各親要素のインデックス値が (3n 1n) を選択できます。 🎜>) 0 から開始) (6) フォームオブジェクト属性フィルターセレクター
|
$("#form1 :enabled ”) id
$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 |
$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素 |
$(“input:checked”)选取所有被选中的input元素 |
$(“select :selected”.text())选取所有被选中的选项元素 |
が form1 |
$("#form2 :disabled")id を " form2” フォーム内のすべての使用できない要素 |
$("input:checked")選択されたすべての input 要素を選択します | $("select :selected".text())すべてを選択オプション要素 |
5．表单选择器
$(“:input”)选取所有input、textarea、select和button元素 |
$(“:text”)选取所有的单行文本框 |
$(“:password”)选取所有的密码框 |
$(“:radio”)选取所有的单选框 |
$(“:checkbox”)选取所有的复选框 |
$(“:submit”)选取所有的提交按钮 |
$(“:image”)选取所有的图像按钮 |
$(“:reset”)选取所有的重置按钮 |
$(“:button”)选取所有的按钮 |
$(“:file”)选取所有的上传域 |
$(“:hidden”)选取所有不可见元素 |
$(":input")选取全部input、テキストエリア、選択とボタン元素| $(":text")选取全部的单行文本框
| $(":password")选取全部的秘密框
|
| $(":radio")选取全部的单选框
|
| $(":checkbox")选取全部的复选框
|
| $(":submit")选取全部的提交按钮
|
| $(":image")选取全部的画像按钮
|
| $(":リセット”)すべての重置按钮
|
| $(":button")选取全部的按钮
|
| $(":ファイル”)すべての上传ドメイン
|
| $(":hidden")选取全部不可见元素
|
Domオペレーション
Dom コア(コア)、HTML-DOM と CSS-DOM
1. ノードを挿入するメソッド
append() |
$(“p”) .append(“a4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beetest a4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
|
appendTo() |
$(“a4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a”).appendTo(“p” )
e388a4556c0f65e1904146cc1a846beeテストa4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
|
prepend() |
$(“p”)。 a4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747atest 94b3e26ee717c64999d7867364b1b4a3
|
prependTo() |
$(“p”).prependTo (“a4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419あなた0d36329ec37a2cc24d42c7229b69747aテスト94b3e26ee717c64999d7867364b1b4a3
|
After() |
$(“p”)。 after ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3< ;b>你
|
insertAfter() |
$( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)。 insertAfter (“p”)
e388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a
|
Before() |
$(“p” ）。 before ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)
a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3
|
insertBefore() |
$( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)。 insertBefore (“p”)
a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3
|
2. 删除节点
Remove()方法 empty()清空节点
3. 复制节点 Clone() $(this).clone(true).appendTo(“body”) 复制元素的同时复制元素中所绑定的事件
4. 替换节点 replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”); 5. 包裹节点
Wrap() |
$(“strong”).wrap(“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a |
wrapAll() |
$(“strong”). wrapAll (“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d0
8e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a
|
wrapInner() |
$(“strong”).wrapInner (a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);8e99a69fbe029cd4e2b854e244eab143a4b561c25d9afb9ac8dc4d70affff419ssss0d36329ec37a2cc24d42c7229b69747aac614297babda07451c2ac7bdedd5452 |
6. 属性操作 Attr(); 设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})removeAttr()移除属性
7. 样式操作
获取和设置样式 |
Attr() |
追加样式 |
addClass() |
移除样式 |
removeClass() removeClass(“one two”) |
切换样式 |
toggle()主要控制行为上的重复切换
toggleClass()样式上的重复切换
|
判断是否含有某个样式 |
hasClass()等价于is(“.one”) |
8.设置および获取html、文本和值
html() |
读取或者设置某个元素中的HTML内容 |
text() |
读取或者设置某个元素中文本内容 |
val() |
设置和获取元素的值defaultValue初始值 |
html()
|
读取または者設置某元素中のHTMLコンテンツ |
| text() |
读取または者設置某元素中文本文 |
| val() |
設定および获取元素の值defaultValue初值 |
9.遍历节点
Children() |
取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 |
Next() |
取得匹配元素后面紧邻的同辈元素 |
Prev() |
取得匹配元素前面紧邻的同辈元素 |
Siblings() |
取得匹配元素前后所有的同辈元素 |
Closest() |
取得最近的匹配元素 |
还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等 |
子供()
|
取得適合元素の子元素の集合，只考虑子元素不考虑後代元素 |
| 次へ() |
取得適合元素后面紧邻的同辈元素 |
| Prev() |
取得適合元素前面紧邻的同辈元素 |
| 兄弟() |
取得適合元素前後すべての同辈元素 |
| Closest() |
最近の適合元素を取得 |
| 还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents( )等 |
CSS-DOMオペレーション
スタイルを取得 |
$(“.one”).css(“color”) |
スタイルを設定 |
$(“.one”).css(“color”, "赤")
$(".one").css({"不透明度":"0.5","背景色":"青" })
|
身長() |
$(" .one").height(),設定: $(".one").height("20px") |
Width() |
$(“.one”).width(),設定: $(“.one”).width(“200px”) |
Offset() |
top および を含む、現在のウィンドウ内の要素の相対オフセットを取得します。左 |
位置() |
最も近い position スタイル属性を relative に設定して要素を取得するか、 absolute の祖父母ノードの相対オフセットには、top と 左 |
ScrollTop() |
取得および要素のスクロール バーと上部の間の距離を設定します |
ScrollLeft() | 要素のスクロールバーと左側の間の距離を取得および設定します |
事件和动画
事件
（1） 绑定事件
bind(type[,data],fn);
参数：type：事件类型，也可以自定义名称
data:作为event.data属性值传递给事件对象的额外数据对象
fn：用来绑定的处理函数
绑定多个事件类型 Ex：$(“p”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})（2） 合成事件
Hover(enter,leave);
用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）
toggle(fn1,fn2,….fnN);
用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。
（3） 冒泡事件
假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外
停止事件冒泡的方法： stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})
停止表单默认提交：event.preventDefault()==return false;
（4） 移除事件 Unbind([type][,data]); Type:事件类型
Data：将要移除的函数
（5） 触发一次函数 One（type，[data],fn）; 事件触发后立即解除
动画
Show() |
低速: 600ms、通常: 400ミリ秒、高速: 200ミリ秒 |
非表示() |
ファデルン() |
要素が完全に消えるまで、指定された期間要素の不透明度を下げます |
fadeout() |
上記の逆 |
slideUp() |
次とは逆です |
slideDown() | 要素は上から下に向かって表示されます |
カスタムアニメーションanimate 文法構造: animate(params,speed, callback);
パラメータの説明は次のとおりです:
1. Params: スタイル属性と値を含むマッピング ({property1: "value1"、property2: "value2",…} 2．速度:速度パラメータ、オプション。
Callback: アニメーションの完了時に実行される関数、オプション
とりあえずこれを追加してください将来的にはゆっくりと改善していきます。 上記は、jQuery セレクター、DOM 操作、イベント、アニメーションの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
|
