jQuery 内容和属性

 
这节课，我们学习使用jQuery来控制元素的内容、值和属性。
 
html() 控制所选元素的内容(包括HTML标记)；
text() 控制所选元素的内容；
val() 控制表单里value的值；
attr() 控制属性，比如a标签里的href  。
 
这几个方法特别的简单好用，那么怎么用呢？它的格式写法，我们来瞧瞧源代码：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery 学习4</title>

    <!--使用jQuery一定不要忘记引用jQuery文件-->

    <script src="../js/jquery-1.12.2.min.js"></script>

</head>

<body>

<div id="div1">用html()方法来控制我，<span>你会看到div里包含的内容和标签</span></div>

<p id="p1">用text()方法来控制我，<span>你只能看到文本内容</span></p>

<input id="in" type="text" value="龙枫"/>

<a id="a" href="http://www.tudou.com">百度</a>

<br/><br/>

<!--我们采用js的点击事件来测试jQuery-->

<button onclick="div1()">点击我获取div的html内容</button>

<button onclick="p1()">点击我获取p的text文本内容</button>

<button onclick="input1()">点击我获取input的val值</button>

<button onclick="a1()">点击我获取a的href属性的值</button>

<script>

    //function声明一个函数

    function div1(){

        //运行此函数，我们就玩jQuery的代码

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

        //这里我们还是用alert方法来弹出提示，看效果

        //大家可以看到，js和jQuery是可以一起的，相互摩擦，而并非使用jQuery就无法使用js

    }

    function p1(){

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

    }

    function input1(){

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

    }

    function a1(){

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

    }

    //以上代码，就会弹出指定的内容。

    //同学们注意，val()方法，是弹出的值，"值"，不是文本内容

    //attr()方法，设置和改变属性值的

</script>

<br/><br/>

<button onclick="div2()">点击我修改div的内容(包括标签)</button>

<button onclick="p2()">点击我修改p的text文本内容</button>

<button onclick="input2()">点击我修改input的val值</button>

<button onclick="a2()">点击我修改a的href属性的值</button>

<!--下面我们再写一个script，页面上是可以写多个script

    老师这里分开写，同学们好区分-->

<script>

    function div2(){

        //同学们注意，用jQuery的html()方法修改内容，是很简单的，看格式

        $("#div1").html("我是div，<b>我被改变了，并且标签也被改变成b标签了</b>");

        //同学们刷新页面，触发此事件之后，会发现，后面的内容被加粗了，是因为b标签是加粗效果

        //我们打开F12查看源码，会发现，span元素被删除了，然后加上了b标签，

        //意思是#div1元素的内容，包括标签全部都变成了上面html()括号里的内容

    }

    function p2(){

        $("#p1").text("我是p，<b>我被改变了文本内容</b>");

        //用text()方法写成和html()方法一样的内容，在页面上触发事件

        //同学们会看到span元素也被删除了，但是并没有出现b元素，在这里，b元素也被当成了字符串内容

        //所以text只能控制文本内容，无法设置HTML标签的

    }

    function input2(){

        $("#in").val("你帅吗？");

        //按下F12查看源码，会发现，input元素里的value也不会发生改变

        //是因为，页面加载完成之后，你即使修改input，源码里的value也不会变动

        //同学们不用担心提交数据到后台，只要页面上的input变成了“你帅吗”，那么提交给后台的也会是这个值

    }

    function a2(){

        //我们先修改a标签的文本内容，再修改它href属性的值

        $("a").text("土豆").attr("href","http://www.tudou.com");

        //这里可以看到，这些方法是可以一起使用来控制一个元素的，只需要在后面加一个"."一个点就OK了

        //attr()方法的使用，两个参数，第一个是属性，第二个则是值。

    }

</script>

<p>以上效果，同学们可以先测试第一行，弹出提示，再测试第二行按钮，修改内容、属性值之后，再来测试第一行的按钮，试试效果</p>

</body>

</html>
 
老师这里额外说一下，以后这些东西会用到神马地方，attr()方法，可以修改图片的路径，很多时候我们玩复选框，但是复选框没法修改css样式，所以我们就可以用图片来代替，第一张图片是未选中，当我点击，就修改它的属性src，值就改成第二张图片已选中的，这样就可以轮流切换；还有一种，是登录的时候，用户密码一般都是 <input type="password" /> 不可见的对吧，输入就是一堆星号，我们就可以放一个按钮在旁边，比如一张图(眼睛的图片)，当我点击这张图，切换input的password变成text 一下就是可见的了。
val()也很重要，我们登录的时候，如果前台判断，它输入的格式、长度等，那么我们就要用到val()方法来获取它的值，才能判断，否则获取不了，就无法正常判断了。
text()和html()都是控制内容的，但html()可控制HTML标签，而text()则只能单纯的控制文本内容，所以同学使用的时候要区分开。
 
上面代码同学们可以多测试一下，还是很简单的，就是注意写法格式
 

第二十二篇 jQuery 学习4 内容和属性的更多相关文章

  1. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  2. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  3. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  4. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  5. 【Python之路】第二十二篇--Django【基础篇】

    1 Django流程介绍 MTV模式       著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业 ...

  6. 第二十二篇 -- 事件与信号（自定义label信号的双击功能）

    在第六篇中已经学习过了自定义信号的相关内容了,那一篇中讲的是自定义类中的自定义信号,类和信号都是自己定义的.那么今天想要学习的是事件处理和信号的关系.如同Label标签,它本身有很多的信号,但是它没有 ...

  7. Python之路【第二十二篇】CMDB项目

    浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...

  8. Python之路【第二十二篇】：Django之Model操作

    Django之Model操作   一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bi ...

  9. flask第二十二篇——模板【4】过滤器

    请关注微信公众号:自动化测试实战 先来教大家一个pycharm设置默认模板的方法.我们每次新建模板或者平时写代码打开以后可能都要重复写# coding: utf-8这些代码,其实我们可以设置好模板,让 ...

随机推荐

  1. MapInfo 文件解析

    在MapInfo 中所指的表是单纯的数据表或是图形与数据的结合.一个典型的MapInfo表将主要由*.tab.*.dat.*.wks.*.dbf. *.xls.*.map.*.id.*.ind文件格式 ...

  2. http1.1管线话 vs htttp2.0 多路复用

    图中第一种请求方式,就是单次发送request请求,收到response后再进行下一次请求,显示是很低效的. 于是http1.1提出了管线化(pipelining)技术,就是如图中第二中请求方式,一次 ...

  3. cad二次开发中DBText对象的外框GeometricExtents有问题？

    CAD2007版本 acDoc.Editor.WriteMessage( string.Format("[{0:F1},{1:F1},{2:F1}] - [{3:F1},{4:F1},{5: ...

  4. 生成html报告

    jmeter -g "D:\JMeter WorkSpace\JMeterScript\IAC\Aggregate Graph\AggregateGraph.csv" -o &qu ...

  5. 深入理解python中函数传递参数是值传递还是引用传递

    深入理解python中函数传递参数是值传递还是引用传递 目前网络上大部分博客的结论都是这样的: Python不允许程序员选择采用传值还是传 引用.Python参数传递采用的肯定是"传对象引用 ...

  6. [笔记] 使用v2r访问外网

    介绍 首先,你需要有一台能上外网的服务器,如AWS,GCP等. 其次,请自行复制全文,然后将FXXK替换为v2r的全称(5个小写字符). 服务器上Docker镜像配置流程 拉取镜像 $ sudo do ...

  7. pycharm设置背景颜色

    https://jingyan.baidu.com/article/9faa7231f88570473c28cb88.html

  8. SparkCore的性能优化

    1.广播变量 1.1. Spark提供的Broadcast Variable,是只读的,并且在每个节点上只会有一份副本,而不会为每个task都拷贝一份副本 1.2.它的最大作用,就是减少变量到各个节点 ...

  9. C#编程 线程，任务和同步(1) 基础认识

    线程 对于所有需要等待的操作,例如移动文件,数据库和网络访问都需要一定的时间,此时就可以启动一个新的线程,同时完成其他任务.一个进程的多个线程可以同时运行在不同的CPU上或多核CPU的不同内核上. 线 ...

  10. 8 Spring / Spring MVC / Mybatis 框架相关知识点

    1)Spring 的 IOC 和 AOP 有了解吗? IOC:控制反转,不需要手动 new 对象,将其交给 Spring 容器,降低程序耦合度. AOP:面向切面编程,动态代理技术.