jQuery 节点选择器、修改、绑定事件

按节点间关系

何时:如果已经获得一个元素,找周围的元素时

父子: $(child).parent() child.parentNode
$(parent).children([selector]) parent.children

强调:
1.仅查找直接子节点
2.带中括号[ ],表示选择器可用可不用;可用选择器仅选择感兴趣的子节点,但选择器可写可不写
获得parent下直接子元素中符合selector条件的
$(parent).find(selector)
强调:1.不但查找直接子元素,且查找后代元素

选择器必须写

获得parent下所有后代元素中符合selector条件的
$(parent).children().first() parent.firstChild
$(parent).children().last() parent.lastChild
2、兄弟: $(…).prev() 选择和当前元素紧邻的前一个兄弟
强调: 必须紧邻的前一个
$(…).prev([selector])
要求: 必须紧邻的前一个且满足selector
$(…).prevAll([selector])选择当前元素之前的所有兄弟
$(…).next(…)/.nextAll(…)同prev/prevAll
$(…).siblings([selector])除自己之外的所有前后的平级兄弟

修改

内容:

1
2
3
4
$(...).html([html代码片段])-> elem.innerHTML
$(...).text([文本]) ->elem.textContent
$(...).val([值]) -> elem.value
$(...).empty() 清空元素的内容
属性: $(…).attr(“属性名”[,”值”]) -> elem.属性 不写值是获取,写值为修改
移除属性: $(…).removeAttr(“属性名”)
问题: 不能访问三大状态: disabled checked selected
解决: $(…).prop(…)
问题: 一句attr只能修改一个属性
解决: $(…).attr({
属性名: 值,
… : … ,
})
样式:$(…).css(“属性名”[,”值”])
获取:自动获取计算后的完整样式
修改:自动仅修改内联样式
强调: 凡是从页面上获得的属性/样式的值都是字符串
如要计算,必须先转为浮点数,去单位。

我是图片

修改一个css属性: $(…).css(“css属性名”[,”值”])
如果不给值,就获取css属性的值
强调: jq: 修改: $(…).css(…,值) => elem.style.css属性
获取: $(…).css(…) =>getComputedStyle(elem)
同时修改多个css属性:
$(…).css({
css属性: 值,
… : …
})
强调:
1. 所有css属性名都要去横线变驼峰
2. 如果属性值为数值, 可省略引号和单位
问题:要修改的css属性很多,则代码繁琐
解决:今后批量修改css,都要将css集中定义在class中,通过应用class来批量修改css样式

修改class:

1. 为元素添加class : $(…).addClass(“类名”,…)
2. 从元素上移除类名 : $(…).removeClass(“类名”)
3. 判断元素是否包含指定class $(…).hasClass(“class”)
1
2
if($(...).hasClass("class"))$(...).removeClass("class")
else $(...).addClass("class")
4. 切换 $(…).toggleClass(“class”)
toggleClass只适合一个按钮切换class

我是图片

如果没有class为 in 的类,则添加in

添加,删除,替换,复制:

添加: 2步:

1. 使用HTML代码片段创建新元素
1
var $elem=$("html代码片段")
强调:如果代码片段中即包含父元素,又包含子元素,则同时创建
2. 将新元素添加到页面(DOM树)
1. 向父元素下添加子元素:
1
2
$(parent).append($elem) 末尾追加
$(parent).prepend($elem) 开头插入
2. 在现有子元素前后插入:
1
2
$(child).after($elem) 在child之后插入elem
$(child).before($elem) 在child之前插入 elem

我是图片

删除: $(…).remove([selector])

替换:

1
2
3
4
$("selector").replaceWith($elem/"HTML片段")
用右侧的$elem或"HTML片段",替换左侧查找到的元素
$("HTML片段").replaceAll("selector")
用左侧的HTML片段替换右侧的selector选中的元素

克隆: 复制一个元素:

1
var $elem_copy=$(...).clone();
强调: 不带参数的clone方法,只能复制样式和属性,不会复制行为(事件)
如何:即复制属性/样式,又复制行为: $(…).clone(true)
练习: $(elem).is(selector)
判断elem是否符合selector的条件

我是图片

总结: jQuery是对DOM操作的终极简化函数库学jQuery, 实际还是学DOM,心里始终想着DOM

查找元素: 1. 按选择器查找。2. 按节点间关系
修改: 1. 内容 2. 属性 3. 样式
添加: 2步 :
1. $(…)创建新元素 2. 将新元素添加到DOM
删除: $(…).remove();
复制: $(…).clone(true);
替换: $(…).replaceWith(…)
replaceAll

事件

笔试 : jQuery中共有几种事件绑定方式

1、.bind/unbind->单纯代替add/removeEventListener
1
$(...).bind("事件名",fn)
强调:
1. 多数情况下, fn可使用匿名函数
2. 如果可能移除事件绑定,则fn必须用有名的函数
1
$(...).unbind("事件名",fn)
简写:
1. 省略fn, 表示移除该事件绑定的所有处理函数
2. 都省略, 表示移除元素的所有事件绑定

我是图片

2、.one(…) : 用法同bind,绑定事件处理函数后,只执行一次,就自动解绑
3、简写: jq对部分常用事件的绑定提供了简写的函数:
1
$(...).事件名(funciton(){...})  -à>>  $(...).click(fn)
比较:
mouseover moueout mousemove mouseenter mouseleave
mouseover 鼠标进入时触发一次(进入子元素,同样会冒泡触发父元素)
mouseleave 鼠标移出时触发一次,会触发父元素
mouseenter 进入子元素,不再触发父元素的事件
mouseout 鼠标移出时触发一次

利用冒泡:——事件委托

难题:

1.获取目标元素: e.target
2.鉴别目标元素是否想要: if($(target).is(selector))

delegate: 事件委托 其实就是简化版的利用冒泡

什么是: 将事件处理函数绑定在父元素,所有子元素共用
何时: 只要利用冒泡,就可用delegate
如何: $(parent).delegate(“selector”,”事件名”,fn)
其中: “selector”只有满足selector的元素才能出发事件——本质: 用选择器代替了### 判断

fn中this->target目标元素

我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/07/01/jQuery节点选择器、修改、绑定事件/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶