第二十二篇 jQuery 学习4 内容和属性
jQuery 内容和属性
<!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>
第二十二篇 jQuery 学习4 内容和属性的更多相关文章
- 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素
jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...
- 第二十四篇 jQuery 学习6 删除元素
jQuery 学习6 删除元素 上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- Python开发【第二十二篇】：Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- 【Python之路】第二十二篇--Django【基础篇】
1 Django流程介绍 MTV模式 著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业 ...
- 第二十二篇 -- 事件与信号（自定义label信号的双击功能）
在第六篇中已经学习过了自定义信号的相关内容了,那一篇中讲的是自定义类中的自定义信号,类和信号都是自己定义的.那么今天想要学习的是事件处理和信号的关系.如同Label标签,它本身有很多的信号,但是它没有 ...
- Python之路【第二十二篇】CMDB项目
浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...
- Python之路【第二十二篇】：Django之Model操作
Django之Model操作 一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bi ...
- flask第二十二篇——模板【4】过滤器
请关注微信公众号:自动化测试实战 先来教大家一个pycharm设置默认模板的方法.我们每次新建模板或者平时写代码打开以后可能都要重复写# coding: utf-8这些代码,其实我们可以设置好模板,让 ...
随机推荐
- Mac下搭建Vue开发环境
认知: 注:上面的图片转自Vue2.0 新手入门 — 从环境搭建到发布 1.安装brew 打开终端运行以下命令: /usr/bin/ruby -e "$(curl -fsSL https:/ ...
- slub分配object
kmem_cache如下: 62struct kmem_cache { struct kmem_cache_cpu __percpu *cpu_slab; /* Used for retriving ...
- java初级之数组详解
一,数组的概念: 数组是为了存储同一种数据多个元素的集合,也可以看成是一个容器,数组既可以存储基本数据类型,也可以存储引用数据类型,数组是为了存储同种数据类型的多个值. 1.1.1,一维数组重点: 数 ...
- 转： zepto的使用方法
有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的.jquery使用多了那么就让我们一起来了解下zepto把. ...
- 六十七：flask上下文之Local线程隔离对象
Local对象在flask中,类似于request对象,其实是绑定到了werkzeug.local.Local对象上,这样即使是同一个对象,在多线程中都是隔离的,类似的对象还有session以及g对象 ...
- IFC布局特点
IFC(inline formatting context),行内格式化上下文 特点: 1.内联元素在水平线上一个接一个排列 2.内部元素水平方向上的margin.padding.border有效,垂 ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- __getattriute__
# class Foo: # def __init__(self,x): # self.x = x # def __getattr__(self,item): # print("__geta ...
- C学习笔记-文件操作
文件操作大致分三步 打开文件 读写文件 关闭文件 二进制和文本模式的区别 在windows系统中,文本模式下,文件以"\r\n"代表换行.若以文本模式打开文件,并用fputs等函数 ...
- 1. centos7 的安装
选择上海时间 我们选择桌面版 选择手动配置分区 选择标准分区 修改主机名 开始安装 设置密码 设置用户名 接下来等待安装完 同样的操作再安装3台机器!!这里不多赘述. 安装完之后就重启 接下来给不同机 ...