JQuery

day01

1. 什么是jQuery:

jQuery是 第三方开发的 —— 先下载才能使用
执行DOM操作的 —— 学jQuery依然在学DOM
极简化的 —— 对DOM API的终极简化
函数库 —— jQuery中一切用函数来实现
为什么: 2个原因:

1. jQuery是DOM操作的终极简化:
   简化了: 增删改查
   事件绑定
   动画
   ajax
2. 解决了大部分浏览器兼容性问题:
   凡是jQuery让用的都没有兼容性问题:
   何时: 几乎所有项目或框架的底层DOM操作，都是由jQuery实现的

2. 如何使用jQuery:

下载: jquery.com
版本: 1.x 兼容IE8
2.x 不再兼容IE8
3.x 不再兼容IE8，增加了新特性
1. 运行在严格模式下
2. 用for of代替了.each()方法
3. 支持Promise
如何使用:
1.先引入jQuery到页面中，再编写自定义js:
<script src="js/jquery-1.11.3.js">
2.只要想使用jQuery简化版API，都要先创建jQuery对象并封装DOM元素对象
2种:
1. 用选择器先查找再创建:
var $btn1=$("#btn1");
2. 如果已经获得DOM元素，可直接封装:
var $btn1=$(this);
什么是jQuery对象: 封装DOM元素对象，并提供操作DOM的简化版API 的类数组对象.
对jQuery对象整体调用API，等效于对内部封装的DOM元素都调用API

jQuery API 三大特性: 
1. 自带遍历效果: 对整个jQuery对象调用一次API，等效于自动对内部所有DOM元素都调用API
2. 一个函数两用: 即可获取值，又可修改值
如果调用时，没有给新值，则默认获取
如果调用时，给了新值，则改为修改
3. ?

3. 查询:

1. 按选择器查找: var $elem=$("选择器")
   回顾选择器:
   基本选择器: 5个 同CSS
   #id element .class * selector1,selector2,...

day02

1. 查找:

回顾:
层级选择器: 同CSS
父 后代 父>子 兄+弟 兄~弟
子元素过滤选择器: 同CSS
按元素在其父元素中的相对位置选择元素
下标i从1开始
:first-child :last-child :nth-child(n)
偶数行:tr:nth-child(2n) //even
基本过滤选择器: jQuery新增的
打破父元素的界限，按绝对位置选择元素
下标i从0开始
:first/last :even/odd :eq/gt/lt(i)
属性过滤选择器: 同CSS
[属性名] [属性名=值] [属性名^=开头]
[属性名$=结尾] [属性名*=内容] [属性名!=值]
可见性过滤: jQuery新增
:hidden 匹配隐藏的元素
display:none
visibility: hidden
opacity:0
<input type="hidden">
:visible 匹配显示的元素
内容过滤: jQuery新增
:contains(文本) 匹配元素的内容中包含指定“文本”的元素
:has(选择器) 匹配包含满足选择器要求的子元素的父元素
:parent 选择内容非空的元素
:empty 选择内容为空的元素
状态过滤: 同CSS
:enabled :disabled :selected :checked
表单元素过滤: jQuery新增:
:input 匹配所有表单元素: input select textarea button
:[type] 匹配type为指定类型的input元素:
:text<input type="text">
:password <input type="password">
:…

2. 修改:

内容: 3种:

1. 原始HTML片段: .innerHTML
$elem.html(["html片段"]) 一个函数两用
2. 纯文本内容: .textContent
$elem.text(["文本内容"]) 一个函数两用
3. 表单元素的值:.value
$elem.val(["值"]) 一个函数两用
   属性:
   核心DOM API:$elem.attr("属性名"[,"属性值"])一个函数两用
   HTML DOM API: $elem.prop("属性名"[,"属性值"])一个函数两用
   1. HTML标准属性:
      2种:
      1. 核心DOM: getAttribute() setAttribute()
      2. HTML DOM: .属性名 .属性名=值
   2. 状态属性
      1. HTML DOM: .状态属性
   3. 自定义扩展属性:
      1. 核心DOM:getAttribute() setAttribute()
         问题: 一次只能修改一个属性，如果同时修改多个属性时，代码会很繁琐:
         解决: 同时修改多个属性:

 $elem.attr/prop({
   
     属性:值,
      ... : ...
   })

样式:

jQuery API 三大特性:

1. 自带遍历效果
2. 一个函数两用
3. 多数函数都返回正在操作的jQuery对象本身

day03

1. 修改:
   样式:
   $elem.css("css属性"[,值]) //单个数值的属性值不用加单位
   修改样式: elem.style.css属性=值
   获取样式: getComputedStyle()
.css()一次只能修改一个css属性。
   如果同时修改多个css属性:

  .css({
   
       css属性名:值,
         ... : ...
     })

 css属性名必须去横线变驼峰

问题: 如果同时修改多个css属性，用.css()代码繁琐
解决: 用操作class来批量修改样式

  <button class