jQuery -- 光阴似箭（三）：jQuery 操作 HTML 元素和属性

jQuery -- 知识点回顾篇（三）：jQuery拥有操作 HTML 元素和属性的强大方法。

1. 获取HTML 元素的内容和属性

　　(1) 获得内容: text()、html() 以及 val()方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //text() - 设置或返回所选元素的文本内容

            $("#btnText").click(function(){

                alert($("#myDiv1").text());

            });

            $("#btnTextSet").click(function(){

                $("#myDiv1").text('这是一个美好的日子');

                alert($("#myDiv1").text());

            });

            //html() - 设置或返回所选元素的内容（包括 HTML 标记）

            $("#btnHtml").click(function(){

                alert($("#myDiv1").html());

            });

            $("#btnHtmlSet").click(function(){

                $("#myDiv1").html('这是一个<b>神奇</b>的世界啊');

                alert($("#myDiv1").html());

            });

            //val() - 设置或返回表单字段的值

            $("#btnVal").click(function(){

                alert($("#myInput1").val());

            });

            $("#btnValSet").click(function(){

                $("#myInput1").val('好好学习，天天向上');

                alert($("#myInput1").val());

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btnText">text()方法获取内容</button>

    <button type="button" id="btnHtml">html()方法获取内容</button>

    <button type="button" id="btnVal">val()方法获取内容</button><br/>

    <button type="button" id="btnTextSet">text()方法设置内容</button>

    <button type="button" id="btnHtmlSet">html()方法设置内容</button>

    <button type="button" id="btnValSet">val()方法设置内容</button>

    <div id="myDiv1">这是一个神奇的 <b>世界</b>啊 </div>

    <input type="text" id="myInput1" value="大家好"></p>

</body>

</html>

　　(2) 获取属性: attr()方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //attr() 方法用于获取属性值，也用于设置/改变属性值。

            $("#btn_attr1").click(function(){

                alert($("#myHref").attr("href"));

            });

            $("#btn_attr2").click(function(){

                $("#myHref").attr("href","https://www.cnblogs.com");

                alert('超链接属性设置为：'+$("#myHref").attr("href"));

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_attr1">attr()方法获取属性</button><br/>

    <button type="button" id="btn_attr2">attr()方法设置属性</button>

    <a href="https://www.baidu.com" id="myHref">超链接</a>

</body>

</html>

2. 添加元素：append() 和 prepend() 方法，after() 和 before() 方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //append() 方法在被选元素的结尾插入内容（仍然该元素的内部）

            $("#btn_append").click(function(){

                $("#myDiv1").append(" 是的");

            });

            //prepend() 方法在被选元素的开头插入内容（仍然该元素的内部）

            $("#btn_prepend").click(function(){

                $("#myDiv1").prepend("我说 ");

            });

            //before() 方法在被选元素的开头插入内容

            $("#btn_before").click(function(){

                $("#myInput1").before("Hello ");

            });

            //after() 方法在被选元素的开头插入内容

            $("#btn_after").click(function(){

                $("#myInput1").after("World ");

            });

            //特别说明：

            //append() 和 prepend() 方法能够通过参数接收无限数量的新元素

            //after() 和 before() 方法能够通过参数接收无限数量的新元素。

            //可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

            //举例如下：

            /**

            $("#btn_after").click(function(){

                var txt1="<b>程序员</b>";

                var txt2=$("<i></i>").text("是厉害的人");

                var txt3=document.createElement("<h1>");

                txt3.innerHTML="好用的jQuery!";

                $("#myInput1").after(txt1,txt2,txt3);

            });

            **/

        });

    </script>

</head>

<body>

    <button type="button" id="btn_append">append()方法</button>

    <button type="button" id="btn_prepend">prepend()方法</button><br/>

    <button type="button" id="btn_before">before()方法</button>

    <button type="button" id="btn_after">after()方法</button>

    <div id="myDiv1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </div>

    <input type="text" id="myInput1" value="大家好"/>

</body>

</html>

3. 删除元素：remove() 方法，empty() 方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //remove() 方法删除被选元素及其子元素

            $("#btn_remove").click(function(){

                $("#myDiv1").remove();

            });

            //empty() 方法删除被选元素的子元素。

            $("#btn_empty").click(function(){

                $("#myDiv2").empty();

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_remove">remove()方法</button>

    <button type="button" id="btn_empty">empty()方法</button><br/>

    <div id="myDiv1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </div>

    <div id="myDiv2" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </div>

</body>

</html>

4. 获取并设置 CSS 类：addClass() 方法，removeClass() 方法，toggleClass() 方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //addClass() - 向被选元素添加一个或多个类

            $("#btn_addClass").click(function(){

                $("#myDiv1").addClass('blue');

            });

            //removeClass() - 从被选元素删除一个或多个类

            $("#btn_removeClass").click(function(){

                $("#myDiv1").removeClass('blue');

            });

            //toggleClass() - 对被选元素进行添加/删除类的切换操作

            $("#btn_toggleClass").click(function(){

                $("#myDiv1").toggleClass('blue');

            });

        });

    </script>

</head>

<style type="text/css">

.blue

{

    font-size:16px;

    background-color:yellow;

}

</style>

<body>

    <button type="button" id="btn_addClass">addClass()方法</button><br/>

    <button type="button" id="btn_removeClass">removeClass()方法</button><br/>

    <button type="button" id="btn_toggleClass">toggleClass()方法</button>

    <div id="myDiv1">这是一个神奇的 <b>世界</b>啊 </div>

</body>

</html>

5. css() 方法：返回 CSS 属性、设置 CSS 属性、设置多个 CSS 属性

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //返回指定的 CSS 属性的值

            $("#btn_css1").click(function(){

                alert('myDiv1的背景颜色：'+$("#myDiv1").css("background-color"));

            });

            //设置指定的 CSS 属性

            $("#btn_css2").click(function(){

                $("#myDiv1").css("background-color","green");

            });

            //设置多个 CSS 属性

            $("#btn_css3").click(function(){

                $("#myDiv1").css({"background-color":"pink","font-size":"20px"});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_css1">获取css属性的值</button><br/>

    <button type="button" id="btn_css2">设置css属性</button><br/>

    <button type="button" id="btn_css3">设置多个css属性</button><br/>

    <div id="myDiv1" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </div>

</body>

</html>

6. 处理尺寸的重要方法：width() 和 height() 方法，innerWidth() 和 innerHeight() 方法，outerWidth() 和 outerHeight() 方法。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

            //height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

            //innerWidth() 方法返回元素的宽度（包括内边距）。

            //innerHeight() 方法返回元素的高度（包括内边距）。

            //outerWidth() 方法返回元素的宽度（包括内边距和边框）。

            //outerHeight() 方法返回元素的高度（包括内边距和边框）。

            $("#btn_css1").click(function(){

                $("#myDiv2").html("width: "+$("#myDiv1").width());

                $("#myDiv2").html($("#myDiv2").html()+"<br/>height: "+$("#myDiv1").height());

                $("#myDiv2").html($("#myDiv2").html()+"<br/>innerWidth: "+$("#myDiv1").innerWidth());

                $("#myDiv2").html($("#myDiv2").html()+"<br/>innerHeight: "+$("#myDiv1").innerHeight());

                $("#myDiv2").html($("#myDiv2").html()+"<br/>outerWidth: "+$("#myDiv1").outerWidth());

                $("#myDiv2").html($("#myDiv2").html()+"<br/>outerHeight: "+$("#myDiv1").outerHeight());

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_css1">获取css属性的值</button><br/>

    <div id="myDiv1" style="background-color:yellow;padding:10px;margin:3px;border:1px solid blue;">Div区域</div>

    <div id="myDiv2" ></div>

</body>

</html>

jQuery -- 光阴似箭（三）：jQuery 操作 HTML 元素和属性的更多相关文章

强大的JQuery（三）--操作html与遍历
前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所 ...
JQuery能够高效地操作页面元素
关于DOM和CSS的页面元素选择: $("span"); //全部span元素 $("#elem"); //id为elem的元素 $(".c ...
jquery 学习(三) - 遍历操作
HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...
javascript操作html元素CSS属性
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...
XML 对xml文件的crud的增加 create操作增加元素增加属性
把创建的节点挂到上一节点的最后找到参考节点,使用insertBefore方法进行插入位置 xml添加属性使用setAttribute方法
Jquery 系列（2）选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树如何通过CSS选择符在页中查找元素扩展jQuery标准的CSS选择符选 ...
jquery总结04-DOM节点操作
一般js操作节点 ①创建节点(元素文本)document.createElement innerHTML ②添加属性 setAttribute ③加入文档 appendChild 操作繁琐还有兼容性 ...
【jq】JQuery对select的操作
下拉框 <select id="selectID" name="selectName"> <option vlaue="1" ...
三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素
1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...

随机推荐

Perl文件名通配和文件查找
在shell中使用*来对文件名进行通配扩展,在Perl中也同样支持文件名通配.而且perl中的glob通配方式和shell的通配方式完全一致,实际上perl的glob函数就是直接调用csh来通配的(如 ...
为Spring Cloud Config插上管理的翅膀
最近一致在更新Spring Cloud Config的相关内容,主要也是为这篇埋个伏笔,相信不少调研过Spring Cloud Config的用户都会吐槽它的管理能力太弱.因此,就有了下面为讲推荐的这 ...
IdentityServer4 中文文档 -15- （快速入门）添加 JavaScript 客户端
IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端原文:http://docs.identityserver.io/en/release/quicks ...
AngularJS_自定义控件_笔记1
简介: 本篇博客是在学习AngularJS自定义控件的学习记录,作为一个学习示例... A-基本架构介绍新建一个AngularJs的项目,大概项目结构如下: 项目结构: 大概是由:app.js,bo ...
跨域学习笔记1--跨域调用webapi
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
oracle listener.ora文件配置
# listener.ora Network Configuration File: /oracleDB/product//db_1/network/admin/listener.ora # Gene ...
扩展RBAC用户角色权限设计方案（转载）
扩展RBAC用户角色权限设计方案来源:https://www.cnblogs.com/zwq194/archive/2011/03/07/1974821.html https://blog.csd ...
12.QT4.7.4-解决WIN平台和Linux平台中文乱码,QLineEdit右击菜单中文显示
1.解决Win平台中文显示 1.1首先解决win平台上中文显示乱码问题 1)首先查看qt creator的编码格式通过->编辑->选择编码查看. 2)如果qt creator的编码格式 ...
【Java每日一题】20170208
20170207问题解析请点击今日问题下方的“[Java每日一题]20170208”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...
python面向对象学习（六）类属性、类方法、静态方法
目录 1. 类的结构 1.1 术语 -- 实例 1.2 类是一个特殊的对象 2. 类属性和实例属性 2.1 概念和使用 2.2 属性的获取机制 3. 类方法和静态方法 3.1 类方法 3.2 静态方法 ...

jQuery -- 光阴似箭（三）：jQuery 操作 HTML 元素和属性

jQuery -- 光阴似箭（三）：jQuery 操作 HTML 元素和属性的更多相关文章

随机推荐

热门专题