JavaWeb__JQuery

已于 2022-09-01 19:47:01 修改
阅读量236 收藏
点赞数
文章标签： jquery 前端 javascript
于 2022-09-01 19:43:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanananhh/article/details/126629779
版权

1.导入jquery-1.7.2.js文件，新建Html

 2.入门案例，简单绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击绑定</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
   <script>
        $(function (){      //页面加载完成，里面有方法自动执行，相当于js中onload事件
            $("#btn01").click(function (){   //根据id查询绑定
                alert("简单单机事件完成");
            });
        });
    </script>
</head>
<body>
    <button id="btn01">点击</button>
</body>
</html>

3.jQuery的对象形式是：Object object，JS的对象形式是：Object HTMLDWElement

4.dom对象和jq对象相互转化

1.dom转jq对象：

        a.先有dom对象        b.$(dom)就可以转换成功

2.jq对象转dom：

        a.先有jq对象        b.jq对象[下标]取出dom对象

5.选择器

1.基本选择器（标签内属性）

$("#id属性值")        #ID 选择器：根据 id 查找标签对象

$(".class属性值")      .class 选择器：根据 class 查找标签对象

$("标签名")        element 选择器：根据标签名查找标签对象

$("*")        * 选择器：表示任意的，所有的元素

$("div,span,p,.myclass")        selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

<script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //1.选择 id 为 one 的元素 "background-color","#bbffaa"
            $("#btn1").click(function (){
                $("#one").css("background-color","#bbffaa");
            });

            //2.选择 class 为 mini 的所有元素
            $("#btn2").click(function (){
                $(".mini").css("background-color","#bbffaa");
            });

            //3.选择 元素名是 div 的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");
            });

            //4.选择 所有的元素
            $("#btn4").click(function (){
                $("*").css("background-color","#bbffaa");
            });

            //5.选择 所有的 span 元素和id为two的元素
            $("#btn5").click(function (){
                $("span,#two").css("background-color","#bbffaa");
            });
        });
    </script>

2.层级选择器

$("form input")        form下的所有的input，只要是div元素全选（祖孙关系）

$("form>input")        form下的所有input子元素，只是针对于div下同级的（父子光系）

$("label+input")        label后面紧跟的并列的下一个input元素（唯一）（兄弟关系无父子）

$("form~input")        form同辈的所有input（值可能为多个）（兄弟关系）

<script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //1.选择 body 内的所有 div 元素
            $("#btn1").click(function (){
                $("body div").css("background-color","#bbffaa");
            });

            //2.在 body 内, 选择div子元素
            $("#btn2").click(function (){
                $("body>div").css("background-color","#bbffaa");
            });

            //3.选择 id 为 one 的下一个 div 元素
            $("#btn3").click(function (){
                $("#one+div").css("background-color","#bbffaa");
            });

            //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
            $("#btn4").click(function (){
                $("#two~div").css("background-color","#bbffaa");
            });
        });
    </script>

3.条件过滤选择器（开始结尾，奇数偶数，大于小于等于，标题动画）

$("li:first")        li标签的第一个（第一个li标签）

$("li:last")        li标签的最后一个（最后一个li）

$("input:not(:checked)")        input标签中不包含选中的

$("tr:even")        匹配所有的tr标签索引值为奇数的（从0开始）

$("tr:odd")        匹配所有的tr标签索引值为偶数的

$("tr:eq(1)")        匹配所有tr标签索引值为1的

$("tr:gt(1)")        匹配所有tr标签索引值大于1的

$("tr:lt(1)")        匹配所有tr标签索引值小于1的

$(":header")        匹配标题元素

$(":animated")        匹配动画

<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>

4.内容过滤器

$("div:contains(John)")        div标签下文本是否包含John

$("div:empty")        div标签下不包含文本

$("td:parent")        td标签下有文本

$(div:has(p))        div标签下有p标签

<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
	
				anmateIt();				
			});
			
			/** 
			:contains(text)   
			:empty 			  
			:has(selector) 	
			:parent 			
			*/
			$(document).ready(function(){
				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function(){
					$("div:contains(di)").css("background", "#bbffaa");
				});

				//2.选择不包含子元素(或者文本元素) 的 div 空元素
				$("#btn2").click(function(){
					$("div:empty").css("background", "#bbffaa");
				});

				//3.选择含有 class 为 mini 元素的 div 元素
				$("#btn3").click(function(){
					$("div:has(.mini)").css("background", "#bbffaa");
				});

				//4.选择含有子元素(或者文本元素)的div元素
				$("#btn4").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
			});
		</script>

5.属性过滤选择器

$("div[id]")        查找所有含有id属性的div

$("input[name='new']")        查找input下的name属性为new

$("input[name!='new']")        查找input下name属性不为new

$("inpu[name^='new']")        查找input下name属性以new开头

$("input[name$='new' ]")        查找input下name属性以new结尾

$("input[name*='man']")        查找input下包含man的

$("input[id][name$='man']")        都为true时才为true

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	/**
[attribute] 			
[attribute=value] 		
[attribute!=value] 		 
[attribute^=value] 		
[attribute$=value] 		
[attribute*=value] 		
[attrSel1][attrSel2][attrSelN]  
	
	
	*/
	$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
	});
</script>

6.表单选择器

$(":text")        

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":reset")

$(":button")

$("file")

$("tr:hidden")

<input type="radio" disabled=disabled >        //不可选中的

$("input:checked")        input中选中的

$("select option:selected")        option中选中的

对表单input赋值操作

$(":text:enabled").val(空参)：空参时为获取值

$(":text:enabled").val(有参)：有参时为赋值

获取多选框中每个选中的value值

// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象(只要function函数执行里面就有this对象)

var $checkies=$(":checkbox:checked");

$checkies.each(function(){

alert(this.value);

});

<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				
		/**
		:input 		
		:text 		
		:password 	
		:radio 		
		:checkbox 	
		:submit 	
		:image 		
		:reset 		
		:button 	
		:file 		
		:hidden 	
		
		表单对象的属性
		:enabled 		
		:disabled 		
		:checked 		
		:selected 		
		*/

					
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					// val()可以操作表单项的value属性值
					// 它可以设置和获取
					$(":text:enabled").val("万能的");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert( $(":checkbox:checked").length );
				});
				//4.获取多选框，每个选中的value值
				$("#btn4").click(function(){
					// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
					var $checkbox = $(":checkbox:checked");
					$checkbox.each(function (){
						alert(this.value);
					});
				});
				//5.获取下拉框选中的内容  
				$("#btn5").click(function(){
					// 获取选中的option标签对象
					var $select = $("select option:selected");
					// 遍历，获取option标签中的文本内容
					$select.each(function (){
						alert(this.value);
					});
				});
			})	
		</script>

7.jQuery元素筛选

条件过滤

$("p").eq(1)

$("li").first()

$("list").last()

$("p").filter(":even")        过滤 传入的是选择器字符串,等于$("div:even")

$("#one").is(":empty")

$("div").has(".mini")

$("div").not(".one")

层级关系

$("div").children()         相当>号

$("p").find()        相当于空格

$("p").next()        下一个兄弟

$("p").nextAll()

$("p").nextuntil("span")

$("p").parent()        父元素

$("p").prev()        上一个兄弟

$("p").prevAll()

$("p").prevuntil("span")

$("#two").siblings()        所有兄弟

$("div").add("span")        连接关系

eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中
<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
	/**
					
	过滤
	eq(index|-index) 			
	first() 					
	last() 						
	hasClass(class) 			
	filter(expr|obj|ele|fn) 	
	is(expr|obj|ele|fn)1.6* 	
	has(expr|ele) 				
	not(expr|ele|fn) 			
	slice(start,[end]) 			
	
	查找
	children([expr]) 			
	closest(expr,[con]|obj|ele)1.6*   
	find(expr|obj|ele) 				
	next([expr]) 					
	nextall([expr]) 				
	nextUntil([exp|ele][,fil])1.6* 	
	parent([expr]) 					
	parents([expr]) 				
	parentsUntil([exp|ele][,fil])1.6*  
	prev([expr]) 					
	prevall([expr]) 				
	prevUntil([exp|ele][,fil])1.6* 	
	siblings([expr]) 				
	
	串联
	add(expr|ele|html|obj[,con]) 	
							
	
	*/
				
				//(1)eq()  选择索引值为等于 3 的 div 元素
				$("#btn1").click(function(){
					$("div").eq(3).css("background-color","#bfa");
				});
				//(2)first()选择第一个 div 元素
				 $("#btn2").click(function(){
					 //first()   选取第一个元素
					$("div").first().css("background-color","#bfa");
				});
				//(3)last()选择最后一个 div 元素
				$("#btn3").click(function(){
					//last()  选取最后一个元素
					$("div").last().css("background-color","#bfa");
				});
				//(4)filter()在div中选择索引为偶数的
				$("#btn4").click(function(){
					//filter()  过滤   传入的是选择器字符串
					$("div").filter(":even").css("background-color","#bfa");
				});
				 //(5)is()判断#one是否为:empty或:parent
				//is用来检测jq对象是否符合指定的选择器
				$("#btn5").click(function(){
					alert( $("#one").is(":empty") );
				});
				
				//(6)has()选择div中包含.mini的
				$("#btn6").click(function(){
					//has(selector)  选择器字符串    是否包含selector
					$("div").has(".mini").css("background-color","#bfa");
				});
				//(7)not()选择div中class不为one的
				$("#btn7").click(function(){
					//not(selector)  选择不是selector的元素
					$("div").not(".one").css("background-color","#bfa");
				});
				//(8)children()在body中选择所有class为one的div子元素
				$("#btn8").click(function(){
					//children()  选出所有的子元素
					$("body").children("div.one").css("background-color","#bfa");
				});
				

				//(9)find()在body中选择所有class为mini的div元素
				$("#btn9").click(function(){
					//find()  选出所有的后代元素
					$("body").find("div.mini").css("background-color","#bfa");
				});
				//(10)next() #one的下一个div
				$("#btn10").click(function(){
					//next()  选择下一个兄弟元素
					$("#one").next("div").css("background-color","#bfa");
				});
				//(11)nextAll() #one后面所有的span元素
				$("#btn11").click(function(){
					//nextAll()   选出后面所有的元素
					$("#one").nextAll("span").css("background-color","#bfa");
				});
				//(12)nextUntil() #one和span之间的元素
				$("#btn12").click(function(){
					//
					$("#one").nextUntil("span").css("background-color","#bfa")
				});
				//(13)parent() .mini的父元素
				$("#btn13").click(function(){
					$(".mini").parent().css("background-color","#bfa");
				});
				//(14)prev() #two的上一个div
				$("#btn14").click(function(){
					//prev()  
					$("#two").prev("div").css("background-color","#bfa")
				});
				//(15)prevAll() span前面所有的div
				$("#btn15").click(function(){
					//prevAll()   选出前面所有的元素
					$("span").prevAll("div").css("background-color","#bfa")
				});
				//(16)prevUntil() span向前直到#one的元素
				$("#btn16").click(function(){
					//prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
					$("span").prevUntil("#one").css("background-color","#bfa")
				});
				//(17)siblings() #two的所有兄弟元素
				$("#btn17").click(function(){
					//siblings()    找到所有的兄弟元素，包括前面的和后面的
					$("#two").siblings().css("background-color","#bfa")
				});
				
				
				//(18)add()选择所有的 span 元素和id为two的元素
				$("#btn18").click(function(){
	
					//   $("span,#two,.mini,#one")
					$("span").add("#two").css("background-color","#bfa");
					
				});


			});

		</script>

6.JQuery属性元素

html(）：传递参数时为赋值操作，不传递参数时为获取值操作

text()：传递参数时为赋值操作，不传递参数时为获取值操作

val()：：传递参数时为赋值操作，不传递参数时为获取值操作（只能在表单项操作）

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            // 批量操作单选
            $(":radio").val(["radio2"]);    //[]里面的值为value值
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);

            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });

    </script>

attr:可以设置与获取属性值

$(":checkbox:first").attr("name");        //获取name的值

$(":checkbox:first").attr("name","abc");        //设置name的值abc

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btn1").click(function (){
                alert($(":checkbox:first").attr("name"));
                $(":checkbox:first").attr("name","abc");
            });
        });
    </script>
</head>
<body>
<body>
    <br/>
    多选：
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <button id="btn1">提交</button>
</body>
</body>
</html>

prop：用于checked,selected,readonly,disable

$(":checkbox").prop("checked");        //获取选中的值，返回值类型为false或true

$(":checkbox").prop("checked",true);        //将选中的值，设置为true

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btn1").click(function (){
                $(":checkbox").prop("checked",true);
                alert($(":checkbox").prop("checked"))
            });
        });
    </script>
</head>
<body>
<body>
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <button id="btn1">提交</button>
</body>
</body>
</html>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
		$(function (){
			//1.全选
			$("#checkedAllBtn").click(function (){
				$(":checkbox").prop("checked",true);
			});
			//2.全不选
			$("#checkedNoBtn").click(function (){
				$(":checkbox").prop("checked",false);
			});
			//3.反选
			$("#checkedRevBtn").click(function (){
				var $input = $("input[name='items']");
				$input.each(function (){
					this.checked=!this.checked;
				});
				// 要检查 是否满选
				// 获取全部的球类个数
				var length = $("input[name='items']:checked").length;
				if (length==$("input[name='items']").length){
					$("#checkedAllBox").prop("checked",true);
				}else {
					$("#checkedAllBox").prop("checked",false);
				}
			});
			//4.全选全不选
			$("#checkedAllBox").click(function (){
				$("input[name='items']").prop("checked",this.checked);
			});
			//5.给全部球类绑定单击事件
			$("input[name='items']").click(function (){
				if ($("input[name='items']").length==$("input[name='items']:checked").length){
					$("#checkedAllBox").prop("checked",true);
				}else {
					$("#checkedAllBox").prop("checked",false);
				}
			});
			//6.通过提交查看选择的
			$("#sendBtn").click(function (){
				var $checkbox = $(":checkbox[name='items']:checked");
				$checkbox.each(function (){
					alert(this.value);
				});
			});
		});
</script>

7.Dom增、删、改

内部插入：

a.appendTo(b)        将a插入b末尾，成为最后一个

a.prependTo(b)        把a插入b前面，成为第一个

外部插入：

a.insertAfter(b)        ba

a.insertBefore(b)        ab

替换：

a.replacewith(b)        用b替换a，替换一个

a.replaceAll(b)        用b替换a,替换所有

删除：

a.remove()

清空：

a.empty()

<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// 页面加载完成
		$(function () {
			// 第一个按钮 【选中添加到右边】
			$("button").eq(0).click(function (){
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			// 第二个按钮 【全部添加到右边】
			$("button").eq(1).click(function (){
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});
			// 第三个按钮 【选中删除到左边】
			$("button").eq(2).click(function (){
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			// 第四个按钮 【全部删除到左边】
			$("button").eq(3).click(function (){
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	</script>

confirm("")        确认提示框，确认true取消false

题：完成动态添加和删除案例

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function () {

		// 创建一个用于复用的删除的function函数
		var deleteFun = function(){

			// alert("删除 操作 的function : " + this);

			// 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
			var $trObj = $(this).parent().parent();

			var name = $trObj.find("td:first").text();

			/**
			 * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
			 * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
			 */
			if( confirm("你确定要删除[" + name +  "]吗？") ){
				$trObj.remove();
			}

			// return false; 可以阻止 元素的默认行为。
			return false;
		};




		// 给【Submit】按钮绑定单击事件
		$("#addEmpButton").click(function () {
			// 获取输入框，姓名，邮箱，工资的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();


			// 创建一个行标签对象，添加到显示数据的表格中
			var $trObj = $("<tr>" +
					"<td>" + name +  "</td>" +
					"<td>" + email + "</td>" +
					"<td>" + salary + "</td>" +
					"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
					"</tr>");


			// 添加到显示数据的表格中
			$trObj.appendTo( $("#employeeTable") );

			// 给添加的行的a标签绑上事件
			$trObj.find("a").click( deleteFun );


		});


		// 给删除的a标签绑定单击事件
		$("a").click( deleteFun );


	});

	
</script>

8.css样式操作

.addclass("参数")        添加样式  

.removeclass("参数")        删除样式

.toggleclass("参数")        有删除样式，没有添加样式

.offset("参数")        设置或获取坐标

9.动画操作

.show()        展示动画

.hidden()        隐藏动画

.toggle()        显示就隐藏，隐藏就显示

以上三个可以设置两个参数

第一个参数：动画的时长毫秒为单位

第二个参数：可以调用回调函数，动画完成后自动执行

$("div:eq(0)").show(1000,function(){

        alert("回调函数");

});

.fadeIn()        淡入

.fadeOut()        淡出

.fadetoggle()        淡入淡出

第一个参数：动画的时长毫秒为单位

第二个参数：可以调用回调函数，动画完成后自动执行同8

.fadeTo()        在指定时间内慢慢的修改透明度

0：透明，0.5：半透明，1：完全透明

$("div:eq(0)").fadeTo(2000,0.5,function(){

        alert("")

})

练习：CSS_动画 品牌展示

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 基本初始状态
$("li:gt(5):not(:last)").hide();
// 给功能的按钮绑定单击事件
$("div div a").click(function () {
// 让某些品牌，显示，或隐藏
$("li:gt(5):not(:last)").toggle();
// 判断 品牌，当前是否可见
if( $("li:gt(5):not(:last)").is(":hidden") ){
// 品牌隐藏的状态 ：1 显示全部品牌 == 角标向下 showmore
$("div div a span").text("显示全部品牌");
$("div div").removeClass();
$("div div").addClass("showmore");
// 去掉高亮
$("li:contains('索尼')").removeClass("promoted");
} else {
// 品牌可见的状态：2 显示精简品牌 == 角标向上 showless
$("div div a span").text("显示精简品牌");
$("div div").removeClass();
$("div div").addClass("showless");
// 加高亮
$("li:contains('索尼')").addClass("promoted");
}
return false;
});
});
</script>

10.JQuery事件

click()        它可以绑定单击事件，以及触发单击事件

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function (){
       $("h2").click(function (){
           alert("点击事件")
       }); 
       $("button").click(function (){
           $("h2").click();
           alert("触发事件")
       });
    });
</script>

mouseover()        鼠标移入事件

mouseout()        鼠标移除事件

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function (){
        $("h2").mouseover(function (){
            console.log("移入事件");
        });
        $("h2").mouseout(function (){
           console.log("移出事件");
        });
    });
</script>

bind()        绑定事件（可以绑定多个事件）

unbind        解除绑定事件

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function (){
        $("h2").bind("click mouseover mouseout",function (){
            alert("绑定三个事件");
        });
        $("h2").unbind("click",function (){
            alert("解绑事件");
        });
    });
</script>

one()        和bing一样绑定事件但是绑定的事件只会执行一次不会反复执行

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function (){
        $("h2").one("click mouseover mouseout",function (){
            alert("绑定三个事件,且只执行一次");
        });
    });
</script>

live()        也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效

11.事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去 响应。

如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

12.javaScript 事件对象

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。

总结：选择操作(基本、层级、条件、本文、属性、表单、筛选)，事件操作(7种操作)，赋值操作(html、text、val、attr、prop+css+动画)，增删改

嘎嘎_膈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaWeb - jQuery
sunqianLOL的博客
09-22 332
jQuery <!-- jQuery 介绍 什么是 jQuery？ 顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想!!! 它的核心思想是 write less,do more(写的更少，做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为
JavaWeb_Assignment
03-10
12. **前端技术**：HTML、CSS和JavaScript是构建用户界面的基础，可能结合Bootstrap、jQuery或其他前端框架提高交互性和响应性。 通过完成这个JavaWeb_Assignment，学生将深入理解Java Web开发的全貌，包括后端逻辑...
javaWeb-jQuery
维他柠檬茶的博客
02-22 699
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 jQuery一、jQuery是什么？二、js与jQuery1.jQuery的引入2.js与jQuery的使用差别三、jQuery的核心函数介绍1.传入的参数为【函数】时2.传入的参数为【HTML字符串】时3.传入的参数为【选择器字符串】时4.传入的参数为【Dom对象】时四、如何区分js原生Dom对象和jQuery对象1.Dom对象特点2.jQuery对象特点五、jQuery对象的本质六、Dom对象与jQuery对象的相互转换七、jQuery
java web使用jquery_webjars-jquery的引用
weixin_39802020的博客
02-16 275
什么是WebJarsWebJars以jar包的形式来使用前端的各种框架、组件，如jquery、bootstrapWebJars将客户端(浏览器)资源(JavaScript，Css等)打成jar包文件，以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。我们在开发Java web项目的时候会使用像Maven，Gradle等构建工具以实现对jar包版本依赖管理，以及项目的自动...
java web使用jquery_JavaWeb的学习--jQuery二
weixin_27785375的博客
02-16 116
一、使用JQ完成省市二级联动1.需求分析使用jquery完成省市二级联动2.技术分析2.1数组的遍历操作方式一：$(function(){//全选/ 全不选$("#checkallbox").click(function(){var isChecked = this.checked;//使用对象访问的方式进行遍历，语法：$().each(function(){})$("input[name='ho...
web技术 --- JQuery引入【选择器，事件，函数】
a23452的博客
12-31 925
JQuery 内容导航封装方法提升获取DOM的效率JQuery的介绍JQuery引入 window.onload = function(){} -- 简化$()DOM对象和JQuery对象Dom对象转JQuery对象JQuery对象转dom对象基本选择器 # . 无所有选择器 $("*")组合选择器表单选择器 :过滤器基本过滤器表单属性过滤器JQuery绑定事件JQuery函数val() 有参 无参text() 有参 无参attr() 有value 无 Javaweb — emmm……刚好刚好， 基
ajax_javaweb_
10-02
**Ajax技术详解与JavaWeb应用** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
通用_javaweb_宿舍管理系统_
09-30
可能还使用了jQuery库来增强JavaScript功能，简化DOM操作。 总的来说，【通用_javaweb_宿舍管理系统_】是一个集成了Java Web技术、数据库管理、用户认证、数据处理等多种技术的综合性项目，对于学习和理解Java Web...
JAVA WEB_redis_javaweb_httpjsp_javaweb新手入门_tomcat_
10-04
一、 JavaScript二、 数据库单表三、 数据库多表四、 事务的管理五、... Session十二、 Listener十三、 Filter十四、 文件的上传和下载十五、 Jquery十六、 Redis十七、 nginx & svn十八、 框架基础加强十九、 补充
JavaWeb商城购买_javaweb_Eclipse_eclipse购物商城_Eclipse商城_网上购物_
10-04
可能还使用了jQuery或其他JavaScript库来增强用户体验。现代的Web应用可能会引入Bootstrap或者Vue.js等前端框架来提高开发效率和用户体验。 6. **MVC模式**： 作为一个JavaWeb应用，很可能采用了Model-View-...
jquery关于load()加载页面遇见的坑(js代码使用不了)
weixin_41033048的博客
07-19 1442
第一步：使用load把外部的html引入（但是无法实现引入代码里js的效果） 第二步：解决第一步的问题，把外部引入html的js代码重新装入另外一个js文件里面，这里指的是click.js，然后再用下面这个方法引入文件，则可生效。 $('#top_w').load('top_w.html', function() { $.getScript("../js/click.js"); }); $...
Java Web学习11（Jquery案例）
Li的博客
08-12 174
Jquery案例效果展示项目代码 效果展示 项目 代码 （1）add.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
JQ load 引入JS不生效
Mr-k的博客
12-13 654
JQ load 引入JS无效
jquery动态待装入 HTML 网页内容和动态引入css、动态引入js
最新发布
伟庭师兄的博客
08-16 374
img class="title-img" src="${value.title_img}" alt="封面图片" title="${value.title}" />$('header').load('头部.html .container',addCss('./css/头部.css'));$('header').load('头部.html .container',function(){$('header').load('头部.html .container',function () {
Jquery自学总结
weixin_43281120的博客
11-09 294
JQuery 基础： 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的Java...
向页面注入JS代码
sqlaowen的博客
02-08 1万+
向一个页面中注入一段JS方法如下 拿jQuery做实验 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"; var s = document.ge
高效学习JQuery
ASDASDADF的博客
08-26 192
jQuery的学习 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题 jQuery 的好处 jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。 注
javaWeb之JQuery的使用
热门推荐
anchorite
09-04 2万+
1.下载并导入JQuery 点击此处下载 导入: &amp;amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot; src=&amp;amp;quot;../js/jquery-1.11.3.min.js&amp;amp;quot; &amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt; 2.JQ
java jquery 框架_Java项目在jsp页面中引入jquery框架的步骤
weixin_28934081的博客
02-13 382
环境：在Java web项目中引入juqery框架工具：MyEclipse8.5[步骤如下]A：新建一个Java web项目TestJquery，在WebRoot目录下创建一个jquery文件夹B：下载jquery-1.8.3.min.js放入jquery文件夹中C：创建jsp页面String basePath= request.getScheme()+"://"+request.getServ...
idea javaweb项目导入jquery
08-12
对于IDEA导入JavaWeb项目，并使用jQuery，可以按照以下步骤进行操作： 1. 首先，在IDEA中创建一个JavaWeb项目。可以通过File -> New -> Project -> Java (勾选Web Application)来创建。<span class="em">1</span>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值