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>
