文章目錄

20.5 JQuery_選擇器
- 20.5.1 基本選擇器
- 20.5.2 層次選擇器
- 20.5.3 屬性選擇器
- 20.5.4 過濾選擇器
- 20.5.5 表單過濾選擇器
20.6 JQuery_DOM操作
- 20.6.1 内容操作
- 20.6.2 屬性操作
- - 20.6.2.1 通用屬性操作
  - 20.6.2.2 對class屬性操作
- 20.6.3 CRUD操作

20.5 JQuery_選擇器

20.5.1 基本選擇器

1.标簽選擇器（元素選擇器）
- 文法： $("html标簽名") 獲得所有比對标簽名稱的元素。
2.id選擇器
- 文法： $("#id的屬性值") 獲得與指定id屬性值比對的元素。
3.類選擇器
- 文法： $(".class的屬性值") 獲得與指定的class屬性值比對的元素。
4.并集選擇器：
- 文法： $("選擇器1,選擇器2....") 擷取多個選擇器選中的所有元素。
示例：

<script type="text/javascript">
          $(function () {
              // <input type="button" value="改變 id 為 one 的元素的背景色為 紅色"  id="b1"/>
              $("#b1").click(function () {
                  $("#one").css("backgroundColor","pink");
              });

              // <input type="button" value=" 改變元素名為 <div> 的所有元素的背景色為 紅色"  id="b2"/>
              $("#b2").click(function () {
                  $("div").css("backgroundColor","pink");
              });

              // <input type="button" value=" 改變 class 為 mini 的所有元素的背景色為 紅色"  id="b3"/>
              $("#b3").click(function () {
                  $(".mini").css("backgroundColor","pink");
              });
              // <input type="button" value=" 改變所有的<span>元素和 id 為 two 的元素的背景色為紅色"  id="b4"/>
              $("#b4").click(function () {
                  $("span,#two").css("backgroundColor","pink");
              });
          });
	  </script>

20.5.2 層次選擇器

1.後代選擇器
- 文法： $("A B ") 選擇A元素内部的所有B元素。
2. 子選擇器
- 文法： $("A > B") 選擇A元素内部的所有B子元素。
示例：

<script type="text/javascript">
          $(function () {
              // <input type="button" value=" 改變 <body> 内所有 <div> 的背景色為紅色"  id="b1"/>
              $("#b1").click(function () {
                  $("body div").css("backgroundColor","pink");
              });
              // <input type="button" value=" 改變 <body> 内子 <div> 的背景色為 紅色"  id="b2"/>
              $("#b2").click(function () {
                  $("body > div").css("backgroundColor","pink");
              });
          });
	  </script>

20.5.3 屬性選擇器

1.屬性名稱選擇器
- 文法： $("A[屬性名]") 包含指定屬性的選擇器
2.屬性選擇器
- 文法： $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
3.複合屬性選擇器
- 文法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器

<script type="text/javascript">
          $(function () {
              // <input type="button" value=" 含有屬性title 的div元素背景色為紅色"  id="b1"/>
              $("#b1").click(function () {
                  $("div[title]").css("backgroundColor","pink");
              });
              // <input type="button" value=" 屬性title值等于test的div元素背景色為紅色"  id="b2"/>
              $("#b2").click(function () {
                  $("div[title='test']").css("backgroundColor","pink");
              });
              // <input type="button" value=" 屬性title值不等于test的div元素(沒有屬性title的也将被選中)背景色為紅色"  id="b3"/>
              $("#b3").click(function () {
                  $("div[title!='test']").css("backgroundColor","pink");
              });
              // <input type="button" value=" 屬性title值 以te開始 的div元素背景色為紅色"  id="b4"/>
              $("#b4").click(function () {
                  $("div[title^='te']").css("backgroundColor","pink");
              });
              // <input type="button" value=" 屬性title值 以est結束 的div元素背景色為紅色"  id="b5"/>
              $("#b5").click(function () {
                  $("div[title$='est']").css("backgroundColor","pink");
              });
              // <input type="button" value="屬性title值 含有es的div元素背景色為紅色"  id="b6"/>
              $("#b6").click(function () {
                  $("div[title*='es']").css("backgroundColor","pink");
              });
              // <input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色為紅色"  id="b7"/>
              $("#b7").click(function () {
                  $("div[id][title*='es']").css("backgroundColor","pink");
              });
          });
	  </script>

20.5.4 過濾選擇器

1.首元素選擇器
- 文法： :first 獲得選擇的元素中的第一個元素
2.尾元素選擇器
- 文法： :last 獲得選擇的元素中的最後一個元素
3.非元素選擇器
- 文法： :not(selector) 不包括指定内容的元素
4.偶數選擇器
- 文法： :even 偶數，從 0 開始計數
5.奇數選擇器
- 文法： :odd 奇數，從 0 開始計數
6.等于索引選擇器
- 文法： :eq(index) 指定索引元素
7.大于索引選擇器
- 文法： :gt(index) 大于指定索引元素
8.小于索引選擇器
- 文法： :lt(index) 小于指定索引元素
9.标題選擇器
- 文法： :header 獲得标題（h1~h6）元素，固定寫法
示例：

<script type="text/javascript">
        $(function () {
            // <input type="button" value=" 改變第一個 div 元素的背景色為 紅色"  id="b1"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變最後一個 div 元素的背景色為 紅色"  id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變class不為 one 的所有 div 元素的背景色為 紅色"  id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變索引值為偶數的 div 元素的背景色為 紅色"  id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變索引值為奇數的 div 元素的背景色為 紅色"  id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變索引值為大于 3 的 div 元素的背景色為 紅色"  id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變索引值為等于 3 的 div 元素的背景色為 紅色"  id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變索引值為小于 3 的 div 元素的背景色為 紅色"  id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改變所有的标題元素的背景色為 紅色"  id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });
        });
	</script>

20.5.5 表單過濾選擇器

1.可用元素選擇器
- 文法： :enabled 獲得可用元素
2.不可用元素選擇器
- 文法： :disabled 獲得不可用元素
3.選中選擇器
- 文法： :checked 獲得單選/複選框選中的元素
4.選中選擇器
- 文法： :selected 獲得下拉框選中的元素
示例：

<script type="text/javascript">
          $(function () {
              // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單内可用 <input> 元素的值"  id="b1"/>
              $("#b1").click(function () {
                  $("input[type='text']:enabled").val("aaa");
              });
              // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單内不可用 <input> 元素的值"  id="b2"/>
              $("#b2").click(function () {
                  $("input[type='text']:disabled").val("aaa");
              });
              // <input type="button" value=" 利用 jQuery 對象的 length 屬性擷取複選框選中的個數"  id="b3"/>
              $("#b3").click(function () {
                  alert($("input[type='checkbox']:checked").length);
              });
              // <input type="button" value=" 利用 jQuery 對象的 length 屬性擷取下拉框選中的個數"  id="b4"/>
              $("#b4").click(function () {
                  alert($("#job > option:selected").length);
              });
          });
	  </script>

20.6 JQuery_DOM操作

20.6.1 内容操作

html() : 擷取/設定元素的标簽體内容
- <a>内容</a> ——> 内容
text() : 擷取/設定元素的==标簽體純文字内容 ==
- <a>内容</a> ——> 内容
val() ：擷取/設定元素的value屬性值
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容操作</title>
		<script  src="../js/jquery-3.3.1.min.js"></script>
		<script>
			$(function () {
                // 擷取myinput 的value值
				var value = $("#myinput").val();
				alert(value);
                $("#myinput").val("徐巍巍");
                
                // 擷取mydiv的标簽體内容
				var html = $("#mydiv").html();
				alert(html);
                $("#mydiv").html("<p>ss</p>");
                
                // 擷取mydiv文本内容
                var text = $("#mydiv").text();
                alert(text);
                $("#mydiv").text("文本");
            });
		</script>
		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="張三" /><br />
		<div id="mydiv"><p><a href="#">标題标簽</a></p></div>
	</body>
</html>

20.6.2 屬性操作

20.6.2.1 通用屬性操作

attr() : 擷取/設定元素的屬性
removeAttr() :删除屬性
prop() :擷取/設定元素的屬性
removeProp() :删除屬性
attr和 prop差別？
- 1.如果操作的是元素的固有屬性，則建議使用prop;
- 2.如果操作的是元素自定義的屬性，則建議使用attr.
示例：

<script type="text/javascript">
		$(function () {
            //擷取北京節點的name屬性值
			var name = $("#bj").attr("name");
			//alert(name);
			
            //設定北京節點的name屬性的值為dabeijing
            $("#bj").attr("name","dabeijing");
            
            //新增北京節點的discription屬性 屬性值是didu
            $("#bj").attr("discription","didu");
            
            //删除北京節點的name屬性并檢驗name屬性是否存在
            $("#bj").removeAttr("name");
            
            //獲得hobby的的選中狀态
			var checked = $("#hobby").prop("checked");
			alert(checked);
            //var checked = $("#hobby").attr("checked"); //擷取不到，彈出undefined，checked必須使用prop
        });
	</script>

20.6.2.2 對class屬性操作

addClass() : 添加class屬性值
removeClass() : 删除class屬性值
toggleClass() : 切換class屬性
- toggleClass("one") : 判斷如果元素對象上存在class=“one”，則将屬性值one删除掉。如果元素對象上不存在class=“one”，則添加。
css()
示例：

<script type="text/javascript">
		$(function () {
            //<input type="button" value="采用屬性增加樣式(改變id=one的樣式)"  id="b1"/>
			$("#b1").click(function () {
				$("#one").prop("class","second");
            });
            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //<input type="button" value=" 切換樣式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //<input type="button" value=" 通過css()獲得id為one背景顔色"  id="b5"/>
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);
            });
            //<input type="button" value=" 通過css()設定id為one背景顔色為綠色"  id="b6"/>
            $("#b6").click(function () {
                 $("#one").css("backgroundColor","green");
            });
        });		 		 	
	</script>

20.6.3 CRUD操作

1. append() :父元素将子元素追加到末尾
- 對象1.append(對象2) : 将對象2添加到對象1元素内部，并且在末尾。
2. prepend() :父元素将子元素追加到開頭
- 對象1.prepend(對象2) :将對象2添加到對象1元素内部，并且在開頭
3. appendTo() :
- 對象1.appendTo(對象2) :将對象1添加到對象2内部，并且在末尾
4. prependTo() ：
- 對象1.prependTo(對象2) :将對象1添加到對象2内部，并且在開頭
5. after() :添加元素到元素後邊
- 對象1.after(對象2) ：将對象2添加到對象1後邊。對象1和對象2是兄弟關系。
6. before() :添加元素到元素前邊
- 對象1.before(對象2) ：将對象2添加到對象1前邊。對象1和對象2是兄弟關系。
7. insertAfter()
- 對象1.insertAfter(對象2) ：将對象2添加到對象1後邊。對象1和對象2是兄弟關系。
8. insertBefore()
- 對象1.insertBefore(對象2) ：将對象2添加到對象1前邊。對象1和對象2是兄弟關系。
9. remove() :移除元素
- 對象.remove() :将對象删除掉
10. empty() :清空元素的所有後代元素。
- 對象.empty() :将對象的後代元素全部清空，但是保留目前對象以及其屬性節點
示例：

<script type="text/javascript">

		$(function () {
            //<input type="button" value="采用屬性增加樣式(改變id=one的樣式)"  id="b1"/>
			$("#b1").click(function () {
				$("#one").prop("class","second");
            });
            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //<input type="button" value=" 切換樣式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //<input type="button" value=" 通過css()獲得id為one背景顔色"  id="b5"/>
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);

            });
            //<input type="button" value=" 通過css()設定id為one背景顔色為綠色"  id="b6"/>
            $("#b6").click(function () {
                 $("#one").css("backgroundColor","green");
            });
        });

	   // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
		$("#b1").click(function () {
			$("#bj").remove();
        });
        // <input type="button" value="删除city所有的li節點   清空元素中的所有後代節點(不包含屬性節點)"  id="b2"/>
        $("#b2").click(function () {
            $("#city").empty();
        });		 	
	</script>

JQuery_選擇器與DOM操作_hehe.employment.over.20.220.5 JQuery_選擇器20.6 JQuery_DOM操作

文章目錄

20.5 JQuery_選擇器

20.5.1 基本選擇器

20.5.2 層次選擇器

20.5.3 屬性選擇器

20.5.4 過濾選擇器

20.5.5 表單過濾選擇器

20.6 JQuery_DOM操作

20.6.1 内容操作

20.6.2 屬性操作

20.6.2.1 通用屬性操作

20.6.2.2 對class屬性操作

20.6.3 CRUD操作

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method