jQuery基础----12jQuery HTML-设置
2015-08-16 14:54
711 查看
<!DOCTYPE html> <!--jQuery HTML-设置--> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-2.1.4.min.js"></script> <script src="js12.js"></script> </head> <body> <p id="pid1">吾生也有涯1</p> <p id="pid2">吾生也有涯2</p> <input type="text" value="hello" id="myshurukaung01"> <br/> <a href="http://www.baidu.com" id="aid01">中国最牛的搜索引擎</a> <br/> <button id="btn1">按钮1</button> <br/> <button id="btn2">按钮2</button> <br/> <button id="btn3">按钮3</button> <br/> <button id="btn4">按钮4</button> <br/> <p id="pid5">callback</p> <button id="btn5">按钮5</button> </body> </html> js: /** * Created by hao on 2015/8/15. */ $(document).ready(function(){ $("#btn1").click(function(){ //修改p元素中的内容 $("#pid1").text("庄子很牛逼"); }); $("#btn2").click(function(){ //吧p元素改成a元素 $("#pid2").html("<a href='http://www.baidu.com'>伟大的百度</a>"); }); $("#btn3").click(function(){ //改变输入框中的文字 $("#myshurukaung01").val("中国人"); }); $("#btn4").click(function(){ //改变输入框中的文字 $("#aid01").attr({ "href":"http://www.jikexueyuan.com/path/html5/", "title":"hello world" }); }); $("#btn5").click(function(){ $("#pid5").text(function(i,ot){ return "old"+ot+"新内容"+(i); }); }) })
相关文章推荐
- jQuery基础----11jQuery HTML-捕获
- jQuery基础----10jQuery效果-回调
- jQuery Mobile
- jQuery基础----09jQuery效果-滑动
- jQuery基础----08jQuery效果-淡入淡出
- jQuery基础----07jQuery效果-隐藏与显示
- jQuery基础----06jQuery选择器和事件-事件之自定义事件
- jQuery基础----05jQuery选择器和事件-事件之事件目标与冒泡
- jQuery基础----04jQuery选择器和事件-事件之绑定、解除绑定事件
- jQuery基础----03jQuery选择器和事件-事件之事件常用方法
- jQuery基础----02jQuery选择器和事件-选择器
- jquery.text()和.html()的原理
- jQuery基础----01jQuery简介及语法,jQuery的基本语法
- JQuery AJAX Demo
- Jquery 插件初学习
- jquery mobile开发中footer一直在底部的设置方法
- 用jquery实现小火箭到页面顶部的效果
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
- jquery 让输入框只能输入数字
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现