jquery基础例子

最新推荐文章于 2022-10-24 11:48:20 发布
最新推荐文章于 2022-10-24 11:48:20 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： jquery java web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012953466/article/details/50917937
版权

1.jquery标签页.html

<html>

<head>
    <title>tab标签页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style-type: none;
        }
        body {
            margin: 50px;
        }
        #ul {
            height: 30px;
            margin-bottom: 10px;
        }
        #ul li {
            height: 30px;
            line-height: 30px;
            padding: 0 15px;
            border: 1px solid #abcdef;
            float: left;
            margin-right: 3px;
            cursor: pointer;
        }
        #ul li.current {
            background: #abcdef;
        }
        #content div {
            width: 300px;
            height: 200px;
            border: 1px solid #abcdef;
            display: none;
        }
        #content div.show {
            display: block;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            $("#ul li").click(function () {
                /*//1.点击li的时候切换样式
                $(this).addClass("current").siblings().removeClass("current");
				//2.根据li的索引值，来确定哪个div显示，其他div隐藏
                $("#content>div").eq($(this).index()).show().siblings().hide();*/
                //$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();
				$(this).addClass("current").siblings().removeClass("current").parent().next().find("div").eq($(this).index()).show().siblings().hide();
			});
        });
    </script>
</head>

<body>
    <ul id="ul">
        <li class="current">php</li>
        <li>ruby</li>
        <li>python</li>
    </ul>
    <div id="content">
        <div class="show">php...介绍</div>
        <div>ruby...介绍</div>
        <div>python...介绍</div>
    </div>
</body>

</html>

2.jquery表单事件.html

<html>

<head>
    <title>表单事件</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            /*$("input").focus(function(){
			    $("span").show();
			});
			$("input").blur(function(){
			    $("span").hide();
			});*/
			//当有focus事件的元素里面的值改变的时候，并触发了blur事件才算完成一次
			/*$("input").change(function(){
			    $("span").show();
			});*/
			/*$("input").select(function(){
			    $("span").show();
			});*/
			$("#form1").submit(function(){
			    alert("success");
			});
        });
    </script>
</head>

<body>
    <form action="http://www.baidu.com" id="form1">
    <input type="text" name="username" id="" value="11111" />
	<input type="submit" value="提交" />
	</form>
	<span style="display:none">asas<span>
</body>

</html>

3.jquery表单选择框实例.html

<html>

<head>
    <title>表单选择框实例</title>
	<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function () {
		    var chkAll = $("#chkAll");
			var chkNone = $("#chkNone");
			var chkReverse = $("#chkReverse");
			var checkbox = $("#checkbox>:checkbox");
			chkAll.click(function(){
			    checkbox.attr("checked","checked");
			});
			chkNone.click(function(){
			    checkbox.removeAttr("checked");
			});
			chkReverse.click(function(){
			    checkbox.each(function(){
				    $(this).attr("checked",!$(this).attr("checked"));
				});
			});
        });
    </script>
</head>

<body>
    <div id="checkbox">
	    <input type="checkbox" name="" id="" checked="checked" />1
		<input type="checkbox" name="" id="" />2
		<input type="checkbox" name="" id="" />3
		<input type="checkbox" name="" id="" />4
	</div>
	<div id="btn">
	    <input type="button" id="chkAll" value="全选" />
		<input type="button" id="chkNone" value="全不选" />
		<input type="button" id="chkReverse" value="反选" />
	</div>
</body>

</html>

4.jquery查看修改和删除.html

<html>

<head>
    <title>查看修改和删除</title>
    <style>
        #table {
            border: 1px solid #abcdef;
            border-collapse: collapse;
            width: 600px;
        }
        tr {
            height: 30px;
        }
        th {
            border: 1px solid #abcdef;
        }
        td {
            border: 1px solid #abcdef;
            text-align: center;
        }
        td a {
            margin-right: 5px;
            color: #f00;
        }
        .popDiv {
            width: 500px;
            padding: 10px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            margin-left: -250px;
            top: 100px;
            background: #fff;
            display: none;
            z-index: 1000

        }
        .popDiv p {
            border-bottom: 1px solid red;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            //查看
            $(".view").click(function () {

                var maskHeight = $(document).height();
                var maskWidth = $(document).width();

                //添加遮罩层
                $("<div class='mask'></div>").appendTo($("body"));
                //$("body").append("<div class='mask'></div>");
                $("div.mask").css({
                    "opacity": 0.4,
                    "background": "#000",
                    "position": "absolute",
                    "left": 0,
                    "top": 0,
                    "height": maskHeight,
                    "width": maskWidth,
                    "z-index": 2
                });
                //z-index大小决定谁被遮蔽

                var arr = [];
                $(this).parent().siblings().each(function () {
                    arr.push($(this).text());

                });
                //alert(arr);
                $(".popDiv").show().children().each(function (i) {
                    $(this).children("span").text(arr[i]);
                });
            });
            //关闭
            $(".close").click(function () {
                $(this).parent().hide();
                $(".mask").remove();
            });

            //删除
            $(".del").click(function () {
                //$(this).parent().parent().remove();
                $(this).parents("tr").remove();
            });
        });
    </script>
</head>

<body style="height:8000px">

<table id="table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职位</th>
        <th>薪资</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>前端</td>
        <td>6000</td>
        <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>28</td>
        <td>java工程师</td>
        <td>12000</td>
        <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a>
        </td>
    </tr>
</table>

<div class="popDiv">
    <p><strong>姓名：</strong><span></span>
    </p>
    <p><strong>年龄：</strong><span></span>
    </p>
    <p><strong>职位：</strong><span></span>
    </p>
    <p><strong>工资：</strong><span></span>
    </p>
    <a href="#" class="close">关闭</a>
</div>

</body>

</html>

5.jquery动画队列.html

<html>

<head>
    <title>动画队列</title>
	<style>
	p{
	    width:100px;
		padding:100px;
		background:#abcdef;
	}
	div{
	    width:50px;
		height:50px;
		background:#f60;
		position:absolute;
		left:10px;
		top:40px;
	}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
			$("a").hover(function(){
				$("p").stop(false,true).slideDown(500);
			},function(){
			    $("p").stop(false,true).slideUp(500);
			});
			$("button").click(function(){
			    $("div").animate({
				    "top":"400px"
				},2000).animate({
				    "left":"800px"
				},2000).animate({
				    "top":"40px"
				},2000).animate({
				    "left":"10px"
				},2000);
			});
			$("#stop").click(function(){
			    //是否清除队列  是否立即结束
			    $("div").stop(false,false);
			});
			$("#dequeue").click(function(){
			    //清除下一个动画
			    $("div").dequeue();
			});
			$("#finish").click(function(){
			    //结束动画
			    $("div").finish();
			});
			$("#dianji").click(function(){
			    //延迟动画
			    $("p").slideUp(500).delay(1000).slideDown(500);
			});
        });
    </script>
</head>

<body>
    <a href="#">点击</a>
	<input id="dianji" type="button" value="dianji" />
	<p>您好</p>
	<button>run</button>
	<input id="stop" type="button" value="stop" />
	<input id="dequeue" type="button" value="dequeue" />
	<input id="finish" type="button" value="finish" />
	<div></div>
</body>

</html>

6.jquery仿微博发布框.html

<html>

<head>
    <title>仿微博发布框</title>
	<style>
	
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    var maxLength = $("strong").text();
		    $("textarea").keyup(function(){
			    var l = $(this).val().length;
				$("strong").text(maxLength - l);
				if(parseInt($("strong").text()) < 0){
			        $("strong").text("0");
					var val = $(this).val().substring(0,140);
					$(this).val(val);
				}
			});
        });
    </script>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <span>您还可以输入<strong style="color:red">140</strong>个字</span>
</body>

</html>

7.jquery滚动公告.html

<html>

<head>
    <title>滚动公告</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            margin: 50px;
        }
        ul {
            list-style-type: none;
        }
        li {
            height: 30px;
            line-height: 30px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            setInterval(function () {
                var newLi = $("ul>:first").clone(true);
                $("ul").append(newLi);
                $("ul>:first").remove();
            }, 2000);

        });
    </script>
</head>

<body style="height:8000px">
    <ul>
        <li>我是第1条公告</li>
        <li>我是第2条公告</li>
        <li>我是第3条公告</li>
        <li>我是第4条公告</li>
        <li>我是第5条公告</li>
        <li>我是第6条公告</li>
        <li>我是第7条公告</li>
        <li>我是第8条公告</li>
    </ul>
</body>

</html>

8.jquery滑动动画.html

<html>

<head>
    <title>滑动动画</title>
	<style>
	p{
	    width:100px;
		padding:10px;
		border:1px solid #abcdef;
		display:none;
	}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    /*$("a").click(function(){
				$("p").slideDown(500);
			});*/
			/*$("p").show();
			$("a").click(function(){
				$("p").slideUp(500);
			});*/
			$("a").click(function(){
				$("p").slideToggle(500);
			});
        });
    </script>
</head>

<body>
    <a href="#">点击</a>
	<p>您好</p>
</body>

</html>

9.jquery基础动画.html

<html>

<head>
    <title>基础动画</title>
	<style>
	p{
	    width:100px;
		padding:10px;
		border:1px solid #abcdef;
	}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    /*$("a").click(function(){
			    //$("p").hide(600);
				$("p").hide("fast");//fast slow normal
			});*/
			/*$("p").hide();
			$("a").click(function(){
				$("p").show("fast");//fast slow normal
			});*/
			/*$("a").click(function(){
				$("p").toggle(100);//fast slow normal
			});*/
			$("a").click(function(){
			    if($("p").is(":visible"))
				{
				    $("p").hide(100);
				}
				else
				    $("p").show(100);
			});
        });
    </script>
</head>

<body>
    <a href="#">点击</a>
	<p>您好</p>
</body>

</html>

10.jquery渐变动画.html

<html>

<head>
    <title>渐变动画</title>
	<style>
	p{
	    width:100px;
		padding:10px;
		border:1px solid #abcdef;
		display:none;
	}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    /*$("a").click(function(){
			    //opacity从0变成1
			    $("p").fadeIn(1000);
			});*/
			/*$("p").show();
			$("a").click(function(){
			    //opacity从1变成0
			    $("p").fadeOut(1000);
			});*/
			/*$("a").click(function(){
			    $("p").fadeTo(1000,0.5,function(){
				    alert(1);
				});
			});*/
			$("a").click(function(){
			    $("p").fadeToggle(1000);
			});
        });
    </script>
</head>

<body>
    <a href="#">点击</a>
	<p>您好</p>
</body>

</html>

11.jquery浏览器事件.html

<html>

<head>
    <title>浏览器事件</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            /*$(window).resize(function(){
			    alert("浏览器窗口发生改变");
			});*/
            $(window).scroll(function(){
			    alert("浏览器滚动条发生改变");
			});
        });
    </script>
</head>

<body style="height:3000px">

</body>

</html>

12.jquery普通事件.html

<html>

<head>
    <title>普通事件</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            //鼠标事件
			//当鼠标左键按下然后再抬起鼠标左键才算完成一次click
			/*$("p").click(function(){
			    alert($(this).text());
			});*/
			
			//双击
			/*$("p").dblclick(function(){
			    alert($(this).text());
			});*/
			
			//获取焦点事件，可作用于父级
			/*$("div").focusin(function(){
			    $(this).children("span").show();
			});*/
			
			//鼠标按下事件
			/*$("p").mousedown(function(){
			    alert($(this).text());
			});*/
			//鼠标抬起事件
			/*$("p").mouseup(function(){
			    alert($(this).text());
			});*/
			
			//鼠标移动事件
			/*$(document).mousemove(function(e){
			    var x = e.pageX;
			    var y = e.pageY;
			    $("input").val(x+","+y);
			});*/
			
			/*//鼠标移入事件
			$("p").mouseover(function(){
			    $(this).css("background","red");
			});
			
			//鼠标移出事件
			$("p").mouseout(function(){
			    $(this).css("background","none");
			});*/
			
			/*$("p").mouseover(function(){
			    $(this).css("background","red");
			});
			
			$(document).mouseover(function(){
			    $("p").css("background","none");
			});*/
			
			/*
			//可阻止冒泡
			$("p").mouseenter(function(){
			    $(this).css("background","red");
			});
			
			$(document).mouseleave(function(){
			    $("p").css("background","none");
			});*/
			
			//键盘事件
			/*$("input").keydown(function(){
			    alert();
			});*/
			
			/*$("input").keyup(function(){
			    alert();
			});*/
			
			$("input").keypress(function(){
			    alert();
			});
        });
    </script>
</head>

<body>
    <p>我是p</p>
	<div>
	<input type = "text" value = "123456"/>
	<span style="display:none">111111</span>
	<p><em><input type = "text" value = "222222"/></em></p>
	</div>
</body>

</html>

13.jquery普通事件2.html

<html>

<head>
    <title>事件</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    //hover是模拟鼠标进入（mouseenter）和鼠标离开（mouseleave）
            $("p").hover(function(){
			    $(this).css("background","red");
			},function(){
			    $(this).css("background","none");
			});
			$("a").click(function(){
			    alert("我被点击了");
			});
			//模拟事件发生
			$("a").trigger("click");
        });
    </script>
</head>

<body>
    <p>我是p</p>
	<a href="#">点击</a>
</body>

</html>

14.jquery事件绑定与移除.html

<html>

<head>
    <title>事件绑定与移除</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            /*$("p").click(function(){
			    alert($(this).text());
			});*/
			//绑定事件
			/*$("p").bind("click",function(){
			    alert($(this).text());
			});
			$("p").mouseover(function(){
			    $(this).css("background","red");
			});*/
			//移除事件
			//$("p").unbind("click mouseover");
			/*$("body").delegate("p","click",function(){
			    $(this).append("<p>我是新p</p>");
			});*/
			/*$("p").bind("click",function(){
			    $("body").append("<p>我是新p</p>");
			});*/
			//事件命名空间
			$("p").bind("click.background",function(){
			    $(this).css("background","red");
			});
			$("p").bind("click.color",function(){
			    $(this).css("color","blue");
			});
			$("p").unbind("click.color");
        });
    </script>
</head>

<body>
    <p>我是p</p>
</body>

</html>

15.jquery事件对象.html

<html>

<head>
    <title>事件对象</title>
	<style>
	    *{
		    padding:0;
			padding:0;
		}
		ul{
		    list-style-type:none;
		}
		body{
		    margin:50px;
		}
		div{
		    width:200px;
			height:24px;
			line-height:24px;
			text-align:center;
			border:1px solid #ccc;
		}
		ul{
		    width:200px;
			border:1px solid #ccc;
			display:none;
		}
		ul li{
		    height:24px;
			line-height:24px;
		}
		ul li:hover{
		    background:#cfcfcf;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            $(document).click(function(e){
			    var x = e.pageX;
				var y = e.pageY;
				$("#input1").val(x+","+y);
			});
			$("#form1").submit(function(e){
			    alert("success");
				//阻止浏览器默认行为
			    e.preventDefault();
			});
			$("div").click(function(e){
			    $("ul").show();
				//阻止冒泡
				e.stopPropagation();
			});
			$(document).click(function(){
			    $("ul").hide();
			});
        });
    </script>
</head>

<body style="height:3000px;width:3000px">
    <input type="text" id="input1" style="position:fixed;top:200px;left:500px"/>
    <form action="http://www.baidu.com" id="form1">
    <input type="text" name="username" id="input2" value="11111" />
	<input type="submit" id="input3" value="提交" />
	</form>
	<div>请选择数字</div>
	<ul>
	    <li>1</li>
		<li>2</li>
	</ul>
	<a href="http://pan.baidu.com/share/link?shareid=543954&uk=4211285463">111</a>
</body>

</html>

16.jquery位置操作.html

<html>

<head>
    <title>位置操作</title>
    <style>
        * {
            margin: 0;
        }
        div {
            position: relative;
            left: 20px;
            top: 20px;
            width: 200px;
            height: 200px;
            background: red;
        }
        p {
            position: absolute;
            left: 100px;
            top: 50px;
            width: 50px;
            height: 50px;
            background: yellow;
        }
        button {
            position: fixed;
            top: 200px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            /*var a = $("p").offset();//获取位置
			alert(a.left);
			alert(a.top);*/

            /*var a = $("p").position();//相对于父元素的位置
			alert(a.left);*/
            $("button").click(function () {
                alert($(window).scrollTop());
            });
        });
    </script>
</head>

<body style="height:8000px">
    <div>divdivdiv
        <p>111</p>
    </div>
    <button>弹出滚动条离顶部的距离</button>
</body>

</html>

17.jquery样式操作.html

<html>

<head>
    <title>样式操作</title>
    <style>
        .bgred {
            background: red;
        }
        .white {
            color: #fff;
        }
        p {
            height: 30px;
            border: 10px solid red； padding: 10px;
            margin: 10px
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            //添加样式
            //$("p").addClass("bgred").addClass("white");
            /*$("p").addClass("bgred white");
            //删除样式
            $("p").removeClass("white");*/
            //切换样式
            /*$("p").click(function(){
                $(this).toggleClass("bgred");
            });*/
            //
            /*$("p").click(function(){
                if($(this).hasClass("bgred")){
                    $(this).removeClass("bgred");
                }else{
                    $(this).addClass("bgred");
            }
            });*/
            //设置样式
            //$("p").css("background","red").css("border","10px solid #abcdef");
            /*$("p").css({
                "background" : "red",
                "border" : "10px solid #abcdef"
            });*/
            //建议css属性名用引号引起来
            //alert($("p").height());//获取p标签真实高度
            //innerHeight()方法获得的高度不把border和margin计算进去，但是会把padding值计算进去
            //outerHeight()方法如果参数不写，为默认值false，不会把margin计算进去，如果参数为true,会把border，margin，padding计算进去
            /*alert($("p").outerHeight(true));
            alert($("p").innerHeight());*/
        });
    </script>
</head>

<body>
    <p>我是p</p>
</body>

</html>

19.jquery页面搜索实例.html

<html>

<head>
    <title>页面搜索实例</title>
	<style>
	    table{
		    width:700px;
			border:1px solid #abcdef;
			border-collapse:collapse;
		}
		tr{
		    height:30px;
		}
		td,th{
		    border:1px solid #abcdef;
			text-align:center;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    $("input[type='button']").click(function(){
			    var text = $("input[type='text']").val();
			    $("table tr:not('#thead')").hide().filter(":contains('"+text+"')").show();
			});
        });
    </script>
</head>

<body>
    <table>
	    <tr id="thead">
		   <th>姓名</th>
		   <th>性别</th>
		   <th>号码</th>
		</tr>
		<tr>
		   <td>张三</td>
		   <td>男</td>
		   <td>110</td>
		</tr>
		<tr>
		   <td>移动客服</td>
		   <td>女</td>
		   <td>10086</td>
		</tr>
	</table>
	<input type="text" name="" id="" />
	<input type="button" value="搜索" />
</body>

</html>

20.jquery中DOM操作.html

<html>

<head>
    <title>DOM操作</title>
    <style>
        .a {
            background: red
        }
        .b {
            background: #abcdef
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            //创建节点并插入
            var newElement = $("<strong>2</strong>");
            /*$("p").append(newElement);
	        var html = "<strong>3</strong>";
	        $("p").append(html);
	        $("p").prepend(newElement);
	        //外部插入
	        $("p").after(newElement);
	        $("p").before(newElement);*/
            //包裹标签
            //$("p").wrap("<div></div>");
            //删除节点
            //$("p").remove();
            //$("p").empty();
            //$("strong").unwrap();//删除父节点
            //复制节点
            /*$("a").click(function(){
	            alert(111);
	        });
	        var newA = $("a").clone(true);//true将点击事件也克隆
	        $("body").append(newA);*/
            //替换节点
            //$("em").replaceWith("<strong>我是strong</strong>");
            //操作节点属性值
            //$("span").attr("class","b");
            //$("span").removeAttr("class");
        });
    </script>
</head>

<body>
    <p>1</p>
    <div><strong>99999</strong>9999999</div>
    <a href="#">点击</a>
    <em>我是em</em>
    <span class="a">123</span>
</body>

</html>

22.jquery自定义动画.html

<html>

<head>
    <title>自定义动画</title>
	<style>
	    div{
		    width:100px;
			height:100px;
			background:#abcdef;
			position:absolute;
			left:0;
			top:30px;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
		    $("input").click(function(){
			    $("div").animate({
				//动画累加
				    "left":"+=800px",
					"top":"500px",
					"opacity":"0.2"
				},3000,function(){
				    $("div").css("background","#f90");
				});
			});
        });
    </script>
</head>

<body>
    <input type="button" value="点击">
	<div></div>
</body>

</html>

23.jquery动画算法插件easing

附：WEB前端开发api


xiangzi7758258
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过点击LI，显示对应的DIV并隐藏其他DIV
weixin_33712987的博客
04-13 2157
<body> <ul class="point"> <li><a href="#">menu0</a></li> <li><a href="#">menu1</a></li> &l...
【使用jquery编写第一个油猴（tempermonkey）脚本】
crazy_rays的专栏
09-28 4602
简单说明如何进行Tampermonkey（油猴）脚本编写，调试，发布。
jQuery的eq()和index()方法详解
xiamoziqian的博客
02-02 6500
关于eq()和index()方法，我们知道它们都可以获取元素的位置，但是具体是如何获取和排队的呢？两者又有什么区别呢？我们通过一个小例子来试验一下。 html部分 &amp;lt;div class=&quot;box&quot;&amp;gt; &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
50个实用的jquery案例
二手农民的学习博客
02-25 4653
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
几个简单常用的jQuery实例
weixin_30616969的博客
06-30 575
　　000模态框+事件委托+data实现编辑 　　000-1、效果如下 　　000-2、代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
jquery小案例
藜笙的博客
05-12 266
1. 点击方块改变body背景颜色 例 ： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin: 0; padding: 0; } body{ width:100%; height:100%; background-color: #0181cc;
Jquery基础
qq_52338885的博客
01-04 363
1、XML数据格式： 面试题：HTML、XHTML、DHTML、XML分别是什么？ HTML - 网页（预定义标签） XHTML - 更严格的网页 DHTML - 动态效果的网页：并不是新技术，只是统称：HTML+CSS+JS(dom) XML - 配置文件|数据格式 - 现在几乎没人使用，因为最流行的是JSON - 未知的标签语言（没有任何一个预定义的标签，所有标签都需要你自定义） 如何使用： 1、创建后缀名.xml的文件 2、声明头部：&lt...
jQuery 动画基础教程
10-30
在这个例子中，通过`<script>`标签引用了外部的`jquery-1.2.6.js`文件，确保浏览器能够找到并加载该文件。正确引入jQuery库是执行任何jQuery代码的前提。 接着，我们关注几个主要的动画方法： 1. `show()`, `hide...
SpringMVC基础例子
03-15
在这个基础例子中，我们将探讨如何使用SpringMVC与其他技术如Maven、jQuery和MyBatis协同工作，实现SQL的增删改查功能。 **Maven** Maven是Java项目管理工具，它帮助开发者管理项目的依赖关系，构建流程以及提供了...
jQuery简单例子
12-29
本教程将通过一个简单的jQuery例子来帮助初学者理解其基本用法，特别是如何实现图片的隐藏。 首先，我们需要在HTML文档中引入jQuery库。这通常通过在`<head>`标签内添加一个`<script>`标签完成，从CDN（内容分发...
jquery的基础用法例子
11-28
以上就是jQuery基础用法的一些关键点，通过学习和实践这些例子，你可以快速上手并高效地利用jQuery进行网页开发。记得在实际项目中灵活运用，并结合个人经验和最佳实践，以提升开发效率和用户体验。
jquery基础教程之deferred对象使用方法
10-26
在jQuery中，`deferred`对象是一个非常重要的概念，它主要用来处理异步操作和回调函数，提供了一种更优雅的...结合Promise/A+规范，`deferred`对象使得异步控制流变得更加清晰，为现代JavaScript开发提供了坚实的基础。
jQuery经典小案例
热门推荐
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
ajax实现简单的点击左侧菜单，右侧加载不同网页
weixin_30950607的博客
05-11 2247
实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）图片.png原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时...
jquery实例
weixin_46673625的博客
06-28 619
jquery自定义登录认证 jquery实现表格的全选反选和取消实例 jquery实现表格的增删改
Tampermonkey油猴脚本 jquery 常用组件
有勇气的牛排博客
07-01 6507
// @require http://code.jquery.com/jquery-1.11.0.min.js 添加标签 $("body").append("<button id='topic_info'>查看</button>"); 给标签添加样式 $("#topic_info").css({ "width":"55px", "color":"red", }); 获取标签内 文本 $("#divSubjectName").text() ......
jQuery案例
Su3253067688的博客
10-24 1108
3.页面元素的综合操作。2.图书分类下拉列表。
jQuery设计思想
weixin_34309543的博客
09-23 341
译文出自：阮一峰的网络日志 jQuery设计思想 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $...
基于豪猪优化算法CPO-VMD实现信号去噪目标函数为包络信息熵 包络熵 排列熵 样本熵最小附matlab代码.rar
最新发布
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
jQuery基础入门：简化JavaScript编程与自定义框架
jQuery基础讲义PDF文档深入介绍了jQuery库在JavaScript编程中的重要性和应用。jQuery是一个JavaScript库，其核心理念是通过提供一套简洁且功能强大的API，极大地简化了开发者的工作，降低了JavaScript的复杂度。它...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值