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教程