越来越少人用JQuery但你就不学了吗3

1次阅读

共计 7010 个字符，预计需要花费 18 分钟才能阅读完成。

如需要跟多资料请点击下方图片⬇（扫码加好友→备注 66）

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式等。<font color=”red”> 注意：以下的操作方式只适用于 jQuery 对象。</font>

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr(‘checked’) attr(‘name’)
prop(属性名称)	获取具有 true 和 false 两个属性的属性值	prop(‘checked’)

<form action=""id="myform">
    <input type="checkbox" name="ch" checked="checked"/>    aa
    <input type="checkbox" name="ch" />    bb
</form>
        
<script type="text/javascript">
    var ch = $("input[type='checkbox']")
    console.log(ch)
    ch.each(function(idx, em){console.log(idx + "-" + $(em) + "=" + this)
        console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
        console.log('--------------')
    })
</script>

方法	说明	举例
attr(属性名称，属性值)	设置指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr(‘checked’,’checked’) attr(‘name’,’zs’)
prop(属性名称，属性值)	设置具有 true 和 false 的属性值	prop(‘checked’,’true’)

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr(‘checked’)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 属性操作 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <pre>
            <h5>1.attr()</h5>
            设置或者返回元素的属性 ;
            <h5>2.prop()</h5>
            设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。</pre>
        <hr />
        <a href="http://www.baidu.com" id="a1"> 百度 </a>
        <a href="http://www.sina.com" id="a2"> 新浪 </a>
          <input type="checkbox" name="all" checked="checked"/> 全选 
    </body>
    <script type="text/javascript">
        // 获取属性值：attr
        console.log($('#a1').attr('href'));
        console.log($(':checkbox').attr('name'));
        // 若未选中显示 undefined，选中显示 checked
        console.log($(':checkbox').attr('checked'));        
        // 获取属性值：prop
        // 若未选中显示 false，选中显示 true
        console.log($(":checkbox").prop('checked'));         
        console.log($('#a2').prop('href'))
        // 设置属性值
        $('#a1').attr('href','https://jquery.com');
        $(":checkbox").prop("checked",false);
        // 移除属性
        $('#a2').removeAttr('href');
    </script>
</html>

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

方法	说明
attr(“class”)	获取 class 属性的值，即样式名称
attr(“class”,”样式名”)	修改 class 属性的值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“样式名”,”样式值”)

例：css('color','white')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 设置元素样式 </title>
        <script src="jquery-3.4.1.js" type="text/javascript" ></script>
        <style type="text/css">
            div{
                padding: 8px;
                width: 180px;
            }
            .blue{background: blue;}
            .larger{font-size: 30px;}
            .green {background : green;}
        </style>
    </head>
    <body>
        <h3>css() 方法设置元素样式 </h3>
        <div id="conBlue" class="blue larger"> 天蓝色 </div>
         <div id="conRed"> 大红色 </div>
         <div id="remove" class="blue larger"> 天蓝色 </div>
    </body>
    <script type="text/javascript">
        // 获取样式名称
        console.log($("#remove").attr("class"));
        // 修改样式，那么 id 为 remove 的元素样式 class 只有 green
        // $('#remove').attr("class","green")
        // 添加样式名称，class 名称 -- 叠加
        // $('#conBlue').addClass("blue larger");
        // 添加元素具体样式
        // {"":"" , "":""}   名: 值     对
        $('#conRed').css({"background-color":"red","color":"#fff"});
        $('#remove').css('color','red');
        // 移除样式
        // $("#remove").removeClass("blue larger");
    </script>
</html>

对于元素还可以操作其中的内容，例如文本，值，甚至是 html。

方法	说明
html()	获取元素的 html 内容
html(“html, 内容 ”)	设定元素的 html 内容
text()	获取元素的文本内容，不包含 html
text(“text 内容 ”)	设置元素的文本内容，不包含 html
val()	获取元素 value 值
val(‘值’)	设定元素的 value 值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 操作内容 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <h3><span>html() 和 text() 方法设置元素内容 </span></h3>
        <div id="html"></div>
         <div id="text"></div>
        <input type="text" name="uname" value="oop" />
    </body>
    <script type="text/javascript">
        // 获取 HTML 内容，包括 HTML 标签
        console.log($('h3').html());
        // 获取文本内容，不包括 HTML 标签
        console.log($('h3').text());
        // 获取 value 值
        console.log($('[name=uname]').val());
        // 设置
        $('#html').html("<p> 使用 html 设置, 看不到标签 </p>");
        $('#text').text("<p> 使用 text 设置, 能看到标签 </p>");
        $('[name=uname]').val("哈哈哈");
        // console.info("abc");
        // console.log("abc");
        // console.warn("abc")
        // console.error("abc");
    </script>
</html>

在 jQuery 中创建元素很简单，直接使用核心函数即可

$(‘元素内容’);

$('<p>this is a paragraph!!!</p>');

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content 元素或内容插入 selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 追加 </title>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div    {margin: 10px 0px;}
            span{
                color: white;
                padding: 8px
            }
            .red{background-color: red;}
            .blue{background-color: blue;}
            .green{background-color: green;}
        </style>
    </head>
    <body>
        <h3>prepend() 方法前追加内容 </h3>
        <h3>prependTo() 方法前追加内容 </h3>
        <h3>append() 方法后追加内容 </h3>
        <h3>appendTo() 方法后追加内容 </h3>
        <span class="red"> 男神 </span>
        <span class="blue"> 偶像 </span>
        <div class="green">
            <span > 小鲜肉 </span>
        </div> 
    </body>
</html>
<script type="text/javascript">
    var str ="<span id='mydiv'style='padding: 8px;width: 180px;background-color:#ADFF2F;'> 动态创建 span</span>";
    // 1、使用 prepend 前加内容
    $("body").prepend(str);
    
    // 2、使用 prependTo 前加内容
    $("<b> 开头 </b>").prependTo('body');
    
    // 3、使用 append 后加内容
    $("body").append(str);
    // $("div").append($('.red')); // 当把已存在的元素添加到另一处的时候相当于移动
     
    // 4、使用 appendTo 后追加内容
    $(str).appendTo('body');
    // $('.blue').appendTo("div");    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 插入元素 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px
            }
            .red{background-color: red;}
            .blue{background-color: blue;}
            .green{background-color: green;}
        </style>
    </head>
    <body>
        <h3>before() 和 after() 方法在元素之前后插入内容 </h3>
        <span class="green"> 财大气粗 </span>
    </body>
</html>
<script type="text/javascript">
     var str1 = "<span class='red'> 土豪 </span>";
     var str2 = "<span class='blue'> 暴发户 </span>";
     $(".green").before(str1); // 前置元素
     $(".green").after(str2); // 后存元素
</script>

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 删除元素 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{background-color: green;}
            .blue{background-color: blue;}
        </style>
    </head>
    <body>
        <h3> 删除元素 </h3>
        <span class="green">jquery<a> 删除 </a></span>
        <span class="blue">javase</span>
        <span class="green">http 协议 </span>
        <span class="blue">servlet</span>
    </body>
</html>
<script type="text/javascript">
    // 删除所选元素 或指定的子元素
    // $("span").remove();
    // 删除样式为 blue 的 span
    // $("span.blue").remove();
    // 清空元素
    // $("span").empty();
    // $(".green").empty();    
</script>

each()

$(selector).each(function(index,element)) : 遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是当前的元素，此时是 dom 元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 遍历元素 </title>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{background-color: green;}
            .blue{background-color: blue;}
        </style>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3> 遍历元素 each()</h3>
        <span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http 协议 </span>
        <span class="green">servlet</span>
    </body>
    <script type="text/javascript">
        $('span').each(function (idx , e) {console.log(idx + "--->" + $(e).text());
        })
    </script>
</html>

正文完

jquery

发表至： jquery

2020-07-03

0

HR绩效统计太慢不用那么复杂这样可轻松搞定

关于jquery:day-30-jQuery

关于jquery:阿里巴巴大数据实践实时技术

关于jquery:自然语言处理在开放搜索中的应用

如何使用-Apache-Flink-查询-Pulsar-流

越来越少人用JQuery但你就不学了吗3

Jquery Dom 操作

操作元素的属性

获取属性

设置属性

移除属性

操作元素的样式

操作元素的内容

创建元素

添加元素

删除元素

遍历元素

站内搜索