《JQuery实战》总结

1.概念

jQuery是一个快速、简介的JavaScript框架。设计宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。用来封装JavaScript常用的代码功能，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

核心特性可以总计为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展，拥有便捷的插件扩展机制和丰富的插件。

2.JQuery的特点

用简洁的代码完成尽可能多的工作
改变JavaScript的书写方式
支持主流浏览器，包括IE6以上、Firefox2以上、safari2以上和opera9以上版本
以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对齐进行操作
屏蔽浏览器的差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API
强大的插件机制
社区活跃，文档齐全且配有示例。学习容易，易用性高

3.JQuery使用

jQuery===$  //就是一个函数，可以获取元素，创建元素

使用JQuery步骤

/*引入jquery文件*/

/*入口函数*/
$(function(){...})
jQuery((function){...})
$(document).ready(function(){...})

DOM对象和jQuery对象互换

/*DOM 使用原生的js的方法获取到的对象，DOM对象只能使用DOM的属性和方法*/
var btn = document.getElementById("btn");
window.onload=function(){...}

/*jQuery对象 jQuery对象   是一个包装集  相当于是伪数组的意思*/
var $btn = $("btn")
$(window).load(function(){...})

/*DOM ==> jquery 不需要双引号*/
$(DOM)

/*jQuery ===》DOM对象 就是加上索引值*/
$btn[0]
$btn.get(0)

text文本内容

/*text() 获取和设置文本内容，只会获取内容，不会获取标签*/

//获取文本内容
var txt = $("div").text()

//设置文本内容
$("div").text("这是用jQuery的方式来设置的文本内容")  //标签不会进行渲染

样式

/*获取样式*/
$("div").css("width");

/*设置样式*/
$("div").css("width","600px")
$("div").css({width:"200px",height:"200px"})  //设置多个的时候

/*操作类样式*/

//addClass() 添加类(类名)，不会覆盖开始的类名
$("div").addClass("demo")  //div盒子增加了demo类名

//removeClass() 移除类样式
$("div").removeClass("demo");

//hasClass() 判断类样式，返回值是true或者false
if($("div").hasClass("demo")){
  console.log(123);  //如果div盒子有demo样式，就打印123
}

//toggleClass() 切换类样式 有类则删除，没有则添加
$("div").toggleClass("demo");

事件

/*on() bind() delegate()注册事件 trigger()触发事件*/

//on的注册事件和解绑事件，一般用这,隐藏冒泡印象，但是托表会有影响
$("ul").on("click",function(){
    console.log("常规事件注册")
})
$("ul").on("click","li",function(){
    $(this).index()  //获取当前的索引值
    console.log("事件委托选项卡常用的事件")
})

//on的方式事件解绑
obj.off()  //解绑所有的事件
obj.off("mouseenter")  //所有的对应的参数的事件
obj.off("click","**")  //解绑代理的事件，自身注册的事件不受印象

//trigger() 触发某哥盒子的事件
obj.trigger("click")  //触发obj的单击事假，其他事件也是类似的

//bind()可以给同一个事件源，绑定多个相同的事件，不支持给动态创建的元素注册事件
$("div").bind("click mouseenter",function(){
  console.log(123);
})

//unbind的解绑事件，不支持给动态创建的元素注册事件
$("div").unbind()  //解绑所有的事件
$("div").unbind("click")  //解绑对应参数的事件

//delegate()注册事件，支持给动态创建的元素注册事件
$(document.body).delegate("div","click",function(){
  console.log(123);
})

//undelegate()解绑对应参数的事件
$("div").undelegate("click");  //解绑对应参数的事件

/*事件名称*/
mouuseenter()  //鼠标移入
mouseleave()   //鼠标移出
hover(function(){...},function(){...})  //鼠标移入和鼠标移出
focus()  //获得焦点
blur()   //失去焦点
scroll  //鼠标滚动事件

//阻止冒泡  e.stopPropagation()
$("fatherdiv").on("click",function(){
  console.log(123);
})
$("sondiv").on("click",function(e){
  e.stopPropagation();  //阻止父盒子的单击事件，自己注册事件
})

//禁止盒子滑动，并且子盒子可以滑动
$(".father").on("touchmove", function(e) {
    e.preventDefault();
});

$(".father .son").on("touchmove", function(e) {
    e.stopPropagation();
});

动画


/*显示和隐藏 show()显示 hide()隐藏 toggle()切换*/
$("div").show(2000)  //共2000毫秒显示
$("div").hide(2000,function(){
  console.log(123);  //共2000毫秒隐藏，隐藏后打印出123
})
$("div").toggle(2000)  //如果是显示就隐藏，如果是隐藏就显示

/*划入和滑出,支持事件和回调函数 slideDown()划入显示 slideUp()滑出消失 slideToggle()切换划入和滑出*/
$("div").slideDown(2000)  //划入，显示出来，在顶部向下划入，在底部向下划入
$("div").slideUp(2000)    //滑出，让盒子消失
$("div").slideToggle()    //切换划入和滑出

/*淡入和淡出，就是不透明度的改变，支持事件和回调函数*/
$("div").fadeIn(2000)  //淡入，就是不透明度慢慢增大，2000毫秒走完
$("div").fadeOut(2000)  //淡出，就是不透明度慢慢减小
$("div").fadeTo("opacity","0.6")  //直接到指定透明度，在一次设置淡入和淡出都是以opacity为准
$("div").fadeToggle()  //切换淡入和淡出

/*运动 linear匀速运动 swing曲线运动*/
$("div").animate({left:800},2000,"linear",function(){
  console.log(123);  //盒子向右匀速移动800px，2000毫秒走完，并走完后打印出123
})

元素处理
- 添加元素

$("元素").append()      在被选元素的结尾插入内容
$("元素").prepend()     在被选元素的开头插入内容
$("元素").after()       在被选元素之后插入内容
$("元素").before()      在被选元素之前插入内容

删除元素

$("元素").remove()     删除被选元素（及其子元素）
$("元素").empty()      从被选元素中删除子元素
其中,remove() 方法也可接受一个参数，允许对被删元素进行过滤
比如,删掉 class="a" 的所有 <p> 元素：
$("p").remove(".a");

遍历元素

遍历祖先:
$("元素").parent()     //返回被选元素的直接父元素
$("元素").parents()   //返回被选元素的所有祖先元素
$("元素").parentsUntil()   //返回介于两个给定元素之间的所有祖先元素
比如,返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$("span").parentsUntil("div");

过滤元素

$("元素").first()     //返回被选元素的首个元素
$("元素").last()      //返回被选元素的最后一个元素
$("元素").eq()       //返回被选元素中带有指定索引号的元素
$("元素").filter()    //匹配的元素会被返回,不匹配的元素将会从集合中删除
比如:带有类名 "url" 的所有 <p> 元素：$("p").filter(".url");
$("元素").not()     //返回不匹配标准的所有元素
比如:返回不带有类名 "url" 的所有 <p> 元素：$("p").not(".url");

4.别人的导图

5.emmmmm

《JQuery实战》总结

猜你喜欢