Javaweb---JQuery基础知识3

2021/5/18 12:25:34

编程Tag： jQuery function event click 节点 javaweb --- City BJ

本文主要是介绍Javaweb---JQuery基础知识3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.DOM的增删改
内部插入
appendTo(content) a.appendTo(b); 把a加到b里面添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面添加到最前面

外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面

替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b

删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a

DOM增删改

appendTo(content) a.appendTo(b); 把a加到b里面添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面添加到最前面

外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面

替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b

删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a

			$(function(){
			
				
				$("#btn01").click(function(){
					//创建一个"广州"节点,添加到#city下[appendTo()]
					//子节点.appendTo(父节点)
					$("<li>广州</li>").appendTo($("#city"));
					
					
				});
						
				$("#btn02").click(function(){
					//创建一个"广州"节点,添加到#city下[prependTo()]
                    $("<li>广州</li>").prependTo($("#city"));
					
				});
					
				$("#btn03").click(function(){
					//将"广州"节点插入到#bj前面[insertBefore()]
					//前边.insertBefore(后边的)
                    $("<li>广州</li>").insertBefore($("#bj"));
					
				});
					
				$("#btn04").click(function(){
					//将"广州"节点插入到#bj后面[insertAfter()]
					//后边.insertAfter(前边的)
                    $("<li>广州</li>").insertAfter($("#bj"));
								
				});
				
				$("#btn05").click(function(){
					//使用"广州"节点替换#bj节点[replaceWith()]
					//被替换的.replaceWith
                    $("#bj").replaceWith($("<li>广州</li>"));
				});
				
				$("#btn06").click(function(){
					//使用"广州"节点替换#bj节点[replaceAll()]
					//新的节点.replaceAll(旧的节点)
                    $("<li>广州</li>").replaceAll($("#bj"));					
				});
				
				$("#btn07").click(function(){
					//删除#rl节点[remove()]
					//$("ul").remove("#rl");
					//$("#rl").remove();
                    $("*").remove("#rl");				
				});
				
				$("#btn08").click(function(){
					//掏空#city节点[empty()]
					$("#city").empty();				
				});
				
				$("#btn09").click(function(){
					//读取#city内的HTML代码
					alert($("#city").html()); //读取
                    alert($("#city").html("哈哈"));//修改
				});
				
				$("#btn10").click(function(){
					//设置#bj内的HTML代码
                    alert($("#bj").html()); //读取
                    alert($("#bj").html("哈哈"));//修改
				});
	
			});
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
			<div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
			<div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
			<div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
			<div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
			<div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
			<div><button id="btn07">删除#rl节点[remove()]</button></div>
			<div><button id="btn08">掏空#city节点[empty()]</button></div>
			<div><button id="btn09">读取#city内的HTML代码</button></div>
			<div><button id="btn10">设置#bj内的HTML代码</button></div>
			
		</div>
	</body>
</html>

案例:从左移到右,从右移到左
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">

		$(function () {
		    //1.选中移到右边
			$("button:eq(0)").click(function () {
				$("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"));
            })
			//2.选中移到左边
            $("button:eq(2)").click(function () {
                $("select[name='sel02'] option:selected").appendTo($("select[name='sel01']"));
            })
			//3.全部移到右边
            $("button:eq(1)").click(function () {
                $("select[name='sel01'] option").appendTo($("select[name='sel02']"));
            })

            //4.全部移到左边
            $("button:eq(3)").click(function () {
                $("select[name='sel02'] option").appendTo($("select[name='sel01']"));
            })
        })
		
	
	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>

2.CSS样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除,没有就添加样式
offset() 获取和设置元素的坐标

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">	
	div{
		width:100px;
		height:260px;
	}	
	div.whiteborder{
		border: 2px white solid;
	}	
	div.redDiv{
		background-color: red;
	}
	div.blueBorder{
		border: 5px blue solid;
	}	
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){		
		var $divEle = $('div:first');	
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass("redDiv")
		});	
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass("redDiv");
		});	
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
            $divEle.toggleClass("redDiv");
		});	
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
            console.log($divEle.offset());
		});	
	})
</script>
</head>
<body>
	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>	
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	<br /> <br />
	<br /> <br />
</body>
</html>

3.JQuery动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出切换
练习 06 、CSS_画动画品牌展示
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）

品牌展示练习

body {
font-size: 12px;
text-align: center;
}

a {
color: #04D;
text-decoration: none;
}

a:hover {
color: #F50;
text-decoration: underline;
}

.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}

.SubCategoryBox ul {
list-style: none;
}

.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}

.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}

.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}

.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
color: #F50;
}

佳能(30440)
索尼(27220)
三星(20808)
尼康(17821)
松下(12289)
卡西欧(8242)
富士(14894)
柯达(9520)
宾得(2195)
理光(4114)
奥林巴斯(12205)
明基(1466)
爱国者(3091)
其它品牌相机(7275)

显示全部品牌 ``` **7.jQuery 事件操作** $( function(){} );和window.onload = function(){}的区别？他们分别是在什么时候触发？ 1、**jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。** 2、**原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成**

他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后
他们执行的次数？
1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。
javaScript 事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

//1.原生 javascript 获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}

//2.jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});

//3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log(" 鼠标移入");
} else if (event.type == "mouseout") {
console.log(" 鼠标移出");
}
});

练习:图片跟随

$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});

这篇关于Javaweb---JQuery基础知识3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javaweb---JQuery基础知识3

相关编程文章