前端开发之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、对于复选框中的value值，仅仅获取第一个值

        console.log($('input[type=checkbox]:checked').val()); // a

        // 3、下拉列表被选中的值

        var obj = $('#timespan option:selected');

        console.log(obj.val()); //

        // 设置单选的值

        $('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();

回到顶部↑

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

前端开发之jQuery位置属性和筛选方法
主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 ...
前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
前端开发之jQuery效果篇
主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果一.显示与隐藏显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...
前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架在前端中,一个js文件就是一个模块一.用法: 1.引入包 2.入 ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
＃笔记＃移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
Elasticsearch索引和文档操作
列出所有索引现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...

随机推荐

COM 学习
一.COM (Component Object Model) 二.COM+ (Component Services) 三.DCOM (Distributed Component Object Mode ...
linux下informatica服务安装和配置
本文中将会用infa简称代替informatica 1.安装前准备介质名称版本信息描述 Informatica Powercenter 9.5.1 for Linux 64 bit 必须 Jav ...
mac下安装apache tomcat
目录一. 默认版: 二. 自定义下载配置版: ———————————————————————正文—————————————————————————— 一. 默认版: ##一.mac 自带了apach ...
编译安装zabbix3.2.5
1. 配置lnmp环境首先配置Nginx+mysql+php-fpm的系统环境,具体配置见另一篇文章 2. 编译安装zabbix 2.1 下载并解压zabbix 可以到zabbix官网下载zabbi ...
FireFox和IE下使用Date来构造新Date对象的BUG
正常方式我们都知道可以使用new Date()来创建一个Date对象. new Date();//Date {Mon Jun 15 2015 15:53:16 GMT+0800} 也可以用new D ...
在.NET开发中的单元测试工具之——NUnit
NUnit介绍 NUnit是一个专门针对于.NET来写的单元测试框架,它是xUnit体系中的一员,在xUnit体系中还有针对Java的JUnit和针对C++的CPPUnit,在开始的时候NUnit和x ...
PowerDesigner15.1使用技巧总结
1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里, ...
Android中关于JNI 的学习（一）对于JNIEnv的一些认识
一个简单的样例让我们初步地了解JNI的作用.可是关于JNI中的一些概念还是需要了解清楚,才干够更好的去利用它来实现我们想要做的事情. 那么C++和Java之间的是怎样通过JNI来进行互相调用的呢? 我 ...
Spring Could与Dubbo、Docker、K8S
如果你是在一个中小型项目中应用Spring Cloud,那么你不需要太多的改造和适配,就可以实现微服务的基本功能.但是如果是在大型项目中实践微服务,可能会发现需要处理的问题还是比较多,尤其是项目中老代 ...
Phonegap 事件机制
PhoneGap事件包含另个部分,一个是传统网页触发的事件,比如DOM加载,超链接,form表单提交事件等. 另一个是PhoneGap独有的事件.如 deviceready:只在设备在本地环境和页面完 ...

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

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

随机推荐

热门专题