一. CSS简单了解

　　需要掌握：

概念见day11中的课堂笔记

css：修饰html标签的样式

1.每个元素有一个style属性，其形式为：style=“属性：值；属性：值。。。。”，注意：多个样式用分号隔开

2. style 标签      样式标签，所有的css代码写在标签内

语法：

选择器{

     color：yellow;

     font-size：200px;

}

选择器：选择到具体的某一个或是某几个元素

（1）使用标签名=====> 元素选择器

（1）style属性和style标签

Font的color的size大小只能是7，有些时候不符合要求，css是修饰标签的，其可以满足一些需求，从而对页面进行布局

size的尺寸最大只能是7，将其值设置更大也是一样

若想将之设置更大的解决办法：style属性

页面显示结果

若很多的font标签内的内容需要改变一些属性，每个font标签内的元素都写属性很麻烦，这时候使用style标签就很方便（结合元素选择器一起使用）

页面显示结果（可见style标签没有作用于p标签中的元素，只作用了font标签中的元素）

 （2）选择器

选择器：选择到具体的某一个或是某几个元素

1. 使用标签名=====> 元素选择器（如上面的font）

2. id选择器

需求：若有多个相同的标签（如下面有2个dont标签），只想让某一个或某些标签元素改变，则需要使用id选择器

页面显示结果：

 3. 多选择器

若上诉id选择器例子再加上其他标签（如p标签），想要势style标签作用的标签类型为font,和p，则该怎么解决？====>多选择器，需要用逗号隔开

页面显示结果：

（3）若想在多个html文件中使用css=====>建立css文件，在html文件中引入此css样式

需求：让demo1.html和demo2.html文件中的两个字体都改变颜色（不能通过单独在font标签中加属性的方式来解决）

如图，直接在css文件夹下建立一个nyscss文件，其内直接写需要的样式，如下

html文件中引入css的形式如下：

这样以来两个html文件中的字体颜色都会发生变化

（4）背景图片

在body标签中添加style属性，属性的值为json形式的字符串，其key为background-image，值为背景图片的url，如下

页面显示即为url中的图片

二. javascript的简单了解

1. 简介：

　　javaScript,  (1)是一个编程语言（包括数据类型，流程控制，运算符，方法，事件），(2)是一个弱数据类型的编程语言（数据类型统一使用var表示，如var  str = 12/" "/true）(3)是哟个脚本语言（运行依赖其他语言  html），不需要编译，可以被浏览器直接解释执行

　　代码自上而下，逐行执行，当遇到错误时，解析引擎停止

　　作用：动态操作html元素和css样式（操作元素的属性，如input，value，style），和后台交互

　　通俗理解：html是页面的骨架；css是页面的衣服；js是页面的大脑

2. 快速入门（具体见day11文档中的javaScript.docx文档）

2.1 javaScript代码应该写在哪？

　　1. js文件中，引入使用

　　2. 写在指定页面上,<script></script>, 一般写在body标签后

2.2 数据类型

　　typeof（）表示查看某个数据的类型

alert相当于print，其在浏览器的页面显示alert()内的参数，显示结果如下

注意：javascript是弱数据类型的编程语言，所有变量的声明都是关键字var

2.2.1  number 　　

数字类型：整数、小数和NaN（Not a Number），如下

在页面显示如下：

 2.2.2  string

字符串类型   单引号和双引号都表示字符串

数组的遍历（类似java，普通和增强）

第一种遍历

第二种遍历方式

2.2.3   boolean+undefined+null值

　　

变量不赋值的话就时undefined类型的数据

2.3 流程控制

1  if语句：和java语法一样

javascript中

==       比较两个值是否相等

===     比较值和数据类型

2   for语句，与java用法一致

document   代表整个html的文档对象，获取到此对象就可以获取当前页面的任意元素

document.getElementById() //根据id获取元素

document.getElementByName()//name属性

document.getElementByTagName() //标签名
获取一个js对象（元素对象）
js对象.属性 = 赋值

3 while  与java语言一致

练习：动态时钟

1. 直接在html文件中写js代码

2. 通过引入外部的js文件的形式

文件层次

myJs.html

    //方法的定义

    function showTime(){

        // 获取时分秒

        var date = new Date()

        var h = date.getHours()

        h=(h<10)?"0"+h:h

        var s = date.getSeconds()

        s=(s<10)?"0"+s:s

        var m = date.getMinutes()

        m=(m<10)?"0"+m:m

        // 获取元素

        var h1 = document.getElementById("time")

        //h1.innerText = h + ":" + m + ":" + s

        //改变字体颜色

        h1.innerHTML="<font color='red'>"+h + ":" + m + ":" + s+"</font>"

    }

    setInterval("showTime()",1000)

date.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <h1 id="time"></h1>

    <body>

    </body>

    <script type="text/javascript" src="../js/myJs.js">    </script>

</html>

2.4 方法   函数

1. 方法定义的两种形式

第一种： function  方法名（参数列表）{方法体}

    <script>

        function add(a,b){

            alert(a+b)

        }

        add(1,2)

    </script>

第二种：var 方法名 = function（参数列表）{方法体}

    <script>

        var add = function(a,b){

            alert(a+b)

        }

        add(1,2)

    </script>

2.5 事件

1.  记录用户在浏览器上的操作行为

　　单击，双击，获取焦点，失去焦点，鼠标移进，鼠标移出，键盘弹起

　　事件和功能代码绑定（方法）：事件的绑定

2. 事件行为如何与函数进行绑定（触发事件的时候=====>执行函数）

（1）方式1

　　每个元素上都有事件属性，给事件属性赋值（调用方法）

<button onclick="add()">点击</button>

（2）方式2

　　获取要监听事件的元素==>获取事件属性===>赋值

 2.6 表格鼠标移进---->高亮

三 jQuery的简单了解

　　javascript的类库，其对javascript内的一些方法或内容进行了封装，简化了代码的书写

使用：导入jQuery的类库

$(function(){})   页面加载函数，后续的所有代码都写在里面，当页面加载完了以后才会执行里面的代码

凡是$获取的变量都是jQuery对象 ， 只有jQuery对象才能使用jQuery的方法

案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript" src="../js/jquery.js"></script>

    </head>

    <script>

        /* 页面加载函数

          $  就是jQuery对象

        */

       $(function(){

           // 改变div块的背景颜色

           $("#mydiv").css("background-color", "pink")

           // 遍历（each）赋值

           $("input").each(function(i){

               this.value = i

           })

       })

    </script>

    <body>

        <div id="mydiv" style="width:300px;height:300px; background-color: #FF0000;"></div>

        <input />

        <input />

        <input />

    </body>

</html>

零基础学习java------32---------css，javascript，jQuery的更多相关文章

  1. 音乐出身的妹纸，零基础学习JAVA靠谱么

    问:表示音乐出身的妹纸一枚  某一天突然觉得身边认识的是一群程序员   突然想 要不要也去试试... 众好友都觉得我该去做个老师,可是我怕我会误人子弟,祸害祖国下一代..... 要不要 要不要 学Ja ...

  2. 总结了零基础学习Java编程语言的几个基础知识要点

    很多Java编程初学者在刚接触Java语言程序的时候,不知道该学习掌握哪些必要的基础知识.本文总结了零基础学习Java编程语言的几个基础知识要点. 1先了解什么是Java的四个方面   初学者先弄清这 ...

  3. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  4. 零基础学习hadoop到上手工作线路指导（编程篇）

    问题导读: 1.hadoop编程需要哪些基础? 2.hadoop编程需要注意哪些问题? 3.如何创建mapreduce程序及其包含几部分? 4.如何远程连接eclipse,可能会遇到什么问题? 5.如 ...

  5. MVC+Ext.net零基础学习记录（四）

    在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...

  6. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  7. 零基础学习hadoop到上手工作线路指导

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

  8. MongoDB实战开发 【零基础学习，附完整Asp.net示例】

    MongoDB实战开发 [零基础学习,附完整Asp.net示例] 阅读目录 开始 下载MongoDB,并启动它 在C#使用MongoDB 重构(简化)代码 使用MongoDB的客户端查看数据 使用Mo ...

  9. salesforce零基础学习（八十）使用autoComplete 输入内容自动联想结果以及去重实现

    项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...

  10. 零基础学习Hadoop

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

随机推荐

  1. 调整数组顺序使奇数位于偶数前面 牛客网 剑指Offer

    调整数组顺序使奇数位于偶数前面 牛客网 剑指Offer 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇 ...

  2. Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2) Editorial题解

    A 略,发现只有当末尾为9时才满足条件.. B 简单模拟,注意数组大小!!! C 简单模拟. D 比较暴力的一个做法就是每次找一个开始匹配的起始点,然后每次不同时向后跳2就行了. 注意这里最后还要判断 ...

  3. hdu 1058 Humble Numbers（构造？枚举？）

    题意: 一个数的质因子如果只是2,3,5,7中的若干个.则这个数叫做humble number. 例如:1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 15, 16, 1 ...

  4. 一步一步学ROP之linux_x86篇(蒸米spark)

    目录 一步一步学ROP之linux_x86篇(蒸米spark) 0x00 序 0x01 Control Flow Hijack 程序流劫持 0x02 Ret2libc – Bypass DEP 通过r ...

  5. Delphi的手机程序隐藏顶部信号栏

    把TForm的BorderStyle设置为None 记之!

  6. 如何将声学的spectrogram（声谱图）重新反变换成时域语音信号

    最近在研究一些信号分析的事情,感兴趣如何将频谱信号反变换成时域信号.fft 与ifft可以顺畅的转变,但是这个是一帧信号,当时间较长的信号再一起是,通过反变换变成一帧一帧的时域信号,如何把他们拼接起来 ...

  7. 【java+selenium3】select 下拉选 (八)

    一.select 下拉框 1.下拉选的处理类:Select 如果页面元素是一个下拉框,我们可以将此web元素封装成Select对象. Select select = new Select(WebEle ...

  8. 攻防世界 WEB 高手进阶区 XCTF 4th-CyberEarth ics-06 Writeup

    攻防世界 WEB 高手进阶区 XCTF 4th-CyberEarth ics-06 Writeup 题目介绍 题目考点 掌握暴力破解手段 Writeup 打开链接 http://220.249.52. ...

  9. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  10. selenium截屏操作(也支持截长图)

    1.常用的可能是谷歌和火狐做自动化在抛异常的时候可以截屏保存 from selenium import webdriver br=webdriver.Chrome() br.maximize_wind ...