jQuery中的DOM操作

作者: Mr_J316 | 来源:发表于2019-06-04 14:56 被阅读0次

2019-06-04

DOM的全称是Document Object Module，即文档对象模型。一个HTML文档可以看成结构化的树，文档中的每个元素都是树的结点。

元素属性操作

attr("属性名"):读取属性值。
attr("属性名", 属性值):设置属性值
attr({"属性1":值1, "属性2":值2}):设置多个属性值
attr("属性名",function(){}):设置属性值为函数的返回值
removeAttr("属性名"):删除属性
//当属性事先没有在元素中设置时，比如元素的checked, selected, disabled状态属性，
//attr方法将返回undefined，可以换成prop方法。

元素内容操作

语法	说明
html(["值"])	读写元素的HTML内容
text(["值"])	读写元素的文本内容
val(["值"])	读写表单元素的值

元素样式操作

css("属性名"):读取属性值
css("属性名","属性值"):设置属性值
css({"属性1":"值1","属性2":"值2"}):设置多个属性值
width([值])或height([值]):设置元素的宽度、高度
hasClass("样式"):判断是否使用了class样式
addClass("样式1 样式2"):添加一个或多个class样式
removeClass("样式1 样式2"):删除一个或多个class样式
toggleClass("样式"):切换class样式，有则删之，无则加之

创建新元素

var d1 = $("<div id='d1'>hello</div>");
$("body").append(d1);

<script type="text/javascript">
  $(function(){
    $("#tb1").append("<tr><td>001</td><td>张三</td><td>程序员</td></tr>");
    $("#tb1").append("<tr><td>002</td><td>李四</td><td>项目经理</td></tr>");
    $("#tb1").append("<tr><td>003</td><td>王五</td><td>财务</td></tr>");
  })
</script>
<body>
    <table id="tb1" border="1px" cellpadding="2px" cellspacing="0px">
        <tr>
           <th>编号</th>
           <th>姓名</th>
           <th>职位</th>
        </tr>
    </table>
</body>

插入元素

内部插入

语法	示例
append(content)	$(A).append(B)表示将B追加到A中
appendTo(content)	$(A).appendTo(B)表示把A追加到B中
prepend(content)	$(A).prepend(B)表示将B前置插入到A中
prependTo(content)	$(A).prependTo(B)表示将A前置插入到B中

外部插入

语法	功能
after(content)	$(A).after(B)表示将B插入到A之后
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后
before(content)	$(A).before(B)表示将B插入至A之前
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前

复制元素

clone()
clone(true)

注意：被复制后的新元素不具有原元素行为。如果需要在复制时将元素的全部行为也进行复制，可以加入true参数。

<script type="text/javascript">
    $(function() {
        $("img").click(function() {
            $(this).clone(true).appendTo($(this).parent());
        })
    })
</script>
<body>
    <span>
       <img src="images/photo.gif" />
    </span>
</body>

替换元素

用元素2替换元素1:

$(元素1).replaceWith(元素2);

用元素1替换元素2:

$(元素1).replaceAll(元素2);

包裹元素

给选定元素包上一个指定的父元素

语法格式	参数说明	功能描述
wrap(html)	html参数为字符串代码,用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用其他DOMI元素包装起来f
wrap(fn)	fn参数为包表结构的一个函数	把所有选择的元素用 function函数返回的代码包裹起来
unwrap()	无参数	移除所选元素的父元素或包裹标记
wrapAll(html)	html参数为字符串代码,用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
wrapAll(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
wrapInner(html)	html参数为字符串代码,用于生成元素并包裹所选元素	把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来
wrapInner(elem)	elem参数用手包装所选元素的DOM元素	把所有选择的元素的子内容(包括文本节点)用DOM元素包装起来
wrapInner(fn)	fn参数为包表结构的一个函数	把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来

遍历元素

基本遍历

$("选择器").each(function(index,element))

说明：

index：当前元素索引位置。
element: 当前元素。在循环体中也可使用this关键字引用当前元素，注意： $(this)或$ (element)返回的是jQuery对象；this或element返回的是DOM对象。
可以使用return false语句跳出当前each循环。

$("input").each(function(i, ele) {
    console.log(i + "--" + $(ele).val());
});

获取子元素

返回所有子元素，但不包含子元素的子元素，也不返回文本节点。

children(["选择器"])

获取后代元素

find("选择器");

获取兄弟元素

获取位于当前元素前与后的兄弟元素

语法	说明
next(["选择器"])	获取紧邻当前元素之后的元素
nextAll(["选择器"])	获取当前元素后的所有兄弟元素
prev(["选择器"])	获取紧邻当前元素之前的元素
prevAll(["选择器"])	获取当前元素前的所有兄弟元素
siblings(["选择器"])	获取位于当前元素前后的所有兄弟元素

获取前辈元素

parent(["选择器"])：获取当前元素的父级元素，可以链接式使用，如$("选择器").parent().parent()。

parents(["选择器"])：获取祖辈元素中第一个符合条件的元素。

过滤匹配元素

filter("选择器"|回调函数)：获取符合选择器规则或回调函数返回值为true的元素集合

<script>
    $(function(){
    $("li").filter(":even").css("color","red");
    $("li").filter(function(index,element){
       if($(element).text() == "three"){
         return true;
       }
    }).css("color","blue");
    });
</script>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

筛选匹配元素

has("选择器")：获取符合选择器规则的元素集合

<script>
    $(function(){
     $("li").has("div").css("color","red");
    });
</script>
<ul>
    <li>one</li>
    <li>two</li>
    <li><div>three</div></li>
    <li>four</li>
</ul>

否定筛选匹配元素

not("选择器"|回调函数)：获取不符合选择器规则或回调函数返回值为true的元素集合

<script>
    $(function(){
    $("li").not(":even").css("color","red");
    $("li").not(function(index,element){
       if(index%2){
        return true;
       }
    }).css("color","green");
    });
</script>
<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
</ul>

删除元素

//将指定的元素删除。
$("选择器").remove();  

//将指定的元素清空。
$("选择器").empty();

数组操作

遍历数组

var arr = ["John", "Steve", "Ben", "Damon", "Ian"];
$.each(arr, function(index, value){
    alert(index);
    alert(value);
});

筛选数组元素

grep方法对数组元素进行筛选。为每个元素调用回调函数把不想要的元素过滤掉，返回过滤后的数组。

$.grep(数组名, function(element,index){});

函数执行筛选任务，返回符合过滤条件的值。函数有两个参数，第一个是数组元素，第二个是索引值。

var arr = ["aaaa","bbb","cc","d"];
arr = $.grep(arr, function(element,index){
     return element.length>=3;
}); 
document.write(arr.join(","));

网友评论

本文标题：jQuery中的DOM操作

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！