day04 jQuery

時間  2019-11-13
標籤 day04 day jquery 欄目 JQuery 简体版
原文   原文鏈接

jQuery

        js的一個框架，js的庫javascript

  意義：css

（1）方便開發html

（2）解決瀏覽器的兼容問題java

  本身封裝

hadoop.js文件
jquery

function fun(){
	alert(1);
}

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title>
	<script type="text/javascript" src="hadoop.js"></script>
  </head>
  <body>
    <input type="button" value="click me!" onclick="fun()">
  </body>
</html>

庫：

完整版瀏覽器

min版app


jQuery與Dom轉換（方法不能互相調用）

    （1）jQuery轉Dom

（1）jQuery對象.get(0)框架

         （2）jQuery對象[0]dom

<!DOCTYPE html>
<html>
  <head>
    <title>demo02.html</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script>
    	function fun(){
    		var v = $("#myid").get(0);
    		alert(v.value);
    		var vv= $("#myid")[0];
    		alert(vv.value);
    	}
    </script>
  </head>
  
  <body>
    <input type="text" id="myid"><br>
    <input type="button" value="jQuery轉js" onclick="fun()">
    <input type="button" value="js轉jQuery" onclick="func()">
    <input type="button" value="jQuery相等於$" onclick="fon()">   
  </body>
</html>

（2）Dom轉jQuery

  (1)$(dom對象)oop

function func(){
    		var a = document.getElementById("myid");
    		var aa = $(a).val();
    		alert(aa);
    	}

jQuery相等於$
function fon(){
    		var al = jQuery("#myid").val();
    		alert(al);
    	}

選擇器

     基本選擇器:

#id

element

.class

*

selector1,selector2,selectorN

<script>
 	//選擇id爲one的元素
 	function fn1(){
 		$("#one").css("background","blue");
 	}
 	//選擇class爲mini的元素
 	function fn2(){
 		$(".mini").css("background","blue");
 	}
 	//選擇元素名是div的元素
 	function fn3(){
 		$("div").css("background","blue");
 	}
 	//選擇全部的元素*
 	function fn4(){
 		$("*").css("background","blue");
 	}
 	//選擇元素名爲span和id爲two的元素（多個選擇器之間用逗號隔開）
 	function fn5(){
 		$("span,#two").css("background","blue");
 	} 
 </script>

    層級選擇器：

     ancestor descendant        a標籤下的全部的標籤（子子孫孫）

      parent  >  child                 a標籤下的全部的兒子標籤

      prev  +  next                       獲得a標籤下的第一個兄弟標籤

      prev  ~   siblings                 獲得a標籤後面的全部的兄弟標籤

 <script>
 	//選擇body內全部的div元素
 	function fn1(){
 		$("body div").css("background","red");
 	}
 	//選擇body的子元素div
 	function fn2(){
 		$("body>div").css("background","red");
 	}
 	//選擇id爲one的下一個div元素
 	function fn3(){
 		$("#one+div").css("background","red");
 	}
 	//選擇id爲two的元素後面的全部div元素
 	function fn4(){
 		$("#two~div").css("background","red");
 	}
 </script>

    過濾選擇器：

基本過濾選擇器：

：first

:last

:not(selector)

:even    偶數

:odd      奇數

                :gt(index)  大於index

                :lt(index)   小於index

                :animated    正在執行動畫

<script>
		//選擇第一個div元素
	    function fun1(){
			$("div:first").css("background","red");
	    }
	    //選擇最後一個div
	    function fun2(){
	    	$("div:last").css("background","red");
	    }
	    //選擇class不爲one的元素的全部div元素$("dom:not(.one)")
	    function fun3(){
	    	$("div:not(.one)").css("background","red");
	    }
	    
	    //"選擇索引值爲偶數 的div元素. even:偶數 odd：奇數"
	    function fun4(){
	    	$("div:even").css("background","red");
	    }
	    
	    //選擇索引值奇數元素
	    function fun5(){
	    	$("div:odd").css("background","red");
	    }
	    //選擇索引值等於3的div元素."
	    function fun6(){
	    	$("div:eq(3)").css("background","red");
	    }
	    //選擇索引值大於3的div元素.
	    function fun7(){
	    	$("div:gt(3)").css("background","red");
	    }
	    //選擇索引值小於3的div元素.
	    function fun8(){
	    	$("div:lt(3)").css("background","red");
	    }
	    //選擇標題元素
	    function fun9(){
	    	$(":header").css("background","red");
	    }
	    //匹配動畫
	    function fun10(){
	    	$(":animated").css("background","red");
	    }

內容過濾選擇器：

:contains(text)

:empty

:has(selector）

:parent  非空

<script>
	   //選擇含有文本"di"的div元素 $("tagName:contains('di')")
	   function fn1(){
		   $("div:contains('di')").css("background","pink");
	   }
	   //空div元素 $("tagName:empty")
	   function fn2(){
		   $("div:empty").css("background","pink");
	   }
	   //選擇包含class爲mini元素的div元素$("tagName:has(.mini)")
	   function fn3(){
		   $("div:has(.mini)").css("background","pink");
	   }
	   //不爲空的div元素$("tagName:parent")
	   function fn4(){
		   $("div:parent").css("background","pink");
	   }
	</script>

可見性過濾選擇器：

：hidden

:visible

<script>
	   //選擇全部的可見的div元素,設置樣式
	   function fn1(){
		   $("div:visible").css("background","pink");
	   }
	   
	   //2.選中不可見的div元素用show();
	   function fn2(){
		   $("div:hidden").show(5000).css("background","blue");
	   }	   
	</script>

屬性過濾選擇器：

[attribute]    匹配具備某屬性的元素

[attribute=value]   匹配屬性值爲多少的元素

                [attribute!=value]

                [attribute^=value]  匹配開始元素

                [attribute$=value]   匹配結尾元素

                [attribute*=value]    匹配包含什麼的元素

                [attrSel1][attrSel2][attrSelN]    綜合匹配 同時知足全部的條件纔會匹配出來

<script>
		//選取含有屬性title的div元素.$("tagName[title]");
	 	function fn1(){	
	 		$("div[title]").css("background","red");
	 	}
	 	//選取屬性title值等於test的div元素。$("tagName[title='test']")。
	 	function fn2(){
	 		$("div[title='test']").css("background","blue");
	 	}
	 	//選取屬性title值不等於test的div元素!=
	 	function fn3(){	
	 		$("div[title!='test']").css("background","red");
	 	}
	 	//選取屬性title值以te開始的div元素^=
	 	function fn4(){	
	 		$("div[title^='te']").css("background","red");
	 	}
	 	//選取屬性title值以est結束的div元素$=
	 	function fn5(){	
	 		$("div[title$='est']").css("background","red");
	 	}
	 	//選取屬性title值包含es的div元素 *=
	 	function fn6(){	
	 		$("div[title*='es']").css("background","red");
	 	}
	 	//組合屬性選擇器，首先選取有屬性id的div元素，而後在選擇屬性中title值 含有es的元素$("tagName[id][title*='es']")。
	 	function fn7(){	
	 		$("div[id][title*='es']").css("background","red");
	 	}
	</script>

子元素：

:nth-child

:first-child

:last-child

:only-child

<script>
		//選取class爲one的div下的第2個元素div.one :nth-child(2);
		function fn1(){
			$("div.one :nth-child(2)").css("background","red");
		}
		//選取class爲one的div下的第1個元素
		function fn2(){
			$("div.one :first-child").css("background","red");
		}
		//選取class爲one的div下的最後一個元素
		function fn3(){
			$("div.one :last-child").css("background","red");
		}
		//選取class爲one的div僅有的一個元素
		function fn4(){
			$("div.one :only-child").css("background","red");
		}
	</script>

表單：

                :input

                :text

                :password

                :radio

                :checkbox

                :submit

                :reset

                :button

                :file

                :hidden

:image  匹配具備提交功能的圖片按鈕

   <script type="text/javascript">
	$(function(){
		// 對text框和password框，添加失去焦點事件，校驗輸入內容不能爲空
		$(":text").blur(
			function(){
				var value = $(this).val();
				if($.trim(value)==""){
					alert("用戶名不能爲空");
				}
			}		
		)
		  
		//密碼的驗證
		$(":password").blur(
			function(){
				var value = $(this).val();
				if($.trim(value)==""){
					alert("密碼不能爲空");
				}
			}		
		)
		  
		  
		  
	});
</script>

<script type="text/javascript">
	 $(function(){                 
		  // 點擊button (根據標籤的name屬性)打印radio checkbox select 中選中項的值$("#mybutton").click(function(){} )
		$("#mybutton").click(function(){
			$("input[name='gender']:checked").each(
				function(){
					alert($(this).val())
				}		
			)
			$("input[name='hobby']:checked").each(
				function(){
					alert($(this).val())
				}		
			)
			$("select[name='city'] option:selected").each(
				function(){
					alert($(this).val())
				}		
			)
		})
   });

表單對象屬性：

:enabled

                :disabled

                :checked

                :selected

<script>
		 //得到可用的input標籤(dom:enabled)
		 function fn1(){
			 $("input:enabled").css("background","red");
		 }
		  //得到不可用的input標籤
		 function fn2(){
			 $("input:disabled").css("background","red");
		 }
	</script>

空格  trim()
綁定事件：

jQuery如何綁定事件：

           jQuery對象.事件（function（）{

            方法體

   }）

遍歷:

         集合對象.each(function(){

      方法

 })

規律：

  父元素  子元素 在選擇器時之間有空格 。

頁面加載：

一個html頁面中只能寫一個(只彈出3):

<script>
		window.onload=function(){
			alert(1);
		}
		window.onload=function(){
			alert(2);
		}
		window.onload=function(){
			alert(3);
		}
	</script>



jQuery中頁面加載  一個html頁面中能夠寫多個頁面加載（3個均可以彈出）

寫法一：$(document).ready()

        寫法二：$(function(){

          };

    <script type="text/javascript">
       $(function(){
    	   
    	   alert(1);
    	   
       });
       $(function(){
    	   
    	   alert(2);
       });
       $(function(){
    	   
    	   alert(3);
       });
    
    </script>

屬性：

   attr()

(1)attr("name","value")   給相應的標籤添加屬性和屬性值。

(2)attr("name")          獲得相應的屬性值。    

   removeAttr() 移除相應的屬性。
<script type="text/javascript">
	$(document).ready(function(){
		
	//屬性操做：
	//咱們給富貴（name='username' 的input標籤）添一個title屬性,屬性值爲 富貴
	    $("input[name='username']").attr("title","富貴");
	//咱們得到富貴（name='username' 的input標籤）的type屬性值	並alert()出 
	    var vall = $("input[name='username']").attr("type");
            alert(vall);
	//移除（name='uname'的input表籤）不可用屬性
	    $("input[name='uname']").removeAttr("disabled");	
	});
</script>

CSS類：

  addClasss()

  removeClass()

  toggleClass()

<script type="text/javascript">
		$(document).ready(function(){
			//樣式:	
			//2 樣式操做:點擊 按鈕的時候（先給綁定事件） 對 （name='username' 的input標籤）進行樣式操做
			 $("#addbutton").click(function(){
				 $("input[name='uname']").addClass("textClass");
			 })
			 $("#removebutton").click(function(){
				 $("input[name='uname']").removeClass("textClass");
			 })
		     $("#togglebutton").click(function(){
				 $("input[name='uname']").toggleClass("textClass");
			 })
		    //css操做最後一個div
			
		});
	</script>

  HTML代碼/文本/值

html()：

                   至關於js中的innerHTML();

                  （1）  html("內容") 在相應對象的開始標籤和 結束標籤中間插入內容

                  （2）   html();    獲得相應開始標籤和結束標籤中間的內容（html標籤和文本）

text():

                    （1）text(「內容」) 在相應的開始標籤和結束標籤中間插入內容（瀏覽器不進行解析解釋）

                    （2）  text() 獲得相應的開始標籤和結束標籤中間的文本內容。

val():

                  至關於js的value, 用於表單標籤。

（1） val("內容")   至關於給標籤賦值，若是有值得話 覆蓋

                        （2）val（）  獲得相應標籤的value值。

CSS：

css()

<script type="text/javascript">
		$(document).ready(function(){
		    //css操做最後一個div
			$("div:last").css("background","red");
		    var val =$("div").css("width");
		    alert(val);
		});
	</script>

文檔處理：

    內部插入

            append()  a.append(b)       將b標籤插入到a標籤內部的最後

    appendTo()  b.appendTo(a)   將b標籤插入到a標籤內部的最後

     prepend()   a.prepend(b)    將b 標籤插入到a標籤內部的 最前面

     prependTo() b.prependTo(a)  將b 標籤插入到a標籤內部的 最前面

<script type="text/javascript">
  //把天津插入到<ul id="love"> 裏面的最後一位
  	 var tj = $("#tj");
  	 var lo = $("#love");
  	/*  lo.append(tj); */
  	/*  tj.appendTo(lo);	 */
  // 把天津插入到<ul li="love"> 裏面的最前面	
 /*        lo.prepend(tj); */
  		tj.prependTo(lo);
</script>

    外部插入

after()   a.after(c)           把c標籤插入到 a後面

before()      a.before(c)        把c標籤插入到a前面

insertAfter()    a.insertAfter(c)  a標籤插入到c標籤後面               

insertBefore()  a.insertBefore(c)   a標籤插入到c標籤前面

<script type="text/javascript">
		var p2 = $("#p2");
		var city = $("#city");
       //把<p id="p2">後面 放<ul id="city">
      /*  p2.after(city); */
       //把<p id="p2">前面 放<ul id="city"> 
       /* p2.before(city); */
       //把<p id="p2">插入到  <ul id="city">後面  
      /*  p2.insertAfter(city); */
       //把<p id="p2">插入到  <ul id="city">前面
       p2.insertBefore(city);
</script>

包裹

wrap() 

a.wrap(c)    c標籤包裹a標籤 分別包裹

unwrap()         取消包裹

wrapall()        包裹全部的

wrapInner()      對內部進行包裹

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>包裹節點</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
    
	</head>
	 
	<body>
		<strong title="jQuery">jQuery</strong>
		<strong title="jQuery">jQuery</strong>
		
		<div>
		    <p>Hello</p>
		    <p>cruel</p>
		    <p>World</p>
		</div>
		<div>
			<input type="button" value="wrap" onclick="wra()"><br/>
			<input type="button" value="wrapAll" onclick="wrapAll()"><br/>
			<input type="button" value="wrapInner" onclick="wrapInner()"><br/>
			<input type="button" value="unwrap" onclick="unwrap()"><br/>
		</div>
	</body>
	
	<script type="text/javascript">
	           function wra(){
	        	   $("strong").wrap("<p>");  //每一個<strong>被<p>分別包裹
	           }
			   function wrapAll(){
				   $("strong").wrapAll("<p>"); //所有<strong>被<p>包裹起來
			   }
			   function wrapInner(){
				   $("strong").wrapInner("<p>");//每一個<strong>裏面的內容被<p>包裹
			   }
			   function unwrap(){
				   $("p").unwrap(); //取消包裹，注意是"p"
			   }
	  </script>	
</html>

替換

          replaceWith()

          replaceAll()

<script type="text/javascript">
          /*   $("p").replaceWith("<a>XXXX</a>"); */  //p使用<a>XXXX</a>替換                                                 
              $("<a>XXXX</a>").replaceAll("p");    //<a>XXXX</a>替換掉全部的p
</script>

刪除

          empty()   清空

  remove()   刪除指定的節點   不用移除jQuery對象  用選擇器進行移除  （徹底刪除標籤）

  detach()   刪除指定的節點   不用移除jQuery對象  用選擇器進行移除   （只刪除標籤）（呵呵）

<script type="text/javascript">
	     //移除比較特別，不用移除jQuery對象
		 //清空 (body清空節點) body empty()
		     $("body").empty();  
          //$("li")中移除天津
            $("li").remove("#tj");
            $("li").remove("#cq");
</script>

複製

clone()  複製節點

clone（）  默認只克隆標籤（false）

參數true： 按鈕事件所有克隆。

                注意：必定是給要克隆的對象綁定事件

                            

$("#save").click(

            function(){

            alert(1);

            }  

              ) 

    <script type="text/javascript">
           //給<button id="save">綁定事件
              $("#save").click(
            	function(){
            		alert(1);
            	}	  
              )
            //克隆按鈕，添加p後面
            $("p").after(
            	$("#save").clone(true)	
            );	        
    </script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程