jQuery中基本操作: 操作元素-02

16-0921am day02

1. 操作元素:

1.1操作元素属性(attr prop)

attr: 在开始标签中显式定义的属性

读: $("selector").attr("属性名")=>(相当于) getAttribute("属性名")
改: $("selector").attr("属性名",值)=>(相当于) setAttribute("属性名",值);
改多个属性值: $("selector").attr("属性名":值,"属性名":值)=>(相当于) setAttribute("属性名",值);

问题: 无法访问不在开始标签中的内存中的prop属性(比如: checked selected disabled),解决方法如下

读取不在开始标签中定义的内存中的元素属性prop

两用:

读: $("selector").prop("属性名")=>(相当于) elem.属性名
改: $("selector").prop("属性名",值)

移除属性(了解):

$(...).removeAttr("属性名")=>(相当于) removeAttribute("属性名");

总结: jquery中很多方法都是两用: 如果不提供新值，就读取；如果提供新值，就修改

1.2操作元素内容:

html原文:

读: $(...).html()                  elem.innerHTML
改: $(...).html('html片段')  elem.innerHTML='html片段'

简便: 清空元素内容:

$(...).empty();                   elem.innerHTML="";

纯文本

读: $(...).text()                   elem.textContent/innerText
改: $(...).text('文本')  

表单元素的value

读: $(...).val()
改: $(...).val(值)

1.3操作元素的样式:

1. 直接操作CSS属性:

$(...).css("css属性名") => getComputedStyle()
$(...).css("css属性名",值) => elem.style.css属性名=值
同时修改多个属性值:$(...).css({"属性名1":值1, "属性名2":值2, ...})

例子：
$(".footer").css("font-size","14px");
$(".footer").css(fontSize,"14px");

总结: css()能读所有属性，但只能改内联样式中的属性(强调: 不想写双引号时，属性名都要去横线变驼峰)

2. 修改class属性:

完整修改class属性:

$(...).attr("class","类名")

追加class属性:

$(...).addClass("类名")
class="cell" : $(...).addClass("n8")  => class="cell n8"

移除class属性:

$(...).removeClass("类名") //如果移除多个中间用逗号隔开
class="cell n8": $(...).removeClass("n8")=>class="cell"

清除class:

$(...).attr("class","")或$(...).removeClass();

判断是否包含指定class:

$(...).hasClass("类名") //返回布尔值

技巧: 因为class有时容易发生变化，所以，如果class有可能发生变化时，尽量不要用class查找。
解决: 可使用自定义属性来保存固定值作为查找条件

练习:
补:

获得父元素:
DOM: elem.parentNode
elem.parentElement
jq: $(...).parent()

获得兄弟元素:
DOM: elem.nextElementSibling
elem.previousElementSibling
jq: (...).prev();

过渡: transition
3步: 1. 定义开始样式: 同时定义transition属性

2. 定义结束样式:
3. 用addClass将结束样式追加到class属性中

(...).("height");获得元素的高度， 是在样式中写的，可能是“10px”这样的字符串
$(...).height() 获得元素在页面中的实际高度，无单位。如果用来设置高度值为数字，则默认为px

---

16-0921pm day02
正课:

1. 修改:
   样式：
2. 遍历:
3. 插入,删除,替换
4. 事件:

1. 修改:

样式:

1. 修改css属性: $(...).css()
2. 修改class:

$(...).addClass()  $(...).removeClass() $(...).hasClass()
$(...).toggleClass("类名"): 在有或没有指定类名之间切换。

2. 遍历节点: 节点间关系

1. 父子关系:

$(...).parent()
$(...).children([selector]) 只获得直接子元素//[]中括号代表可有可无
$(...).find(selector) 获得所有子代元素 //比DOM多出的方法

强调: children可不加selector，但find必须加selector

2. 兄弟关系:

$(...).next([selector])  下一个兄弟元素// 一般都不加selector意义不大
$(...).prev([selector])  前一个兄弟

强调: 如果加selector，必须满足:1. 必须是相邻，2. 必须满足selector的要求 $(...).siblings([selector]) 其它兄弟

3. 添加，删除，替换:

添加:

DOM: 3步:

1. 创建空元素对象，
2. 设置关键属性,
3. 添加到父元素下

jq: 2步:

1. 创建节点: var ("完整html元素代码段");
2. 将节点添加到指定父元素下:

追加: $(parent).append($elem); 追加到parent下的所有子节点末尾——appendChild
插入: $(parent).prepend($elem); 作为parent下的第一个子节点插入
$(child).after($elem); 插入到child之后
$(child).before($elem); 插入到child之前

删除:

$(要删除的元素).remove();

强调: 删除时，不必查找父元素

替换和复制(clone):

替换: (新元素).replaceAll(old)
复制: var (...).clone()

浅克隆: 仅复制普通属性，不复制事件处理函数$(...).clone(true)
深克隆: 不但复制普通属性，而且还复制事件处理函数

总结: jQuery是对DOM操作的终极简化函数库(学jQuery，其实还是在学DOM)

查找——选择器
修改:
属性: attr() prop()
内容: html() text() val() empty()
样式: css()
addClass() removeClass() hasClass() toggleClass()
添加: 2步:

1. 创建: var (html代码段)
2. 追加: elem); ...
   删除: remove();
   克隆: clone([true])
   以上是jQuery的核心和本质
   以下是jQuery的扩展部分: 1. 事件绑定，2.动画, 3.AJAX封装

4. 事件处理:

鄙视题: jQuery有几种绑定事件处理函数的方法，有什么区别:

1.bind

$(...).bind("事件名",fn)->addEventListener

特点: 为同一个元素的事件处理函数绑定多个函数对象

$(...).unbind("事件名",fn)->removeEventListener

强调: 如果有可能移除事件处理函数，则绑定时，必须用有名的函数绑定，不能用匿名函数。

重载1: 不带任何参数: 移除元素上所有事件处理函数绑定
重载2: 只带一个事件名称参数: 移除元素上指定事件名称绑定的所有函数对象
重载3: 带两个参数: 仅移除事件元素上指定事件名称绑定的执行的一个函数对象。

问题: 只能为页面上现有的元素绑定事件，动态新添加的元素无法自动绑定事件处理函数(解决: delegate)

2. 事件代理: 让指定父元素下，所有符合要求的子元素，都能使用事件处理函数。（包括已有的元素和新生成的元素）

原理: 利用冒泡:
1. 仅将事件处理函数绑定在父元素上一次
2. 获得目标元素: e.target
3. 仅响应符合条件的元素的事件
优: 减少事件监听的个数
可让后生成的新元素自动响应事件
何时: 只要希望一个父元素下指定的所有子元素都能响应事件时
如何使用:

$(parent).delegate("selector","事件名",fn)
  将事件绑定到parent上（利用冒泡）
      只有符合selector条件的元素才能响应事件
    其中: fn: function(e){e.target//获得目标元素}
$(parent).undelegate("selector","事件名",fn)

delegate vs bind:

1. 优化: 创建事件监听对象的个数
   delegate: 仅在父元素创建一个事件监听，所有子元素公用
   bind: 为每个子元素分别创建事件监听
2. 效果:
   delegate: 新生成的子元素也可自动共享父元素的事件
   bind: 新生成的子元素无法自动获得事件处理函数

3. 一次性事件: $(...).one("事件名",fn)

只能执行一次事件处理函数，执行后，自动解除绑定

4. $(...).live("事件名",fn), 本质:同delegate

问题: 极端，将所有元素的所有事件集中绑定到document
$(...).die("事件名",fn), 本质:同undelegate

5. 终极简化:

问题: 仅为一个元素绑定事件处理函数: bind，利用冒泡: delegate
解决: 统一成了on

1. 仅为一个元素绑定事件处理函数: 
$("target").on("事件名",fn)
2. 利用冒泡:$("parent").on("事件名","selector",fn)

解除绑定: off(...)

6. 简写: $(...).事件名(function(){...})

问题: 仅少量常用的事件，可简写，如果遇到无法简写的事件，就要用on