目录
一、JQuery概述
1.概述
概述：JQuery就是对JS封装的代码库； 设计宗旨：写得少，做的多
JQuery能做什么：JS的封装、CSS封装、事件、动画、Ajax 等等
使用方式：拿JQuery对象( $("选择器") )，操作各种资源
2.搭环境
要使用Jquery语法，必须将JQuery的代码库引入的当前页面；
引入方式有两种：
直接引入： <script src="../jquery.js"></script> (推荐)
注意：引入后，后面写JS代码，还需重新写<script>...</script>
2.CDN方式引入 jquery.js （联网）
3.入门应用
<script src="../js/jquery-1.11.min.js"></script>
<script type="text/javascript">
onload = function(){
alert("传统JS加载1");
}
onload = function(){
alert("传统JS加载2");
}
$(function(){
alert("jquery页面加载1");
})
$(function(){
alert("jquery页面加载2");
})
//特点：
//1.jquery的页面加载优先于传统JS页面加载
//2.Jquery的页面加载不会覆盖，有多少个则执行多少次 （在js中页面加载较常用）
</script>二、Jquery应用
1.基本选择器
script>
/* 在jquery中，使用选择器获取jquery对象；类似css中选择器加效果 */
/* 基本选择器：id选择器，class选择器，标签选择器
问题：jquery对象和js中获取的元素对象有关系吗？ 有关系，jquery相当于容器，又包裹js元素对象
* */
$(function(){
//$(".bb").css("color","blue"); //class选择器
//$("#aa").css("color","green"); //id选择器
$("h1").css("color","red"); //标签选择器 css表示设置样式
})
</script>
<h1 id="aa" class="bb">一级标题</h1>2.事件
概述：HTML与JS进行动态交互的桥梁
<script>
$(function(){
$("h1").click(function(){
alert("点击事件！");
})
$("input").mouseover(function(){
alert("鼠标移入事件");
})
/* 鼠标悬停： 可带两个函数体，1.鼠标移入触发 2.鼠标移出触发 */
$("div").hover(function(){
console.log("鼠标移入");
},function(){
console.log("鼠标移出");
})
})
</script>
<h1>我的标题</h1>
<input type="button" value="鼠标移入" /><br />
<div>容器</div>3.JQuery与JS转换
<script>
$(function(){
/* JS对象转JQuery对象 */
/*
var h1 = document.getElementById("aa");
//将js对象加$(h1)，则转为了JQuery对象
$(h1).click(function(){
alert("JS转JQuery对象");
})*/
//JQuery转JS对象； jquery相等于容器，下标取元素，即可得到js对象
$("#aa")[0].onclick=function(){
alert("jquery转js对象");
}
})
</script>
<h1 id="aa">我的标题</h1>三、动画
1.显示与隐藏
<style>
div{
width: 250px;
border: solid red 2px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#sh").click(function(){
//参数1：持续时间 参数2：时间完成后触发的函数体
$("div").show(1500,function(){
alert("显示完成");
}); //显示
})
$("#hi").click(function(){
$("div").hide(2000); //隐藏 单位毫秒
})
$("#shhi").click(function(){
/* 显示与隐藏的切换 */
$("div").toggle(2000);
})
})
</script>
<button id="sh">显示</button><button id="hi">隐藏</button>
<button id="shhi">显示与隐藏</button>
<div>的非官方电视广告反对广泛大使馆非递归算法大哥
十大规划风格化规范化但是梵蒂冈梵蒂冈的规定但是
政府就很快恢复和根据客户风格豆腐干具有u有多个规划局规划
</div>2.淡入与淡出
$(function(){
$("#danru").click(function(){
$("div").fadeIn(2000,function(){ //淡入
alert("淡入完成");
})
})
$("#danchu").click(function(){ //淡出
$("div").fadeOut(3000);
})
$("#ruchu").click(function(){
//淡入与淡出的切换
$("div").fadeToggle(2000);
})
$("#ruto").click(function(){ //淡入到的比例
$("div").fadeTo(2000,0.6); //参数2：淡入到的比例； 1.0完整的
})
})3.上滑与下滑
$(function(){
$("#up").click(function(){
//上滑：参数2：函数体
$("div").slideUp(2000,function(){
alert("上滑完成");
})
})
$("#down").click(function(){
$("div").slideDown(2500); //下滑
})
$("#updown").click(function(){
//上滑与下滑的切换
$("div").slideToggle(2000);
})
})4.自定义动画
$("#ani").click(function(){
//$("div").animate({width:"150px"}) //设置宽度
/* $("div").animate( //接多个样式属性
{
width:"150px",
height:"400px",
opacity:'0.5'
})
})*/
$("div").animate( //接多个样式属性
{
width:"+=150px",
height:"toggle", //显示与隐藏
opacity:'0.3'
})
})$(function(){
$("#ani").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
})
$("#stop").click(function(){
//参数1：是否立即停止 参数2：停止时立即完成当前动画
$("div").stop(true,true);
})
})5.链式编程
$(function(){
$("#ani").click(function(){
//链式编程：完成一个动画后，继续下一个；因为调了方法后，返回jquery对象
$("div").hide(2000).show(1000).fadeOut(2000).fadeIn(2500);
})
})四、JQuery的DOM
概述：在JS中有DOM的操作，主要拿到元素对象，并操作属性，内容，样式； 此处的JQuery的DOM类似
区别：JQuery都是调方法完成
1.取值
<script>
$(function(){
//jquery的DOM操作： 取值
//1.获取内容：
//alert($("h1").text()); //纯文本方式获取内容
//alert($("h1").html()); //常用-带格式的获取内容
//alert($("#aa").val()); //获取value值
//2.获取属性： attr方法： src,width,href...
$("img").click(function(){
//$(this):表示点击的当前对象
//alert($(this).attr("src"));
//alert($(this).attr("width"));
//alert($("a").attr("href"));
//prop：也是取属性的，特殊情况，可以使用它,例如单选复选的选中属性
//因为取值为true或false，做判断时更方便
//alert($("#bb").attr("checked")); //checked
alert($("#bb").prop("checked")); //true
})
})
</script>
<h1>我的标题</h1>
<input type="text" value="666" id="aa" /><br />
<img src="../img/003.png" width="200px" height="250px" /><br />
<a href="#">我的超链接</a><br/>
<input type="radio" checked="checked" id="bb"/>2.赋值
对应上面的取值，如果不带参数为取值，则带一个参数是赋值；如果带一个参数是取值，则带两个参数是赋值。
<script>
$(function(){
//1.操作内容：
//$("h1").text("<a href='#'>标题1</a>"); //设置内容
$("h1").html("<a href='#'>赵本山</a>"); //设置带标签格式内容(常用)
$("#aa").val("666"); //value赋值666
//2.属性赋值
$("img").attr("src","../img/005.png");
$("img").attr("width","300px");
$("img").attr("height","400px");
})
</script>
<h1>我的标题</h1>
<input type="text" value="999" id="aa" /><br />
<img src="../img/003.png" /><br />取值与赋值的综合应用
<script>
/* 取值与赋值的综合应用：可以先取出值，然后再重新赋值 */
$(function(){
//参数是函数体； 参数1：下标 参数2：取值内容
$("h1").html(function(i,text){
alert(i+"---"+text);
return "返回新值到h1的内容中"; //返回的值
})
})
</script>
<h1>我的标题</h1>五、添加删除元素
1.添加元素
<style>
div{
width: 200px;
border: solid red 2px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
//$("div").append("--子元素后追加");
//$("div").after("div控件后面添加内容");
//$("div").prepend("子元素前面追加--");
//$("div").before("div控件前面添加内容");
//可以同时创建多个元素
var txt1 = "<p>段落1</p>";
var txt2 = $("<p></p>").text("段落2");
var txt3 = document.createElement("p"); //JS的DOM
txt3.innerHTML = "段落3";
//$("div").append(txt1,txt2,txt3);
$("div").after(txt1,txt2,txt3);
})
})
</script>
<input type="button" value="添加元素" id="btn" />
<div>犯得上广泛大使馆</div>2.删除元素
<script>
$(function(){
$("input").click(function(){
//$("div").remove(); //移除当前div及子元素
//$("div").empty(); //移除子元素
$("div").remove("#aa"); //移除指定的#aa的div
})
})
</script>
<input type="button" value="点击移除" />
<div><a>我的超链接</a></div>
<div id="aa">需要移除的</div>六、操作样式
概述：DOM中不仅可操作属性，内容；还可以操作样式；
操作样式的方法有：css(), addClass(), removeClass(), toggleClass()
1.CSS方法
<script>
$(function(){
//$("h1").css("color","red"); //添加单个样式属性
//添加多个样式属性 参数为json对象
$("h1").css({
"color":"blue",
"font-size":"40px"
})
})
</script>
<h1>标题1</h1>2.样式案例
<style>
.img{
width: 300px;
height: 400px;
}
.bold{
font-weight: bold;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
var isOK = true;
$("img").click(function(){
if(isOK){
//$(this).css({"width":"300px","height":"400px"});
$(this).addClass("img"); //添加class
}else{
//$(this).css({"width":"200px","height":"300px"});
$(this).removeClass("img"); //移除class
}
isOK = !isOK; //取反
})
$("div").click(function(){
//$(this).css("font-weight","bold");
$(this).toggleClass("bold"); //添加和移除bold的切换
})
})
</script>
<!-- 案例1：点击图片，使图片自动变大。点击字体，使字体变粗
案例2：让图片在变大变小之间切换。字体在变粗和变细之间切换 -->
<img src="../img/004.png" width="200px" height="300px" /><br />
<div>字体变粗</div>
扫一扫
3246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
