juqery学习笔记(二)DOM操作
一、添加节点
$(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也有相同的方法