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

coldplay.xixi
リリース: 2021-01-18 17:53:08
転載
2193 人が閲覧しました

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") :组合选择器
ログイン後にコピー
  1. 階層セレクター
$("#id>.class") :子元素选择器$("#id .class") :后代选择器$("#id+.class") :紧邻下一个元素选择器$("#id~.class") :兄弟元素选择器
ログイン後にコピー
  1. フォーム セレクター
$(":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") :正在执行动画效果的元素
ログイン後にコピー
  1. コンテンツ フィルター セレクター
$("li:contains(text)") :含有文本内容为text的元素$("li::empty"):获取不包含后代元素或者文本的空元素$("li::has(selector)"):获取含有后代元素为selector的元素$("li::parent"):获取含有后代元素或者文本的非空元素
ログイン後にコピー
  1. 可視性フィルター
$("li:hidden") :隐藏li元素$("li:visible") :显示li元素
ログイン後にコピー
  1. 属性フィルター セレクター
$("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']"):多属性选过滤,同时满足两个属性的条件的元素
ログイン後にコピー
  1. フォーム オブジェクト属性フィルター セレクター
$("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  alt="JavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクター" >   
		<img  alt="JavaScript のナレッジ ポイントの概要: jQuery の共通セレクターとフィルター セレクター" >
	</p>
	<input>	
ログイン後にコピー

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

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!