JavaScript日常修炼笔记（第二天）
标签：
JavaScript
今天是第二天，继续朝着万元高新进发！！！！
认识DOM
个人觉得学好代码，对于每个英文单词都得认识，不能死记硬背，要真正理解他的意思，那么学代码就会相对轻松多了。
D（document，文档），O（object，对象），M（model，模型）
写完一个HTML就是由节点构成的，和建一栋大楼一样！
- 元素节点：<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
通过ID获取元素：getELementById("id名称");
<script type="text/javascript">
var LOL = document.getElementById("LOLhero");
document.write("获取ID后输出该文本的结果：" + LOL.innerHTML);
</script>
<p id="LOLhero">提莫队长</p>改变 HTML 样式
第一天讲过，通过DOM改变样式。
语法：Object.style.property=new style;
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color = "red";
mychar.style.backgroundColor = "#ccc";
mychar.style.width = "300px";
</script>显示和隐藏（display属性）
语法：Object.style.display = value
value值有两个属性，"none"，"block"。
<script type="text/javascript">
function hidetext(){
var hid = document.getElementById("con");
hid.style.display = "none";
}
function showtext(){
var sho = document.getElementById("con");
sho.style.display = "block";
}
</script>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>控制类名（className 属性）
语法：object.className = classname
classname要加双引号，className不仅可以改变class属性，也可以添加class属性。
<style>
body{ font-size:16px;}
.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>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>小小练习题
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
<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="chgcolor()">
<input type="button" value="改变宽高" onclick="scale()">
<input type="button" value="隐藏内容" onclick="chgnone()">
<input type="button" value="显示内容" onclick="chgblock()">
<input type="button" value="取消设置" onclick="rmv()">
</form>
<script type="text/javascript">
var chg = document.getElementById("txt");
//定义"改变颜色"的函数
function chgcolor(){
chg.style.color = "#000000";
chg.style.backgroundColor = "#eee";
}
//定义"改变宽高"的函数
function scale(){
chg.style.width = "300px";
chg.style.height = "300px";
}
//定义"隐藏内容"的函数
function chgnone(){
chg.style.display = "none";
}
//定义"显示内容"的函数
function chgblock(){
chg.style.display = "block";
}
//定义"取消设置"的函数
function rmv(){
var com = confirm("queding");
if(com==true){
chg.removeAttribute("style");
}
}
</script>自加一，自减一 ( ++和- -)
mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10
(逻辑与操作符&&）
b>a && b<c //“&&”是并且的意思, 读法"b大于a"并且" b小于c "
<script type="text/javascript">
var numa,numb;
numa=60;
numb=70;
if(numa>=60 && numb>=60)
{
document.write("JavaScript考核通过！"+"<br>");
}
</script>(逻辑或操作符||）
"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。
<script type="text/javascript">
var numa,numb,jq1;
numa=50;
numb=55;
jq1=numa>numb||numa==numb;
document.write("jq1的值是:"+jq1+"<br>")
</script>(逻辑非操作符！）
"!"是逻辑非操作符，也就是"不是"的意思~
var a=3;
var b=5;
var c;
c=!(b>a); // b>a值是true,! (b>a）值是false
c=!(b<a); // b<a值是false, ! (b<a）值是true(操作符优先级）
var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75
var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2; //结果为false点击查看更多内容
4人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦