JQuery基础（一篇入门）-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

大师兄

976

文章

609118

访问

+关注

分类

暂无分类

日期归档

2023-05(1)

2023-06(1)

JQuery基础（一篇入门）

发布于2021-05-30 07:23 阅读(1166) 评论(0) 点赞(27) 收藏(5)

1.Jquery的历史和特点简介

1.1Jquery的历史

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版发布

友情提示：
JQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9

1.2Jquery的特点

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代码需要处理的方式

2.使用

2.1从 jquery.com 下载 jQuery 库

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

2.2 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（不推荐使用）

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

最新版本（放心 Copy）：https://code.jquery.com/jquery-3.5.1.min.js

<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>

CDN:好处：不用再把jquery.js文件放在本地，减少了本地资源的消耗，同时也可以减少当前服务器本身的网络请求的压力（相当于是将网络请求转到了不同的CDN结点（不同城市的服务器））
缺点：如果因为网络原因，导致CDN结点中断，那么我们的项目中的页面上的功能就要失效了

3.Jquery基本语法

3.1.jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作

3.1.1.元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Jquery之元素选择器</title>
		<script src="../js/jquery.js"></script>
		<script type="text/javascript">
			function elementSelector(){
               alert("这是元素选择器")
				$('p').hide()
			}
		</script>
	</head>
	<body>
		<p>Hello World:Jquery</p>
		<input type="button" value="元素选择器" onclick="elementSelector()" />
	</body>
</html>

小结：1）jquery是以$开头的
2）hide():隐藏HTML中的元素
3）jquery代码可以和js代码混合使用

3.1.2.id 选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery之元素选择器</title>
        <script src="../js/jquery.js"></script>
        <script type="text/javascript">
            function elementSelector(){
                alert("这是id选择器")
                $('#p1').hide()
            }
        </script>
    </head>
    <body>
        <p id="p1">Hello World:Jquery</p>
        <input type="button" value="id选择器" onclick="elementSelector()" />
    </body>
</html>

3.1.3.class 选择器

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Jquery之元素选择器</title>
		<script src="../js/jquery.js"></script>
		<script type="text/javascript">
			function elementSelector(){
               alert("class选择器")
				$('.pp').hide()
			}
		</script>
	</head>
	<body>
		<p class="pp">Hello World:Jquery</p>
		<input type="button" value="class选择器" onclick="elementSelector()" />
	</body>
</html>

3.2.jQuery 事件方法

3.2.1.dblclick()

dblclick()：当鼠标双击元素时，会发生 dblclick 事件
例如：
$("#p1").dblclick(function(){
    alert("再见，您的鼠标双击了该段落。");
});

3.2.2.mouseenter() mousedown() mouseup()

mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件
例如：
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
例如：
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件
例如：
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

3.2.3.hover()

hover()方法用于模拟光标悬停事件。

$("img").hover(
        function(){//相当于mouseenter
        console.log("你进入了 p1!");
        },
        function(){//相当于mouseleave
            console.log("拜拜! 现在你离开了 p1!");
        }
)

// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);

// 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

3.3.jquery特效

3.3.1.隐藏和显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dblclick</title>
		<script src="../js/jquery.js"></script>
		<script type="text/javascript">
		function hiddenEle(){
				
				var box=$("#box");
					box.hide();
			}
		function  showEle(){
			
			var box=$("#box");
					box.show();
		}
		</script>
			
	</head>
	<body >
		<div id="box" >
			<p>上海滩</p>
			<p>大上海。。。。百乐门。。。。</p>
		</div>
		<input type="button" id="btn" value="隐藏" onclick="hiddenEle()" />
		<input type="button" id="btn" value="显示" onclick="showEle()" />
	</body>
</html>

3.3.2.淡入淡出

淡入：fadeIn()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script   src="../js/jquery.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div1").fadeIn();
                    $("#div2").fadeIn("slow");
                    $("#div3").fadeIn(3000);
                });
            });
        </script>
    </head>
    <body>
        <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
        <button>点击淡入 div 元素。</button>
        <br><br>
        <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
        <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
        <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
    </body>
</html>

淡出：fadeOut()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script  src="../js/jquery.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div1").fadeOut();
                    $("#div2").fadeOut("slow");
                    $("#div3").fadeOut(3000);
                });
            });
        </script>
    </head>
    <body>
        <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
        <button>点击淡出 div 元素。</button>
        <br><br>
        <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
        <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
        <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    </body>
</html>

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>点击淡入/淡出</title>
        <script src="../js/jquery.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div1").fadeToggle();
                    $("#div2").fadeToggle("slow");
                    $("#div3").fadeToggle(3000);
                });
            });
        </script>
    </head>
    <body>
        <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
        <button>点击淡入/淡出</button>
        <br><br>
        <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
        <br>
        <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
        <br>
        <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    </body>
</html>

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script  src="../js/jquery.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div1").fadeTo("slow",0.15,function(){
                        alert("这个是第三个参数的效果")
                    });
                    $("#div2").fadeTo("slow",0.4);
                    $("#div3").fadeTo("slow",0.7);
                });
            });
        </script>
    </head>
    <body>
        <p>演示 fadeTo() 使用不同参数</p>
        <button>点我让颜色变淡</button>
        <br><br>
        <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
        <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
        <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    </body>
</html>

3.3.3.滑动

slideDown() 方法用于向下滑动元素

$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script  src="../js/jquery.js">
        </script>
        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideDown("slow",function(){
                        alert("滑动展开了div,要执行的第二个参数")  
                        $("#flip").css("color","red")
                    });
                });
            });
        </script>
        <style type="text/css"> 
            #panel,#flip
            {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel
            {
                padding:50px;
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="flip">点我滑下面板</div>
        <div id="panel">Hello world!</div>
    </body>
</html>

slideUp() 方法用于向上滑动元素。

语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script  src="../js/jquery.js">
        </script>
        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideUp("slow",function(){
                        $("#flip").css("color","blue")
                    });
                });
            });
        </script>
        <style type="text/css"> 
            #panel,#flip
            {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel
            {
                padding:50px;
            }
        </style>
    </head>
    <body>
        <div id="flip">点我拉起面板</div>
        <div id="panel">Hello world!</div>
    </body>
</html>

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script  src="jquery.js">
        </script>
        <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>
        <style type="text/css"> 
            #panel,#flip
            {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel
            {
                padding:50px;
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="flip">展开面板</div>
        <div id="panel">Hello world!</div>

    </body>
</html>

3.3.4.动画

animate() 方法允许您创建自定义的动画

语法：animate({params},speed,callback);
参数简介：{params}：是一个必选参数，定义了形成动画的CSS属性，类型为字典类型
speed：可选的参数其规定效果的时长也就是滑动的速度。它可以取值为：“slow”、“fast” 或毫秒
callback：可选的参数是动画完成后所执行的函数名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery.js"></script>
        <script type="text/javascript">
            function doanimate(){
                $("div").animate({left:'250px'},"slow",function(){
                    alert("滑动这个动画效果执行之后可以加载一个匿名函数")
                    $("p").css("color","red")
                })
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始动画" onclick="doanimate()" />
        <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
            如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
        <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
        </div>
    </body>
</html>

animate() - 操作多个属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery.js"></script>
        <script type="text/javascript">
            function doanimateForManyCss(){

                $("div").animate({left:'250px',top:'300px',width:'300px'},"slow",function(){
                    alert("滑动这个动画效果执行之后可以加载一个匿名函数")
                    $("p").css("color","red")
                })
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始动画" onclick="doanimateForManyCss()" />
        <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
            如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
        <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
        </div>
    </body>
</html>

jQuery animate() - 使用预定义的值(就是已经是写好的)

把属性的动画值设置为 “show”、“hide” 或 “toggle”

$("div").animate({
            width:"hide",//左右隐藏
            height:"hide"//上下隐藏，二者作用下就是缩小隐藏
            height:"toggle"//上下隐藏或者展开
},
"slow",function(){
					alert("滑动这个动画效果执行之后可以加载一个匿名函数")
					$("p").css("color","red")
})

jQuery 提供针对动画的队列功能（按照顺序进行加载）。

这意味着如果您在之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery.js"></script>
        <script type="text/javascript">
            function doanimateForManyCssByQueene(){
                $("div").animate({left:"300px"},"slow")
                $("div").animate({top:"300px"},"slow")
                $("div").animate({width:'300px'},"slow")
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始动画" onclick="doanimateForManyCssByQueene()" />
        <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
            如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
        <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
        </div>
    </body>
</html>

stop() 方法用于停止动画或效果，在它们完成之前。

语法：stop(stopAll,goToEnd);
参数简介：
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> 
            #pane,#flip
            {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #pane
            {
                padding:50px;
                display:none;
            }
        </style>
        <script src="../js/jquery.js"></script>
        <script type="text/javascript">        	        	
            $(document).ready(function(){
                $("#flip").click(function (){
                    $("#pane").slideDown(5000);//5000毫秒就是5秒
                })
            })        	
            function stopPush(){
                $("#pane").stop()
            }
        </script>
    </head>
    <body >
        <input type="button" value="停止滑动"  onclick="stopPush()"/>
        <div id="flip">点我向下滑动面板</div>
        <div id="pane">Hello world!</div>
    </body>
</html>

4.Jquery的HTML(DOM)操作

4.1获取内容和属性

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

1）获得内容 - text()、html() 以及 val()

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

$("#btn1").click(function (){
	
	alert($("#test").text())
	
})

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

	alert("通过val()获取的数据："+$("#test").val())

})

$("#btn2").click(function (){
	
	alert($("#test").html())
	
})

2）attr():获取属性的值

$("#btn1").click(function (){
	
	alert("显示 class 属性的值："+$("#p1").attr("class"))
	
})

4.2jQuery - 添加元素

1）$(“p”).append(“追加文本”)结尾追加元素

$("#btn1").click(function (){
    $("p").append("追加文本")
})
$("#btn2").click(function (){
    $("p").append("<li>追加列表项</li>")
})

2）jQuery prepend() 方法在被选元素的开头插入内容：文本内容，元素

$(document).ready(function (){
    $("#btn1").click(function (){
        $("p").prepend("在文本的开头添加了内容: ")
    })
	$("#btn2").click(function (){
        $("ol").prepend("<li>在开头添加列表项</li>")
    })
})

3）通过 append() 和 prepend() 方法添加若干(>=0个)新元素

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

var txt1="<p>添加的内容：</p>"
$("p").prepend(txt1,txt1,txt1)

4）jQuery after() jQuery before()

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

$(document).ready(function ()
                  {
    $("#btn1").click(function ()
                    {
        var txt1="<p>之前的内容：   </p>"
        $("img").before(txt1)
    })
    $("#btn2").click(function ()
                     {
        var txt2="<p>之后的内容：   </p>"
        $("img").after(txt2)
    })

})

4.3jQuery - 删除元素

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

function deleteElement(){
    $("#dv").remove()
}

2） empty() 方法删除被选元素的子元素。

function deleteElement(){
    $("#dv").empty()
}

3） remove() 过滤被删除的元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

function deleteElement(){
    $("p").remove(".sta")
}

4.4.jQuery - 获取并设置 CSS 类

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

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

2）removeClass() - 从被选元素删除一个或多个类

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

3）toggleClass() - 对被选元素进行添加/删除类的切换操作

<style type="text/css">
    .blue{color: #0000FF;}
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function siwtchCssForEnement(){
        $("h1,h2").toggleClass("blue")
    }
</script>

4.5.jQuery css() 方法

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

1）.css(“width”)获取被选元素的样式的属性值

<script src="jquery.js"></script>
<script type="text/javascript">
    function getCssValue()
    {
        alert($("p").css("width"))//返回首个匹配元素
        alert($("#p2").css("width"))
    }
</script>

2）调用css( )方法设置HTML元素的CSS 属性

<script src="jquery.js"></script>
<script type="text/javascript">
    function setCssValue()
    {
        $("p").css("background-color","red")
    }
</script>

3）设置多个 CSS 属性的值

<script src="../js/jquery.js"></script>
<script type="text/javascript">
    function setManyCssValue(){

    $("p").css({
        "background-color":"yellow",
                "font-size":"200%"
    });
}
</script>

4.6.jQuery 尺寸方法

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

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

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

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

5.Jquery遍历

5.1遍历 - 祖先

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

<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
        $("span").parent().css({"color":"red","border":"2px solid red"})
    })
</script>

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

$(document).ready(function (){

	$("span").parents().css({"color":"red","border":"2px solid red"})

})

3）parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。两个开区间

<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function (){
        $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
    })
</script>

5.2遍历 - 后代

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

1）children() 方法返回被选元素的所有直接子元素。

<script type="text/javascript">
    $(document).ready(function(){
        $(".dv").children().css({"color":"red","border":"2px solid red"})
    })
</script>

2）find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
	//$(".dv").find("span").css({"color":"red","border":"2px solid red"})	//找span
	$(".dv").find("*").css({"color":"red","border":"2px solid red"})	//所有
})

5.3遍历 - 同胞(siblings)

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

1）siblings() 方法返回被选元素的所有同胞元素。

<script type="text/javascript">
    $(document).ready(function (){
        $("h2").siblings().css({"color":"red","border":"2px solid red"})
    })		
</script>

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"})
})

5.4遍历- 过滤

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

1）first() 方法返回被选元素的首个元素

$(document).ready(function (){
    $("body div").first().css("background-color","yellow")
})

2）last() 方法返回被选元素的最后一个元素。

$(document).ready(function (){
    $("body div").last().css("background-color","yellow")
})

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

$(document).ready(function (){
    $("p").eq(1).css("background-color","yellow")
})

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

$(document).ready(function (){
    $("p").filter(".qs").css("background-color","yellow")
})

5）not() 方法返回不匹配标准的所有元素。

$(document).ready(function (){
    $("p").not(".qs").css("background-color","yellow")
})

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 博客

作者：大师兄

链接：http://www.qianduanheidong.com/blog/article/115899/31be3516f4e143b2fe7c/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权一经发现必将追究其法律责任

27 0

收藏该文

昵称:

评论内容：(最多支持255个字符)

---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力

程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

Web 页面之间传递参数的几种方法

uniapp安卓离线打包步骤

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

java图片转二进制流_java将文件转化成二进制流

个人简历html网页代码（使用chatgpt完成web开发课的实验）

【HTTP 协议】掌握 Web 的核心技术

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）

完全卸载vscode

flex布局优化(两端对齐，从左至右)

【熬夜送书 | 第二期】清华社赞助 | 《前端系列丛书》

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

居中网站内容 + 垂直导航栏

如何将项目左对齐（标题）

Nunjucks 嵌套变量

文本显示在图像上悬停

HTML/CSS - 按钮在另一个元素下排列

MathJax 库在公式中留下滚动条

如何在MVC5中用Razor将一行设为红色

在 Razor 页面 WebApplication 中将帖子从文本区域保存到数据库

响应式图像背景尺寸封面

将图像放入图像内

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站

程序员最近都爱上了这个网站程序员们快来瞅瞅吧！ it98k网:it98k.com

分类

标签

日期归档

JQuery基础（一篇入门）

Jquery

1.Jquery的历史和特点简介

1.1Jquery的历史

1.2Jquery的特点

2.使用

2.1从 jquery.com 下载 jQuery 库

2.2 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（不推荐使用）

3.Jquery基本语法

3.1.jQuery 选择器

3.1.1.元素选择器

3.1.2.id 选择器

3.1.3.class 选择器

3.2.jQuery 事件方法

3.2.1.dblclick()

3.2.2.mouseenter() mousedown() mouseup()

3.2.3.hover()

3.3.jquery特效

3.3.1.隐藏和显示

3.3.2.淡入淡出

3.3.3.滑动

3.3.4.动画

4.Jquery的HTML(DOM)操作

4.1获取内容和属性

4.2jQuery - 添加元素

4.3jQuery - 删除元素

4.4.jQuery - 获取并设置 CSS 类

4.5.jQuery css() 方法

4.6.jQuery 尺寸方法

5.Jquery遍历

5.1遍历 - 祖先

5.2遍历 - 后代

5.3遍历 - 同胞(siblings)

5.4遍历- 过滤

程序员最近都爱上了这个网站 程序员们快来瞅瞅吧！ it98k网:it98k.com

分类

标签

日期归档

JQuery基础（一篇入门）

Jquery

1.Jquery的历史和特点简介

1.1Jquery的历史

1.2Jquery的特点

2.使用

2.1从 jquery.com 下载 jQuery 库

2.2 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（不推荐使用）

3.Jquery基本语法

3.1.jQuery 选择器

3.1.1.元素选择器

3.1.2.id 选择器

3.1.3.class 选择器

3.2.jQuery 事件方法

3.2.1.dblclick()

3.2.2.mouseenter() mousedown() mouseup()

3.2.3.hover()

3.3.jquery特效

3.3.1.隐藏和显示

3.3.2.淡入淡出

3.3.3.滑动

3.3.4.动画

4.Jquery的HTML(DOM)操作

4.1获取内容和属性

4.2jQuery - 添加元素

4.3jQuery - 删除元素

4.4.jQuery - 获取并设置 CSS 类

4.5.jQuery css() 方法

4.6.jQuery 尺寸方法

5.Jquery遍历

5.1遍历 - 祖先

5.2遍历 - 后代

5.3遍历 - 同胞(siblings)

5.4遍历- 过滤

程序员最近都爱上了这个网站程序员们快来瞅瞅吧！ it98k网:it98k.com