jQuery框架应用

Jquery是一个快速的，简洁的js框架，本身jQuery与其说是框架到不如说是一个方法库，JQuery的宗旨 就是write less ， do more 写最少的代码，干最多的事情，它本质上就是把js常用的代码进行封装，提 供了一种简介的js设计模式 1、优化HTML文档操作 2、事件处理 3、动画设计 4、Ajax交互 在使用JQuery之前，我们要先从网络上面下载它的文件，然后引入到我们的项目当中，不论使用哪种框 架，前提都是必须要把对应的框架文件引入到自己的项目页面中，这样该在编写代码时才能支持框架的 语法环境 1、JQuery时一次取值，批量赋值【如果你是取值操作则返回第一个匹配的，如果是赋值操作，则把所 有选择的元素赋值】 2、JQuery如果是设置操作则可以执行链式语法，如果是获取操作，后面则不可以执行链式语法

JQuery的基本语法

1、起始标志符：$定义jquery 2、选择器：通过选择器获取元素 3、方法：对元素进行操作

JQuery选择器

jQuery通过起始标识符$和后面的选择器，可以灵活的选中页面上面的各种元素

$(".btn1") //选中了类名为btn1的元素
$(".btn1,.btn3") //选中了类名为btn1和btn3的元素

JQuery事件方法

JQuery的事件方法是将DOM当中的常用事件进行一个封装，语法如下

var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
//这里是对#btn1的元素绑定了单击事件click
})
//上面是原生的写法
$("#btn").click(function(){
//这里是对#btn1的元素绑定了单击事件click
})
//上面是JQ的写法

鼠标事件：

click ， dblclick ， mouseenter ， mouseleave ， hover

键盘事件：

keypress ， keydown ， keyup

表单事件：

submit ， change ， focus ， blur

文档事件 ：

load ， resize ， scroll ， unload

上面的hover事件起始就是mousenter和mouseleave的组合使用

$(".p1").hover(
function(){
console.log("a");
},
function(){
console.log("b");
}
)

对于我们不常用的事件，我们可以使用jQuery提供的另一个方法，on 方法 类似于原生当中 addEventListener（）

语法格式

$("选择器").on("click",callback);
$(".btn1").on("click",function(event){
console.log("gaga");
})
$(".userName").on("input",function(event){
console.log("gaga");
})

jQuery的事件委托

jQ中的on方法是可以实现事件委托的绑定的

$(".ul1").on("click","li.active",function(){
})

JQuery事件的移除

$(".ul1").off("click",function(){
//删除了ul1下的click的某一个函数，如果写函数部分，删除全部
})

JQuery的单次事件

以前我们学习过通过一些方法可以让某一个DOM元素只执行一次事件方法 在JQuery当中，可以使用one方法来绑定单次事件

$(".btn1").one("click",function(event){
console.log("gaga");
})

JQuery链式语法

链式语法是jq的一大特点，它可以一次选择多次操作

$(".btn1").on("click",function(){
}).on("mouseenter",function(){
}).on("mouseleave",function(){
}).css()

JQuery动画

1、show() 元素显示 2、hide() 元素隐藏 3、toggle() 替换 以上方法中可以设置速度参数，有3个枚举值slow / normal / fast ，同时也可以直接设置一个数值，这 个数值以毫秒为单位，如果没有填写这个参数，元素不执行动画，直接隐藏显示 4、slideUp( ) / slideDown ( ) / slideToggle( ) 元素执行滑动的下过，参数于上面保持一致 5、fadeIn () / fadeOut ( ) / fadeTo( ) /fadeToggle ( ) 元素执行渐隐渐显效果 我们根据链式语法的特征：

$(".box").click(function(){
$(this).slideUp("slow").show("slow").hide("slow").slideDown("fast").fadeOut(3000
);
})

以上的情况我们看到动画的执行过程是一个同步的过程，但是注意下面的情况

$(".box").click(function(){
$(this).slideUp("slow");
console.log("我在slide后面打印");
})

动画执行是一个异步的过程

如果我们希望上面打印的语句在动画结束之后执行，这个时候jQ所有的

$(".box").click(function(){
$(this).slideUp("slow",function(){
console.log("我在slide后面打印");
})
});

除了上面这些方法之后，还可以调用animate（）方法来完成动画的制作

$(".box").mouseenter(function(){
$(this).animate({
"width":"500px",
"height":"500px"
},1000)
});
$(".box").mouseleave(function(){
$(this).animate({
"width":"300px",
"height":"300px"
},1000)
});

但是animate有个问题，特别是在制作可以反复多次触发的动画时，当触发的频率大于动画制作的时， 动画的制作就会进入一种排队的状态，为了避免这种状态我们会使用css方法+过渡样式来完成

Jquery CSS方法

JQ提供很多操作元素css的方法 在原生的DOM当中classList.add（）/ classList.remove（），style属性的赋值， window.getComputedStyle( ) 1、addClass（）添加一个class 2、removeClass（）移除一个class 3、toggleClass（）切换一个class 4、css（）可以获取当前元素的样式，也可以设置当前元素的样式 我们主要看css方法 获取样式方法

$(选择器).css(样式属性) //返回当前元素的样式值

设置样式方法

$(选择器).css("样式属性","属性值") //设置一个样式
$(选择器).css({
"样式属性":"属性值",
"样式属性":"属性值"
}) //设置多个样式
$(选择器).css({
backgroundColor:"属性值"
})

JQuery属性方法

1、html（），对元素innerHTML属性进行操作，既可以取值也可以赋值，如果赋值就把值当成参数写

$("div").html("<p>hahahaha</p>") //往div标签内添加子元素
$("div").html() //调出div元素内的子元素

2、text（），对元素的innerText属性进行操作 3、val（）对表单元素的value属性操作 以上3个方法都时参数就时赋值，没有参数就是取值 4、attr（）方法，相当时DOM对象里面的setAttribute（） / getAttribute（）

$("input").attr("type"); //type属性取值
$("input").attr("type","password"); //type属性赋值

5、removeAttr （）方法，相当于DOM对象里面的removeAttribute（）

$("input").removeAttr("placeholder"); //移除placeholder属性

6、prop（），对DOM元素的单属性进行操作

$("input").prop("checked") //获取checked属性值
$("input").prop("checked",false) //对单属性赋值

7、data（），对DOM元素的自定义属性data-的操作

JQuery元素尺寸

1、width () ,相当于content的宽 2、innerWidth（）padding+content的宽，也就是DOM里面的clientWidth 3、outerWidth（）border+padding+content，也就是DOM里面的offsetWidth 4、outerwidth（true） margin+border+padding+content的尺寸

JQueryDOM方法

文档就绪函数

$(document).ready(function(){
$("#btn").click(function(){
alert("haha")
})
})

简化

$(function(){}) // $(document).ready(function(){})