JQuery学习之旅(1)
2016-07-27 16:08
615 查看
JQuery的学习之旅(1)– 基础篇
**getElementById(id); 获取指定id的元素object.style 是属性
通过对象object.style.property = xxx; 赋值,对对象的属性进行修改
object.className= xx; 改变对象的样式
通过object.reamoveAttribute(“style”) ,将对象的style重新设置。
**
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <title>document.getElementById</title> <style type="text/css"> input{ font-size:10px; } .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; }.two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <input type="button" value="改变颜色" onclick="changeColor()"/> <input type="button" value="改变宽高" onclick="changeHeightAndWidth()"/> <input type="button" value="隐藏内容" onclick="hide()"/> <input type="button" value="显示内容" onclick="show()"/> <input type="button" value="取消设置" onclick="cancel()"/> <input type="button" value="添加样式" onclick="add()"/> <input type="button" value="改变样式" onclick="change()"/> </form> <script type="text/javascript"> function changeColor() { var my = document.getElementById("con"); my.style.color = "#fff"; my.style.backgroundColor = "#CCC"; } function changeHeightAndWidth() { var my = document.getElementById("con"); my.style.height="100px"; my.style.width="200px"; } function show() { var my = document.getElementById("con"); my.style.display="block"; } function hide() { var my = document.getElementById("con"); my.style.display="none"; } function cancel() { var conf = confirm("消除设置吗?") if(conf == true){ var my = document.getElementById("con"); //删除样式 my.removeAttribute("style"); my.className=null; } } function add() { var my = document.getElementById("con"); my.className = "one"; } function change() { var my = document.getElementById("con"); my.className = "two"; } </script> </body> </html>
相关文章推荐
- springmvc+hibernate+ajax+jquery+freemarker制作二级联动
- jQuery的Ajax
- jQuery hover方法
- 类似智联招聘选择职位的弹出框效果,可做选择城市等信息
- Jquery vaildate 自定义验证图片大小和类型
- jQuery的选择器
- 自学jQuery的随笔1
- jquery 事件冒泡的介绍以及如何阻止事件冒泡、浏览器默认行为
- jQuery.extend 函数详解
- jquery学习以及下载链接
- textarea自动分行jquery php html简单做法
- JQUERY $.post()
- jquery ui sortable 拖动时位置错位
- Jquery中this和$(this)的区别
- js、jquery对于html内容的转义
- jQuery中document与window以及load与ready 区别详解
- jQuery 遍历 - closest() 方法
- jquery代码素材-16素材网
- 【freecodecamp】jQuery知识点
- 使用 纯JQuery 进行 表单 验证