day04 jQuery

jQuery

        js的一个框架,js的库

  意义:

(1)方便开发

(2)解决浏览器的兼容问题

  自己封装

hadoop.js文件

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版


jQuery与Dom转换(方法不能互相调用)

    (1)jQuery转Dom

 (1)jQuery对象.get(0)

         (2)jQuery对象[0]

<!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对象)

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>



捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。