美文网首页
python全栈 part2 - 002 JavaScript

python全栈 part2 - 002 JavaScript

作者: drfung | 来源:发表于2018-01-04 10:55 被阅读18次

JavaScript

背景知识

  • javascript是独立的语言,浏览器是javascript解释器.
  • 一般存在与html文件中
  • head中使用<script type="text/javascript"></script>标签
  • 保存在js文件中,引入<script src="path"></script>
  • JS代码块放置<body>标签的最下方
  • 注释 单行// 多行/* */
  • 变量:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
  • 编写代码:
    • 在html中编写
    • 临时,在浏览器中 -> 审查元素 -> console

基本数据类型

wwww.cnblogs.com/wupeiqi/articles/5602773.html

  • 数字
  • 字符串
  • 列表(数组)
  • 字典
  • 布尔类型

for循环

  1. 循环时,循环的元素时索引
a = [11, 22, 33, 44]
for(var item in a){
    console.log(a[item]);
}

a = {'k1':'v1', "k2": "v2"}
for(var item in a){
    console.log(a[item]);
}
  1. 三目
for(var i=0;i<10;i=i+1){
    
}

条件语句

if(){
    
}else if(){
    
}else{
    
}

== 值相等
=== 值和类型都相等
&& and
|| or

实例

  1. 定时器:
<script>
// 创建一个定时器
setInterval("alert(123);", 5000);
</script>
  1. 跑马灯:
<div id='i1'>hello world</div>

<script>
    function func(){
        // 根据ID获取指定标签的内容
        var tag = document.getElementById('i1');
        // 获取标签内部内容
        var content = tag.innerText;
        
        var f = content.charAt(0);
        var l = content.substring(1, content.length);
        
        var new_content = l + f;
        
        tag.innerText = new_content;
    }
    
    setInterval('func()', 1000)
</script>

Dom

www.cnblogs.com/wupeiqi/articles/5643298.html

1. 找到标签

# 获取单个标签
document.getElementByID("id")
# 获取多个标签(列表)
document.getElementsByName
document.getElementsByClassName
document.getElementsByTagName

# 间接找标签
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

2. 操作标签

  1. innerText
    获取标签中的文本内容
    标签.innerText

对标签内部文本进行冲刺重新赋值
标签.inenerText = ''

  1. className
    tag.className => 直接整体做操作
    tag.classList.add("样式名") 添加指定样式
    tag.classList.remove("样式名") 删除指定样式
<div onclick="func();">点我</div>
<script>
    function func(){
        
    }
</script>

相关文章

网友评论

      本文标题:python全栈 part2 - 002 JavaScript

      本文链接:https://www.haomeiwen.com/subject/rrtrnxtx.html