jquery についてはかなりのことがあり、書き留めておくと将来の参照に役立ちます。これもかなり便利ですね。
JquerySelector
$(document).ready(function(){})
$(function(){})取得した オブジェクト が jQuery オブジェクトの場合、変数 の前には $, が付きます。 例: var $variable=jQueryObject
Selector
1, ページ上に要素が存在するかどうかを判断します: if($(“#tt”).length>0){} または if($(“#tt”)[0]){};
2, 基本セレクター
| |||||
| <🎜>$(".test")<🎜> <🎜>テスト<のクラス<🎜><🎜>のすべての要素<🎜><🎜>< 🎜> /td> | |||||
| <🎜>$("p")< 🎜> すべての <🎜> <🎜>タグ<🎜><🎜> | |||||
| <🎜>$("*")<🎜>ページ上のすべての要素を選択します<🎜><🎜> | |||||
| <🎜>$(“span ,#two”)<🎜>すべての <🎜>< を選択しますページ 🎜> タグと <🎜>id<🎜> を持つ要素 <🎜><🎜> |
3、层次选择器
$("p span")表示选取 $(“p span”)表示选取p中的所有的span元素 $(“parent>children”)选取parent下所有children的子元素 $(‘.one span')选取class为one的下一个span元素 $(‘.one~p')选取class为one的后面的所有的p兄弟元素 | ||||
$(“parent>children”)选取<🎜>親下すべて<🎜>子の子元素<🎜><🎜>< /td> | ||||
$('.one span')选取<🎜>class<🎜>一つの下一<🎜>スパン元素<🎜>< 🎜> | ||||
$('.one~p')选取<🎜>class<🎜>1 つのの後面のすべての<🎜>p兄弟元素<🎜><🎜> |
$('.one span') は $(".one").next("span")
$('one~p')<🎜 と同等です>$(“.one”).nextAll(“p”)
$(“.one”).siblings(“p”)と同等4、 に関係なく、class のすべての兄弟要素
pを 1 として選択します。 フィルターセレクター
| $(“p :first”)すべて選択 p最初の p 要素内の要素 |
| $(“p:last”) すべて選択p最後のp要素 |
| $(“input:not(.myClass)”) を選択します>input 要素 $( "input:even") | 偶数
| 入力を選択インデックス |
$("input:eq (1)")入力 を選択します。 element |
$( "input:gt(1)")インデックスが大きい input 要素を選択します1 より大きい ( | 1
| は含まれません) |
$("input:lt(1)")インデックスが 1 より小さい input 要素<🎜 を選択します > (1 を除く 1 未満) |
| $(" : 頭er”)すべて選択 h1、h2... |
| $ ( "p:animated") アニメーションを実行している p 要素 |
2)コンテンツ フィルター $(“p:contains(‘我')”)选取含有文字“我”的p元素 $(“p:empty”)选取不包含子元素（包含文本元素）的p空元素 $(“p:has(p)”)选取含有p元素的p元素 $(“p:parent”)选取拥有子元素（包含文本元素）的p元素 (3)可視性フィルター セレクター $(“:hidden”)选取所有不可见的元素。包括, $(“p:visible”)选取所有可见的 元素 $("p:visible")<🎜>表示されているものをすべて選択 <🎜> < 🎜> 要素 <🎜><🎜> （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元素 $(“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元素 <🎜>たとえば、<🎜>$("ul li:first-child")<🎜>は、各 <🎜>ul<🎜> の最初の <🎜>li<🎜 を選択します。 >要素<🎜><🎜> $("ul li:only-child")<🎜>在<🎜> ul<🎜><🎜><🎜> :nth-child() セレクターは、非常によく使用される子要素のフィルタリング セレクターです。詳細な機能は次のとおりです。 1.:nth-child(even) は、各親要素のインデックス値が偶数である要素を選択できます 2. :nth-child(odd) は、各親要素のインデックス値が奇数である要素を選択できますnumber 3.:nth-child(2) は、各親要素 < の下でインデックス値が 2 は、各親要素のインデックス値が の倍数である 0 から始まる要素 (n ) を選択できます。 3 ) は、各親要素のインデックス値が (3n 1< である要素 (n) を選択できます。 🎜>) 0 から開始) 6) フォームオブジェクト属性フィルターセレクター < table style="BORDER-RIGHT: 中程度なし; BORDER-TOP: 中程度なし; MARGIN-LEFT: 18pt; BORDER-LEFT: 中程度なし; BORDER-BOTTOM: 中程度なし; BORDER-COLLAPSE: 折りたたみ" border="1 "> $("#form1 :enabled ”) $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 $(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素 $(“input:checked”)选取所有被选中的input元素 $(“select :selected”.text())选取所有被选中的选项元素 $("#form2 :disabled")<🎜><🎜>id<🎜> を " <🎜 >form2<🎜>” フォーム内のすべての使用できない要素<🎜><🎜> $("input:checked")<🎜>選択されたすべての <🎜>input<🎜> 要素を選択します<🎜><🎜> $("select :selected".text())<🎜>すべてを選択オプション要素<🎜><🎜> 5．表单选择器 $(“:input”)选取所有input、textarea、select和button元素 $(“:text”)选取所有的单行文本框 $(“:password”)选取所有的密码框 $(“:radio”)选取所有的单选框 $(“:checkbox”)选取所有的复选框 $(“:submit”)选取所有的提交按钮 $(“:image”)选取所有的图像按钮 $(“:reset”)选取所有的重置按钮 $(“:button”)选取所有的按钮 $(“:hidden”)选取所有不可见元素 Domオペレーション Dom コア(コア)、HTML-DOM と CSS-DOM 1. ノードを挿入するメソッド append() $(“p”) .append(“あなた”) test appendTo() $(“あなた”).appendTo(“p” ) テスト prepend() $(“p”)。 あなた”) test prependTo() $(“p”).prependTo (“あなた”) あなたテスト After() $(“p”)。 after ( “你”) test insertAfter() $( “你”)。 insertAfter (“p”) test Before() $(“p” ）。 before ( “你”) 你 test insertBefore() $( “你”)。 insertBefore (“p”) 你 test 2. 删除节点 Remove()方法 empty()清空节点 3. 复制节点 复制元素的同时复制元素中所绑定的事件 4. 替换节点 5. 包裹节点 Wrap() $(“strong”).wrap(“”);ssss wrapAll() $(“strong”). wrapAll (“”);ssss ssss wrapInner() $(“strong”).wrapInner (”);ssssg> 6. 属性操作 removeAttr()移除属性 7. 样式操作 获取和设置样式 Attr() 追加样式 addClass() 移除样式 removeClass() removeClass(“one two”) 切换样式 toggle()主要控制行为上的重复切换 toggleClass()样式上的重复切换 判断是否含有某个样式 hasClass()等价于is(“.one”) 8.设置および获取html、文本和值 html() 读取或者设置某个元素中的HTML内容 text() 读取或者设置某个元素中文本内容 val() 设置和获取元素的值defaultValue初始值 9.遍历节点 Children() 取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 Next() 取得匹配元素后面紧邻的同辈元素 Prev() 取得匹配元素前面紧邻的同辈元素 Siblings() 取得匹配元素前后所有的同辈元素 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 と < という 2 つの属性も含まれます。 🎜>左 ScrollTop() 取得および要素のスクロール バーと上部の間の距離を設定します ScrollLeft() 要素のスクロールバーと左側の間の距離を取得および設定します 事件和动画 事件 （1） 绑定事件 bind(type[,data],fn); 参数：type：事件类型，也可以自定义名称 data:作为event.data属性值传递给事件对象的额外数据对象 fn：用来绑定的处理函数 绑定多个事件类型 （2） 合成事件 Hover(enter,leave); 用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave） toggle(fn1,fn2,….fnN); 用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。 （3） 冒泡事件 假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外 停止事件冒泡的方法： 停止表单默认提交：event.preventDefault()==return false; （4） 移除事件 Type:事件类型 Data：将要移除的函数 （5） 触发一次函数 事件触发后立即解除 动画 Show() 低速: 600ms、通常: 400ミリ秒、高速: 200ミリ秒 非表示() ファデルン() 要素が完全に消えるまで、指定された期間要素の不透明度を下げます fadeout() 上記の逆 slideUp() 次とは逆です slideDown() 要素は上から下に向かって表示されます カスタムアニメーションanimate 文法構造: animate(params,speed, callback); パラメータの説明は次のとおりです: 1. Params: スタイル属性と値を含むマッピング ({property1: "value1"、property2: "value2",…} 速度パラメータ、オプション。 Callback: アニメーションの完了時に実行される関数、オプション とりあえずこれを追加してください将来的にはゆっくりと改善していきます。 $("p:contains('I
')")<🎜>テキスト「I」を含む < を選択します 🎜>p<🎜 >Element<🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:empty”)<🎜>子要素 (テキスト要素を含む) を含まない要素を選択します <🎜> p<🎜>空の要素<🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:has(p)”)<🎜><🎜>p を含む選択 <🎜 <🎜> 要素の >p<🎜> 要素 <🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:parent”)<🎜> は、所有する子要素 ( <🎜>p<🎜> 要素 <🎜><🎜><🎜><🎜><🎜><🎜> テキスト要素を含む) (“:hidden”)
すべての非表示要素を選択します。 <🎜>、
选取拥有プロパティ<🎜 >id<🎜> の元素<🎜><🎜>
の唯一の子要素である <🎜>li<🎜> 要素を選択します。
は 1 つの要素のみに一致しますが、<🎜>:nth-child<🎜> はすべての親要素に一致します。子要素と一致し、<🎜> <🎜>:nth-child(index)<🎜>のindex<🎜>は<🎜>1<🎜>から始まり、<🎜>:eq(index)<🎜>から計算されます <🎜>0<🎜 ><🎜><🎜>:first-child <🎜> セレクターは、各親要素の最初の子要素と一致します。 <🎜><🎜>
が <🎜>form1<🎜><🎜><🎜>
$(":input")选取全部<🎜>input、<🎜>テキストエリア、<🎜>選択と<🎜>ボタン< span style="FONT-FAMILY: 宋体">元素<🎜><🎜><🎜>$(":text")选取全部的单行文本框<🎜><🎜> <🎜>$(":password")选取全部的秘密框<🎜><🎜> <🎜>$(":radio")选取全部的单选框<🎜> <🎜> <🎜>$(":checkbox")选取全部的复选框<🎜><🎜> <🎜>$(":submit")选取全部的提交按钮<🎜><🎜> <🎜>$(":image")选取全部的画像按钮<🎜>< 🎜> <🎜>$(":リセット”)すべての重置按钮<🎜><🎜> <🎜>$(":button")选取全部的按钮<🎜><🎜 > <🎜>$(":ファイル”)すべての上传ドメイン<🎜><🎜> <🎜>$(":hidden")选取全部不可见元素<🎜>< 🎜> Clone() $(this).clone(true).appendTo(“body”)
ログイン後にコピーreplaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”);
ログイン後にコピーAttr(); 设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})ログイン後にコピー
html()<🎜><🎜><🎜>读取または者設置某元素中の<🎜>HTML<🎜>コンテンツ<🎜><🎜> <🎜>text()<🎜><🎜> <🎜>读取または者設置某元素中文本文<🎜><🎜> <🎜>val()<🎜><🎜> <🎜>設定および获取元素の值<🎜>defaultValue<🎜>初值<🎜><🎜>
子供()<🎜><🎜> <🎜>取得適合元素の子元素の集合，只考虑子元素不考虑後代元素<🎜><🎜> <🎜>次へ()<🎜><🎜> <🎜> 取得適合元素后面紧邻的同辈元素<🎜><🎜> <🎜>Prev()<🎜><🎜> <🎜> 取得適合元素前面紧邻的同辈元素<🎜><🎜> <🎜>兄弟()<🎜><🎜> <🎜>取得適合元素前後すべての同辈元素<🎜><🎜> <🎜>Closest()<🎜><🎜> <🎜>最近の適合元素を取得<🎜><🎜> <🎜>还有很多遍历方法：<🎜>find(),filter(),nextAll(),prevAll(),parent(),parents( )<🎜>等<🎜><🎜> Ex：$(“p”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})ログイン後にコピーstopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})ログイン後にコピーUnbind([type][,data]);
ログイン後にコピーOne（type，[data],fn）;
ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2024-12-12 11:03:15
2024-12-12 11:01:15
2024-12-12 10:59:13
2024-12-12 10:58:16
2024-12-12 10:57:14
2024-12-12 10:56:12
2024-12-12 10:55:13
2024-12-12 10:54:17
2024-12-12 10:53:16
2024-12-12 10:51:16
最新の問題
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない
私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォームデータを送信できない
これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
