css position

一般组合 relative+absolute,以relative为父元素,absolute依照relative进行定位。

opcity: 0.5 透明度
z-index: 层级顺序 数字越大,就会在前面。
overflow: hidden,auto
hover

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

a:hover选择器

选择鼠标指针浮动在上面的元素的样式

:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

javascript

  • Head中

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script> <!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
  • 文件

JS代码需要放置在 标签内部的最下方,防止js代码执行时间过长导致界面响应时间比较长。

变量

        name = 'alex'     # 全局变量
var name = 'eric' # 局部变量

写Js代码

    - html文件中编写
- 临时,浏览器的终端 console

基本数据类型

    数字
a = 18;
字符串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置,结束位置)
a.lenght 获取当前字符串长度
...
列表(数组)
a = [11,22,33] 字典
a = {'k1':'v1','k2':'v2'}
布尔类型
小写 true false

for 循环

        1. 循环时,循环的元素是索引

        a = [11,22,33,44]
for(var item in a){
console.log(item);
} a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
} 2.
for(var i=0;i<10;i=i+1){ } a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){ } 不支持字典的循环

条件语句

    if(条件){

    }else if(条件){

    }else if(条件){

    }else{

    }

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

函数

function 函数名(a,b,c){

}

函数名(1,2,3)

Dom

1、找到标签

    获取单个元素        document.getElementById('i1')
获取多个元素(列表)document.getElementsByTagName('div')
获取多个元素(列表)document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合 b. 间接
tag = document.getElementById('i1') parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

2、操作标签

    a. innerText

        获取标签中的文本内容
标签.innerText 对标签内部文本进行重新复制 标签.innerText = "" b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式 PS: <div onclick='func();'>点我</div>
<script>
function func(){ } </script> c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true

前端之css、JavaScript和DOM的更多相关文章

  1. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  2. 前端~HTML~CSS~JavaScript~JQuery~Vue

    HTML CSS JavaScript DOM文档操作 jQuery实例 Vue

  3. 前端开发之JavaScript HTML DOM理论篇一

    主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...

  4. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  5. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  6. 前端开发之JavaScript HTML DOM实战篇

    实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 前端开发之JavaScript HTML DOM理论篇二

    主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素  (1)方法一: appendChild() 追加 如 ...

  8. 前端html、Javascript、CSS技术小结

    简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...

  9. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  10. YUI前端优化之javascript,css篇

    三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression) ...

随机推荐

  1. Ubuntu PostgreSQL安装和配置

    一.安装 1.安装 使用如下命令,会自动安装最新版,这里为9.5 sudo apt-get install postgresql 安装完成后,默认会: (1)创建名为"postgres&qu ...

  2. Yoshua Bengio 2016年5月11日在Twitter Boston的演讲PPT

    Yoshua Bengio最新演讲:Attention 让深度学习取得巨大成功(46ppt) Yoshua Bengio,电脑科学家,毕业于麦吉尔大学,在MIT和AT&T贝尔实验室做过博士后研 ...

  3. owin要跑起来

    必须安装 Microsoft.Owin.Host.SystemWeb

  4. C# ManualResetEvent和AutoResetEvent 使用笔记

    一.两者区别 1.ManualResetEvent 调用一次Set()后将允许恢复所有被阻塞线程.需手动在调用WaitOne()之后调用Reset()重置信号量状态为非终止,然后再次调用WaitOne ...

  5. 新浪微博客户端(50)-解决输入Emotion表情逐渐变小的问题

    UITextView+Extension.h #import <UIKit/UIKit.h> @interface UITextView (Extension) /** 插入属性文本 */ ...

  6. 再说vundle: 完全vim字符编程的四个必须插件 - zen coding 和emmet插件的使用

    一个常识: 基本上vim插件的配置文集都是放在对应插件目录 的/autoload/ plugin_name.vim 文件中的 有四个必要/必须的插件,实现vim完全的字符界面的编程: NERDTree ...

  7. hdu4950 Monster (水题)

    4950 Monster Monster Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...

  8. php页面防重复提交方法总结

    1.提交按钮置disabled 当用户提交后,立即把按钮置为不可用状态.这种用js来实现. 提交前 复制代码 代码如下:         $("#submit").attr('di ...

  9. 阿里云Centos配置iptables防火墙

    虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FORWORD都是ACCEPT的规则 一.检查iptabl ...

  10. visual studio2010 “类视图”和“对象浏览器”图标

    “类视图”和“对象浏览器”显示一些图标,这些图标表示代码实体,例如命名空间.类.函数和变量. 下表以图文并茂的形式说明了这些图标. 图标 说明 图标 说明 namespace 方法或函数 类 运算符 ...