JQuery基本知识（3）

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

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

获取内容的方法:

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>JQuery操作DOM</title>
  6.         <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
  7.         <script>
  8.             $(document).ready(function(){
  9.                 $("#btnText").click(function(){
  10.                     alert("显示的文本是："+$("p").text());
  11.                 });
  12.                 $("#btnHtml").click(function(){
  13.                     alert("显示的HTML是:"+$("p").html());
  14.                 });
  15.                 $("#btnVal").click(function(){
  16.                     alert("显示值是："+$("#txt").val());
  17.                 });
  18.                 $("#btnAtt").click(function(){
  19.                     alert("获取的属性值是："+$("#txt").attr("id"));
  20.                 });
  21.             });
  22.         </script>
  23.     </head>
  24.     <body>
  25.         <p> <input type="text" id="txt" value="这是一个值" />这是一个富强民主的国家</p>
  26.         <input type="button" value="text()"  id="btnText"/>
  27.         <input type="button" value="html()"  id="btnHtml"/>
  28.         <input type="button" value="val()"  id="btnVal"/>
  29.         <input type="button" value="attr()"  id="btnAtt"/>
  30.     </body>
  31. </html>

设置内容的方法：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>JQuery设置DOM对象</title>
  6.         <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
  7.         <script>
  8.             $(document).ready(function(){
  9.                 $("#btn1").click(function(){
  10.                     $("#test1").text("更换了text");
  11.                 });
  12.                 $("#btn2").click(function(){
  13.                     $("#test2").html("<a href='#'>我是被添加的一个a标签</a>");
  14.                 });
  15.                 $("#btn3").click(function(){
  16.                     $("#test3").val("我的val值被更换了");
  17.                 });
  18.                 $("#btn4").click(function(){
  19.                     $("#test3").attr("value","我是属性值");
  20.                 });
  21.             });
  22.         </script>
  23.     </head>
  24.     <body>
  25.         <p id="test1">段落1</p>
  26.         <p id="test2">段落1</p>
  27.         <p >段落3<input type="text" value="测试的值" id="test3"></p>
  28.         <input type="button" id="btn1" value="设置文本"/>
  29.         <input type="button" id="btn2" value="设置HTML"/>
  30.         <input type="button" id="btn3" value="设置值"/>
  31.         <input type="button" id="btn4" value="改变属性值"/>
  32.     </body>
  33. </html>

2、JQuery的添加方法：

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

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

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

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

3、JQuery删除元素的方法

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
  6.         <title>JQuery添加的方法</title>
  7.         <script>
  8.             $(document).ready(function(){
  9.                 //append方法在被选中元素的结尾添加
  10.                 $("#btnAddL").click(function(){
  11.                     $("p").append("<b>我的追加的文本哦</b>");
  12.                 });
  13.                 $("#btnList").click(function(){
  14.                     $("ol").append("<li>我是新加的列表项</li>");
  15.                 });
  16.                 //prepend在被选中元素的开头进行添加
  17.                 $("#btnpre").click(function(){
  18.                     $("p").prepend("<b>我的追加的文本哦</b>");
  19.                 });
  20.                 $("#btnListpre").click(function(){
  21.                     $("ol").prepend("<li>我是新加的列表项</li>");
  22.                 });
  23.                 //删除整个元素
  24.                 $("#btnRemove").click(function(){
  25.                     $("#div1").remove();
  26.                 });
  27.                 $("#btnEmpty").click(function(){
  28.                     $("#div1").empty();
  29.                 });
  30.             });
  31.         </script>
  32.     </head>
  33.     <body>
  34.         <div id="div1" style="border: 2px; width: 200px; height: 200px; background-color: dodgerblue;">
  35.         <!--<img src="http://pic2.cxtuku.com/00/02/31/b945758fd74d.jpg">-->
  36.         <p>这是一个段落</p>
  37.         <p>这是二个段落</p>
  38.         <ol>
  39.             <li>这是列表</li>
  40.             <li>这是列表</li>
  41.             <li>这是列表</li>
  42.         </ol>
  43.         </div>
  44.         <input type="button" value="追加文本append" id="btnAddL">
  45.         <input type="button" value="添加列表项append" id="btnList">
  46.         <input type="button" value="文本前追加prepend" id="btnpre">
  47.         <input type="button" value="列表前添加prepend" id="btnListpre">
  48.         <input type="button" value="remove方法删除整个DIV" id="btnRemove" />
  49.         <input type="button" value="empty清除选中元素的子元素" id="btnEmpty" />
  50.     </body>
  51. </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. 请教神牛_字符串hash

    针对字符串hash 我早就听闻可以暴力的干一些事情. 比如 可以... 很多很多 实现O(n)求出 模式串在文本串出现的次数. 但是我不会这什么hash. 我会自然溢出字符串hash 嘿嘿 unsig ...

  2. 【python基础】迭代器和生成器函数

    1.迭代器协议: 1.迭代器协议是指:对象必须提供一个 __next__() 方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走不能往前退) ...

  3. 重读《深入理解Java虚拟机》三、Java虚拟机执行的数据入口（类文件结构）

    1.Java如何实现平台无关系 Java要实现平台无关系就需要在Java代码和本地机器之间引入一个中间层,实现Java代码和本地机器的解耦,而这个中间层就是字节码.字节码独立于本地机器,以实现代码的可 ...

  4. Apache Spark支持三种分布式部署方式 standalone、spark on mesos和 spark on YARN区别

    链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ Spark On ...

  5. 关于hover的一个问题记录

    问题描述: 页面显示: 当鼠标移动到其中一个文件夹上面的时候,显示如下: 显示这样的效果的原理是:对于外层元素.collectionsbox添加hover之后,再去取里面的元素,比如说左上角的shar ...

  6. “我的小程序”来了 新版微信v6.7.1下拉就能找到

    今天iOS版微信迎来v6.7.1正式版发布,本次升级主要是可以把常用的小程序添加到“我的小程序”.近期版本微信可以直接浏览订阅号的消息,扫一扫可拍照翻译整页中英文,浏览的文章支持缩小为浮窗.两大更新如 ...

  7. wordpress去掉category怎么操作让url更简洁友好

    用wordpress建站是比较流行的,全球将近25%的站点是用wordpress搭建的.有很多的模板.插件可以选择,当然最好还是能自己优化.URL固定链接就是之中一个基础的技巧.有网友问如何去掉url ...

  8. C 函数声明及求最大值

    #include <stdio.h> int main() { int a,b,c,max(int x,int y,int z); scanf("%d,%d,%d",& ...

  9. 对比损失（Contrastive Loss）学习【转载】

    转自:https://blog.csdn.net/autocyz/article/details/53149760 https://www.tensorflow.org/tutorials/repre ...

  10. Spring MVC定时服务

    spring-mvc-config.xml <context:component-scan base-package="com.bf" ></context:co ...