jQuery第一天---六大功能的简单应用_jquery含六个基本功能的网页-CSDN博客

本文链接：https://blog.csdn.net/ab15176142633/article/details/103946110

jQuery访问dom节点

什么是jQuery对象

jQuery对象是框架对javascript进行封装后的对象。让其获取方式更加直观，简单。jQuery对象和dom对象并不相同

<!DOCTYPE html>
<html>
<head>
	<title>jquery对象</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <div id="ab">学习一门技能</div>
  <script type="text/javascript">
  	// jquery对象和dom对象不是一回事
  	$(function(){
  		// 获取jQuery对象
  		var jquery = $('#ab');
  		// 打印结果
  		alert(jquery);
  		// 获取dom对象
  		var javascriptobj = document.getElementById('ab');
  		// 打印结果
  		alert(javascriptobj);
  	})
  </script>
</body>
</html>

jQuery对象转化为dom对象

<!DOCTYPE html>
<html>
<head>
	<title>jQuery对象转化为dom对象</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="ab"></div>
</body>
<script type="text/javascript">
	var jqobj = $('#ab'); // jquery对象
	alert(jqobj);
	var DomObj = jqobj.get(0);
	alert(DomObj);

	var DomObJ= jqobj[0];
	alert(DomObJ);
</script>
</html>

dom对象转化为jQuery对象

<!DOCTYPE html>
<html>
<head>
	<title>dom对象转化为jQuery对象</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<h1 id="ab"></h1>
	<script type="text/javascript">
		var domobj = document.getElementById('ab');
		alert(domobj);

		var jqobj = $(domobj);
		alert(jqobj);
 	</script>
</body>
</html>

jQuery对象的事件处理

<!DOCTYPE html>
<html>
<head>
	<title>jquery对象对页面的事件处理</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/2.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div>
		<h1>点击对应的文字，即停止滚动</h1>
		<ul>
			<li class="one"></li>
			<li class="two"></li>
			<li class="three"></li>
		</ul>
		<button>开始</button>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		var s = ["师傅","二师兄","小弟弟"];
		var v = ["在冰箱里","对着梦中女孩","在梦中"];
		var o = ["洗澡","唱歌","瞎bb"];
		var snum = 0;vnum = 0,onum = 0;
		var stime = 0;vtime = 0;otime = 0;
		$("button").click(function(){
			stime = setInterval(function(){
				snum = ++snum%(s.length);
				$('li:eq(0)').html(s[snum]);
			},100);
			vtime = setInterval(function(){
				vnum = ++vnum%(v.length);
				$("li:eq(1)").html(v[vnum]);
			},100);
			otime = setInterval(function(){
				onum = ++onum%(o.length);
				$("li:eq(2)").html(o[onum]);
			},100);
		});
		$('li').click(function(){
			var name = $(this).attr('class');
			if(name == "one"){
				clearInterval(stime);
			}else if(name == "two"){
				clearInterval(vtime);
			}else if(name == "three"){
				clearInterval(otime);
			}
		});
	});
</script>
</html>

// 2.css
* {
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}
div{
	margin:50px auto;
	/* background:red; */
}
h1{
	text-align:center;
	padding:30px;
}
ul{
	/* background:blue; */
	text-align:center;
	margin:0 auto;
	float:left;
	width:100%;
	padding-left:28%;
	padding-bottom: 20px;
}
li{
	/* background:green; */
	float:left;
	height:30px;
	line-height:30px;
	font-size:20px;
	border:1px solid #ccc;
	margin:0px 20px;
}
button{
	display:block;
	font-size:20px;
	clear:both;
	margin:0px auto;
	width:150px;
	height:40px;
	background:red;
	border:2px solid #ccc;
}

jquery动态控制css

<!DOCTYPE html>
<html>
<head>
	<title>jquery控制页面样式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div>知识与力量</div>
</body>
<script type="text/javascript">
	$(function(){
		$('div').css('color','red')
		.css("fontSize","30px")
		.css("fontweight","blod")
		.css('textAlign',"center")
		.css('padding',"50px");
	})
</script>
</html>

jQuery操作class来控制页面的层叠样式

<!DOCTYPE html>
<html>
<head>
	<title>jQuery控制class来控制页面层叠样式</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/3.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="nav">
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
			<li>E</li>
			<li>F</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$(".nav li").mouseover(function(){
			$(this).addClass("current");
		}).mouseout(function(){
			$(this).removeClass("current");
		})
	});
</script>
</html>

* {
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}
.nav{
	/* background:red; */
	margin:0 auto;
	padding:100px;
}
.nav ul{
	/* background:blue; */
	float:left;
}
.nav li{
	background:#00BCD4;
	float:left;
	padding:0 20px;
	font-size:20px;
	line-height:40px;
	font-weight:bold;
	/* color:#999; */
	border:2px solid #D5EEEF;
	border-right:0px;
}
.nav li:last-child{
	border-right:2px solid #D5EEEF;
}
.nav li.current{
	background:#FFE0B2;
	/* color:#666; */
	font-size:24px;
	position:relative;
	top:4px;
	box-shadow:2px 2px 1px #009688;
}

jQuery处理动画效果

jQuery封装好的动画效果方法有：基本动画show()和hide()，滑动动画sildeDown()和slideUp(),淡入淡出fadeIn()和fadeOut(),以及自定义动画

实现隐藏，显示和隐藏显示的切换

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery处理动画效果</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<center>
		<img src="images/9.jpg">
		<button>隐藏</button>
		<button>显示</button>
		<button>切换</button>
	</center>
</body>
<script type="text/javascript">
	$(function(){
		$('button').click(function(){
			switch($(this).html()){
				case '隐藏':
					$('img').hide();
					break;
				case '显示':
					$('img').show();
					break;
				case "切换":
					$('img').toggle();
					break;
			}
		});
	});
</script>
</html>

jQuery的ajax应用

//服务器端
// textajax
app.get('/textajax',function(req,res){
	res.send('你已经学会jQuery了ajax文本');
})
app.get('/jqueryajax',function(req,res){
	res.render('jqueryajax');
})

// 客户端
<!DOCTYPE html>
<html>
<head>
	<title>jquery的ajax技术运用</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    	$(function(){
    		$.ajax({
    			url:'http://localhost:3000/textajax',
    			type:'get',
    			dataType:'text',
    			success:function(msg){
    				alert(msg);
    			},
    			error:function(){
    				alert('ajax请求错误');
    			}
    		});
    	});
    </script>
</body>
</html>