JQuery & DOM事件

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.1 jQuery对象[0]= DOM对象
    2.2 jQuery对象.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);

• 应用
  • demo 1 二级菜单展示
  • demo 2 tab组件
• demo 3 加载