jQuery学习笔记

DOM对象与jQuery对象？

• dom对象转jquery对象: $(dom对象)
• jquery对象转dom对象：$(‘div’)[0]

常用方法

• 设置获取文本内容 => $().text()
  • 获取标签中的所有文本，包括后代元素中的文本
  • 设置时，会覆盖原来的内容，如果设置的文本中包含标签，则不会把这个标签给解析出来
• 设置获取样式 => $().css()
  • 获取，如 $(’#div’).css(‘backgroundColor’);
  • 设置，如 $(’#div’).css(‘width’, ‘200px’);
  • 设置多样式，传个对象，如:

  •   	$('div').css({   // 会有隐式迭代
      		'width': '20px',
      		'height': '30px'
      	}):
    

• val(); 获取或设置表单内容

选择器

• 并集选择器: $(".box1, .box2")
• 交集选择器: $(“li.class”)
• 层次选择器
  • 子代选择器（只差一级）：$("#father > div")
  • 后代选择器（包含所有包在里面的）：$("#father div")
• 过滤选择器（注意：以下案例从0开始）
  • $(‘li:odd’): 取奇数行 (从1开始)
  • $(‘li:even’): 取偶数行（从0开始）
  • $(‘li.eq(0)’): 取第一个
  • $(‘option:selected’): 选取被选中的option
• 筛选选择器
  • $(‘ul’).children(‘li’): 子类选择器
  • $(‘ul’).find(‘li’): 后代选择器
  • $(’#first’).siblings(‘li’): 查找兄弟节点，不包括自身
  • $(’#first’).parent()：查找父亲节点
  • $(‘li’).eq(2): 查找第三个li，从0开始
  • $(‘li’).next(): 找下一个兄弟
  • $(‘li’).prev(): 找上一个兄弟

事件

• 鼠标移动事件
  • mouseover(): 在鼠标移动到选取的元素及其子元素上时触发
  • mouseenter(): 只在鼠标移动到选取的元素上时触发（推荐使用）
  • mouseout()：子元素冒泡
  • mouseleave(): 子元素不冒泡（推荐使用）
• 滚动事件：scroll();
• 键盘按下事件：keyDown();

类操作

• 添加单个类：addClass(‘width100’)
• 添加多个类（中间用空格隔开）：addClass(‘width100 height50’)
• 移除单个类：removeClass(‘width100’)
• 移除多个类（中间用空格隔开）：removeClass(‘width100 height50’)
• 移除所有类：removeClass()
• 判断类：hasClass(‘width30’) => return boolean
• 切换类（如果元素没有某个类，则添加类；如果有的话，则删除类）：toggleClass(‘height200’)

动画

三组基本动画

都有两个参数

• show(2000)显示、hide(2000)隐藏、toggle()切换
  • 想要动画效果，就必须要给他参数
• slideDown(参数1, 参数2)滑入、slideUp()滑出、slideToggle()切换
  • 参数1：动画执行的时长
  • 参数2：动画执行完毕后的回调函数
• fadeIn()淡入、fadeOut()淡出、fadeToggle()切换

自定义动画

• animate({params}, [speed], [easing], [callback]);
  • {params}：要执行动画的CSS属性，带数字（必选）
  • speed：执行动画时长（可选）
  • easing：执行效果，默认是swing（缓动），也可以是linear（匀速）
  • callback：动画执行完后立即执行的回调函数（可选）

停止动画(与动画队列使用)

动画队列：说白了就是有好几个动画前后顺序进行

• stop(参数1, 参数2)
  • 参数1：boolean类型，是否清除队列
  • 参数2：boolean类型，是否跳转到最终效果

动态创建元素

• html()方法
  • 不给参数时，获取内容，包括文本以及标签
  • 给参数时，设置内容，会覆盖，而且会解析标签
• $()方法
  • 创建的元素只存在于内存中，如果要在页面上显示，就要追加（append()方法）

节点操作

• 添加节点
  1. append()方法：将已经存在的元素添加（添加在最后），作为子元素添加
  2. prepend()方法：新建元素添加，也可以将已经存在的元素剪切添加（添加在最前面），作为子元素添加
  3. before()方法：元素a.before(元素b)。把元素b插入到元素a的前面，作为兄弟元素添加
  4. after()方法：元素a.after(元素b)。把元素b插入到元素a的后面，作为兄弟元素添加
  5. appendTo()方法：子元素.appendTo(父元素)。也是添加到最后
• 清空节点：
  • html(’’):也可以实现清空，但是如果元素有绑定了事件的话，有可能会造成内存泄漏，不安全。(推荐使用)
  • empty(): 移除所有。（推荐）
• 移除某个节点（自杀）：remove()
• 克隆节点：clone(参数)
  • 参数类型为boolean，不管是true还是false，都是会克隆到后代节点的。

属性操作

• 设置单属性：attr(‘src’, ‘log2.png’);
• 设置多属性（传个对象）:attr({width: ‘450px’, height: ‘200px’});
• 获取属性：attr(‘src’);
• 移除单个属性：removeAttr(‘src’);
• 移除多个属性：removeAttr(‘src aaa bbb’);
• 设置布尔类型属性：
  • prop(‘checked’, true);
  • prop(‘selected’, true);
  • prop(‘disabled’, true);

尺寸和位置操作

• width()和height(): 设置或获取高度，不包括内边距、边框和外边距
• innerWidth()和innerHeight(): 包括内边距
• outerWidth()和outerHeight(): 包括内边距和边框
• outerWidth(true)和outerHeight(true): 包括内边距和边框和外边距
• $(window).height()和$(window).width()：获取页面可视区域宽高
• offset(): 获取元素距离document的位置，得到一个对象，对象里面包含了top和left的值
• position(): 获取元素距离有定位的父元素的位置，同样也是得到和offset()方法一样得到的对象
• 设置或者获取垂直滚动条的位置
  • scrollTop(): 获取页面被卷曲的高度
  • scrollLeft(): 获取页面被卷曲的宽度

jquery事件发展历程

1. 简单事件绑定：click();
   – 不支持同时注册，也不支持动态注册
2. bind()方式注册
   – 支持同时注册，也不支持动态注册
3. delegate(): 注册委托事件（原理：事件冒泡）
   – 支持同时注册，也支持动态注册
4. on(): 统一注册事件1.7之后（推荐使用，前面了解即可）
   – on(‘click’, function(){}); 不支持动态注册
   – $(父元素).on(‘click’, ‘子元素’, function(){}); 委托支持动态注册

事件解绑

• off();

触发事件:用代码的方式触发事件

• trigger();

jQuery事件对象

• jQuery中用事件参数e来获取
• jQuery的事件对象是对原生js事件对象的一个封装（处理好了兼容性）
• 阻止事件冒泡：e.stopPropagation();
• return false; 既能阻止事件冒泡，又能阻止默认行为

链式编程：只要返回jquery对象即可继续链式。

• end()：将jquery对象回到上一个状态
• each()迭代：

$('ul>li').each(function (index, item) {
	console.log(index);  // 每一个li标签的索引
	console.log(item);	 // 每一个li标签,DOM对象
});

补充：

• 自执行函数

$(function () {}());

• 项目启动便执行

$(document).ready(function () {});