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);