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属性
- 定义结束样式:
- 用addClass将结束样式追加到class属性中
(...).("height");获得元素的高度, 是在样式中写的,可能是“10px”这样的字符串
$(...).height() 获得元素在页面中的实际高度,无单位。如果用来设置高度值为数字,则默认为px
16-0921pm day02
正课:
- 修改:
样式: - 遍历:
- 插入,删除,替换
- 事件:
1. 修改:
样式:
- 修改css属性: $(...).css()
- 修改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步:
- 创建空元素对象,
- 设置关键属性,
- 添加到父元素下
jq: 2步:
- 创建节点: var
("完整html元素代码段");
- 将节点添加到指定父元素下:
追加: $(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步:
- 创建: var
(html代码段)
- 追加:
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:
- 优化: 创建事件监听对象的个数
delegate: 仅在父元素创建一个事件监听,所有子元素公用
bind: 为每个子元素分别创建事件监听 - 效果:
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
网友评论