续:
3、dom操作 1)查找 dom / d1.html a,查询或者修改节点的html内容 html() b,查询或者修改节点的文本 text() c,查询或者修改节点的属性 attr() d,查询或者修改节点的值 val() 2)创建 dom / d2.html $a = $(html) 如:$('<a>dfd</a>') 就创建好,之后再使用append()方法插入到dom中。 3)插入节点 append():向每个匹配的元素内部追加内容 prepend():向每个匹配的元素内部前置内容 after():在每个匹配的元素之后插入内容 before():在每个匹配的元素之前插入内容 4)删除节点 dom / d3.html remove() //这个方法返回时删除节点的引用。 remove(selector) empty():清空节点元素里的内容 6)复制节点 dom /d5.html clone() clone(true):使复制的节点也具有行为(将事件处理代码一块复制) 如:$(selector).clone(true).appendTo(selector)//复制的节点再添加到后面的选择器中 7)属性操作 读取:attr('id'); 设置: attr('id','d1') 或者一次 设置多个 attr({"id":"d1","class":"s1"}); 删除:removeAttr('id') 8)样式操作 dom / d6.html 获取和设置: attr("class","") 或者 attr("style","") 追加:addClass('s1') 移除:removeClass('s1') 或者removeClass('s1 s2') 或者removeClass()//会删除所有样式 切换样式:toggleClass,有该样式,就删除,没有,就添加。 是否有某个样式 hasClass('s1') 读取css('font-size') 设置css('font-size','60px')或者 css({'':'','':''})//设置多个样式 9)遍历节点 dom / d7.html children()/children(selector):获取子元素集合。只考虑子元素,不考虑其它后代元素。 next()/next(selector):下一个兄弟 prev()/next(selector):前一个兄弟 siblings()/siblings(selector)其它兄弟 find(selector):从当前节点开始查找后代。 parent():父节点 closest():取得最近匹配元素。首先检查当前元素是否匹配,如果匹配直接返回,不匹配 就向上查找父元素,逐级向上直到匹配到。若一直没有匹配到就返回空的jQuery对象。 10)替换节点 replaceWith() :将匹配的元素替换成指定的元素 replaceAll() :和replaceWith一样,只不过是颠倒了replaceWith的操作。 如:把<p>I Love You</p>标签替换成<strong>I Love You</strong> $('p').replaceWith('<strong>I Love You</strong>');或者$('<strong>I Love You</strong>').replaceAll('p');