jQuery 实战

最新推荐文章于 2023-05-30 15:09:20 发布
最新推荐文章于 2023-05-30 15:09:20 发布
阅读量691 收藏 2
点赞数
文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51945098/article/details/120664298
版权

总结
1.样式实战
设置/获取样式css() 追加/移除样式addClass()/removeClass()
切换样式toggleClass() 判断样式hasClass()

2.内容实战
设置/获取html元素html()
设置/获取文本内容text()
设置/获取元素属性值val()

3.节点实战
元素内部插入子节点
append() appendTo()
prepend() prependTo()

元素外部插入同辈节点
after() insertAfter()
before() insertBefore()

删除节点
remove() empty() detach()

替换节点
replaceWith() replaceAll()

复制节点
clone()

4.属性实战
设置/获取元素属性attr()
删除元素属性removeAttr()

5.遍历实战
遍历子元素children() 遍历同辈元素next()
遍历前辈元素prev() 其他遍历方法slibings()
遍历前辈元素parent(),parents()
其他遍历each()

6.拓展实战
height() width()

详细： 案例来自菜鸟教程
1.样式实战

1.1设置/获取样式css()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
    <script>
        $(function(){
            alert($("div").css("background-color"));//获取
            $(".a").css("background-color","red");//设置
        })
    </script>
</head>
<body>
    <div style="background-color: red;"></div>
    <div class="a">123</div>
</body>
</html>

在这里插入图片描述
点击确定，出现如下页面：
在这里插入图片描述
1.2.追加/移除样式addClass()/removeClass()

addClass() 为每个匹配的元素添加指定的类名。

removeClass()从所有匹配的元素中删除全部或者指定的类。

注意点： 一个或多个要添加到元素中/删除的CSS类名，请用空格分开

  <script>
        $(function(){
            $(".a").click(function(){
                $("p:first").addClass("intro");
            })
            $(".b").click(function(){
                $("p:first").removeClass("intro");
            })
        })
    </script>
    <style>
        .intro{
            font-size: 150%;
            color: red;
        }
    </style>


<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button class="a">给第一个P元素添加一个类名</button>
    <button class="b">给第一个P元素添加一个类名</button>
</body>

在这里插入图片描述
点击左边的按钮出现如下画面，然后点击右击的又变成上面画面。
在这里插入图片描述
1.3.切换样式toggleClass()

toggleClass() 如果存在（不存在）就删除（添加）一个类。

 <script>
        $(function(){
            $("button").click(function(){
                $("p").toggleClass("main");
            });
        });
    </script>
    <style>
        .main{
            font-size:120%;
            color:red;
        }
        </style>        


<body>
    <button>转换P元素的"main"类</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p><b>注意:</b>单击按钮查看多次切换的效果。</p>
</body>

在这里插入图片描述
点击按钮后，出现如下画面，再次点击就恢复上面画面
在这里插入图片描述
1.4.判断样式hasClass()

hasClass() 检查当前的元素是否含有某个特定的类，如果有，则返回true。

<script>
        $(function(){
	        $("button").click(function(){
		        alert($("p").hasClass("intro"));
	        });
        });
    </script>
    <style >
    .intro{
        font-size:120%;
        color:red;
    }
    </style>  


<body>
    <p class="intro">这是一个段落</p>
    <p> 这是另外一个段落</p>
    <button>是否有 p 元素使用了 "intro" 类?</button>
</body>

在这里插入图片描述
点击按钮会出现弹窗，显示true。
在这里插入图片描述
2.内容实战

2.1.设置/获取html元素html()

    <script>
        $(function(){
            $("button").click(function(){
		        $("p").html("Hello <b>world!</b>");
                alert($("p").html());
	        });
        });
    </script>


<body>
    <button>修改所有P元素的内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>

在这里插入图片描述
点击按钮后，会出现如下弹窗，点确定，就会出现效果。
在这里插入图片描述
在这里插入图片描述
PS：
渲染效果是从上往下的，和看得到的没关系，因为执行速度太快了
（也可能具体看浏览器）

html（）text（）区别
html（）能识别里面的元素标签，
text（）不可以，就是渲染不出来，只是当成字符串

2.2.设置/获取文本内容text()

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").text("Hello <b>world! </b>");
		alert($("p").text());
	});
});
</script>

在这里插入图片描述
点击按钮后，会出现如下弹窗，点确定，就会出现效果。
在这里插入图片描述
在这里插入图片描述
2.3.设置/获取元素属性值val()

    <script>
        $(function(){
            $("button").click(function(){
                alert($("input:text").val());
		        $("input:text").val("你好啊~");
                alert($("input:text").val());
	        });
        })
    </script>


<body>
    <p>名称: <input type="text" name="user" value=""></p>
    <button>设置输入字段的值</button>
</body>

在这里插入图片描述
当你点击该button时，会有一个弹窗，啥也没有，点确定以后
会出现 你好啊该弹窗，再次点击确定，文本框会出现内容。
在这里插入图片描述
3.节点实战

3.1.元素内部插入子节点

A.append()

<script>
        $(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>插入文本</b>.");
            });
            $("#btn2").click(function(){
                $("ol").append("<li>插入项</li>");
            });
        });
</script>

<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
    <ol>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ol>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
</body>

在这里插入图片描述
点击插入文本和插入列表项会出现如下画面
在这里插入图片描述
append()和appendTo()与一样，在后面添加。

B.appendTo()

$(function(){
    $("#btn1").click(function(){
            $(" <b>插入文本</b>.").appendTo("p");
     });
});

C.prepend()

<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});
</script>

在这里插入图片描述
点击插入文本和插入列表项会出现如下画面
在这里插入图片描述
prepend()和prependTo()结果一样，是在前面添加。

D.prependTo()

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("<span>Hello World! </span>").prependTo("p");
	});
});
</script>

3.2.元素外部插入同辈节点

A.after()
B.insertAfter()
C.before()
D.insertBefore()

    <script>
        $(function(){
	        $("button").click(function(){
                $("p").after("<p>Hello world!</p>");
//after() 1

                $("<span>Hello world!</span>").insertAfter("p");
//insertAfter() 2

                $("p").before("<p>Hello world!</p>");
//before() 3

                $("<span>Hello world!</span>").insertBefore("p");
//insertBefore() 4

            });
        });
    </script>   


<body>
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>

1和2一样是在段落后面添加 3和4一样是在段落前面添加
其中有一个区别，span标签每次点击只会增加一次
然而是p标签时，以2的次方增加（从0开始）
在这里插入图片描述
点击按钮会出现如下画面，1、2出现第一幅，3、4出现第二幅。
在这里插入图片描述
在这里插入图片描述
3.3.删除节点

A.remove()
从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，
因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外，
其他的比如绑定的事件，附加的数据等都会被移除。

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").remove();
	});
});
</script>


<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>移除所有P元素</button>
</body>

在这里插入图片描述
在这里插入图片描述
B.empty()
删除匹配的元素集合中所有的子节点。

 <script>
        $(function(){
	        $("button").click(function(){
		        $("div").empty();
	        });
        });
    </script>


<body>
    <div style="height:100px;background-color:yellow">
        这是一些文本。
        <p>这是div块中的一个段落。</p>
        </div>
        <p>这是div块外部的一个段落。</p>
        <button>移除div块中的内容</button>
</body>

在这里插入图片描述
在这里插入图片描述
C.detach()
从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，
因而可以在将来再使用这些匹配的元素。
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

有p只是看不到了，在底层，恢复就出来了。

<script>
$(document).ready(function(){
	var x;
	$("#btn1").click(function(){
		x=$("p").detach();
	});
	$("#btn2").click(function(){
		$("body").prepend(x);
	});
});
</script>


<body>
<p>这是一个段落。</p>
<button id="btn1">移除P元素</button>
<button id="btn2">恢复P元素</button>
</body>

在这里插入图片描述
点击移除就没了，再次点击恢复就出现了。

3.4.替换节点

A.replaceWith()
B.replaceAll()

<script>
$(function(){
	        $("button").click(function(){
				//第一种
		        $("p:first").replaceWith("<P>Hello world!</P>");

				//第二种  也可以改成p:last
                // $("<P>Hello world!</P>").replaceAll("p:first");
	        });
        });</script>


<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>使用新文本替换第一个P元素</button>
</body>

如果p标签不加结束标签，后面的p第二次执行也会替换。
在这里插入图片描述
在这里插入图片描述
3.5.复制节点

A.clone()

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").clone().appendTo("body");//链式操作
	});
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>克隆所有P元素，在body元素中插入它们</button>
</body>

在这里插入图片描述
点这个按钮，就会在按钮往下复制
在这里插入图片描述
4.属性实战（常见）

4.1 设置/获取元素属性attr() (摘录)

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

<script>
$(document).ready(function(){
	$("button").click(function(){
		    $("img").attr("width","300");
           alert($("img").attr("width"));
	 });
});
</script>


<body>
<img src="img/1.png" alt="Pulpit Rock" width="240" height="200">
    <br>
    <button>为图片设置width属性</button>
</body>

在这里插入图片描述
点击按钮，会跳出弹窗，为300，点击确定，之后图片就变成了
在这里插入图片描述
4.2.删除元素属性removeAttr()

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").removeAttr("style");
	});
});
</script>


<body>
<h1>这是一个标题</h1>
<p style="font-size:120%;color:red">这是一个段落。</p>
<p style="font-weight:bold;color:blue">这是另一个段落。</p>
<button>移除所有P元素的样式属性</button>
</body>

在这里插入图片描述
点击按钮，就会消失效果
在这里插入图片描述
5.遍历实战
5.1遍历子元素children()

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

<style>
.descendants *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>

<script>
	$(document).ready(function(){
	$("ul").children().css({"color":"red","border":"2px solid red"});
	});
</script>


<body class="descendants">body (曾祖先节点)
<div style="width:500px;">div (祖先节点)
	<ul>ul (直接父节点)  
		<li>li (子节点)
			<span>span (孙节点)</span>
		</li>
	</ul>   
</div>
</body>

在这里插入图片描述
特殊情况：

<script>
        $(function(){
             alert($(".a").children().length);
            //$(".a").children().css("color","red");
            //子元素 然而孙子元素也出现了效果  大概是颜色的问题
             $(".a").children().css("border","1px solid red");
             $("p").css("border","1px solid red")
        });
</script>


<body>
    <div class="a">123
        <div>爱你
            <p>快乐</p>
        </div>
        <div>爱你12
            <p>快乐34</p>
        </div>
    </div>
</body>

结果 长度是2 但效果儿子元素和孙子元素都变成了红色
在这里插入图片描述
加了边框之后，就能看出来区别
在这里插入图片描述
5.2遍历同辈元素next()
next() 方法返回被选元素的后一个同级元素。

<!-- style省略不写 -->
<script>
$(document).ready(function(){
	$("li.start").next().css({"color":"red","border":"2px solid red"});
});
</script>


<body>
<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
		<li class="start">li (类名为"start"的兄弟节点)</li>
		<li>li (类名为"start"的li节点的下一个的兄弟节点)</li>
		<li>li (兄弟节点)</li>
	</ul>   
</div>
</body>

在这里插入图片描述
5.3遍历前辈元素prev()
prev() 方法返回被选元素的前一个同级元素。

<!-- style省略不写 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").prev().css({"color":"red","border":"2px solid red"});
});
</script>
</head>


<body>
<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (兄弟节点)</li>
		<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
		<li class="start">li (类名为"start"的li节点)</li>
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
	</ul>   
</div>
</body>

在这里插入图片描述
5.4其他遍历方法siblings()
siblings() 方法返回被选元素的所有同级元素。

<!-- style省略不写 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").siblings().css({"color":"red","border":"2px solid red"});
});
</script>


<body>
<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (类名为"star"的上一个兄弟节点)</li>
		<li>li (类名为"star"的上一个兄弟节点)</li>
		<li class="start">li (兄弟节点)</li>
		<li>li (类名为"star"的下一个兄弟节点)</li>
		<li>li (类名为"star"的下一个兄弟节点)</li>
	</ul>   
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>
</body>

在这里插入图片描述
5.5.遍历前辈元素parent(),parents()

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素。
DOM 树：
** 该方法从父元素向上遍历 DOM 元素的祖先，**
直至文档根元素的所有路径（<html>）。

<!-- style省略不写 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parent().css({"color":"red","border":"2px solid red"});
//$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>


<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

在这里插入图片描述
parent 上面 parents 下面
在这里插入图片描述
5.6.其他遍历each()(显性迭代 专业术语)
each() 方法为每个匹配元素规定要运行的函数。

<!-- style省略不写 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
//第一种
		$("li").each(function(){
			alert($(this).text())
		});
// alert($("li").text()) 第二种
	});
});
</script>


<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>

点击按钮会分别出现三个弹窗 Coffee Milk Soda
然而使用第二种方法，只会出现一个
在这里插入图片描述
6.拓展实战

6.1 height()
height() 方法设置或返回被选元素的高度。

6.2 width()
width() 方法设置或返回被选元素的宽度。

<!-- style省略不写 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
alert("div的高度: " + $("div").height());
alert("div的宽度: " + $("div").width());
  });
});
</script>


<body>
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
<button>显示div的高度和宽度</button>
</body>

在这里插入图片描述

点击按钮会出现 弹窗 div的高度:100 div的宽度:300

也可以用alert($("div ").attr(“width”));
<div width=”200px”>123</div>

题外话：

jQuery focus() 方法(摘录)
当元素获得焦点时（当通过鼠标点击选中元素
或通过 tab 键定位到元素时），发生 focus 事件。
**提示：**该方法通常与 blur() 方法一起使用。
举例：

 	<script>
        $(document).ready(function(){
            $("input").focus(function(){
                $("span").css("display","inline").fadeOut(2000);
            });
        });
    </sc\ ript>
    <style>span{display:none;}</style>


<body>
    <input>
    <span>请输入你的电话号码?</span>
    <p>点击输入框获取焦点。</p>
</body>

在这里插入图片描述
当你点击输入框的时候，在文本框后面会出现字
在这里插入图片描述
然后又慢慢消失了，使用了fadeOut（）。

jQuery blur() 方法(摘录)
当元素失去焦点时发生 blur 事件。

<script>
      $(document).ready(function(){
           $("input").blur(function(){
               alert("输入框失去了焦点");
           });
      });
</script>


<body>
    输入你的名字: <input type="text">
    <p>在输入框写些东西，然后点击输入框外，让其失去焦点。</p>
</body>

在这里插入图片描述
在这里插入图片描述
Math.floor() 返回小于或等于一个给定数字的最大整数。
Math.floor( 45.95);// 45
Math.floor(-45.05);// -46

----2021.10.09

好好学java的xz
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实战
01-09
《jQuery实战》全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了...《jQuery实战》适合各层次Web开发人员。
jQuery实战教程
宠着长岛冰茶吗
09-22 220
If we can only encounter each other rather than stay with each other,then I wish we had never encountered.
JQuery实现小项目
xyk：的博客
05-25 2099
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。拥有便捷的插件扩展机制和丰富的插件。总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API。想下载的看下我的码云~~
jQuery项目案例
qq_52108058的博客
06-27 4777
2、微博发布 3、移动水果 4、上下拉切换 5、精品演示 6、tab标签切换 7、突出显示 总结 li:first li:last li:eq(2) li:odd --奇数 li:even --偶数 ul li --子代 ul
几本 jQuery 书籍（含 jQuery 实战）
09-05 3820
今天整理下手中的几本 jQuery 书籍，和大家分享一下，其中包括 jQuery 基础教程（Learning jQuery）、jQuery 实战（jQuery in Action）和锋利的 jQuery。   1.jQuery实战(jQuery in Action) jQuery 之父推荐的书，大家可以想像。“本书令我惊喜……这是一部深入透彻的著作，jQuery项目本身都从中获益
【jQuery简单的综合案例】
weixin_45753617的博客
08-25 523
【jQuery简单的综合案例】
自己搭建一个jQuery的项目
热门推荐
吴小迪的博客
07-17 4万+
自己搭建一个jQuery的项目的步骤：一：创建远程仓库二：将远程仓库克隆到本地三：搭建项目源文件目录结构四：添加gulp功能五：生成.gitignore文件六：提交初始版本（本地版本库）七：推送到远程仓库 一：创建远程仓库 码云，腾讯开发者平台，github，阿里云。。。 二：将远程仓库克隆到本地 $git clone 你的项目地址 三：搭建项目源文件目录结构 HTML + CSS JavaSc...
JQuery实战
06-21
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之...《jQuery实战》适合各层次Web开发人员。
HTML5前端教程：jQuery项目实战
weixin_34252686的博客
07-20 2329
这个jQuery项目实战课程在整个HTML5课程体系中的地位呢，也是很重要的，有着承上启下的作用。 为什么这么说呢，主要有以下三点原因： 第1， 在掌握原生javascript开发的基础上学习jQuery，能够进一步提升前端开发能力。 而且在我们的原生javascript的课程结束后学习jQuery才是真正能够从根本上理解jQuery的本质，运用起来才更加的得心应手，...
jQuery实现简易商城系统项目实操详解
Free雅轩的博客
07-17 811
全选
jquery项目实战_我从14个进阶实战项目中总结出的前端工程师必备的一些基础技能...
weixin_39967996的博客
11-23 561
前端从三四年前的无人问津到现在众所周知，有越来越多的人要涌入前端行业。起初很多人都觉得前端门槛低容易学想来分一杯羹，现如今初中级前端工程师有很多，高级前端工程师还是比较欠缺的。要在众多前端工程师中脱颖而出，有两点很重要，扎实的基础和前端编程思维。这听着有点虚，我直接举例子来说明。CSScss作为前端的基础之一，看起来比较简单，基本只是调整一下颜色、位置，但是深入研究它的原理并巧妙应用，...
jQuery新建项目
yanjin_xiaoxiao的博客
04-29 1272
开发工具与关键技术： MVC 作者：陈珊珊 撰写时间：2021/4/28 注意看红色部分，共有17个步骤，按顺序操作下去 1、鼠标左键点击新建项目，或点击文件-新建-项目 2、点击Visual C# - 再点击ASP.NET Web 应用程序 3、名称由自己来决定，把为解决方案创建项目(D)勾选起来，点击浏览 4、选择自己想要存放项目的文件夹，再点击选择文件夹 5、确定好每一项都没有问题后，点击确定 6、模板选择Empty（空模板），把MVC勾选起来，在云中托管(H)不要勾选，没问题后点击确定 7、以下是项
JQuery-04-笔记
qq_24410589的博客
06-13 156
JQuery 综合案例 1、综合案例 复选框 1.1、案例效果 1.2、分析和实现 2、综合案例 随机图片 2.1、案例效果 2.2、动态切换小图的分析和实现 2.3、显示大图的分析和实现 JQuery 综合案例 1、综合案例 复选框 1.1、案例效果 复选框 1.2、分析和实现 功能分析 全选 为全选按钮绑定单击事件。 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。 全不选 为全不选按钮绑定单击事件。 获取所有的商品项复选框元素，为其添加 che
JQuery框架项目实战案例-ToDolist待办事项列表
weixin_42889097的博客
10-01 262
使用JQuery框架完成项目实战案例-ToDolist待办事项列表
Educoder/头歌——jQuery事件
m0_71106830的博客
05-30 1711
问：什么是事件？答：页面对不同访问者的响应叫做事件。问：那事件处理程序又是什么呢？答：事件处理程序指的就是当HTML中发生某些事件时所调用的方法。为了完成本关任务，你需要掌握：click() 事件方法；dblclick()事件方法；mouseenter()事件方法；mouseleave()事件方法；了解其他鼠标事件。
jQuery学习笔记(二)jQuery中的DOM操作
dmdvrdj8220的博客
01-10 150
　jQuery中的DOM操作包括以下部分 　　1 查找节点 　　　　1.1 查找元素节点 　　　　1.2 查找属性节点 　　2 创建节点 　　　　2.1 创建元素节点 　　　　2.2 创建文本节点 　　　　2.3 创建属性节点 　　3 插入节点 　　4 删除节点 　　　　1. remove()方法 　　　　2. detach() 方法 　　　　3. empt...
JavaScript+jQuery+项目实战系列视频教程
10-27
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
用JavaScript和jQuery两种方式实现点击标题在同一块内容区显示不同的内容
m566666的博客
10-26 1188
我们要实现的效果图如下： 一、用JavaScript实现 我们先把html和css写出代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
addClass、removeClass、toggleClass属性（方法）
weixin_44540178的博客
04-27 1万+
大家来想一想jQuery的addClass、removeClass、toggleClass操作HTMLDOM的属性（方法） 开发工具与关键技术：Visual Studio jQuey 作者：Li Mingrun 撰写时间：2019年4月26日 小时可以不懂事，大时需懂事。小时不懂事有父母，大时不懂事您还有谁… 学习完新的课程有必要回头复习一下以前的课程知识基础，巩固个人的程序...
jquery实战项目案例
最新发布
10-28
jQuery实战项目案例有很多，以下是其中的一些： 1.图片轮播：使用jQuery实现图片轮播效果，可以通过点击按钮或自动播放来切换图片。 2.下拉菜单：使用jQuery实现下拉菜单效果，可以通过鼠标悬停或点击来展开或收起菜单。 3.表单验证：使用jQuery实现表单验证功能，可以在提交表单前对表单进行验证，确保用户输入的内容符合要求。 4.模态框：使用jQuery实现模态框效果，可以在页面中弹出一个对话框，用于显示提示信息或进行操作。 5.滚动加载：使用jQuery实现滚动加载效果，可以在页面滚动到底部时自动加载更多内容。 以上只是一些常见的jQuery实战项目案例，实际上还有很多其他的应用场景。如果您有具体的需求，可以通过搜索引擎或相关的教程来学习如何使用jQuery实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值