前端开发之jQuery属性和文档操作

主要内容：

　　1、jQuery属性操作

　　2、jQuery文档操作

一、jQuery属性操作

　　1、什么是jQuery的属性操作？

　　　　jQuery的属性操作模块包括四个部分：html属性操作，dom属性操作，类样式操作和值操作。

　　　 （1）html 属性操作　　　

对html文档中的属性进行读取，设置和移除操作。例如：attr(),removeAttr().

　　　　(2) DOM属性操作

对DOM元素的属性进行读取，设置和移除操作。例如：prop(),removeProp().

　　　　(3) 类样式操作

对DOM属性className进行添加，移除操作。例如：addClass()，removeClass(),toggleClass().

　　　　(4) 值操作

对DOM属性value进行读取和设置操作。例如：html(),text(),val().

　　2、html属性操作实例解析

　　　　所谓html属性操作，更直白地说就是获取页面标签,l例如：attr()、removeAttr()等。

　　　　实例一：attr() --- 设置属性值或者被选中元素的属性值　　　

$(document).ready(function(){
     // attr() 设置一个属性值的时，只是获取值
    var id = $("div").attr("id");
    console.log(id);

    $("button").click(function(){
        $("#box p").text($("#box").attr("id"));

   // attr()如果设置两个值，表示设置属性
        // 1、设置一个值，比如设置div的class为box2
        $("#box").attr("class","box2");
        // 2、设置多个值时，使用对象存储，参数为对象，键值对存储（如果设置多个类名，不能使用attr()）
        $("#box").attr({"class":“cc”,name:"匆匆"});
})
})

　　　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>
    <span>我是一个span标签</span>
    <button class="btn">点我</button>
    <div id="box2">
        <p>hello，everyone</p>
        <button id="btn2">Get</button>
    </div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
     //HTML属性操作(即获取页面标签)
        // attr()：设置属性值或者被选元素的属性值
        // 获取值：attr() 设置一个属性值的时候，只是获取值
        var id = $(‘div‘).attr(‘id‘);
        console.log(id);
        $(‘button‘).click(function () {
             $(‘#box p‘).text($(‘#box‘).attr(‘id‘));
        });
        // attr()如果设置两个值，表示设置属性
            // 1、设置一个值，设置div的class为box2
        $(‘div‘).attr(‘class‘,‘box2‘);
            // 2、设置多个值时，使用对象存储，参数为对象，键值对存储；如果设置多个类名，不能使用attr()
        $(‘#box‘).attr({‘class‘:‘foo2‘,name:‘匆匆‘});
    })

</script>
</html>

　　　　实例二：removeAttr() --- 从匹配的元素中删除一个属性　　　　

$(document).ready(function(){
    // 删除一个属性
    $("#box").removeAttr("class");

    // 同时删除多个属性时，中间以空格隔开
    $("#box").removeAttr("class name");

   // 查看是否删除
    console.log($("#box").attr("class")); // underfined
})

　　　　完整代码：　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>

</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(‘#box‘).removeAttr(‘class‘);
        $(‘#box‘).removeAttr(‘class name‘);   // 同时删除 class和name
        console.log($(‘#box‘).attr(‘class‘)); // undefined
    })

</script>
</html>

　　3、DOM属性操作

　　　　对DOM元素的属性进行读取，设置和移除操作。例如：prop()、removeProp()等。

　　　　实例一：porp() --- 获取匹配的元素集中的第一个元素的属性值，它是对当前匹配到的DOM对象设置属性。　　　　

$(document).ready(function(){
    // 获取属性值
    console.log($("li").prop("class")); // one

    // 设置值
    $("li:eq(0)").prop({"user":"cc","name2":"cc2"}); // li:eq(0)表示获取到第一个li标签
    //$("li").first().prop({"user":"cc","name2":"cc2"}); // .first()作用同上
   // 查看设置的属性值
    console.log($("li:eq(0)"))
// console.log($(‘li‘).first()); // 同上
})

　　　　完整代码：　　　　

<!DOCYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>
        <ul>
        <li class="one">暮光微凉1号</li>
        <li class="two">暮光微凉2号</li>
        <li class="three">暮光微凉3号</li>
        <li class="four">暮光微凉4号</li>
    </ul>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
     // DOM属性操作
        // prop()：获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
        console.log($(‘li‘).prop(‘class‘)); // one
        //设置值
       $(‘li:eq(0)‘).prop({‘user‘:‘cc‘,‘name2‘:‘cc2‘});
        console.log($("li:eq(0)"));
        $(‘li‘).first().prop({‘user‘:‘cc‘,‘name2‘:‘cc2‘});
        console.log($(‘li‘).first());
    })

</script>
</html>

　　　　实例二：removeProp() --- 删除由.Prop() 方法设置的属性值

$(document).ready(function(){
    // removeProp() 删除.prop()方法设置的属性集
    // 先查看一下
   console.log($("li:eq(0)").prop("user")) ; // cc
   $("li:eq(0)").removeProp("user");
   console.log($("li").first().prop("user")); // underfined
})

　　　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>
        <ul>
        <li class="one">暮光微凉1号</li>
        <li class="two">暮光微凉2号</li>
        <li class="three">暮光微凉3号</li>
        <li class="four">暮光微凉4号</li>
    </ul>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        // removeAttr():从每一个匹配的元素中删除一个属性
        $(‘#box‘).removeAttr(‘class‘);
        $(‘#box‘).removeAttr(‘class name‘);   // 同时删除 class和name
</script>
</html>

　　4、类样式操作

　　　类样式操作是对DOM属性className进行添加，移除操作。例如：addClasss()、removeClass()、toggleClass()。

　　　实例：　　

  // 类样式操作：
        // addClass() removeClass()
        $(‘span‘).addClass(‘span2 span3‘); // 可同时添加多个或删除多个类标签
        $(‘span‘).removeClass(‘span3‘);
        var isBig = true;
        $(‘span‘).click(function(){
            if(isBig){
                $(this).addClass(‘active‘);  // 点击放大
                isBig = false;
            }
            else{
                $(this).removeClass(‘active‘); // 变回最初的样式
                isBig = true;
            }
        });

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
    <style type="text/css">
        span.active{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>
        <ul>
        <li class="one">暮光微凉1号</li>
        <li class="two">暮光微凉2号</li>
        <li class="three">暮光微凉3号</li>
        <li class="four">暮光微凉4号</li>
    </ul>
    <span>我是一个span标签</span>
    <button class="btn">点我</button>
    <div id="box2">
        <p>hello，everyone</p>
        <a href="#">百度一下</a>
        <input type="text" value="嘿嘿哈" name=""/>
        <button id="btn2">Get</button>
    </div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
   // 类样式操作：
        // addClass() removeClass()
        $(‘span‘).addClass(‘span2 span3‘); // 可同时添加多个或删除多个类标签
        $(‘span‘).removeClass(‘span3‘);
        var isBig = true;
        $(‘span‘).click(function(){
            if(isBig){
                $(this).addClass(‘active‘);  // 点击放大
                isBig = false;
            }
            else{
                $(this).removeClass(‘active‘); // 变回最初的样式
                isBig = true;
            }
        });
    })
</script>
</html>

　　5、值属性的操作

　　 值属性是对DOM属性value进行读取和设置操作。例如：text()、html()、val()。　

// 值属性的操作 text() html() val()
        // text() 仅仅获取文本
        console.log($(‘#box2‘).text()); //  hello，everyone
        // html() 获取所有
        console.log($(‘#box2‘).html()); // <p>hello，everyone</p>

// 设置值
       $(‘#box2‘).text(‘<a>百度一下</a>‘);
       $(‘#box2‘).html(‘<a href="https://home.cnblogs.com/">暮光微凉</a>‘);

//获取值
        console.log($(‘input‘).val());
        $(‘input‘).val(‘嘿嘿哈个毛线。。。‘);
        $(‘#btn2‘).click(function(){
            var val = $(‘input‘).val();
            $(‘.box2‘).text(val);

        });

　　表单控件使用的一个方法，监听Input的输入：　

        $(‘input‘).change(function(){
            console.log($(this).val());
        });

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的属性操作</title>
    <style type="text/css">
        span.active{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box" class="foo">
        <p>hello，暮光微凉...</p>
    </div>
        <ul>
        <li class="one">暮光微凉1号</li>
        <li class="two">暮光微凉2号</li>
        <li class="three">暮光微凉3号</li>
        <li class="four">暮光微凉4号</li>
    </ul>
    <span>我是一个span标签</span>
    <button class="btn">点我</button>
    <div id="box2">
        <p>hello，everyone</p>
        <a href="#">百度一下</a>
        <input type="text" value="嘿嘿哈" name=""/>
        <button id="btn2">Get</button>
    </div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
    // 值属性的操作 text() html() val()
        // text() 仅仅获取文本
        console.log($(‘#box2‘).text()); //  hello，everyone
        // html() 获取所有
        console.log($(‘#box2‘).html()); // <p>hello，everyone</p>

        // 设置值
       $(‘#box2‘).text(‘<a>百度一下</a>‘);
       $(‘#box2‘).html(‘<a href="https://home.cnblogs.com/">暮光微凉</a>‘);

        //获取值
        console.log($(‘input‘).val());
        $(‘input‘).val(‘嘿嘿哈个毛线。。。‘);
        $(‘#btn2‘).click(function(){
            var val = $(‘input‘).val();
            $(‘.box2‘).text(val);

        });
        // 表单控件使用的一个方法,监听input的输入
        $(‘input‘).change(function(){
            console.log($(this).val());
        });

    })

</script>
</html>

　　6、操作input的value值

　　　　HTML部分　

    <form action="">
        <!--单选按钮-->
        <input type="radio" name="sex" value="1"/>男
        <input type="radio" name="sex" value="2" checked=""/>女 <!--默认选项-->
        <input type="radio" name="sex" value="3" />gay
        <hr>
        <!--多选框，设置checked表示默认-->
        <input type="checkbox" value="a" checked=""/>散步
        <input type="checkbox" value="b" checked=""/>美食
        <input type="checkbox" value="c" checked=""/>阅读
        <input type="checkbox" value="d" checked=""/>喝茶
        <hr>
        <!--下拉框-->
        <select name="timespan" id="timespan" class="Wdate">
            <option value="1">8:00--9:00</option>
            <option value="2">9:00--10:00</option>
            <option value="3">11:00--12:00</option>
        </select>
        <hr>
        <input type="text" name="" id="" value="666"/>
        <button>提交</button>
    </form>

　　　　jQuery部分

<script type="text/javascript">
    $(document).ready(function () {
        console.log($(‘:radio‘));
        console.log($(‘:checkbox‘));
        // 1、获取单选框中的value值
        console.log($(‘input[type=radio]:checked‘).val()); // 2

        // 2、对于复选框中的value值，仅仅获取第一个值
        console.log($(‘input[type=checkbox]:checked‘).val()); // a

        // 3、下拉列表被选中的值
        var obj = $(‘#timespan option:selected‘);
        console.log(obj.val()); // 1

        // 设置单选的值
        $(‘input[type=radio]‘).val([‘1‘]); //将默认值改为1（初始时是2）
        $(‘input[type=checkbox]‘).val([‘b‘,‘c‘]); // 将默认选中的值改为‘b’和‘c‘(初始时是‘a‘,‘b‘,‘c‘)

        // 文本框 设置值和获取值
        $(‘input[type=text]‘).val([‘在此输入额！‘]);
        console.log($(‘input[type=text]‘).val());

    })
</script>

二、jQuery文档操作

　　　　HTML部分　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery文档操作-插入节点</title>
</head>
<body>
    <a href="#">我是一个超链接</a>
    <a href="#">我是又一个超链接</a>
    <ul>

    </ul>
    <button>按钮</button>
    <h2>我是一个二级标题</h2>

</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
// jQuery代码部分
</script>
</html>

　　jQuery代码部分　　

　　1、插入操作　　　

$(document).ready(function(){
    //------------ 方法一：append() ------------------------------
    /*
         父元素.append(子元素)，即在父元素下追加某新元素
    */
        // 插入节点方法1：append("字符串")
         $("ul").append("<li>我是一个新的li标签</li>")

        // 插入节点方法2：先创建子元素，再将其添加到父元素上
         var dom_li = document.createElement("li");
         dom_li.innerHTML = "我是添加的第二个标签";
         $("ul").append(dom_li);

       // 插入节点方法3:通过jQuery元素添加（即移动当前页面中已存在的元素到父元素下，则被移动元素将从原位置上消失，等同于移动操作）
         $("ul").append(a);

    // ------------- 方法二：appendTo() ----------------------------
        // 子元素.appendTo(父元素)，即子元素主动添加到父元素上
        $("<li>我是第三个li标签</li>").appendTo($("ul").addClass("oli-3"));

    // ------------- 方法三：prepend() 前置添加，即添加到父元素的第一个位置----------------------------
        $("ul").prepend("<li>我是最开始的li标签</li>");
        // prependTo() 后置添加，即将元素添加到父元素下第一个位置
         $("<a>我是最开始的超链接</a>").prepend("ul");
    // ------------- 方法四：父.after(子) 在匹配的元素之后插入内容，与之相对还有 ---> 子.insertAfter(父) ----------------
         $("ul").after("<h4>我是一个四级标题</h4>");
         $("<h5>我是一个5级标题</h5>").insertAfter("h4");
})

　　2、复制操作 --- clone()　　　

$("button").click(function(){
    // clone() 括号内内容不写时，默认克隆匹配的DOM元素并且选中这些克隆的副本(不包括事件)
       $(this) .clone().insertAfter($(this));
   // clone(true) 元素以及所有的事件处理并且选中这些克隆的副本（即副本和本体一样，无区别）
       $(this).clone(true).insertAfter($(this));

})

　　3、替换操作　　

// replaceWith() ---- 将所有匹配的元素替换成指定的HTML或DOM元素
$("h2").replaceWith($("<h5>我是一个5级标题</h5>"))

// replaceAll() ---- 用指定的元素替换所有selector匹配到的元素
$("<button>替换</button>").replaceAll("a");

　　4、删除操作

// remove() 删除节点后，事件也会随之删除（即删除了整个标签）
    $("ul").remove();

// detach() 删除节点后，事件会保留
    var $btn = $("button").detach();
    $("ul").append($btn); // 此时按钮添加到了ul中
    console.log($btn);    

// empty() 清空元素中所有后代节点
    $("ul").empty();

回到顶部↑

　　　　

　　

　　　　

　　　　

原文地址：https://www.cnblogs.com/schut/p/9554281.html

时间： 2024-10-10 20:32:08

前端开发之jQuery属性和文档操作的相关文章

前端开发之jQuery位置属性和筛选方法

主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 (4)实例三:焦点轮播图 (5)实例四:动态实现轮播图 一.jQuery的位置属性及实例 1.位置属性 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

前端开发之jQuery库的引用

使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 支持的版本: 2.0.3, 2.0.2, 2.0.1, 请根据所需要的版本 修改对应(红色字为当前版本)的地址: jquery/2.0.0/jquery.min.js 百度压缩版引用地址: <script src="http://lib

HTML5+JS手机web开发之jQuery Mobile初涉

一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西,iPhone又是新的一套,折腾死人呐. 于是总监发狠,让我把手上的活都交出去,专心折腾web版的,看看最后效果如何. 加上我觊觎手机上的开发学习很久了,于是,一拍即合,搞起了手机开发方面的学习. 分享是很好的提高自身学习的方法.因为分享过程中梳理了所学,往往会有些意想不到的心得与收获.如此利人利已的

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

高效Web前端开发之路：YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

前端开发之html基础知识02

经典表格:表格没有列的概念,只有行的概念, 一行 tr,行中的单元格 td表头的突出显示:tr>th <table width="400px" align="center" border="1px" cellspacing="0" cellpadding="5px" > <!-- align = "center" 表格整体剧中--> <caption&

jquery之文档操作

jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

jQuery的文档操作(重点)/简单接触ajax(和风天气)

一.jQuery的文档操作****** 之前js中学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档. 看一个我们JS操作DOM的例子: var oUl = document.getElementsByTagName('ul')[0]; var oLi = document.createElement('li'); oLi.innerHTML = '