Jquery框架应用
Jquery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库，jQuery的设计宗旨就是 “ write less Do more ”既提倡写更少的代码，做更多的事情，它会封装javascript中常用的功能代码，提供一种简洁便利的JavaScript设计模式
- 优化HTML文档操作
- 事件处理
- 动画设计
- Ajax交互
首先要使用JQ，我们需要先从网上获取到对应的框架文件然后引入到我们的项目当中
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
jQuery的基本语法
jQuery由三个部分构成
1、起始标识符【美元的$符号定义jQuery】
2、选择器【用来选择需要通过JQ操作的元素】
3、方法【jquery对元素的操作】
jQuery选择器
$(".btn"); //选中class="btn"的元素
$(".btn1,btn2") //选中class="btn1"或class="btn2"的元素
JQuery出了支持的原生的css选择器之后，它还扩展了很多css选择器
jQuery的事件方法
jQuery的事件方法是将DOM当中的常用事件进行了一个封装
//$("选择器").事件方法(回调函数)
//回调函数就是当你事件被触发之后要执行的事情
$(".btn1").click(function(event){
//对btn1绑定的点击事件，当被点击之后要执行的语句
})
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
上面就是jQuery的常用事件方法，上面的hover其实就是mouseenter和mouseleave的结合体
$("#p1").hover(
function(){
console.log("haha");
//执行的是mouseenter触发之后的方法
},
function(){
console.log("hehe");
//执行的是mouseleave触发之后的方法
}
)
对于常用的事件我们可以像上面一样通过方法来绑定，不常用的，jQuery提供了一个 on 的方法
// $("选择器").on("事件"，callBack)
$(".btn1").on("click",function(){
console.log("yoxi");
})
jQuery事件委托
jQuery的事件委托通过 on 方法实现
//$("选择器").on("事件",事件触发者,callBack);
$(".ul1").on("click","li.active",function(){
console.log(new Date());
})
这个时候，就相当于事件是绑定在 ul1上面的，但是事件的触发者要满足 li.active 这个选择器的条件才行
jQuery事件移除
在之前的DOM中，我们要移除事件要使用 removeEventListener ，这个方法来移除，在jQuery当中使用 off方法
// $("选择器").off("事件类型",函数名);
// 如果没有写函数名，就移除所有
jQuery的单次事件
以前我们使用原生来写如下
var btn1 = document.querySelector(".btn1");
btn1.addEventListener("click",function(){
console.log("你点了我一下");
btn1.removeEventListener("click",arguments.callee);
})
在jQuery当中，我们直接使用 one 方法来绑定单次事件
$(".btn1").one("click",function(){
console.log("你点了我一下");
})
jQuery动画方法
1、show() / hide() / toggle() 执行元素显示隐藏
show和hide传入一个时间参数来控制显示隐藏的时长，填入时间的单位是毫秒，同时有三个枚举值 slow/normal/fast ，如果不传参就直接执行显示隐藏
$(".btn").toggle(function(){
$(".box").hide(1000);
},function(){
$(".box").show(1000);
})
2、slideUp(speed?) / slideDown(speed?) / slideToggle（speed?） 元素执行上拉下滑的效果，它的参数于show / hide保持一致
3、fadeIn(speed?) / fadeOut(speed?) /fadeTo(speed?, opacity) / fadeToggle()， 它实现一个渐隐渐显的效果
上面就是jQ元素隐藏和显示的基础方法
jQuery链式语法
$(".btn").on("click",function()}{
}).on("mouseenter",function(){
}).on("mouseleave",function(){
})
根据链式语法，我们可以这么来写动画
$(".btn").click(function(){
$(".box").slideUp(2000).show(2000).hide(2000).slideDown(2000).fadeOut(2000);
})
注意：所有的动画方法都是异步的
$(".btn").click(function(){
$(".box").slideUp(5000); //异步执行
console.log("哈哈哈"); //这个代码会立即执行，因为它会不等待上面的动画完成，因为动画是异步的
})
代码分析：我们点击按钮触发box的动画，这个时候我们可以看到，动画还没有结束而下面的打印语句已经执行了，这点就说明了动画是一个异步执行的过程【同步等待，异步执行】
如果我们希望上面的打印语句在动画结束之后执行，怎么办？这个时候jQuery动画为我们准备一个回调函数，没以恶搞动画执行完毕之后，都会去执行回调函数，当然有才执行，没有就不管
$(".btn").click(function(){
$(".box").slideUp(5000,function(){
console.log("哈哈哈");
});
})
除上面几种方法之外，还有可以使用 animate() 方法来完成，语法如下
//$("选择器").animate(css属性对象,动画执行时长,回调函数)
$(".box").animte({
"width":"300px",
"height":"300px"
},2000,function(){
console.log("动画执行完毕")
})
但是animate这个方法执行的动画会有一个问题，如果动画被触发执行，那么如果被触发多次，那么会有一种情况就是，当你下一次触发的时候上一次的动画还没有执行完毕，那么下一次的滑动执行会进入到等待状态，进行排队，这样就会出现，你已经停止触发了，但是动画依然还在疯狂的反复执行，如下
$(".box").hover(
function(){
$(this).animate({
"width":"300px"
},1000)
},
function(){
$(this).animate({
"width":"200px"
},1000)
}
)
基于上面这种情况，我们认为animate比较适合制作一次性动画
jQuery CSS方法
jQuery提供很多操作元素css的方法，以前在DOM里面，我们有哪些可以操作的
比如 style属性 / classList.add() / classList.remove() / classList.toggle() / window.getComputedStyle()来获取
1、addClass() 在选中的元素上面添加一个class里面的样式
2、removeClass() 在选中的元素上面移除一个class里面的样式
3、toggleClass()在选中的元素上面替换一个样式
4、css() 这个方法技能获取也能设置样式
获取方法
//$("选择器").css("css属性名")
$(".box").css("width");
设置方法
//$("选择器").css("属性名","属性值") 只设一个样式这么写
/*
$("选择器").css({
属性名:"属性值",
属性名:"属性值"
})
*/
$(".box").hover(
function(){
$(this).css({
width:"300px",
backgroundColor:"blue"
})
},
function(){
$(this).css({
width:"200px",
backgroundColor:"red"
})
}
)
jQuery属性方法
1、html() 对元素的innerHTML属性进行操作
$(".box").html("<a href='https://www.baidu.com'>我在赋值</a>"); //传参就是赋值操作
$(".box2").html(); //不传参就是取值操作
2、text() 对元素的 innerText 属性进行操作
3、val() 对表单的 value 属性进行操作
上面三个属性执行都是由参数就是赋值，没参数就是取值
4、attr() 方法就是DOM当中的 setAttribute() / getAttribute()
$("input").attr("type"); //传一个参，就传属性名，表示取值
$("input").attr("type","password"); //传两个参，第一个是属性名，第二个是属性值，表示赋值
5、removeAttr() 方法，相当于DOM中的 removeAttribute()
6、prop() ,对标签的单属性进行操作
$("input").prop("checked"); //获取单属性checked的状态
$("input").prop("checked",false); //对单属性赋值
7、data() 对DOM的自定义属性进行操作【不推荐】
jQuery尺寸方法
1、width() /height() 盒子模型的content大小
2、innerWidth() /innerHeight() 盒子模型content+padding的大小
3、outerWidth() / outerheight() 盒子模型content+padding+border的大小
4、outerWidth(true) / outerheight(true) 盒子模型content+padding+border+margin的大小
文档就绪函数
看下例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btn1").click(function(){
alert("hello world");
})
</script>
</head>
<body>
<button type="button" id="btn1">按钮</button>
</body>
</html>
代码分析：上面的代码里面，按钮是不会有事件的，因为它是先绑定的事件，再加载的DOM元素，在绑定事件的适合，DOM元素还没有被加载出来
在之前学习的window都西昂的适合，我们知道有一个事件叫做onload是，它表带所有元素已经完全加载，所以我们可以使用这个方法
window.onload = function(){
$("#btn1").click(function(){
alert("hello world");
})
}
代码分析：但是这么写其实还是有不太好，它是将所有的元素加载完毕之后才会触发
window.onload，如果一个页面上面所有的元素都已经加载好了，但是任然有一些大图片或者一些其他东西没有加载好，这个时候onload是不会触发的，那么从用户体验的角度来说，这种体验感实际上不太好
document.addEventListener("DOMContentLoaded",function(){
$("#btn1").click(function(){
alert("hello world");
})
})
代码分析：上面的写法就更加的优化了，把对象改成document，通过触发事件改成
DOMContentLoaded这样就不需要再等待哪些DOM以外的东西加载好才触发
上面这套写法，再JQ当中有一个专门用于处理文档就绪的函数
$(document).ready(function(){
$("#btn1").click(function(){
alert("hello world");
})
})
在JQ中的写法，还可以进一步简化
$(function(){
//这里就是代表文档就绪了
})
Ajax方法
我们在之前学习DOM的时候，我们自己封装过Ajax的请求代码，但是这个在JQ中也提供了ajax的请求方式
$.ajax({
async: true, //是否是异步，默认是true
type: "get", //代表请求方式，默认是get
url: "http://www.softeem.xin:8888/public/musicData/musicData.json", //请求地址
dataType: "json" ,//返回的数据类型，如果是json则会自动将返回的数据调用一次JSON.parse()
success: function(data){
//请求成功之后执行的回调，data就相当于是ajax对象的response
console.log(data);
},
error: function(err){
//请求失败执行的回调
}
})
上面的ajax方法写起来其实很麻烦，它有很多参数默认值就是有了的，所以我们不需要去设置，这个时候JQ又开始简化了这个方法
var url = "http://www.softeem.xin:8888/public/musicData/musicData.json";
$.get(url,function(data){
console.log(data);
})
后面还有post的方法，用法差不多
JQuery的其他方法
1、each() 方法
$(".ul1>li").each(function(index,ele){
console.log(index,ele);
})
选取元素之后，可以直接进行遍历，回调函数里面的第一个参数代表索引，第二个参数表单当前遍历的元素
var result = $(".ul1>li");
$.each(result,function(index,ele){
console.log(index,ele);
})
上面的调用 $.each 的时候，里面的result是一个类数组，所以我们可以用这个方法来进行遍历
2、toArray() 可以把Jquery选择操作的对象转换成一个数组
$(".ul1>li").toArray(); //这个时候就变成了一个数组
刚刚上面的toArray() 是可以将JQuery的选择结果转化昵称真正的数组，但是这个结束是不是 JQuery选取的？
3、makeArray() 可以将任何类数组转换成数组
var lis = document.querySeletorAll(".ul1>li") //得到是一个NodeList类型的类数组
把上面的NodeList，我们通过已经学过的方法转成数组
第一种
var arr = Array.prototype.slice.call(lis);
第二种
var arr = $(lis).toArray();
第三种
var arr = $.makeArray(lis);
JQuery的扩展
on的使用
第一种方式
$("#btn1").on("click",function(){
console.log("单击事件")
})
$("#btn1").on("mousedown",function(){
console.log("鼠标按下事件")
})
$("#btn1").on("mouseup",function(){
console.log("鼠标松开事件")
})
第二种写法
$("#btn1").on({
click: function(){
console.log("单击事件")
},
mousedown: function(){
console.log("鼠标按下事件")
},
mouseup: function(){
console.log("鼠标松开事件")
}
})
第三种：链式语法
DOM的attribute和property
attribute：在web前端中指的是HTML的属性
property：在web前端中指的是对象的属性
$("#input1").attr("type");
$("#input1").prop("checked",false);
JQuery对象于普通DOM对象的转换
<body>
<button type="button" id="btn1">按钮</button>
</body>
<script type="text/javascript">
var btn1 = document.querySelector("#btn1"); //btn是一个原生的DOM对象
var btn2 = $("#btn1"); //JQuery的初始化操作对象，jQuery.fn.init
</script>
首先我们要知道一点，$(选择器)它返回的是一个JQuery对象，是一个类数组形式
JQuery对象转换成DOM
btn2[0];
$("#btn1")[0]; //这样就得到了原生的DOM对象
//接下来就可以操作对应的原生的js方法
普通DOM对象转成JQuery对象
$(btn1); //这样就得到了JQuery的操作对象
//只要得到了就可以使用JQ方法进行操作
$(btn1).text();
JQ里面的事件对象
JQuery的事件全部都是二级事件，并且它默认执行的是事件冒泡
JQuery当中的事件对象并不是原生的事件对象，而是经过JQuery自己的封装的一个对象，正是因为它是自己封装的对象，所以JQuery事件对象肯定是与原生有一些不一样的
1、JQuery的事件对象不需要做兼容性的处理，因为在框架内部就已经了处理了
//原生的DOM事件对象
event = event || window.event;
//而JQuery里面，直接使用event就好了
2、JQuery事件对象上面的 stopPropagtion() 它自己封装的方法，它不是原生的事件对象的方法，所以在停止事件冒泡与取消事件传播的时候，直接调用这一个方法就行了
//原生DOM的事件里面，取消事件传播与冒泡
event.cancelBubble = true； //IE
event.stopPropagtion(); //W3c
//在JQuery中，直接调用方法即可
event.stopPropagtion();
3、JQuery事件对象里面，如果要阻止事件的默认行为也是 event.preventDefault() ,而在原生DOM对象里面，0级使用 return false 2级事件使用 event.preventDefault()
//原生DOM
//0级事件
//在事件方法的最后添加
return false
//JQuery当中，直接调用
event.preventDefault()
4、JQuery事件里面的 return false 会同时停止事件冒泡与阻止事件默认行为，相当于把 stopPropagtion() 与 preventDefault() 都干了
5、jQuery当中的事件对象是框架自己封装的对象，如果要找原生的事件对象可以使用 originalEvent这个属性
6、JQuery的事件对象中 which属性代表鼠标的键，1代表左键，2代表中键，3代表右键
7、因为JQuery事件是2级事件可以实现多次监听，这样在触发的时候会同时调用所有监听的方法，这时候会形成事件链，在JQuery当中提供了一个排他的特性，它是 event.stopImmediatePropagation()
$("#btn1").on("click",function(){
console.log("我是第一次")
}).on("click",function(event){
console.log("第二次");
event.stopImmediatePropagation(); //事件链到这里就断掉了，后面的事件方法不执行
}).on("click",function(){
console.log("第三次");
})
JQuery事件委托拓展
在JQ里面事件委托和原生DOM里面实现的事件委托有点不一样
原生DOM里面
event.target代表事件的触发者event.currentTarget代表事件的绑定者
JQuery框架里面
event.target代表事件的触发者event.currentTarget代表事件的绑定者event.delegateTarget代表事件的委托者
<body>
<div class="box">
<div class="small-box">
<button type="button" class="btn1">按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
$(".box").on("click",".small-box",function(){
console.log("我触发了事件",event);
})
</script>
当我们点击按钮的时候，会触发click事件，这个时候我们来分析下这个事件对象
1、我们把事件绑定在了 box 身上，但是 box 又把事件委托给了 small-box 所以我们认为，事件现在实际上是在 small-box 身上
2、当我们点击按钮按钮的时候，会触发按钮身上的click事件，但是按钮本身并没有事件方法需要执行，所以按钮本身并不会又任何的事情发生，但是事件传播的行为任然是会发生的，所以按钮的点击事件传播到了外面的small-box身上，正好触发了small-box身上委托的事件方法
delegateTarget是div.boxcurrentTarget是div.small-boxtarget是button.btn1
总的来说，它的格式因该是如下
$(委托者).on(事件类型，事件绑定者,function(){
//这里面可以找到真正的target触发者
})
JQuery 方法中的this
$(".box").on("click",".small-box",function(){
console.log(this); //small-box
})
$(".box").on("click",function(){
console.log(this); //box
})
JQuery里面的事件当中的this永远指向谁事件的绑定者 event.currentTarget
Jquery当中的this的一种特殊用法，它可以直接通过选择器选取以后再操作
$(this) //这就相当于对当前元素选取之后再操作
JQuery的扩展方法
在JQuery当中，它为我们提供了很多的方法，同时也可以让我们自己来实现自定义的方法，这些自定义的方法，我们叫做jQuery的扩展方法
jQuery的扩展方法有两种形式存在
1、$.extend() ，这种情况直接在 $ 对象身上扩展方法
2、$.fn.extend() ，这种情况是在JQuery选取的元素上面扩展方法
<div id="div1"></div>
<script type="text/javascript">
$.extend({
aaa:function(){
console.log("我是JQuery对象上面扩展的aaa方法");
}
})
$.aaa();
$.fn.extend({
bbb:function(){
console.log("我是JQuery操作对象上面扩展的bbb方法")
}
})
$("#div1").bbb();
</script>
JQuery扩展方法实现插件制作
index.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/context-menu-box.css">
<style>
.box{
width:400px;
height:400px;
border:solid 1px #f00;
}
</style>
</head>
<body>
<div class="box">
<!-- <ul class="context-menu-box">
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ul> -->
</div>
</body>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jQuery.contextmenu.js"></script>
<script type="text/javascript">
var menuList = [
{
text: "退回",
click: function(){
console.log("你要退回么?")
}
},
{
text: "提交",
click: function(){
console.log("你正在提交")
}
},
{
text: "登录",
click: function(){
console.log("你在登录")
}
}
]
$(".box").addContextMenu(menuList);
</script>
</html>
context-menu-box.css部分
*{
padding:0;
margin:0;
}
ul,ol{
list-style:none;
}
a{
text-decoration: none;
color:#333;
}
.context-menu-box{
width:130px;
position: fixed;
left:0;
top:0;
background-color: #fff;
box-shadow:0 0 5px #000;
display:none;
}
.context-menu-box>li{
line-height:35px;
border-bottom: solid 1px #ccc;
cursor: pointer;
text-align: center;
}
.context-menu-box>li:hover{
font-weight: bold;
}
jQuery.contextmenu.js
(function($){
if(typeof $ == undefined){
throw new Error("jQuery is not defined");
return;
}
$.fn.extend({
addContextMenu: function(menuList){
var menuUl = document.createElement("ul");
menuUl.classList.add("context-menu-box");
for(var i = 0;i < menuList.length;i++){
var newli = document.createElement("li");
newli.innerText = menuList[i].text;
//判断一下是否有click事件
if(typeof menuList[i].click === "function"){
$(newli).on("click",menuList[i].click);
}
menuUl.appendChild(newli);
}
document.body.appendChild(menuUl);
//点击自己的时候，把自己隐藏掉
$(menuUl).click(function(){
$(this).hide();
})
//绑定右键菜单事件
this.contextmenu(function(event){
event.preventDefault();
var x = event.clientX;
var y = event.clientY;
$(menuUl).css({
left: x + "px",
top: y + "px"
}).slideDown("fast");
})
}
})
})(jQuery)
/*
$符号并不是jQuery独占的一个标识符，你有可以在实际的工作中
会引入多个框架文件进行使用，有可以在其他的框架文件中也使用了$这个
符号作为它自己的标识符使用，那么这个时候，两个框架文件之间就会
产生冲突，jQuery在这个情况下，可以使用另外一个标识符来替代$的作用
就是jQuery
*/
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
