JavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクター

関連する無料学習の推奨事項: javascript(ビデオ)

jQuery 共通セレクターとフィルター セレクター

使用方法
JQuery ファイル ライブラリをダウンロードし、次の js フォルダーに保存します。サイトの場合、script タグを使用して導入し、head タグに配置します。
window.οnlοad=function() は $(function)

window.οnlοad=function( ){ ... ページ読み込みイベント}
$(function){ ...ページ読み込みイベント}
以下は、上記の

#jQuery のセレクターの簡略化された方法です

1. 基本セレクター

$("#id")  ：id选择器
    $("p") ：p选择器   $(".class") ：类选择器  $(".class,.class2,#id") ：组合选择器

2. 階層セレクター

$("#id>.class") ：子元素选择器$("#id .class") ：后代选择器$("#id+.class") ：紧邻下一个元素选择器$("#id~.class") ：兄弟元素选择器

3. フォーム セレクター

$(":input")//获取inpu。textarea，select，button元素$(":text")//所有的单行文本框$(":text")等价于$("[type=text]")，推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素$(":radio") //获取type=radio的input元素$(":checkbox") //获取type=checkbox的input元素$(":submit") //获取type=submit的input元素$(":reset") //获取type=reset的input元素$(":button") //获取type=button的input元素$(":file") //获取type=file的input元素$(":image") //获取type=image的input元素

jQuery フィルター
使用するフィルター:

1. 基本フィルター セレクター

$("Ii:first") ：第一个li
$("li:last") ：最后一个li
$("li:even") ：挑选 下标为偶数的li
$("li:odd") ：挑选 下标为奇数的li
$("Ii:eq(4)") ：下标等 于4的li(第五个li元素)$("Ii:gt(2)") ：下标大于 2的li
$("li:lt(2)") ：下标小于 2的li$("Ii:not(#runoob)") ：挑选除id="runoob"以外的所有li$("Ii:header") ：所有标题元素$("Ii:animated") ：正在执行动画效果的元素

2. コンテンツ フィルター セレクター

$("li:contains(text)") ：含有文本内容为text的元素$("li::empty")：获取不包含后代元素或者文本的空元素$("li::has(selector)")：获取含有后代元素为selector的元素$("li::parent")：获取含有后代元素或者文本的非空元素

3. 可視性フィルター

$("li:hidden") ：隐藏li元素$("li:visible") ：显示li元素

4. 属性フィルター セレクター

$("li[title]") ：获取所有属性包括title的li元素$("p[id^='qq']") ：id属性值以qq开头的p元素$("p[id*='bb'") ：id属性值包含bb的p元素$("li[title=text2]") ：li属性值等于text2的元素$("p[id!='aa'") ：id属性值不等于aa的p元素$("p[id$='z']") ：id 属性值以zz结尾的p$("input[id][name$='man']")：多属性选过滤，同时满足两个属性的条件的元素

5. フォーム オブジェクト属性フィルター セレクター

$("input:enabled") ：选取可用的表单元素$("input:disabled") ：选取不可用的表单元素$("input:checked") ：选取被选中是input元素$("input:selected") ：选取被选中的option元素

jQuery は DOM を操作します

jquery オブジェクトを生成します

var obj=$("#content")

要素内の HTML コードを取得または設定します

var obj=$("#content")；
obj.html("jQuery对象")

DOM オブジェクトの変換jQuery オブジェクトへの

<script>
        var $text=$(document.getElementsByTagName("li"));
        alert($text.eq(0).html());//获取第一个li里的值
        alert($text.eq(1).html());//获取第二个li里的值</script>

jQuery は DOM を使用して要素を操作します

単一属性構文 jQuery object.css(name,value): name はスタイル名です。 、値はスタイル値です。同時に複数の属性を設定します。構文
jQuery object.css{(name:value,name:value,name:value...)}: name はスタイル名、value はスタイル名です。スタイル値

jQuery は DOM 操作要素を使用して、クラス スタイルの追加、クラス スタイルの削除、および異なるクラス スタイルの切り替えを行います

jQuery object.addaClass(class)
jQuery object.removeaClass(class)
jQuery object.toggleClass (class)

jQuery は DOM を使用して要素のコンテンツと値の操作を操作します

jQuery object.html() : 最初に一致した要素の HTML コンテンツまたはテキスト コンテンツを取得するために使用されます
jQuery object.html(content): 一致するすべての要素の HTML コンテンツまたはテキスト コンテンツを設定するために使用されます
jQuery object.text(): 使用されます一致するすべての要素のテキスト コンテンツを取得する
jQuery object.text(content): 一致するすべての要素のテキスト コンテンツを設定するために使用されます
jQuery object.val(): 要素の値を取得または設定するために使用されます
jQuery object.attr(name): 要素の属性値を取得するために使用されます
jQuery object.attr(name, value): 要素の属性値を設定するために使用されます
jQuery object.attr( name, function(index)): 要素の属性として値が返される関数 function をバインドします。 Value
jQuery object.removeAttr(name): 要素の削除に使用される属性値

jQuery は DOM 操作ノードを使用します
$(html): HTML jQuery オブジェクトを作成します

eg:$("<a></a>").appendTo(p)

a.append(b): b

eg:$("ul").append("li"):a里添加b

a.appendTo を追加します(b): a から b

eg:$li.appendTo("ul"):a添加到b

a.prepend(b): b を a の前に挿入

eg: $("ul").prependTo("li")

a.prependTo(b): a を b

eg: $li.prependTo("ul")

# の前に挿入##a.after(b): a の後に b を挿入

eg: $("ul").after($p)

a.insertAfter(b): b の後に a を挿入

eg: $p.insertAfter("ul")

a.before(b): a の前に b を挿入

eg: $("ul").before($p)

a.insertBefore (b): b

eg: $p.insertBefore("ul")

a.replaceWith(b): a を b

eg: $("li").replaceWith("ol")

a.replaceAll(b) に置き換えます: a## を置き換えます#

eg: $("ol").replaceAll("li")

# with b ##a.clon(ture): a

eg: $("ol").clon(ture)

a.remove(a): a

eg: $("ul li").remove()//删除ul下的所有li
    $("ul li").remove("li li:last")//删除ul下的最后一个li

jQuery object.each(callback) をコピー: 要素を走査

        <meta>
        <title></title>
        <script></script>
        <script>
            $(function(){
                $("input[type=&#39;button&#39;]"). click(function(){
                    $("img").each(function(index, element){
                        //jQuery对象
                        //$(this).css("border","2px solid red");
                        //$(this).attr("title"," 第 "+(index+1)+"副风景画");
                        //DOM对象
                        this.style.border="2px solid red";
                        this.title="第"+(index+1)+"幅风景画";
                    });
                });
            });

        </script>
    <p>
        <img  src="/static/imghw/default1.png" data-src=".../img/img1.jpg" class="lazy" alt="JavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクター" >
        <img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/052/960f9bd470705f4a8e01e464946f67af-0.jpg" class="lazy" alt="JavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクター" > </p>

以上がJavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。