JQuery
-
定义
一个优秀的 Javascript 库 - 库
Library
一种工具，它提供了很多封装好的方法，只需要在使用的时候用少量的代码去调动，不会影响代码结构。这里的控制权在于你，你来决定怎样使用库。
常见库：JQuery - 框架
Framework
一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里的控制权在框架，它来根据具体的应用逻辑来调用你的代码。
常见框架 ：react.js angular.js vue.js backbone.js Bootstrap -
作用
1.操作页面中的元素
2.修改页面的外观
3.改变页面的内容
4.响应用户的页面操作
5.为页面添加动态效果
6.无需刷新页面即可从服务器获取信息
7.简化常见的JavaScript任务 - **
jquery 对象VS.DOM 原生对象**- 定义
DOM原生对象通过原生js获取的dom节点；
jquery对象通过jquery选择器选择的元素； - 区别
DOM原生对象只能使用JavaScript原生的属性和方法；
jquery对象只能使用jQuery中封装好的对象和方法；
两者只能使用各自的方法，可以相互转化。 - 转化
1 $(DOM对象) =jQuery对象
2 由于jQuery对象是一个类数组的对象，因此可以通过下标取得：
2.1jQuery对象[0]=DOM对象
2.2jQuery对象.get(0)=DOM对象
3jQuery对象.eq(0)=jQuery对象的第一个元素
- 定义
-
语法
基础语法：$(selector).action( )
selector是选择器名称类似css选择器，
action是jquery对象的方法。 -
方法
-
绑定事件
-
bind（） （已弃用）
1作用 向匹配元素添加一个或多个事件处理器
2方法 $(selector).bind(event,data,function)
3解除 $(selector).unbind(event,function)
live（） （已弃用）
1作用 向匹配元素添加一个或多个事件处理器
2方法 $(selector).live(event,data,function)
3解除 $(selector).die(event,function)
delegate（）
1 作用：
为（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行
2 用法
单个事件：
$(selector).delegate(childSelector,event,data,function)
多个事件：
$(selector).delegate(childselector,{event1:function, event2:function, ...})
3 解除事件绑定：
$( selector ).undelegate(childselector, event, function );
4 版本
支持jquery 1.4.2+
on（） （推荐使用）
1 作用：
为指定的元素,添加一个或多个事件处理程序，当这些事件发生时运行函数
2 用法
单个事件：
$(selector).on(event,childselector,data,function)
多个事件：
$(selector).on({event1:function, event2:function, ...},childselector);
3 解除事件绑定：
$( selector ).off(childselector, event, function );
4 版本
支持jquery 1.7+
-
显示
hide（speed,callback） 隐藏元素
show（speed,callback）展示元素
toggle（speed,callback）隐藏/展示元素 切换
可选参数speed：规定元素从隐藏到完全可见的速度,默认为0;
可选参数callback：show函数执行完了之后,要执行的函数;
工作原理：修改dom.style.display属性。
展示p1：
$("#btn1").on('click', function(){
$(".p1").show();
});
隐藏p1：
$("#btn2").on('click', function(){
$(".p1").hide();
});
切换：
$("#btn5").on('click', function(){
$(".p1").toggle();
});
-
动画
.animate ({params},speed,callback);
必选参数params定义形成动画的CSS属性。
可选参数speed规定效果的时长。取值：“slow”/“fast”/毫秒。
可选参数callback是动画完成后所执行的函数名称。
$("#btn14").on('click', function(e){
$div3.animate({
width: '200px'
}1000);
});
-
操作元素
.html(null 获取 / string 设置) 获取或设置元素的HTML内容
.text(null 获取 / string 设置) 获取或设置元素的文本内容
<p id="test"> 这是段落中的<b>粗体</b>文本。</p>
获取
$('#test').html() ; // 这是段落中的<b>粗体</b>文本。
$('#test').text(); // 这是段落中的粗体文本
设置
$('#test').html('<span>hello</span>');
$('#test').text('hello');
-
表单
1 **.val( ) ** 获取表单字段的值。
1.1 获取表单元素的值，如input selector textarea；
1.2 获取匹配的元素集合 [0]的当前值，如表单有多个值；
2 .val( string OR array ) 设置表单字段的值。
2.1 设置表单元素的值为字符串；
2.2 设置表单元素的值为数组
3 **.val( function (index , value) ) ** 通过函数设置表单字段的值。
$('input:text.items').val(function(index,value){
retunrn value + ' ' + this.ClassName;
});
-
属性
.atrr( 属性名) 获取匹配的元素集合 [0]的属性值
var $imgSrc=$("img").attr("src");
$("p").text("该图片地址为： "+$imgSrc);
