Web前端开发JQuery框架
JQuery 常用选择器
JQuery 选择器是JQuery框架的基础,JQuery对事件处理,DOM操作,CSS动画等都是在选择器基础上进行的,JQuery选择器采用CSS和Xpath选择符的能力,能够满足用户在DOM中快速获取元素或元素组,在JQuery中通过各种选择器和方法获取的结果集合实际上都是一个JQuery对象,通过JQuery对象会非常简单,即可实现对元素的各种操作,这里我们介绍几个最常用的选择器例子.
ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.
<body>
<div id="1000"> hello lyshark </div>
<div id="2000"> hello lyshark </div>
<div id="3000"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#2000").css("background","red"); //通过ID号选择指定元素
var temp = $("#1000").text(); //获取到文本的内容
document.write("文本内容: " + temp); //打印出这个文本的内容
</script>
</body>
标签选择器: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色.
<body>
<div id="1000"> hello lyshark </div>
<p id="2000"> hello p</p>
<div id="3000"> hello lyshark </div>
<p id="4000"> hello p</p>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("p").css("background","red"); //通过p标签定位修改所有P标签
</script>
</body>
类选择器: 通过使用$("ClassName")标识前缀,匹配页面中所有class="MyClass"的类属性.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<div class="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass").css("background","green"); //通过.MyClass找到一类属性并修改
</script>
</body>
通配符选择器: 通过使用$("body*")标识前缀,匹配页面中所有开头是div的标签,并设置成绿色.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<h1 class="lyshark"> hello lyshark </h1>
<div class="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("div*").css("background","green"); //修改所有div标签的属性
</script>
</body>
组合选择器: 使用组合选择器可以扩大选择器的选择范围,可以通过逗号分隔符分割多个不同的选择器.
<body>
<h1 class="MyClass"> hello lyshark </h1>
<div class="MyClass">
<div id="MyID1">hello MyID1 </div>
<div id="MyID2">hello MyID2 </div>
</div>
<div id="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass #MyID1 , h1 , #lyshark").css("background","green");
</script>
</body>
属性选择器: 根据元素的属性及其值作为过滤条件,来匹配DOM元素,它以中括号作为分界符.
<body>
<input type="text" name="Text" value="标签1">
<input type="password" name="Text">
<p id="id1"> hello P </p>
<p id="id2" alex="sb"> hello P </p>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input[type='text']").css("color","red"); //修改input,且类型是text的标签
$("p[id='id1']").text("修改id1的标题"); //修改标题,是p标签且id=id1的
$("input[name='Text']").val("修改成我"); //将标签中的value属性修改掉
$("p[alex='sb']").css("background","red"); //也可以自定义查找标签
</script>
</body>
后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass div").css("background","green"); //修改指定.MyClass下的所有DIV标签
</script>
</body>
子代选择器: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="divA">hello div A</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass > .div2").css("background","green"); //修改.MyClass类里面的,div2的所有子元素
</script>
</body>
相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色.
<body>
<div class="outer">
<p class="outer"> hello p1</p>
<p class="outer"> hello p2</p>
<p class="outer"> hello p3</p>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer + p").css("color","red"); //匹配所有.outer类中,第一个p标签相邻的元素.
</script>
</body>
兄弟选择器: 兄弟选择器就是在所有匹配的元素后选择同级的所有元素,如下匹配.outer类后面的所有同级DIV标签.
<body>
<div class="outer"> hello div1</div>
<div class="outer"> hello div2</div>
<div class="outer"> hello div3</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer~div").css("color","red"); //将属于outer类中的所有同级DIV设置成红色.
</script>
</body>
## JQuery 元素的操作
文档对象模型 (Document Object Model,DOM) 是一种W3C标准所有的现代浏览器都支持DOM,DOM用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来,DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,下面我们将使用JQuery函数库,对网页属性进行各种操作,以下是一些常用的操作方式,其他操作方式请自行百度.
◆文档处理◆
Text(): 该函数常用于设置或者是读取标签里面的内容.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").text(); //查找指定的标签元素内容
document.write("获取到标签的内容: " + temp);
$(".MyAge").text("hello world"); //修改指定的标签元素内容
</script>
</body>
html(): 该函数常用于设置或者是读取标签内容,但是可以在设置标签内容的同时添加格式属性.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").html(); //查找指定的标签元素内容
document.write("获取到标签的内容: " + temp);
$(".MyAge").html("<b> hell html </b>"); //修改指定的标签元素内容
</script>
</body>
val(): 用于获取或者是设置指定标签的value值.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="标签1">
<input type="text" name="MyText2" value="标签2">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText1']").val(); //定位并获取文本的value选项
document.write("获取到文本name属性的值: " + data);
$("input[name='MyText2']").val("lyshark"); //修改文本的value属性为lyshark
</script>
</body>
append(): 给指定的标签添加内容,分别可以在开头插入$().prepend,结尾插入$().append等.
<body>
<div class="MyDiv"> hello lyshark ---></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").append("结尾加入"); //在标签结尾插入新数据
$(".MyDiv").prepend("开头加入"); //在标签开头插入新输入
$(".MyDiv").prepend("<b> hello </b>"); //开头插入带格式的文本
</script>
</body>
appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素.
<body>
<div class="MyDiv">
<h1 id="Myh1"> hello h1</h1>
</div>
<p> hello p1</p>
<p> hello p2</p>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("p").appendTo("div"); //将p标签加入到div标签里面
$("p").appendTo("div");
$("div").prependTo("h1")
</script>
</body>
empty()/remove()： 使用empty()可以清空标签中的内容,remove()用于彻底移除标签.
<body>
<p class="p1"> hello p1</p>
<p class="p2"> hello p2</p>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".p1").empty();
$(".p2").empty(); //清空标签内的内容.
$(".p2").remove(); //彻底移除标签.
</script>
</body>
before()/after(): 可以实现在指定标签的上方(.before)插入内容,或者下(.after)方插入内容.
<body>
<div class="MyDiv">
<div class="div1"> hello div </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv div").before("<h1> before </h1>") //在div上方插入内容
$(".MyDiv div").after("<h1> after </h1>") //在div下方插入内容
</script>
</body>
insertBefore()/insertAfter(): 在每个DIV标签前面(insertBefore)插入新标签,或者在后面(insertAfter)插入.
<body>
<div class="MyDiv"> hello div</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("<span> hello span </span>").insertBefore("div"); //在div前面插入span标签
$("<h1> hello h1</h1>").insertAfter("div"); //在每个div标签后面插入h1
</script>
</body>
replaceWith(): 查找与替换,将所有的类属性是class=".MyDiv"的标签替换成粗体的hello div.
<body>
<div class="MyDiv"> hello div1 </div>
<div class="MyDiv"> hello div2 </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").replaceWith("<b> hello div </b>"); //将所有div标签替换成粗体的hello div
</script>
</body>
clone: 克隆并追加一个DIV标签,追加到body页面中.
<body>
<div class="MyDiv"> hello div1 </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("body").append($("div").clone()); //克隆并追加到body中.
$("body").append($("div").clone());
</script>
</body>
◆属性操作◆
attr(): 可实现获取和设置,指定标签的属性信息.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="标签1">
<input type="text" name="MyText2" value="标签2">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var names = $("input[name='MyText2']").attr("name"); //获取MyText2标签的name字段内容
var types = $("input[type='text']").attr("type"); //获取Type标签的type字段内容
document.write("标签name字段内容: " + names + "<br>");
document.write("标签type字段内容: " + types + "<br>");
$("input[name='MyText2']").attr("name","lyshark"); //将MyText2标签的name字段修改成lyshark
</script>
</body>
removeAttr(): 找到指定的字段并可以自定义移除相关字段.
<body>
<input type="text" name="MyText" value="标签1">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText']").attr("value"); //找到value字段的内容
document.write("当前value值: " + data);
$("input[name='MyText']").removeAttr("value"); //移除value字段的内容
</script>
</body>
prop(): 设置标签的属性,常用于设置单选框和复选框.
<body>
<input type="checkbox" name="check">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='check']").prop("checked"); //获取checkbox默认状态
document.write("选择框默认状态:" + data)
$("input[name='check']").prop("checked",true); //设置checkbox为选中状态
$("input[name='check']").prop("disabled",true); //设置checkbox为禁用状态
</script>
</body>
removeprop： 删除由prop设置的属性集,(不明白)
<body>
<input type="checkbox" name="check">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("input[name='check']").prop("disabled",true);
$("input[name='check']").removeProp("");
</script>
</body>
addClass(): 动态的将一个CSS属性添加到一些标签中.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<script type="text/javascript">
$(".MyClass").addClass("mode"); //对所有的MyClass标签,添加mode的属性.
</script>
</body>
removeClass: 动态的将一个CSS属性在标签中删除.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").removeClass("mode"); //删除所有div标签中的mode类属性.
</script>
</body>
toggleClass: 实现了动态的切换类的样式.使标签不可见.
<style type="text/css">
.show{
background-color: #17a2b8;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").toggleClass("hidden"); //切换成隐藏属性
</script>
</body>
hasClass(): 该函数用来判断当前的样式,存在返回真,不存在返回假.
<style type="text/css">
.mode{
background: red;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("div").hasClass("mode");
document.write(data)
</script>
</body>
◆样式操作◆
修改CSS属性:
<body>
<div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div>
<div class="MyClass2" style="font-size: 30px"> hello lyshark</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css("background-color","red"); //修改MyClass1的背景属性
$(".MyClass2").css("font-size","10px"); //修改MyClass2的字体大小
</script>
</body>
追加CSS属性:
<body>
<div class="MyClass1"> hello lyshark</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css({"background-color":"red","font-size":"20px"});
</script>
</body>
## JQuery 常用筛选器
jQuery 提供了两种选择文档元素的方式：选择器和筛选器,选择器主要模仿CSS和xPath语法,提供高效、准确匹配元素的一般方法和用法,而筛选器是建立在选择器基础上进行的二次筛选,选择器是符合一定规律的字符串组合,而筛选器就是一系列简单、实用的JQuery方法,在 JQuery 框架中,筛选器通过Sizzle.filter子类来实现,它包含过滤、杳找和串联,这里我们只举几个常用例子.
◆过滤筛选器◆
first()/last(): first()筛选出所有li标签中第一个标签,last()筛选出所有标签中的最后一个标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:first").text(); //找出第一个标签的标签内容
document.write("第一个标签内容是:" + data + "<br>");
var data = $("li:last").text(); //找出最后一个标签的标签内容
document.write("最后一个标签内容是:" + data + "<br>");
$("li:last").remove(); //实现移除最后一个标签
$("li:last").append("<li>添加</li>"); //实现添加一个新标签
</script>
</body>
even()/odd(): even()筛选出所有li标签中偶数标签,odd()筛选出所有li标签中基数标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul li:even").text();
document.write("基数标签为: " + data + "<br>");
var count = $(".MyClass ul li:even");
document.write("基数标签个数: " + count.length + "<br>");
var data = $(".MyClass ul li:odd").text();
document.write("偶数标签为: " + data + "<br>");
var count = $(".MyClass ul li:odd");
document.write("偶数标签个数: " + count.length);
</script>
</body>
eq(): 过滤出所有li标签中,索引是2的那个标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:eq(2)").text(); //所有li标签中,索引是2的标签
document.write("索引是2的标签内容是: " + data + "<br>");
var data = $("li:eq(0)").text(); //所有li标签中,索引是0的标签
document.write("索引是0的标签内容是: " + data + "<br>");
var data = $(".MyClass ul li").eq(4); //另一种写法,结果相同.
document.write("索引是4的标签内容是: " + data.text() + "<br>");
</script>
</body>
gt(): 所有li标签中，索引大于2的标签
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:gt(2)").text(); //所有li标签中,索引大于2的标签
document.write("索引大于2的标签内容是: " + data + "<br>");
</script>
</body>
lt(): 所有li标签中，索引小于3的标签
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:lt(3)").text(); //所有li标签中,索引小于3的标签
document.write("索引小于3的标签内容是: " + data + "<br>");
</script>
</body>
hasclass(): 检测li中的是否含有某个特定的类，有的话返回true
<body>
<div class="MyClass">
<ul class="lyshark">
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul").hasClass("lyshark");
document.write(data);
</script>
</body>
◆查找筛选器◆
children(): 获取指定标签的所有子标签,以下在类名为"MyForm"盒子里,找所有div子标签,并将其设置为绿色.
<body>
<form class="MyForm">
<div class="Mydiv"> hello lyshark </div>
<div class="Mydiv"> hello lyshark </div>
<p> hello lyshark </p>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyForm").children(".Mydiv").css("color","green");
</script>
</body>
parent(): 获取指定标签的所有父标签,以下代码找所有P标签的父标签,并设置成红色.
<body>
<div class="Mydiv"> hello lyshark
<p> hello p </p>
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("p").parent().css("color","red");
</script>
</body>
next(): 寻找指定标签的下一个标签,以下代码根据第1个Mydiv1为条件寻找下一个div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").next().css("background","red");
$(".Mydiv1").next().css("background","red");
</script>
</body>
prev(): 寻找指定标签的上一个标签,以下代码根据第2个Mydiv2为条件寻找上一个div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv2").prev().css("background","red");
</script>
</body>
siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.
<body>
<div class="Mydiv1">
<div class="Min">hello div</div>
</div>
<div class="Mydiv2">
<div class="Min">hello div</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv1").siblings().css("background","red");
</script>
</body>
find(): 在form标签中找到text,password标签,并将其设置为绿色.
<body>
<form class="forms" method="post">
<input type="text" value="用户名">
<input type="password" value="密码">
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("form").find(":text,:password").css({"color":"red","background":"green"})
</script>
</body>
Jquery的组合使用： jquery 之间的命令是可以组合来使用的，常见的组合如下所示。
$('#profile_block').find('a').eq(0).text("name");
$('#profile_block').find('a').eq(1).text("name");
$('#profile_block').find('a').eq(1).attr("title","更改指定列");
$("#profile_block").find("a").eq(1).after("<br>测试： <a href=\"https://www.xxx.com/\">显示内容</a>");
## JQuery 事件的处理
事件是用户在操作浏览器的过程中,由用户触发或由浏览器自身触发的动作,浏览器捕获这些动作,并根据用户编程时设置的对应这些动作的事件处理程序,触发相应的处理过程,从而实现交互过程,浏览器在程序运行的大部分时间都等待交互事件的发生,并在发生时,自动的调用事件处理函数完成整个处理过程,为了更好的兼容不同类型的浏览器,JQuery在JavaScript的基础上,进一步封装了不同类型的时间模型,从而形成一种功能强大,用法更加优雅的JQuery事件模型,下面个将具体介绍几种常用的用法.
注册单次事件: one()方法是bind()方法的特例,由它绑定的事件在执行一次相应后就会失效.
<body>
<p id="MyP"> </p>
<input type="button" id="MyID" value="添加内容" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID").one("click",function(){
$("p").append("hello lyshark"); //给P标签添加内容
});
</script>
</body>
注册循环事件: bind()作为统一的接口,用来为每个匹配元素绑定事件处理程序.
<body>
<input type="button" id="MyID1" value="无参数绑定" />
<input type="button" id="MyID2" value="带参数绑定" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID1").bind("click",function(){
alert("绑定无参数的事件...")
});
$("#MyID2").bind("click",{x:"参数1",y:"参数2"},function(event){
$(this).text(event.data.x + event.data.y);
});
</script>
</body>
绑定多个事件:
<body>
<input type="button" id="MyID1" value="按钮1" />
<input type="button" id="MyID2" value="按钮2" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID1,#MyID2").click(function(){
var currentId = $(this).attr("id"); //获取它的ID名称
if(currentId == "MyID1"){ //说明点击了按钮1
alert("您点击了按钮1");
}else if(currentId == "MyID2"){ //说明点击了按钮2
alert("您点击了按钮2");
}
});
</script>
</body>
表单数据提交:
<body>
<div class="MyDIV">
姓名: <input type="text" id="input1" />
性别: <input type="text" id="input2" />
年龄: <input type="text" id="input3" />
<input type="button" id="button1">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#button1").click(function(){
var name = $(".MyDIV #input1").val(); //获取到元素值
var sex = $(".MyDIV #input2").val();
var age = $(".MyDIV #input3").val();
alert("姓名: " + name + "性别: " + sex + "年龄: " + age);
});
</script>
</body>
回调函数:
<head>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,call_back());
})
});
function call_back() {
alert("回掉函数使用...")
}
</script>
</head>
<body>
<button>隐藏</button>
<p>hello lyshark</p>
</body>
标签克隆:
<body>
<div>
<p>
<a onclick="Add(this)">+</a>
<input type="text"/>
</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find('a').text('-');
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
全选与反选:
<body>
<div class="MyDiv">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CancleAll()" />
<input type="button" value="反选" onclick="ReverseAll()" />
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function CheckAll() {
$('.MyDiv input[type="checkbox"]').prop('checked',true);
}
function CancleAll() {
$('.MyDiv input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('.MyDiv input[type="checkbox"]').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script>
</body>
表格行号的提取: 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#table tbody>tr").click(function() {
var trSeq = $(this).parent().find("tr").index($(this)[0]); // 获取到行号
var text = $(this).find("td:eq(0)").text(); // 可以取出当前td标签里面的内容
var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val();
console.log(text)
alert("当前行号为: " + (trSeq + 1) + ", " + "且其name为number的值为: " + input_val);
});
});
</script>
<div>
<table id="table" border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>网格</td>
<td>男</td>
<td>杭州</td>
</tr>
<tr>
<td><input type="text" name="number" value="333456"></td>
<td>王2</td>
<td>男</td>
<td>杭州</td>
</tr>
</tbody>
</table>
</div>
表格行号的提取: 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tab").on("click", ":button", function(event){
var id = $(this).closest("tr").find("td").eq(0).text();
var name = $(this).closest("tr").find("td").eq(1).text();
alert("ID:" + id + "Name:" + name);
});
});
</script>
<table border="1" id="tab">
<thead>
<tr><td>编号</td><td>姓名</td><td>操作</td></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>lyshark</td>
<td><input type="button" value="删除" /></td>
</tr>
<tr>
<td>2</td>
<td>admin</td>
<td><input type="button" value="删除" /></td>
</tr>
</tbody>
</table>
</body>
</html>
一个简单的页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--页面头部布局-->
<div style="height: 38px;background-color: black;color: white">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="https://v4.bootcss.com//docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top"> Bootstrap
</a>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">欢迎admin登陆系统 | <a href="/logout.html">注销</a></div>
</div>
</nav>
</div>
<!--左侧菜单栏布局-->
<div>
<div class="menu" style="position: absolute;top: 58px;left: 0;bottom:0;width: 200px;background-color: #eeeeee">
<ul class="nav nav-stacked">
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
<ul id="list" class="collapse in">
<li class="active"><a href="">操作一</a></li>
<li><a href="">操作二</a></li>
</ul>
</li>
</ul>
</div>
<!--主体内容-->
<div style="position: absolute;top: 68px;left: 200px;bottom:0;right: 0;overflow: auto">
<b>主体内容写在这里额</b>
</div>
</body>
</html>
Web前端开发JQuery框架的更多相关文章
- 1+x证书web前端开发jquery专项练习测试题
javascript程序设计-题库 1.下面哪一种不属于Jquery的选择器? A. 基本选择器 B. 层次选择器 C. 表单选择器 D. 节点选择器 答案: D 2.如果需要匹配包含文本的元素,用下 ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】
<Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- 新技术新框架不断涌现，目前学习web前端开发都要掌握什么？
web前端开发由网页制作演变而来,随着web2.0的发展,网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现 ...
随机推荐
- 【洛谷1345】 [USACO5.4]奶牛的电信（最小割）
传送门 洛谷 Solution emmm,直接对于每一个点拆点就好了. 然后边连Inf,点连1,跑最小割就是答案. 代码实现 #include<bits/stdc++.h> using n ...
- nvm临时版本和永久版本
nvm use 8.15.1//临时版本 nvm alias default 8.15.1//永久版本
- pdnovel 看书 读书 听书
pdnovel剖度小说是discuz的阅读插件,这里分享一下阅读的一些技巧. 看书 点击或手机输入 http://txt.xlongwei.com 即可进入阅读首页,内容分书book.卷volume. ...
- KERNEL_SECURITY_CHECK_FAILURE
出现错误提示重装系统可以解决问题,但不需要重装系统.win8错误提示:KERNEL_SECURITY_CHECK_FAILURE提示对应错误代码:0x00000139 (0x00000003, 0x8 ...
- ElasticSearch1:基本概念
ElasticSearch的基本概念 es基本概念: Elasticsearch是面向文档型数据库,一条数据在这里就是一个文档,用JSON作为文档序列化的格式 NRT:Nearly Real Time ...
- Laravel 代码开发最佳实践
我们这里要讨论的并不是 Laravel 版的 SOLID 原则(想要了解更多 SOLID 原则细节查看这篇文章)亦或是设计模式,而是 Laravel 实际开发中容易被忽略的最佳实践. 内容概览 单一职 ...
- 【Taro全实践】6位验证码输入视觉分离（标准下划线分离）
一.实现的效果图 二.实现思路 中间想过很多实现方法,但是因为input为原生组件的原因,很难适配所有手机直接. 所有如何实现适配所有手机的验证码分离输入呢?(思路如下) 1.input组件为原生组件 ...
- python之scrapy爬取jingdong招聘信息到mysql数据库
1.创建工程 scrapy startproject jd 2.创建项目 scrapy genspider jingdong 3.安装pymysql pip install pymysql 4.set ...
- go 语言 interface{} 的易错点
一,interface 介绍 如果说 goroutine 和 channel 是 go 语言并发的两大基石,那 interface 就是 go 语言类型抽象的关键.在实际项目中,几乎所有的数据结构最底 ...
- 《A Survey on Transfer Learning》迁移学习研究综述 翻译
迁移学习研究综述 Sinno Jialin Pan and Qiang Yang,Fellow, IEEE 摘要: 在许多机器学习和数据挖掘算法中,一个重要的假设就是目前的训练数据和将来的训练数据 ...