美文网首页
jQuery 增删改查 及设计模式、链式操作

jQuery 增删改查 及设计模式、链式操作

作者: 卢卢2020 | 来源:发表于2021-01-28 00:05 被阅读0次

1 增

 $('<div><span></span></div>')  创建div

 .appendTo(document.body)  插入到body中

   
2 删

$div.remove()   //删除整个div不占位置

$div.empty()  //移除里面的内容 父元素还占位置

3 改

$div.text(?) 读写文本内容

$div.html(?) 读写HTML内容

$div.attr('title',?) 读写属性

$div.css({color:'red"}) 读写style

$div.addClass('blue') 添加类

$div.on('click',fn) //添加点击事件

$div.off('click',fn) //移除点击事件

注意:$div大部分时候对应了多个div元素 记得遍历

4 查

$('#xxx') 返回值并不是元素,而是一个API对象

$('#xxx').find('.red') 查找#xxx里面的.red元素

$('#xxx').parent() 获取爸爸

$('#xxx').children() 获取儿子

$('#xxx').siblings() 获取兄弟 除自己

$('#xxx').index() 获取排行老几(从0开始)

$('#xxx').next() 获取弟弟

$('#xxx').prev() 获取哥哥

$('.red' ).each(fn) 遍历并对每个元素执行fn

5 设计模式

jQuery用到了哪些设计模式

不用new的构造函数,这个模式没有专门的名字

$(支持多种参数),这个模式叫做重载

用闭包隐藏细节,这个模式没有专门的名字

$div.text()即可读也可写,getter/setter

$.fn是$.prototype的别名 ,这叫别名

jQuery针对不同浏览器使用不同的代码 ,这叫适配(如果它是ie 用innerText 如果是其它浏览器用textContent)


6 链式操作(以.连接)

$('div').find('h3').eq(2).html('Hello');

$('div') //找到div元素

.find('h3') //选择其中的h3元素

.eq(2) //选择第3个h3元素

.html('Hello'); //将它的内容改为Hello

相关文章

网友评论

      本文标题:jQuery 增删改查 及设计模式、链式操作

      本文链接:https://www.haomeiwen.com/subject/aiwzzktx.html