目录
一、JQuery_Basic基本使用
1.概述
Juery是js的代码库，封装了js的所有常用功能，事件、动画、CSS、Ajax都可以通过iquery来做
2.页面加载
js的页面加载于JQuery的页面加载的区别
js的页面加载，后面的会覆盖前面的，并且只执行一个
JQuery的页面加载不会被覆盖，并且会被优先加载
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
onload = function(){
alert("js本身的页面加载1");
}
onload = function(){
alert("js本身的页面加载2");
}
$(function(){
alert("jquery提供页面加载1");
})
$(function(){
alert("jquery提供页面加载2");
})
</script>3.选择器
JQuery有三种选择器
id选择器、类选择器和标签选择器
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
//$("#one").css("color",red);
//$(".two").css("color","blue");
$("h1").css("color","green");
})
</script>
<h1 id="one" class="two">我的一级标题</h1>
二、事件
1.概述
与HTML进行动态交互的技术
点击事件
<h1>又是一个一级标题</h1>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("h1").click(function(){
$(this).css("color","red");
})
})
</script>弹起与悬停
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
//键盘弹起
$("input").keyup(function(){
alert("键盘弹起触发");
})
//鼠标悬停状态
$("input").hover(function(){
console.log("鼠标悬停触发");
})
/*$("input").hover(function(){
console.log("移入触发..");
},function(){
console.log("移出触发....");
})*/
</script>JQuery与JS
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
var btn=document.getElementById("btn");
$("#btn")[0].onclick=function(){
alert("调用JS的onclick事件");
}
})
</script>
<input type="button" value="JS与JQuery转换" id="btn" />三、动画效果
显示与隐藏
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#yc").click(function(){
$("p").hide(3000);
})
$("#xs").click(function(){
$("p").show(4000);
})
$("#xsyc").click(function(){
$("p").toggle(5000,function(){
alert("显示或隐藏结束");
});
})
})
</script><style>
p{
width: 400px;
border: solid 3px red;
}
</style>
<input type="button" value="显示" id="xs" />
<input type="button" value="隐藏" id="yc" />
<input type="button" value="显示与隐藏" id="xsyc" />
<p>一年一度的高考即将来临，又一届莘莘学子将怀揣梦想与希望奔赴考场。为参加高考的考生营造安静舒适的学习、考试和休息环境，是我们共同的心愿，更是我们共同的责任和义务。</p>淡入与淡出
<style>
p{
width: 300px;
border: solid 3px blue;
}
</style>
<input type="button" value="淡入" id="fadein" />
<input type="button" value="淡出" id="fadeout" />
<input type="button" value="淡入与淡出" id="inout"/>
<input type="button" value="淡入到" id="fadeto" />
<p>
十年利剑百日策马闯雄关，一朝试锋六月扬眉传佳音！护航高考，感谢您的理解和支持！让我们行动起来，共同为考生营造一个安静温馨的考试环境，衷心祝愿广大考生金榜题名、前程似锦！
</p><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#fadein").click(function(){
$("p").fadeIn(1000);
})
$("#fadeout").click(function(){
$("p").fadeOut(1000);
})
$("#inout").click(function(){
$("p").fadeToggle(1000,function(){
alert("淡入与淡出结束！")
});
})
$("#fadeto").click(function(){
$("p").fadeTo(1000,0.5);
})
})
</script>滑动效果
<style>
p{
width: 500px;
border: solid 3px green;
}
</style>
<input type="button" value="上滑" id="up" />
<input type="button" value="下滑" id="down" />
<input type="button" value="上滑与下滑" id="updown" />
<p>
流水线、螺丝钉、铁做的月亮，拼凑出他的生活。他无法与命运握手言和，只能咽下滚烫的愤怒。
</p>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#up").click(function(){
$("p").slideUp(2000);
})
$("#down").click(function(){
$("p").slideDown(3000);
})
$("#updown").click(function(){
$("p").slideToggle(2000,function(){
alert("上滑与下滑结束后的触发！");
})
})
})
</script>自定义动画
<style>
p{
width: 300px;
border: solid 3px blue;
}
</style>
<input type="button" value="自定义动画" id="custom"/>
<input type="button" value="停止动画" id="stop" />
<p>
由工业和信息化部主办的第31届中国国际信息通信展览会在北京开幕。工业和信息化部党组书记、部长金壮龙表示，要优化基础设施布局，加快推动新型信息基础设施体系化发展，提升5G、千兆光网覆盖深度广度，纵深推进电信普遍服务，加快算力基础设施发展，夯实数字经济发展新底座。
</p><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#custom").click(function(){
/*$("p").animate({
width:"150px",
height:"150px",
width:"+=150px",
heigh:"+=150px"
width:"toggle"
},2000)*/
$("p").animate({height:'300px',opacity:'0.4'},"slow");
$("p").animate({width:'300px',opacity:'0.8'},"slow");
$("p").animate({height:'100px',opacity:'0.4'},"slow");
$("p").animate({width:'100px',opacity:'0.8'},"slow");
})
$("#stop").click(function(){
$("p").stop(true,true);
})
})
</script>链式编程
<style>
p{
width: 300px;
border: solid 3px blue;
}
</style>
<input type="button" value="多种动画执行" id="many" /><br />
<p>
加快培育新兴产业，持续增强移动通信、光通信等领域全产业链优势，前瞻布局下一代互联网等前沿领域，全面推进6G技术研发，抢占未来发展新优势
</p><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#many").click(function(){
$("p").slideUp(1000).slideDown(1000).fadeOut(2000).fadeIn(2000);
})
})
</script>四、JQuery的DOM操作
在JS中有DOM操作；也就是通过得到元素对象后，操作属性，内容，样式等信息；在JQuery中也类似有属性，内容，样式的操作，只是JQuery操作的是方法
属性取值
<h1><a>一级标题</a></h1>
<input type="text" value="wyz" /><br />
<img src="../img/001.jpg"width="400px" /><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("h1").click(function(){
/*alert($(this).text());
alert($(this).html());*/
})
$("input").click(function(){
alert($("input").val());
})
$("img").click(function(){
alert($(this).attr("src"));
alert($(this).attr("width"));
})
})
</script>属性赋值
<h1><a>我的一级标题</a></h1>
<input type="text" value="wyz"/><br />
<img src="../img/002.jpg" width="300px" /><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("h1").click(function(){
$(this).html(function(i,aa){
return "旧值："+aa+"新值：返回内容"+i;
})
})
$("input").click(function(){
$(this).val("梁朝伟");
})
$("img").click(function(){
$(this).attr("src","../img/002.jpg");
})
})
</script>添加元素
<input type="button" value="添加元素" />
<div>
<p>原始段落</p>
</div><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("input").click(function(){
//$("div").append("<p>新段落</p>");
//$("div").prepend("<p>新段落2</p>");
//$("div").after("<p>新段落</p>");
//$("div").before("<p>新段落</p>");
//追加多个元素
var txt1="<p>段落1</p>";
var txt2=$("<p></p>").html("段落2");
var txt3=document.createElement("p");
txt3.innerHTML="段落3";
//$("div").append(txt1,txt2,txt3);//添加div的儿子
$("div").after(txt1,txt2,txt3);//添加div的兄弟
})
})
</script>删除元素
<input type="button" value="删除元素" id="btn" />
<div>
<a href="#">我是超链接1</a><br />
<a href="#" class="aa">我是超链接2</a><br />
</div><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
//$("div").remove();//删除当前元素及子元素
$("div").empty();//删除当前的子元素
$("a").remove(".aa");//删除指定的子元素
})
})
</script>JQuery中的CSS样式
<style type="text/css">
.bold{
font-weight: bold;
}
.img{
width: 500px;
height: 600px;
}
</style>
<h1>我的一级标题</h1>
<img src="../img/001.jpg" />
<div>字体变粗</div><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("h1").click(function(){
//$(this).css("color","blue");
$(this).css({"color":"green","fontSize":"80px"});
})
//点击图片，图片自动变大，点击字体，字体自动变大
$("img").click(function(){
$(this).toggleClass("img");
})
var isok=true;
$("div").click(function(){
if (isok) {
$(this).addClass("bold");
}else{
$(this).removeClass("bold");
}
isok=!isok;
})
})
</script>尺寸
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("button").click(function(){
var txt="";
txt+="div的宽度是："+$("#div1").width()+"</br>";
txt+="div的宽度+内边距："+$("#div1").innerWidth()+"</br>";
txt+="div的宽度和边框："+$("#div1").outerWidth()+"</br>";
txt+="div的宽度+外边距："+$("#div1").outerWidth(true)+"</br>";
$("#div1").html(txt);
});
})
</script><style type="text/css">
#div1{
width: 300px;
height: 150px;
border: solid 5px blue;
padding-left:30px ;
margin-left: 40px;
}
</style>
<button>获取尺寸</button>
<div id="div1">显示尺寸</div>
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
