JQuery简介与使用

最新推荐文章于 2024-09-25 23:01:10 发布

TimeMoments

最新推荐文章于 2024-09-25 23:01:10 发布

阅读量350

点赞数

分类专栏： JQuery 文章标签： javascript java js

本文链接：https://blog.csdn.net/TimeMoments/article/details/112971303

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery知识点

一、JQuery的历史和特点简介

1.Jquery的历史

1）2005年8月，John Resig提议改进Prototype的“Behaviour”库

2）2006年1月John Resig等人创建了jQuery；8月，jQuery的第一
个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互

3）2007年7月，jQuery 1.1.3版发布

4）2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron
开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许
多BUG，而且有不少的性能得到提

5）2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle

6）2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布

ps: 
	JQuery 版本 2 以上不支持 IE6，7，8 浏览器。
	如果需要支持 IE6/7/8，那么需要选择1.9

2.JQuery

	Jquery:是基于js写成的一个功能强大的组件，其实说白了其内在的本质还是js、

小结:
	jquery的出现（进一步）解决了浏览器版本兼容性
    jquery的出现使得一些书写的很多的很长的js代码变的简单了
    jquery的出现使得原理的js功能增强了
    jquery的出现使得DOM操作简单了

3.Jquery的特点

1）快速获取文档元素
	jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档
中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2）提供漂亮的页面动态效果
	jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许
多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3）创建AJAX无刷新网页
	AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的
网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，
如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，
可以对页面进行局部刷新，提供动态的效果。

4）提供对JavaScript语言的增强
	jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处
理等操作。

5）增强的事件处理
	jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处
理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

6）更改网页内容
	jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页
图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

二、JQuery的基本用法

1.下载Jquery库

官网：http://jquery.com/download/
1）首先是下载相关的资源
2）加入到项目中
3）在页面上引入jqeury.js文件：
4）在页面的相应位置上开始使用

2.CDN中载入Jquery

Google CDN:内容分发网络：联网加载jquery.js

<head>
<script src="http://ajax.googleapis.com/ajax
	/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

三、JQuery基本语法

1.语法

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
	基础语法:$(selector).action()
	美元符号定义JQuery
	选择符（selector）"查询"和"查找"HTML元素
	JQuery的action()执行对元素的操作

2.JQuery选择器

1）元素选择器
  例:  function elementSelector(){
     	   alert("这是元素选择器")
       	   $('p').hide()
       }

2）id选择器
  例:  function elementSelector(){
           alert("这是id选择器")
		   $('#p1').hide()
	   }
3）class选择器
  例:  function elementSelector(){
           alert("class选择器")
		   $('.pp').hide()
	   }
	   
ps:
	1>jquery是以$开头的;
	2>hide():隐藏HTML中的元素;
	3>jquery代码可以和js代码混合使用.

3.JQuery事件方法

1）事件
	页面对不同访问者的响应叫做事件。事件处理程序指的是当 
HTML中发生某些事件时所调用的方法。
	例:	在元素上移动鼠标。   选取单选按钮    点击元素

2）常用事件方法语句
	2.1> $(document).ready():页面加载就执行
	例:$(document).ready(function(){
				alert("执行了")
		})
	类似Js
		function jsDoload(){
				alert("js:页面加载就执行了")
			}
		<body onload="jsDoload()">
		
ps:
		1>$(document).ready(function(){})与js中
	onload事件效果是一致的
		2>前者的执行顺序要早于后者，其实前者是页面准备
	好久执行，而后者是页面加载完毕之后再执行
		3>click()：当按钮点击事件被触发时会调用一个函
	数，该函数在用户点击 HTML 元素时执行。
	
	2.2> dblclick()
		当双击元素时，会发生 dblclick 事件。dblclick()方法
	触发 dblclick 事件，或规定当发生dblclick事件时运行的函数。
	
	2.3>mouseleave():当鼠标指针离开元素时，会发生mouseleave事件
		例: $("#p1").mouseleave(function(){
    			alert("再见，您的鼠标离开了该段落。");
		    });
		    
	2.4>mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，
	会发生mousedown事件
		例: $("#p1").mousedown(function(){
    			alert("鼠标在该段落上按下！");
		    });
		    
	2.5>mouseup():当在元素上松开鼠标按钮时，会发生mouseup事件
		例: $("#p1").mouseup(function(){
    			alert("鼠标在段落上松开。");
			});
	
	2.6>hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会
触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定
的第二个函数(mouseleave)。
	例:	$("#p1").hover(
    		function(){
       			alert("你进入了 p1!");
    		},
    		function(){
        		alert("拜拜! 现在你离开了 p1!");
    		}
		);

四、JQuery特效

1.隐藏和显示

1）通过 jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素
	例: <script type="text/javascript">
			function hiddenEle(){
				var box=$("#box");
					box.hide();
			}
			function  showEle(){
			
				var box=$("#box");
					box.show();
			}
		</script>

2.淡入淡出

1）淡入:fadeIn()
	例:	<script type="text/javascript">
			$(document).ready(function(){
  				$("button").click(function(){
    				$("#div1").fadeIn();
    				$("#div2").fadeIn("slow");
    				$("#div3").fadeIn(3000);
  				});
			});
	    </script>

2）淡出:fadeOut()
	例:	<script type="text/javascript">
            $(document).ready(function(){
              $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
              });
            });
		</script>

3）切换淡入淡出:fadeToggle()方法可以在fadeIn()
与fadeOut()方法之间进行切换
	例:	<script type="text/javascript"
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div1").fadeToggle();
                    $("#div2").fadeToggle("slow");
                    $("#div3").fadeToggle(3000);
                });
            });
         </script>
	
4）fadeTo()方法允许渐变为给定的不透明度（值介于0与1之间）
	例:	<script type="text/javascript">
            $(document).ready(function(){
              $("button").click(function(){
                $("#div1").fadeTo("slow",0.15,function(){
                    alert("这个是第三个参数的效果")
                });
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
              });
            });
		</script>

3.滑动

1）slideDown()方法:用于向下滑动元素
	$(selector).slideDown(speed,callback);
	可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
	可选的callback参数是滑动完成后所执行的函数名称
	例:	<script type="text/javascript"> 
            $(document).ready(function(){
              $("#flip").click(function(){
                $("#panel").slideDown("slow",function(){
                     alert("滑动展开了div,要执行的第二个参数")  
                     $("#flip").css("color","red")
                });
              });
            });
		 </script>
		 
2）slideUp()方法:用于向上滑动元素。
	$(selector).slideUp(speed,callback);
	可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。
	可选的callback参数是滑动完成后所执行的函数名称。
	例:	<script type="text/javascript"> 
            $(document).ready(function(){
              $("#flip").click(function(){
                $("#panel").slideUp("slow",function(){
                     $("#flip").css("color","blue")
                });
              });
            });
		</script>
		
3）slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换。
	如果元素向下滑动，则 slideToggle() 可向上滑动它们。
	如果元素向上滑动，则 slideToggle() 可向下滑动它们。
	$(selector).slideToggle(speed,callback);
	可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。
	可选的callback参数是滑动完成后所执行的函数名称。
	例:	<script type="text/javascript"> 
			$(document).ready(function(){
  				$("#flip").click(function(){
   					$("#panel").slideToggle("slow",function(){
    	  				alert("执行了")
    	 				var flipValue=$("#flip").text()
    	 				alert("flipValue:"+flipValue)
                        if(flipValue=="点我隐藏面板"){
                            $("#flip").css("color","red")
                            $("#flip").text("点我显示面板")
                         }else{
                            $("#flip").css("color","blue")
                            $("#flip").text("点我隐藏面板")
                         }
    	
    				});
  				});
			});
		</script>

4.动画

1）animate()方法:允许您创建自定义的动画
	animate({params},speed,callback);
	{params}:是一个必选参数，定义了形成动画的CSS属性，类型为字典类型
    speed:可选的参数其规定效果的时长也就是滑动的速度。
   它可以取值为："slow"、"fast" 或毫秒
    callback:可选的参数是动画完成后所执行的函数名称
    例:	<script type="text/javascript">
			function doanimate(){
				$("div").animate({left:'250px'},"slow",function(){
					alert("滑动这个动画效果执行之后可以加载一个匿名函数")
					$("p").css("color","red")
				})
			}
		</script>

2）animate() - 操作多个属性
	例:	<script type="text/javascript">
			function doanimateForManyCss(){
				$("div").animate({
					left:'250px',
					top:'300px',
					width:'300px'
					},"slow",function(){
						alert("滑动这个动画效果执行
					之后可以加载一个匿名函数")
						$("p").css("color","red")
				})
			}
		</script>
3）jQuery animate() - 使用预定义的值(就是已经是写好的)
	把属性的动画值设置为 "show"、"hide" 或 "toggle"
	例:	$("div").animate({
            width:"hide",//左右隐藏
            height:"hide"//上下隐藏，二者作用下就是缩小隐藏
            height:"toggle"//上下隐藏或者展开
			},"slow",function(){
					alert("滑动这个动画效果执行之后可以加载一个匿名函数")
					$("p").css("color","red")
		})

4）jQuery提供针对动画的队列功能（按照顺序进行加载）。
	这意味着如果在彼此之后编写多个animate()调用，jQuery会创建包
含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
	例:	<script type="text/javascript">
			function doanimateForManyCssByQueene(){
				$("div").animate({left:"300px"},"slow")
				$("div").animate({top:"300px"},"slow")
				$("div").animate({width:'300px'},"slow")
			}
		</script>

5）stop()方法用于停止动画或效果，在它们完成之前。
	stop(stopAll,goToEnd);
	可选的 stopAll 参数规定是否应该清除动画队列。默认是false，
即仅停止活动的动画，允许任何排入队列的动画向后执行。
	可选的 goToEnd 参数规定是否立即完成当前动画。默认是false。
	例:	<script type="text/javascript">
        	$(document).ready(function(){	
        		$("#flip").click(function (){
        			 $("#pane").slideDown(5000);//5000毫秒就是5秒
        		})
        	})
        	function stopPush(){
        		$("#pane").stop()
        	}
        </script>

五、JQuery的HTML(DOM)操作

1.在页面创建元素并设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Jquery创建元素</title>
		<style type="text/css">
			.item{
				border: 1px solid red;
				height: 204px;
				padding: 1px;
			}
			img{
				width: 200px;
				height: 200px;
				float: left;
				border: 1px solid red;
			}
			p{
				height: 200px;
				line-height: 200px;
				float: left;
				text-align: center;
				margin: 0px;
				padding: 0px;
			}
			
		</style>
		<script src="../js/jquery.js"></script>
        <script type="text/javascript">
            function doCreateElement(){
            	
            	/* var $p= $("<p></p>")
            	 $p.text("该段落的文本内容")
            	 $("#dv").append($p)*/
            	
            var	$img=$("<img src='../img/02.jpg' />")
            var $p= $("<p></p>")
            $p.text("该段落的文本内容")
            var	$item=$("<div class='item'></div>")
            $item.append($img).append($p)
            $("#dv").append($item)
            	 
            }
        </script>
	</head>
	<body>
		<input type="button" value="点击" onclick="doCreateElement()" />
		<div id="dv">
			
		</div>
	</body>
</html>

2、获取内容和属性

ps:	 jQuery中非常重要的部分,就是操作DOM的能力

1) 获得内容 - text()、html() 以及 val()
	text() - 设置或返回所选元素的文本内容
	html() - 设置或返回所选元素的内容（包括 HTML 标记）
	val() - 设置或返回表单字段的值

例如: 通过 jQuery text() 和 html() 方法来获得内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过jQuery text()和html()方法来获得内容</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){

        $("#btn1").click(function (){

            alert($("#test").text())

        });
        $("#btn2").click(function (){

            alert($("#test").html())

        });
    });
</script>
</head>
<body>
	<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
	<input id="btn1" type="button" value="点击--显示文本内容"  />
	<input id="btn2" type="button" value="点击--显示 HTML"  />
</body>
</html>


例如：通过 jQuery val()方法获得输入字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过 jQuery val()方法获得输入字段的值</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">

</script>
<script type="text/javascript">
    $(document).ready(function(){

        $("#btn1").click(function (){
            alert("通过val()获取的数据："+$("#test").val())
        });	
    });
</script>
</head>
<body>
	<p>名称: <input type="text" id="test" value="测试用的数据"></p>
	<input id="btn1" type="button" value="点击--val()"  />
</body>
</html>


2) attr():获取属性的值
例如:通过 jQuery attr() 方法获得属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过 jQuery attr() 方法获得属性的值</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn1").click(function (){
            alert("显示 class 属性的值："+$("#p1").attr("class"))
        });
    });
</script>
</head>
<body>	
	<p id="p1" class="sy">这个是段落的内容</p>
	<input id="btn1" type="button" value="点击--显示 class 属性的值" />
</body>
</html>

3、设置内容和属性

ps:   设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

1) 通过text()、html()、val() 设置元素的值

例如:通过text()、html()、val() 设置元素的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过text()、html()、val() 设置元素的值</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">

</script>
<script>
    $(document).ready(function(){
          $("#btn1").click(function(){
            $("#test1").text("Hello world!");
          });
          $("#btn2").click(function(){
            $("#test2").html("<b>Hello world!</b>");
          });
          $("#btn3").click(function(){
            $("#test3").val("新的值");
          });
    });
</script>
</head>

<body>
	<p id="test1">这是一个段落。</p>
	<p id="test2">这是另外一个段落。</p>
	<p>输入框: <input type="text" id="test3" value="原有的内容"></p>
	<input type="button" id="btn1" value="设置文本"/>
	<input type="button" id="btn2" value="设置 HTML" />
	<input type="button" id="btn3" value="设置值" />
</body>
</html>



2)text()、html() 以及 val() 的回调函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text()、html() 以及 val() 的回调函数</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">

</script>
<script>
    $(document).ready(function(){
          $("#btn1").click(function(){
            $("#test1").text(function(){
                alert("执行了回调函数")
            });
          });

          $("#btn2").click(function(){
            $("#test2").html(function (){
                $("#test2").css("color","red")
            });
          });

          $("#btn3").click(function(){
            $("#test3").val(function (){
                var a=12
                var b=23
                alert(a+b)
            });
          }); 
    });
</script>
</head>

<body>
	<p id="test1">这是一个段落。</p>
	<p id="test2">这是另外一个段落。</p>
	<p>输入框: <input type="text" id="test3" value="原有的内容"></p>
	<input type="button" id="btn1" value="设置文本">
	<input type="button" id="btn2" value="设置 HTML" />
	<input type="button" id="btn3" value="设置值" />
</body>
</html>



3）设置属性 - attr()
例如：通过 jQuery attr() 方法设置属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过 jQuery attr() 方法设置属性的值</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">

</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn1").click(function (){
            $("#demo").attr("href","http://www.youku.com")
        })
    })
</script>
</head>
<body>
	
	<p><a href="//www.baidu.com" id="demo">百度</a></p>
	<input id="btn1" type="button" value="点击修改 href 值"  />
</body>
</html>

4、JQuery添加元素

1）追加元素 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 添加元素</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){

        $("#btn1").click(function (){
        	$("p").append("追加文本")
        })

        $("#btn2").click(function (){
        	$("p").append("<li>追加列表项</li>")
        })
    })	
</script>
</head>
<body>
    <p>原有段落的内容</p>
    <input id="btn1" type="button" value="追加文本" />
    <input id="btn2" type="button" value="追加列表项" />
</body>
</html>



2）jQuery prepend() 方法在被选元素的开头插入内容：文本内容，元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 添加元素</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
        $("#btn1").click(function (){
        	$("p").prepend("在文本的开头添加了内容: ")
        })

        $("#btn2").click(function (){
        	$("ol").prepend("<li>在开头添加列表项</li>")
        })
	})
</script>
</head>
<body>
    <p>原有段落的内容</p>
    <ol>
        <li>第一个的内容</li>
        <li>第一个的内容</li>
        <li>第一个的内容</li>
    </ol>
    <input id="btn1" type="button" value="追加文本" />
    <input id="btn2" type="button" value="追加列表项" />
</body>
</html>



3）通过 append() 和 prepend() 方法添加若干(>=0个)新元素
    例如:
        var txt1=“<p>添加的内容：</p>”
        $("p").prepend(txt1,txt1,txt1)

小结:
	append()和prepend():可以传入无数的参数
       



4）jQuery after() 方法在被选元素之后插入内容。
     jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 添加元素</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
        $("#btn1").click(function (){
            var txt1="<p>之前的内容:  </p>"
            $("img").before(txt1)
        })

        $("#btn2").click(function (){
        	var txt2="<p>之前的内容:  </p>"
        	$("img").after(txt2)
        })
    })
</script>
</head>
<body>
    <img src="../img/1.jpg" />		
    <input id="btn1" type="button" value="之前插入" />
    <input id="btn2" type="button" value="之后插入" />
</body>
</html>

5.JQuery删除元素

 1) remove() 方法删除被选元素及其子元素

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery操作DOM之删除元素</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function deleteElement(){
    	$("#dv").remove()
    }
</script>
</head>
<body>
    <div id="dv">
    <p>第一个段落的内容</p>
    <p>第二个段落的内容</p>
    </div>
    <input type="button" value="Jquery删除元素"  onclick="deleteElement()"/>
</body>
</html>



2) empty() 方法删除被选元素的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function deleteElement(){
    	$("#dv").empty()
    }
</script>
</head>
<body>
    <div id="dv" style="width: 500px;height: 300px; background-color: burlywood;">
    <p>第一个段落的内容</p>
    <p>第二个段落的内容</p>
    </div>
    <input type="button" value="Jquery删除元素"  onclick="deleteElement()"/>
</body>
</html>


3）过滤被删除的元素
	 remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
	该参数可以是任何 jQuery 选择器的语法

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function deleteElement(){
    	$("p").remove(".sta")
    }
</script>
</head>
<body>
    <div id="dv" style="width: 500px;height: 300px; background-color: burlywood;">
    <p >第一个段落的内容</p>
    <p class="sta">第二个段落的内容</p>
    </div>
    <input type="button" value="移除所有元素class=sta的元素"  onclick="deleteElement()"/>
</body>
</html>

6、获取和设定元素的CSS

1) addClass() - 向被选元素添加一个或多个样式/class

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .blue{color: #0000FF;}
    .green{color: green;}
    .import{
        color: red;
        font-size: 28px;
        font-family: "微软雅黑";
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function addCssForEnement(){
        $("h1").addClass("blue")
        $("h2").addClass("blue")
        $("div").addClass("green")
        $("p").addClass("import")
    }
</script>
</head>
<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <div>这是一些重要的文本!</div>
    <input type="button" value="为元素添加 class"  onclick="addCssForEnement()"/>
</body>
</html>




2) removeClass() - 从被选元素删除一个或多个类（css样式的class）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .blue{color: #0000FF;}
    .green{color: green;}
    .import{
        color: red;
        font-size: 28px;
        font-family: "微软雅黑";
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function removeCssForEnement(){
        /*$("h1").removeClass("blue")
        $("h2").removeClass("blue")
        $("div").removeClass("green")
        $("p").removeClass("import")*/
        
        $("h1,h2").removeClass("blue")
    }
</script>
</head>
<body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="import">这是一个段落。</p>
    <div class="green">这是一些重要的文本!</div>
    <input type="button" value="删除元素的 class"  onclick="removeCssForEnement()"/>
</body>
</html>



3) toggleClass() - 对被选元素进行添加/删除类（CSS的class）的切换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .blue{color: #0000FF;}
    .green{color: green;}
    .import{
        color: red;
        font-size: 28px;
        font-family: "微软雅黑";
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function siwtchCssForEnement(){
    	$("h1,h2").toggleClass("blue")
    }
</script>
</head>
<body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="import">这是一个段落。</p>
    <div class="green">这是一些重要的文本!</div>
    <input type="button" value="为元素添加/删除class"  onclick="siwtchCssForEnement()"/>
</body>
</html>

7、JQuery的CSS()方法

ps:  css() 方法设置或返回被选元素的一个或多个样式属性

1）获取被选元素的样式的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .blue{color: #0000FF;}
    .green{color: green;}
    .import{
        color: red;
        font-size: 28px;
        font-family: "微软雅黑";
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function getCssValue(){
        alert($("p").css("width"))//返回首个匹配元素
        alert($("#p2").css("width"))
    }
</script>
</head>
<body>
    <p style="background-color: blue;width: 500px;">这是一个段落。</p>
    <p id="p2" style="background-color: blue;width: 400px;">这是一个段落。</p>
    <input type="button" value="返回 CSS 属性"  onclick="getCssValue()"/>
</body>
</html>

2）设置 CSS 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .blue{color: #0000FF;}
    .green{color: green;}
    .import{
        color: red;
        font-size: 28px;
        font-family: "微软雅黑";
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function setCssValue(){
   		$("p").css("background-color","red")
    }
</script>
</head>
<body>
    <p style="background-color: blue;width: 500px;">这是一个段落。</p>
    <p id="p2" style="background-color: blue;width: 400px;">这是一个段落。</p>
    <input type="button" value="设置 CSS 属性"  onclick="setCssValue()"/>
</body>
</html>



3）设置多个 CSS 属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function setManyCssValue(){
    	$("p").css({"background-color":"yellow","font-size":"200%"});
	}
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <input type="button" value="设置多个 CSS 属性"  onclick="setManyCssValue()"/>
</body>
</html>

8、JQuery尺寸方法

ps:
	width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
	height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
	

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="application/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            var txt="";
            txt+="div 的宽度是: " + $("#div1").width() + "</br>";
            txt+="div 的高度是: " + $("#div1").height();
            $("#div1").html(txt);
        });
    });
</script>
</head>
<body>
	<div id="div1" style="height:100px;width:300px;padding:10px;
	margin:3px;border:1px solid blue;background-color:lightblue;
	"></div>
	<br>
    <button>显示 div 元素的尺寸</button>
    <p>width() - 返回元素的宽度</p>
    <p>height() - 返回元素的高度</p>
</body>
</html>


ps:
    innerWidth() 方法返回元素的宽度（包括内边距）。
    innerHeight() 方法返回元素的高度（包括内边距）。

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            var txt="";
            txt+="div 宽度: " + $("#div1").width() + "</br>";
            txt+="div 高度: " + $("#div1").height() + "</br>";
            txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
            txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
            $("#div1").html(txt);
        });
    });
</script>
</head>
<body>
	<div id="div1" style="height:100px;width:300px;
	padding:10px;margin:3px;border:1px solid blue;
	background-color:lightblue;"></div>
	<br>
    <button>显示 div 元素的尺寸</button>
    <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
    <p>innerHeight() - 返回元素的高度 (包含内边距)。</p>
</body>
</html>

六、JQuery的遍历

1.遍历——祖先

1) parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .dv *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function (){
		$("span").parent().css({"color":"red","border":"2px solid red"})
	});
</script>
</head>
<body>
    <div class="dv">
        <div style="width:500px;">div(曾祖父元素)
            <ul>ul(祖父元素)
                <li>li(父元素)
                	<span>span中的内容</span>
                </li>					
            </ul>
        </div>
    </div>
</body>
</html>



2) parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

示例代码：
    $(document).ready(function (){
    	$("span").parents().css({"color":"red","border":"2px solid red"})
    })
 
 
3) parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .dv *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
   		$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
    });
</script>
</head>
<body>
    <div class="dv">
        <div style="width:500px;">div(曾祖父元素)
            <ul>ul(祖父元素)
                <li>li(父元素)
                	<span>span中的内容</span>
                </li>					
            </ul>
        </div>
    </div>
</body>
</html>

2、遍历——后代

后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。


1) children() 方法返回被选元素的所有直接子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery变量之获取子元素</title>
<style type="text/css">
    .dv *{
        display: block;
        border: 2px solid #ccc;
        margin: 15px;
        padding: 15px;
    }
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    	$(".dv").children().css({"color":"red","border":"2px solid red"})
    })
</script>
</head>
<body>
    <div class="dv" style="width:500px;">div (当前元素) 
          <p>p (儿子元素)
            <span>span (孙子元素)</span>     
          </p>
          <p>p (儿子元素)
            <span>span (孙子元素)</span>
          </p> 
    </div>		
</body>
</html>



2) find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
    $(document).ready(function(){
        //$(".dv").find("span").css({"color":"red","border":"2px solid red"})
        $(".dv").find("*").css({"color":"red","border":"2px solid red"})
    })

3、遍历——同胞（siblings）

 	同胞拥有相同的父元素。
	通过jQuery,您能够在DOM树中遍历元素的同胞元素。

1) siblings() 方法返回被选元素的所有同胞元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .sgs *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
   		$("h2").siblings().css({"color":"red","border":"2px solid red"})
    })		
</script>
</head>
<body class="sgs">
    <div>div (父元素)
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p</p>
    </div>
</body>
</html>


2) next()方法返回被选元素的下一个同胞元素
    $(document).ready(function (){
        $("h2").next().css({"color":"red","border":"2px solid red"})
    })


3) nextAll()方法返回被选元素的所有跟随的同胞元素。
    $(document).ready(function (){
   		$("h2").nextAll().css({"color":"red","border":"2px solid red"})
    })


4) nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素：可以简单的理解为h2和h6之间夹的元素
    $(document).ready(function (){
        $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"})
    })

4、遍历——过滤

 遍历过滤：缩小搜索元素的范围

1) first() 方法返回被选元素的首个元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .sgs *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
    	$("body div").first().css("background-color","yellow")
    })
</script>
</head>
<body id="by">
    <h1>欢迎访问我的主页</h1>
    <div>
    	<p>这是 div 中的一个段落。</p>
    </div>

    <div>
        <p>这是另外一个 div 中的一个段落。</p>
    </div>

	<p>这是一个段落。</p>
</body>
</html>


2) last()方法返回被选元素的最后一个元素。
    $(document).ready(function (){
        $("body div").last().css("background-color","yellow")
    })


3) eq()方法返回被选元素中带有指定索引号的元素。：从匹配的一组中选中某
一个进行显示索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	.sgs *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
        $("p").eq(1).css("background-color","yellow")
    })
</script>
</head>
<body id="by">
    <h1>欢迎访问我的主页</h1>
    <p>我的前半生</p>
    <p>我的后半生</p>
    <p>我的下一辈子</p>
    <p>我的上辈子</p>
</body>
</html>

4) filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集
合中删除，匹配的元素会被返回：匹配的 选择显示，不匹配的不显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .sgs *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<title></title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
    	$("p").filter(".qs").css("background-color","yellow")
    })
</script>
</head>
<body id="by">
    <h1>欢迎访问我的主页</h1>
    <p>我的前半生</p>
    <p>我的后半生</p>
    <p class="qs">我的下一辈子</p>
    <p class="qs">我的上辈子</p>
</body>
</html>

5）not() 方法返回不匹配标准的所有元素。
    $(document).ready(function (){
        $("p").not(".qs").css("background-color","yellow")
    })