JQuery基本知识（3）

一、JQuery拥有可操作HTML元素和属性的强大方法。

1、JQuery DOM操作（DOM文档对象模型）

获取内容的方法:

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

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

val():设置或返回表单字段的值。

attr():获取标签的属性值

它们有各自对应的回调函数

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQuery操作DOM</title>

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

        <script>

            $(document).ready(function(){

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

                    alert("显示的文本是："+$("p").text());

                });

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

                    alert("显示的HTML是:"+$("p").html());

                });

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

                    alert("显示值是："+$("#txt").val());

                });

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

                    alert("获取的属性值是："+$("#txt").attr("id"));

                });

            });

        </script>

    </head>

    <body>

        <p> <input type="text" id="txt" value="这是一个值" />这是一个富强民主的国家</p>

        <input type="button" value="text()"  id="btnText"/>

        <input type="button" value="html()"  id="btnHtml"/>

        <input type="button" value="val()"  id="btnVal"/>

        <input type="button" value="attr()"  id="btnAtt"/>

    </body>

</html>

设置内容的方法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQuery设置DOM对象</title>

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

        <script>

            $(document).ready(function(){

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

                    $("#test1").text("更换了text");

                });

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

                    $("#test2").html("<a href='#'>我是被添加的一个a标签</a>");

                });

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

                    $("#test3").val("我的val值被更换了");

                });

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

                    $("#test3").attr("value","我是属性值");

                });

            });

        </script>

    </head>

    <body>

        <p id="test1">段落1</p>

        <p id="test2">段落1</p>

        <p >段落3<input type="text" value="测试的值" id="test3"></p>

        <input type="button" id="btn1" value="设置文本"/>

        <input type="button" id="btn2" value="设置HTML"/>

        <input type="button" id="btn3" value="设置值"/>

        <input type="button" id="btn4" value="改变属性值"/>

    </body>

</html>

2、JQuery的添加方法：

append():在被选元素的结尾插入内容

prepend():在备选要的开头插入内容

after():在被选元素之后插入内容

before():在被选之前插入内容

3、JQuery删除元素的方法

remove():删除被选元素及其子元素

empty():从被选元素中删除子元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <title>JQuery添加的方法</title>

        <script>

            $(document).ready(function(){

                //append方法在被选中元素的结尾添加

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

                    $("p").append("<b>我的追加的文本哦</b>");

                });

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

                    $("ol").append("<li>我是新加的列表项</li>");

                });

                //prepend在被选中元素的开头进行添加

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

                    $("p").prepend("<b>我的追加的文本哦</b>");

                });

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

                    $("ol").prepend("<li>我是新加的列表项</li>");

                });

                //删除整个元素

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

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

                });

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

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

                });

            });

        </script>

    </head>

    <body>

        <div id="div1" style="border: 2px; width: 200px; height: 200px; background-color: dodgerblue;">

        <!--<img src="http://pic2.cxtuku.com/00/02/31/b945758fd74d.jpg">-->

        <p>这是一个段落</p>

        <p>这是二个段落</p>

        <ol>

            <li>这是列表</li>

            <li>这是列表</li>

            <li>这是列表</li>

        </ol>

        </div>

        <input type="button" value="追加文本append" id="btnAddL">

        <input type="button" value="添加列表项append" id="btnList">

        <input type="button" value="文本前追加prepend" id="btnpre">

        <input type="button" value="列表前添加prepend" id="btnListpre">

        <input type="button" value="remove方法删除整个DIV" id="btnRemove" />

        <input type="button" value="empty清除选中元素的子元素" id="btnEmpty" />

    </body>

</html>

JQuery基本知识（3）的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  3. jQuery基本知识体系图

    在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery的知识体系.能做到,一看到jQuery,脑海就浮现j ...

  4. JQuery基础知识（1）

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  5. JQuery基础知识（2）

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  6. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  7. jQuery常用知识总结

    jQuery常用知识总结 简介 选择器 属性操作 jQuery() each event事件 jQuery扩展 一.简介 What is jQuery jQuery is fast small and ...

  8. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  9. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

随机推荐

  1. 内部排序->插入排序->其它插入排序->表插入排序

    文字描述 和之前的插入排序比,表插入排序可以保证排序过程中不移动记录:因此表插入排序所用的存储结构和之前的顺序存储不同,表插入排序采用静态链表类型作为待排记录序列的存储结构,设数组中下标0的分量为表头 ...

  2. Bloom Filter 数据结构去重

    Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合. Bloom Filter的这种高效是有一定代价的:在判断一个元素是否属于 ...

  3. /etc/passwd- 和/etc/shadow-文件

    今天偶尔看到系统里有/etc/passwd- 和/etc/shadow-文件,经测试只要执行过系统的用户操作命令就会产生,如deluser.passwd.chpasswd.adduser等命令,应该是 ...

  4. linux 修改密码命令

    1.passwd命令  脚本中语法:echo "password" | passwd testuser --stdin > /dev/null 2>&1 或(e ...

  5. 【Python基础】json.dumps()和json.loads()、json.dump()和json.load()的区分

    json文件处理涉及的四个函数json.dumps()和json.loads().json.dump()和json.load()的区分 一.概念理解 1.json.dumps()和json.loads ...

  6. 关于eclipse调试时程序控制台不能自动打开

      对于这个程序,在刚开始的时候,没有敲上22,29,33行的打印语句时,在调试的时候不会自动弹开控制台,所以一直在怀疑代码可能出错了.因此可以自己手动打开,但是如果敲上那些代码,系统可以自动弹开控制 ...

  7. try catch和spring事务

  8. composer安装其实可以很简单 两行命令就解决了

    最近接了一个cakephp项目,就想着用composer安装实施,因为Composer 可以方便地帮你安装项目中声明所依赖的外部工具库(libraries).之前没有接触过,相对比较陌生,但是相信ph ...

  9. win7 64位共享打印机

    故障一 链接的电脑提示需要密码 处理步聚:取消win7共享计算机上网络的密码保护共享 1.查看网上邻居链接局域网的网络的网络防火墙设置. 2.更改链接局域网的网络的防火墙的更改高级共设置. 3.关闭链 ...

  10. Python基础-编码与解码

      一.什么是编码 编码是指信息从一种形式或格式转换为另一种形式或格式的过程. 在计算机中,编码,简而言之,就是将人能够读懂的信息(通常称为明文)转换为计算机能够读懂的信息.众所周知,计算机能够读懂的 ...