js学习笔记-初探JavaScript魅力 – 1
话说弄网站怎么能不会js呢,那么从今天开始,我也开始来学习了,看看我今天学到的内容吧。
我可以说这些都是我手打的吗...
第一个是最简单的-鼠标划过选框,显示提示内容,鼠标移出,提示内容消失。
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习</title>
- <meta charset="UTF-8" />
- <style>#div1{display: none;}</style>
- </head>
- <body>
- <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>
- <div id="div1">
- 这里是测试内容,鼠标滑过显示
- </div>
- </body>
- </html>
遇到的问题:额,大小写能不能别写错啊!!!
第二个测试,多个style样式改变
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习</title>
- <meta charset="UTF-8" />
- <style>#div1{width: 200px;height: 200px;background: red;}</style>
- </head>
- <body>
- <div id="div1" onmouseover="
- document.getElementById('div1').style.width='300px';
- document.getElementById('div1').style.height='300px';
- document.getElementById('div1').style.background='green';
- "
- onmouseout="
- document.getElementById('div1').style.width='200px';
- document.getElementById('div1').style.height='200px';
- document.getElementById('div1').style.background='red';
- ">
- </div>
- </body>
- </html>
第三个js练习,运用函数来调用js
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习</title>
- <meta charset="UTF-8" />
- <style>
- #div1{
- width: 200px;
- height: 200px;
- background: red;
- }
- </style>
- <script>
- function togreen(){
- document.getElementById('div1').style.width='300px';
- document.getElementById('div1').style.height='300px';
- document.getElementById('div1').style.background='green';
- }
- function tored(){
- document.getElementById('div1').style.width='200px';
- document.getElementById('div1').style.height='200px';
- document.getElementById('div1').style.background='red';
- }
- </script>
- </head>
- <body>
- <div id="div1" onmouseover="togreen()" onmouseout="tored()"><!-- 这里别漏了() -->
- </div>
- </body>
- </html>
第四个练习,利用变量来精简代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习</title>
- <meta charset="UTF-8" />
- <style>
- #div1{
- width: 200px;
- height: 200px;
- background: red;
- }
- </style>
- <script>
- function togreen()
- {
- var oDiv=document.getElementById('div1');
- oDiv.style.width='300px';
- oDiv.style.height='300px';
- oDiv.style.background='green';
- }
- function tored()
- {
- var oDiv=document.getElementById('div1');
- oDiv.style.width='200px';
- oDiv.style.height='200px';
- oDiv.style.background='red';
- }
- </script>
- </head>
- <body>
- <div id="div1" onmouseover="togreen()" onmouseout="tored()">
- </div>
- </body>
- </html>
第五个练习,点击切换css(说明了,任何标签都可以添加id,标签内任何属性都可以通过js来替换)
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习-更换herf里面的内容</title>
- <meta charset="UTF-8" />
- <link id="l1" rel="stylesheet" type="text/css" href="css1.css">
- <script>
- function skin1()
- {
- var oL=document.getElementById.('skin1');
- oL.href='css1.css';
- }
- function skin2()
- {
- var oL=document.getElementById.('skin2');
- oL.href='css2.css';
- }
- </script>
- </head>
- <body>
- <input type="button" value="skin1" onclick="skin1()">
- <input type="button" value="skin2" onclick="skin2()">
- </body>
- </html>
好吧,下面的不文字介绍了
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习-更换herf里面的内容</title>
- <meta charset="UTF-8" />
- <script>
- function setText()
- {
- var oTxt=document.getElementById('text1');
- oTxt.value="文字2";
- }
- </script>
- </head>
- <body>
- <input id="text1" type="text" value="文字1"/>
- <input type="button" value="改文字" onclick="setText()">
- </body>
- </html>
if判断+添加/移除class属性
- <!DOCTYPE html>
- <html>
- <head>
- <title>JS练习-if判断加变色</title>
- <meta charset="UTF-8" />
- <style>
- #div1{height: 200px;width: 100px;border: 1px solid black;}
- .box{background: red}
- </style>
- <script>
- function turnRed()
- {
- var oDiv=document.getElementById('div1');
- if (oDiv.className=='box') {
- oDiv.className='';
- }
- else{
- oDiv.className='box';
- }
- }
- </script>
- </head>
- <body>
- <input type="button" value="变色" onclick="turnRed()"/>
- <div id="div1"></div>
- 这里注意className的写法 以及判断语句==
- </body>
- </html>
初探JavaScript魅力 - 1
JavaScript是什么
- 网页特效原理
- 淘宝、新浪、百度
- JavaScript就是修改样式
- 编写JS的流程布局:
- HTML+CSS属性:确定要修改哪些属性事件:确定用户做哪些操作(产品设计)
- 编写JS:在事件中,用JS来修改页面元素的样式
第一个JS特效——鼠标提示框
- 分析效果实现原理
- 样式:Div的display
- 事件:onmouseover、onmouseout
- 动手编写此效果
- 特效基础
- 事件驱动:onmouseover
- 元素属性操作:obj.style.[……]
- 特效实现原理概括:响应用户操作,对页面元素(标签)进行某种修改
初识函数
- 制作更复杂的效果(DIV的颜色、大小都变化)
- 直接在事件内写代码会很乱引入fucntion()、函数的基本形式
- 把JS从标签里放入到函数里,类似css里的class
- 变量的使用——别名
- 定义和调用
- 函数定义:只是告诉系统有这个函数,不会实际执行
- 函数调用:真正执行函数里的代码
- 关系和区别
getElementById
- 第一个JS兼容性问题
- 在FF下直接使用ID存在问题
- 引入document.getElementById()
- document.getElementById在任何浏览器下均可使用
- 网页换肤
- 土豆网“开灯、关灯”效果
- 任何标签都可以加ID,包括link
- 任何标签的任何属性,也都可以修改
- HTML里怎么写,JS里就怎么写
if判断
- 点击按钮显示/隐藏Div (弹出菜单)
- 特效实现过程及原理分析
- if的基本形式
- 扩展
- 为a链接添加JS
- <a href=“javascript:;”></a>
- className的使用
- 为a链接添加JS
好东西,我也学习学习1
好的,支持啊!灰狼越来越厉害了
擦 照视频抄罢了
哈~不错~~~~干吧碟~
看来我得多学习啊 要不然就落后了 其实 本来我就不会 ……
彼此彼此
求教导,就指教,求帮助,各种求
很久很久没弄主题了,也正是需要学习js最近也拿WP练手来着,学习学习~