笔记: jQuery---01入门篇

jQuery优点

1. 轻量级。核心文件才几十kb，不会影响页面加载速度
2. 链式编程、隐式迭代
3. 对事跨浏览器兼容。基本兼容了现在主流的浏览器
4. 样式、动画支持，大大简化了DOM操作
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
6. 免费、开源

官方下载

下载官网地址： https://jquery.com/
1X: 兼容IE678
2X, 3X: 不兼容IE678
目前官方只维护3X

入口函数

写上入口函数，js脚本不会阻断HTML的解析，而是先渲染页面再进行js的解析，增加了script标签位置的可选择性, 不过最好还是把script标签放在body标签内的最后面

注意: 等DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成, 不同于原生js中的lode事件

(推荐)第一种

$(function () {
… // 此处是页面 DOM 加载完成的入口
}) ;

第二种

$(document).ready(function(){
… // 此处是页面DOM加载完成的入口
});

基本使用

1、顶级对象$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 符号
2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2、jQuery 对象和DOM对象

jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）

DOM 对象转换为 jQuery 对象

$(DOM对象) //Dom对象不加引号

jQuery 对象转换为 DOM 对象

$(‘div’) [index] //index 是索引号
$(‘div’) .get(index) //index 是索引号

获取元素

选择器

语法:  $('选择器');  // 直接写 CSS 选择器即可，要加引号

• $(’#id’) -------------->指定id元素(id选择器: #)
• $(’*’) -------------->所有元素(通配符选择器: *)
• $(’.class’) -------------->指定class元素(类选择器: .)
• $(‘div’) -------------->根据标签获取元素(标签选择器: 标签名)
• $(‘div,p,li’) -------------->获取多个(并集选择器: ,)
• $(‘li.class’) -------------->交集获取(交集选择器)
• $(‘ul>li’) -------------->子代(子代选择器: >)
• $(‘ul li’) -------------->后代(后代选择器: 空格)

筛选选择器

• $(‘li:first’) --------------> 第一个元素
• $(‘li:last’) --------------> 最后一个元素
• $(‘li:eq(2)’) -------------->索引为2【查找指定索引的元素】
• $(‘li:odd’) -------------->索引为奇数, 偶数行
• $(‘li:even’) -------------->索引为偶数, 奇数行
  注意：索引是从0开始的

（重点）jQuery 筛选方法

语法:  $('选择器').方法()  

• $(‘li’).parent() --------------> 父级
• $(‘li’).parents(‘父选择器’) --------------> 所有父级
• $(‘ul’).children(‘li’); --------------> 子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
• $(‘ul’).find(‘li’) --------------> 后代
• $(‘li’).siblings(‘li’) --------------> 兄弟
• $(‘li’),nextAll(); --------------> 后面的
• $(‘li’).prevAll(); --------------> 前面的
• $(‘div’).hasClass(‘类名’) -------------->判断是否具有某个类名 //不带 .
• $(‘div’).eq(index); -------------->指定索引方法【eq推荐用方法】

jQuery事件

事件注册

语法： 元素.事件类型(function(){});

on() 绑定事件

语法1： 元素.on(‘事件类型’,[selector],处理程序);
参数: 1.事件类型 2.选择器(可选参数) 3.事件处理程序

• on()的优势1
  可以同时绑定多个事件
  语法2： 元素.on({‘事件类型’ : 处理程序, 事件类型 : 处理程序;
  语法3: 元素.on(‘事件类型1 事件类型2’, 处理程序);
• on()的优势2
  事件委托: 给父元素添加事件, 第二个参数写是谁在委托
  语法: $(‘ul’).on(‘click’, ‘li’, function() {});
  事件委托: on() 可以给动态生成的元素绑定事件

off()移除事件

• off() 方法可以移除通过 on() 方法添加的事件处理程序
  语法: 元素.off(); //解绑所有事件
• 括号内可以写参数, 参数为事件类型
  语法: $(“ul”).off(“click”, “li”); // 解绑事件委托

one()绑定一次性事件

语法： 元素.one(‘事件类型’,处理程序);

trigger()自动触发事件

元素.click(); // 第一种简写形式
元素.trigger(‘事件’);//第二种自动触发模式
元素.triggerHandler(‘事件’); // 第三种自动触发事件【不会触发事件元素的默认效果】

事件对象

语法： 元素.事件类型(function(event){}); //event事件对象
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

样式和动画

样式操作

设置行内样式

• 设置单个样式
  $(‘div’).css(‘属性’, ‘值’);
• 获取样式的属性值
  $(this).css(‘color’);
• 修改多个样式
  $(this).css({ color:“white”,fontＳize:“20px”});

设置类样式方法

注意: 操作类里面的参数(选择器)不要加点

• 添加类
  $(‘div’).addClass(‘current’);
• 移除类
  $(‘div’).removeClass(‘current’); //不加参数, 全部移除
• 切换类
  $(‘div’).toggleClass(‘current’);

动画效果

调用动画的方法的时候, 可以传三个参数, 
第一个: 时间,(预定速度slow, normal, fast) 单位是毫秒, 
第二个: 动画速度速度(默认swing, linear), 
第三个: 回调函数(动画完成时执行)

显示隐藏效果

无动画效果

• 隐藏元素
  hide();
• 显示元素
  show();
• 切换元素的显示与隐藏
  toggle(); //隐藏和显示来回切换

滑动效果

• 下滑、显示
  slideDown();
• 上滑、隐藏
  slideUp();
• 切换
  slideToggle();

淡入淡出效果

• 淡入、显示
  fadeIn();
• 淡出、隐藏
  fadeOut();
• 切换
  fadeToggle();
• 手动设置透明度
  fadeTo(0, opacity); //opacity 0~1必写参数, 占住时间参数位

自定义动画 animate

• animate(params); //要修改的样式属性, 以对象形式传递

  注意: 动画animate不可以改颜色, 希望接受的值为大小值

属性、文本操作

固有属性操作

• 获取固有属性
  语法: $(‘选择器’).prop(‘属性’);
• 设置固有属性值
  语法: $(‘选择器’).prop(‘属性’, ‘属性值’);
  如果没有该属性, 会自动添加

自定义属性操作

• 获取自定义属性
  语法: $(‘选择器’).attr(‘属性’);
• 设置自定义属性值
  语法: $(‘选择器’).attr(‘属性’, ‘属性值’);

data属性

• 设置附加数据
  语法: data(‘name’,‘value’);
• 获取数据
  语法: date(‘name’);

内容文本值

• 获取普通元素内容, 类似原生: innerHTML
  语法: html();
• 设置普通元素内容
  语法: html(‘内容’);
• 获取普通元素文本内容, 类似原生: innerText
  语法: text();
• 设置普通元素文本内容
  语法: text(‘内容’);
• 获取表单的值, 类似原生: value
  语法: val();
• 设置表单的值
  语法: val(‘内容’);
• 同时获取表单的所有数据, 返回数组对象
  语法: $(‘form’).serializeArray();

元素操作

jQuery 隐式迭代是对同一类元素做了同样的操作。
如果想要给同一类元素做不同操作，就需要用到遍历

遍历元素

语法：$(‘元素’).each(function(索引, 当前项) {}); //DOM对象

遍历数据

语法：$.each(对象，function(索引, 当前项){});

添加元素

内部添加:父子关系

• 放入到元素内容的最后面

1. jq对象元素.append(‘内容’);
2. 内容.appendTo(‘jq对象元素’);
   注意: 如果是文档中已有的元素, 那么该方法就是移动元素, 如果是新创建的元素, 那么就是添加元素

• 到元素内容的最前面

1. jq对象元素.prepend(‘内容’);
2. 内容.prependTo(‘jq对象元素’);

外部添加:兄弟关系

• 把内容放入目标元素后面
  元素.after(‘内容’);
• 把内容放入目标元素前面
  元素.before(‘内容’);

删除元素

• 删除匹配的元素包含自身
  元素.remove();
• 删除匹配的元素集合中所有的子节点
  元素.empty(); //只剩下本身
• 清空匹配的元素内容
  元素.html(’’);

克隆元素

• 元素.clone().appendTo(‘jq对象元素’); 有true, 克隆元素带事件

其他操作

释放$符号

多库共存, 在引入多个库(封装好的一些方法)的情况下$冲突
语法: var jq = $.noConflict(); //可以定义变量进行替换

合并对象

语法: $.extend(对象,对象);把后面对象的值,赋值给前面的对象可以借助$.extend进行深浅拷贝: 深拷贝在第一位参数加上true, 浅拷贝不加参数