• !!!Javascript 宿主脚本语言!


    三个基本对话框
    数据类型
    语句
    数组
    函数
    事件
    Dom操作

    JS是什么?     宿主  脚本语言 

    如何书写?   <script language="javascript"></script>    /   <script type="text/javascript"></script>

    与其他语言的区别是什么(三点)?   1,不能连接数据库  2,依托于HTML等宿主文件才可 3 弱语言, PHP也是

    JS出现在宿主文本哪些地方以及如何引用(加在Head里面)?

    <head>1,这里     5,引用在这里【<script type="text/javacript" src="JQ min(压缩的)/JS"></script>】<head><boby>2,这里</boby> 3,这里</html>4,还有这里               
    写在哪些位置较安全(3/5种)

    见上红色标注位置较安全,1:在前面加JS页面加载不完全,调用有时不可用  2:引用外部JS肯定是已加载完成,安全的很;

    三个基本对话框 警示对话框  

    alert("")   警示对话框  ;
    confirm() 确定对话框(确定返回true 取消返回false);
    prompt() 输入对话框  

    注释 :语法 跟 C#相同;

    语法

    数据类型(5种)  JS区别类型但是弱语言 所有变量定义都用Var

    字符串  整数  小数  时间  布尔bool

    类型转换:

     1:转整数  var d=parseInt(b);

     2:转小数  parsefloat();

     3:isNaN(); 判断是否是数字(是数字返回false, 不是数字返回true)

     4:数字转字符串自动转换;


    运算符表达式 与C#一样


    语句 if for 问题类型:穷举,迭代
    两个关键词:break continue
    拼接字符串也用+

    数组
    var s=new Array();(类似C#的集合(接收任意类型的值))    
    s[0]=1;
    s[1]="asd"
    alert(s[1]);
    属性 alert(s.length)
    方法:

    排序{升序} s.sort()    根据第一个字符排列 数字/字母;

    翻转:a.reverse()


    函数

    四要素 :名称  输入  返回值   加工

    function xianshi(a)

    { var  a=a++;

    return  a

    }

    名称  如果是关键字会变成深蓝色不可用;

    输入  是指参数 可有可无,可接收多个值用”,“隔开;

    返回值  在JS中就是 return  可有可无;

    加工  函数体;

    事件:

    1 onclick:点击事件

    2 ondblclick:双击鼠标事件

    3 onmouseover:鼠标移上的事件

    4 onmouseout:鼠标离开的事件

    5 onmousemove:鼠标移动的事件  “ 较少用"

    6 onfocus:文本框获得焦点的事件

    7onblur:文本框失去焦点的事件

    8 onchange:值/选中项,变化的事件

    9 onselsct:文本框中的值被选中的事件

     在HTML中的应用:触发器相当于事件   触发执行

    事件传参数(调用函数):

    数字参数:参数直接写在括号里

    字符串:参数写在单引号里,错误:都this(”我“)正确dothis('我')

    自身元素:参数写this,this代表该元素

    调用函数传参数可传多个,用","隔开;

    Dom操作

    概念:DOM是文档对象模型,这种模型为树模型;文档是指标签文档;对象是指文档中每个元素;模型是指抽象化的东西。

    Windows对象操作  (对网页窗口的操作)

    Windows.history对象       (页面的前进与后退) 

    Windows.location对象      (地址栏对象    跳转页面操作,兼容性较好,较有用) 

    Windows.statue对象        ( 状态栏操作)

    Windows.document对象   ( 操作网页内容)

    Windows对象操作 

    1:打开窗体:windows.open("url","打开页面位置_blank/_self",(3)"窗口特征参数 用空格隔开  属性=yes/no")对象       

            位置(3):toolbar

                          menubar status

                          width,height

                          left

                          resizable

                          scrollbars  

                          location  

                          返回该窗口,可保存在变量中 

    2:打开源窗口   window.opener()对象 

    3:关闭窗体      window.close() 


    winindow.opener对象 {//打开源窗口 .close()}dow.close() { a.close();用数组要在外面附一个初始值 点击 点击打开十个窗口 ,点击关闭十个窗口
    否则另一函数中的数组无法找到调用}

    4:间隔与延迟       间隔:window.setInterval("要执行的代码",间隔的毫秒数)

                                      window.clearInterval(间隔的Id)   清除间隔

                             延迟:window.setTimeout("要执行的代码",延迟的毫秒数)

                                     window.clearTimeout(延迟的Id)   清除延迟
    5:调整页面        

                              window.navigate("url")       跳转页面 

                              window.moveTo(x,y)

                              window.resizeTo(宽,高)

                              window.scrollTo(x,y)
    6:模态对话框和非模态对话框                 window.showModalDialog("url","向目标对话框传的值","窗口特征参数");

                                                           window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")

                                                           var a=window.dialogArgument

    二:Windows.history对象 (页面的 前进后退 )  

          window。history。back()

          window。history。forward()

          window。history。go(n)      (n为前进后退页数  由正负表示   可代替上两个应用)

    三:Windows.location对象  

    var s=window.location.href;获取当前页面地址;

    window.location.href=""  修改页面地址,跳转( 兼容性较好 跳转页面一般用这个);

    window.location.hostname:主机名,域名,网站名,可用变量接收;

    window.location.pathname:路径名,可用变量接收;

    四:Windows.status对象        window.status="要在状态栏显示的内容";设置状态栏文字

    五:Windows.document对象 (操作网页内容)

    1:找到对象       document.getElementById("id");

                      document.getElementByName("name");

                      document.getElementByTagName("name"); 

                      document.getElementByClassName("name");

    2:操作内容

                非表单元素    

                                      获取内容      

                                                               a.innerHTML;

                                                               a.innerText;

                                      设置内容      

                                                              a.innerHTML="";

                                                              a.innerText="";

                表单元素  

                                     获取内容

                                                              t.value ;   input用这个

                                                              t.innerHTML ;   Textarea用这个            

                                     设置内容              t.value="内容改变"

    3:操作属性            

                               获取属性:a.getAttribute("属性名")

                               设置属性:a.setAttribute("属性名","属性值")   

                               移除属性:a.removeAttribute("属性名")

    4操作样式        

                                  获取样式          a.style.样式

                                  设置样式          a.style.样式=""

    练习:1、做一个问题,输入答案之后,点击按钮查看答案是否正确

            2、倒计时按钮,倒计时10秒后可用

                按钮前面打上勾之后可用,否则不可用

            3、选项卡效果

            4、做下拉菜单效果

    JQuery

    了解:jQuery是一个"写的更少,但做得更多"的轻量级Javascript库

    语法    

                        基础语法是:$(selector).action()            

                                1、美元符号定义jQuery;

                               2、选择符(selector)"查询"

                                3、jQuery的action()执行对元素的操作

                       文档就绪函数:$(document).ready(function(){});                 注意:所有JQuery都要写在文档就绪函数中             

    HTML元素选取    

                                                 元素选择器

                                                       1、 $("p")                  选取<p>元素

                                                       2、$(".intro")              选取所有class="intro"元素

                                                       3、$("#demo")           选取所有id="demo"元素

                                                  属性选择器

                                                                   1、$("[name]")             选取所有带有name属性的元素

                                                                   2、$("[name='a']")        选取所有带有name的值等于"a"的元素

    HTML元素操作                                        

                                                               操作内容:    text() -   设置或返回所选元素的文本内容         text("")赋值操作直接输入括号内           

                                                                                 html() -  设置或返回所选元素的内容                                                                                                                                                                                

                                                                                  val() -    设置或返回表单字段的值                        

                                                               操作属性:   .attr("href")获取属性值 

                                                                                .attr("href","http://www.w3school.com.cn/jquery")设置属性

                                                               操作样式:  $("p").css("background-color")获取样式 

                                                                               $("p").css("background-color","red")设置样式

     

    HTML事件函数                  $(".d").onclik(function(e){      })    jquery事件直接写在函数体内  

    JSON  数据传输格式 (JS专用)     与 XML(C#等编程)功能一样

                                              两种形式:

                                                                 一般形式:       var  s={a:10,b:"me",c:300}

                                                                               调用(k(值):value(值))

                                                                                             alert(s.a);

                                                                 数组形式:       var   s=[{a:"",b:"dcdsc",c:"cd"},{a:true,b:"..",c:34},{a:" ccz",b:21,c:45}]

                                                

                                                                                 调用(k(值):value(值))

                                                                                            alert (    s[1].a   )

    备注:

     一, 半透明效果    <div class=”box“>透明区域</div>  

    //样式表中代码

    .box

    {

            

             filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;

    }

    网页制作易混淆点

     

    锚点<a herf="#d"></a>         <a name="d"></a>

    <img src="../网页大全/jpg ">   路径   向上级../      平级开始往下集找     /同级名称/下级名称/图片等

    外部样式 添加外部样式表

    赵老师 html视频    4.avi PS      8.avi

    外部js
    外部jq.min (min 为Jquery压缩后文件 )

  • 相关阅读:
    nginx第三方模块---nginx-sticky-module的使用(基于cookie的会话保持)
    通过redis的monitor命令排除故障
    redis数据过期策略【转】
    PHP通用分页类page.php[仿google分页]
    简洁php的MVC框架
    Jquery插件开发之图片放大镜效果(仿淘宝)
    PHPCMS V9标签循环嵌套调用数据的方法
    虚拟主机服务器php fsockopen函数被禁用的解决方法
    PHPCMS V9 fsockopen 函数被禁用解决方案
    PHP IN_ARRAY 函数 使用需要注意的地方
  • 原文地址:https://www.cnblogs.com/ROCKyou/p/4968461.html
Copyright © 2020-2023  润新知