juqery学习笔记DOM操作

Posted 2020-09-23

一、添加节点

 $(selector).append()  

     向selector选择的元素的里面插入参数参数所指定的dom元素，插入的位置在最后面。参数可以是直接的html字符串，也可以是由$()函数创建的DOM元素

     如：$(selector).append(“<b>你好</b>”);

     或   $dom=$(“<b>你好</b>”);   $(selector).append($dom);

$(HTML).appendTo(selector)

     向selector选择的元素里面插入$(HTML)创建的DOM元素，插入的位置在最后面

$(selector).prepend()

    向selector选择的元素的里面插入参数参数所指定的dom元素，插入的位置在最前 面。参数可以是直接的HTML字符串，也可以是由$()函数创建的DOM元素

     如：$(selector).prepend(“<b>你好</b>”);

     或   $dom=$(“<b>你好</b>”);   $(selector).prepend($dom);

 

$(HTML).prependTo(selector)

     向selector选择的元素里面插入$(HTML)创建的DOM元素，插入的位置在最前面

 

$(selector).after()

   在selector选择的元素后面（而不是里面）插入参数所指定的dom元素，参数可以是直接的HTML字符串，也可以是由$()函数创建的DOM元素

   如：$(selector).after(“<b>你好</b>”);

  或   $dom=$(“<b>你好</b>”);   $(selector).after($dom);

 

$(HTML).insertAfter(selector)

   在selector选择的元素后面插入$(HTML)创建的DOM元素

 

$(selector).before()

   在selector选择的元素前面（而不是里面）插入参数所指定的dom元素，参数可以是直接的HTML字符串，也可以是由$()函数创建的DOM元素

   如：$(selector).before(“<b>你好</b>”);

  或   $dom=$(“<b>你好</b>”);   $(selector).before($dom);

 

$(HTML).insertBefore(selector)

   在selector选择的元素前面插入$(HTML)创建的DOM元素

-----------------------------------------------------------------------------------------

二、删除节点

  $(selector).remove()

   删除selector选择的元素,remove()里还可以用另外的selector作为参数来再次过滤要删除的元素

----------------------------------------------------------------------------------------

 

三、清空节点

  $(selector).empty()

清空selector选择的元素里面的所有内容

 

-------------------------------------------------------------------------------------------

 

四、复制节点

  $(selector).clone()

复制selector选择的元素，如果在这个元素上注册的事件也要一并复制，则使用$(selector).clone(true)

--------------------------------------------------------------------------------------------

五、替换节点

  $(selector).replaceWith(HTML)

   把selector选择的元素替换成指定的HTML,或是由$()创建的DOM元素

  $(HTML).replaceAll(selector)

   把selector选择的元素替换成$(HTML)创建的元素

-----------------------------------------------------------------------------------------------------

 

六、包裹节点

    $(selector).wrap(HTML)

    用HTML所创建的节点把selector选择的元素包裹起来

   如：$("p").wrap("<div></div>")        结果为<div> <p></p> </div>

   

    $(selector).wrapInner(HTML)

    用HTML所创建的节点把selector选择的元素的后代元素包裹起来

-------------------------------------------------------------------------------------------------------------

 

七、节点属性获取或设置

   $(selector).attr("attribute")

    获取selector选择的元素的attribute属性

   $(selector).attr("attribute","value")

   将selector选择的元素的attribute属性设为value

   $(selector).removeAttr("attribute")

   移除selector选择的元素的attribute属性

 

--------------------------------------------------------------------------------

 

八、样式操作

   $(selector).addClass("classname")

   在selector选择的元素的原有的基础上追加一个calss样式

   $(selector).removeClass("classname")

   在selector选择的元素上移除classname样式，如果要移除该元素上的所有class样式，则使用$(selector).removeClass()

  $(selector).toggleClass("classname")

  在selector选择的元素上交替的增加classname样式或删除classname样式，每触发一次，就交替一次

  

  $(selector).hasClass("classname")

  判断在selector选择的元素上是否有classname样式，有则返回true，否则返回false

 

-----------------------------------------------------------------------------------------------

九、设置或获取HTML和文本的值

  $(selector).html()

  获取selector选择的元素的innerHTML的值

  $(selector).html("HTML")

将selector选择的元素的innerHTML的值设为HTML

 

$(selector).text()

获取selector选择的元素的innerText/contentText的值

$(selector).text("TEXT")

将selector选择的元素的innerText/contentText的值设为TEXT

 

$(selector).val()

获取selector选择的元素（一般为文本框、下拉列表、单选框等）的值

$(selector).val("value")

将selector选择的元素的值设为value

 

---------------------------------------------------------------

十、遍历节点

 

$(selector).children()

获取selector选择的元素的子元素的集合，注意该方法不会考虑后代元素

$(selector).next()

获取selector选择的元素的下一个兄弟节点

$(selector).prev()

获取selector选择的元素的前一个兄弟节点

$(selector).siblings()

获取selector选择的元素的前后的所有兄弟节点

$(selector).closet("html标签")

例如：$(selector).closet("li")  ,如果li匹配selector则返回selector，否则逐级向selector的父级查找直到找到匹配的元素，没找到则返回一个空jquery对象

……

 

------------------------------------------------------------------------

十一、CSS操作

 

$(selector).css("style")

获取selector选择的元素的style样式，不论是内联的还是外部的样式都可以获取，注意style最好写成驼峰的形式，以下也一样

$(selector).css("style","value")

设置selector选择的元素的css样式

$(selector).css({"style1":"value1","style2":"value2",……})

设置多个css样式

 可以使用css(opacity[,value])来获取和设置透明度，范围为0~1

$(selector).height()

获取selector的高度，单位为PX

$(selector).height(value)

设置selector的高度，如果不带单位则默认为PX，也可以带上单位

width也有相同的方法

 

$(selector).offset()

获取selector的offsetLeft和offsetTop的值，结果是两个值，$(selector).offset().left  、  $(selector).offset().top分别来引用这两个值

$(selector).position()

获取selector相对于最近一个设置了动态定位的left和top值，结果有两个值，引用方法同上

$(selector).scrollTop()

获取selector的scrollTop值

$(selector).scrollTop(value)

设置selector的scrollTop值

 

scrollLeft也有相同的方法