例子1

html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>jquery</title>
  6. 		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  7. 		<script type="text/javascript" src="js/try.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<p id="p1">hello world</p>
  11. 		<button id="btn1">点我</button>
  12. 	</body>
  13. </html>

　　js

  1. $(document).ready(function(){
  2. 	$("#btn1").click(function() {
  3. 		$("#p1").text("世界和平");
  4.  
  5.   });
  6. });

　效果：

例子2

html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>jquery</title>
  6. 		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  7. 		<script type="text/javascript" src="js/try.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<button id="btn1">点我</button>
  11. 		<button id="btn2">点我</button>
  12. 	     <p id="p1">hello world</p>
  13. 		   <p id="p2">are you ok</p>
  14. 	</body>
  15. </html>

　　js

  1. $(document).ready(function(){
  2. 	$("#btn1").click(function() {
  3. 		$("#p1").text("世界和平");
  4.  
  5.   });
  6.   $("#btn2").click(function() {
  7. 		$("#p2").html("<a hre='#'>天气好好</a>");
  8.  
  9.   });
  10. });

　　效果：

例子3

html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>jquery</title>
  6. 		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  7. 		<script type="text/javascript" src="js/try.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<button id="btn3">点击</button>
  11. 		<input type="text" id="input"  value="hello world">
  12. 	</body>
  13. </html>

　　js

  1. $(document).ready(function(){
  2.  
  3.   $("#btn3").click(function(){
  4.     $("#input").val("世界和平");
  5.  
  6.   });
  7. });

　　效果：

例子4

html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>jquery</title>
  6. 		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  7. 		<script type="text/javascript" src="js/try.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<button id="btn1">跳转</button>
  11. 		<a   id="a"  href="http://www.baidu.com">百度网站,点击改变</a>
  12. 	</body>
  13. </html>

　　js

  1. $(document).ready(function(){
  2.  
  3.   $("#btn1").click(function(){
  4.     $("#a").attr("href","http://www.jquery123.com");
  5.  
  6.  });
  7. });

　　效果：

jQuery HTML-设置的更多相关文章

  1. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  2. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  3. jQuery中设置form表单中action值的方法

    jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈   html代码: <form id="myFormId&quo ...

  4. jQuery扩展函数设置所有对象只读

    jQuery(function ($) {             $.fn.disable = function () {                 return this.each(func ...

  5. jquery datagrid设置pageSize不起作用

    http://www.2cto.com/kf/201212/178098.html —————————————————————————————————————————————————————————— ...

  6. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  7. jquery datatable设置垂直滚动后，表头(th)错位问题

    jquery datatable设置垂直滚动后,表头(th)错位问题 问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...

  8. jquery获取设置服务器控件的方法

    jquery获取设置服务器控件的方法 获取TextBox,HiddenField,Label的值.例如: <asp:TextBox ID="txtBoxID" runat=& ...

  9. Jquery 如何设置多个attr()属性

    Jquery 如何设置多个attr()属性?     文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________________________ ...

  10. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

随机推荐

  1. vs2005下opengl（glut）的配置记录

    摘自:http://blog.csdn.net/joeblackzqq/article/details/6956959 首先参考了网上的安装配置环境部分:http://blog.csdn.net/Id ...

  2. 排查Java高CPU占用原因

    近期java应用,CPU使用率一直很高,经常达到100%,通过以下步骤完美解决,分享一下. 方法一: 转载:http://www.linuxhot.com/java-cpu-used-high.htm ...

  3. 推荐Html Table和Markown互转的网站Table Convert Online

    网站名称:https://tableconvert.com/ 进入网站可以看到可以Table 转为Markdown.JSON.XML.SQL 多种格式 Table(4×5)定义Table的行数和列数: ...

  4. Codeforces 803F - Coprime Subsequences(数论)

    原题链接:http://codeforces.com/contest/803/problem/F 题意:若gcd(a1, a2, a3,...,an)=1则认为这n个数是互质的.求集合a中,元素互质的 ...

  5. 【Linux】设置开机自启

    忘记转发的哪里的. 方法 1这种方法会利用 /etc/ 中的 rc.local 文件来在启动时执行脚本与命令.我们在文件中加上一行来执行脚本,这样每次启动系统时,都会执行该脚本. 不过我们首先需要为 ...

  6. Bugku | Easy_vb

    载入ida,直接搜‘ctf’就有了,坑点是不要交“MCTF{XXX}”,要交“flag{XXXX}”

  7. spring boot项目打包成war

    一.修改打包类型 在pom.xml中修改 <packaging>war</packaging> 二.移除嵌入式tomcat插件,并以依赖方式引入 <dependency& ...

  8. 20175213 2018-2019-2 《Java程序设计》第11周学习总结

    教材学习内容总结 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Uniform Resource Locator),使用URL创建对象的应用程序称作客户端程序 U ...

  9. C# JS 前后端互传数据

    ---恢复内容开始--- 后端: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &q ...

  10. Daily Life——团队冲刺博客——（领航篇）

    目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...