Jquery入门一

Jquery入门一

一、框架及选择
框架是对种种功能的封装和抽象，使其在使用的时候，具有简便性和兼容，并且可以扩展框架中的内容。
框架有很多，如JQuery、Bootstrap、angular.js、Vue等等。这里因为个人学习需求学习JQuery和Bootstrap，优先学习JQ是因为它拥有便捷的插件扩展机制和丰富的插件，个人比较喜欢各种各样B格高的动画，相比之下Bootstrap是依赖jquery写的扩展，你要使用bootstrap，必须要先引入juqery你不引入jquery，bootstrap的功能你还不能使用。
总的来说，JQuery就是一个JS模板库，把我们常用的一些功能进行了封装，方便我们来使用，提高我们的开发效率。而Bootstrap是一个开发框架，集成了很多现成的网页格式和网页布局，封装了很多CSS样式和JS代码，可以拿来直接使用，只需要把对应的内容替换掉。
jquery是js脚本库，主要是通过简化js操作html元素及前端数据的。
bootstrap是前端页面设计的显示框架，bootstrap 个人感觉像是样式库 + 一堆jQuery插件。

二、Jquery（http://jquery.com/）

1、JQ简单介绍
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、JQ的特点
（1）快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
（2）提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效.
（3）增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
（4）更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

三、JQ的使用（初学较浅显）

1、源文件包
对应的源文件分为带min和不带min两种，带min的为压缩版本，没有的为正常版本，我们日常敲代码的时候使用两种版本都可以，但是项目上线的时候最好使用压缩。

2、版本问题
1.x版本，兼容IE6、7、8
2.x版本，不兼容IE6、7、8

3、JQ的入口函数
4、事件监听（与JS的区别）
（1）事件源
JS：docoment.getElementById(“id”);
JQ: $(“#id”);
（2）事件
JS: docoment.getElementById(“id”).onclick
JQ: KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).click （3）事…(“#id”).click（function(){ // 语句}）;
5、JQ控制CSS
1、获取和设置样式

$("#tow").attr(“class”)获取ID为tow的class属性

$("#two").attr(“class”,“divClass”)设置Id为two的class属性。

2、追加样式

$("#two").addClass(“divClass2”)为ID为two的对象追加样式divClass2

3、移除样式

$("#two").removeClass(“divClass”)移除 ID为two的对象的class名为divClass的样式。

$(#two).removeClass(“divClass divClass2”)移除多个样式。

4、切换类名

$("#two").toggleClass(“anotherClass”) //重复切换anotherClass样式

5、判断是否含有某项样式

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲two").hasClass(…("#two").is(".another");

6、获取css样式中的样式

$(“div”).css(“color”) 设置color属性值. $(element).css(style)

设置单个样式

$(“div”).css(“color”,“red”)

设置多个样式

$(“div”).css({fontSize:“30px”,color:“red”})

$("div").css("height","30px")==$(“div”).height(“30px”)

$("div").css("width","30px")==$(“div”).height(“30px”)

7.offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回对象包含两个属性,即top和left 。

注意：只对可见元素有效。

var offset=$(“div”).offset();

var left=offset.left; //获取左偏移

var top=offset.top; //获取右偏移

8、position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性即top和left。

9、scrollTop()方法和scrollLeft()方法

$(“div”).scrollTop(); //获取元素的滚动条距顶端的距离。

$(“div”).scrollLeft(); //获取元素的滚动条距左侧的距离。

10、jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。区别是：

toggle：动态效果为从右至左。横向动作。

slideToggle：动态效果从下至上。竖向动作。

比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

$(‘input’).attr(“readonly”,true)//将input元素设置为readonly
$(‘input’).attr(“readonly”,false)//去除input元素的readonly属性
$(‘input’).attr(“disabled”,true)//将input元素设置为disabled
$(‘input’).attr(“disabled”,false)//去除input元素的disabled属性