• JavaScript Dom jQuery学习


    JavaScript 

    JavaScript是一种脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    1、两种存在形式:

    1 <!--导入javascript脚本方法-->
    2     <script type="text/javascript" src="t1.js "></script>
    3 
    4     <!--直接在html内部编写javascript-->
    5     <script type="text/javascript">
    6         function func() {
    7             alert("Hello Peony")
    8         }

    2、存在位置:

    • HTML的head中
    • HTML的body代码块底部(推荐)

    为什么不能放在上面呢?为什么css的就可以放在上面呢?

    注:css代码首先要记住html代码是从上往下解释的,如果css代码放在下面,在上面的代码使用css样式,如果css代码块放在下面就没有办法显示样式了

    另不同的浏览器处理请求也不同:正常来说当有一个请求过来时候会把js&css一起发送过去,咱们按照最low的方式理解的话可以这么理解:如果js文件或者js耗时比较久的话,下面的html代码就无法执行了。

    3、声明变量和函数(注意:这里一些程序员容易出错)

    1 function m1() {
    2             alert("girl")
    3             var name = 'Peony'; //var 变量名 ,变量名前面加var为局部变量
    4             age = '27';
    5             //注这里需要注意,建议使用的时候一般不要使用全局变量!否则如果代码量比较大的
    6             //时候容易出现调用混乱的问题
    7         }
    8         m1();

    函数

    //        普通函数
            function func() {
                alert("Hello word")
            }
    //        定义一个可传参数的函数
            function func(arg) {
                alert(arg)
            }
            func('Superman')
    //        自执行函数,顾名思义,定义好之后可以自动执行
            (function f3(arg) {alert(arg)})("Today is sunny");
    //        普通函数
            function func() {
                alert("Hello word")
            }
    //        定义一个可传参数的函数
            function func(arg) {
                alert(arg)
            }
            func('Superman')
    //        自执行函数,顾名思义,定义好之后可以自动执行
            (function f3(arg) {alert(arg)})("Today is sunny");
    //        匿名函数,用处不是很大了解就行
            var a = function() {
                alert('meinv');
            };
            a();

    js 的展示方法有两种

    //通过网页来展示
        <script type="text/javascript">
            function f1() {
                alert("hello man")
            }
            f1()
        </script>
    //通过console来展示
      <script type="text/javascript">
            function f1() {
                console.log("Hello man ")
            }
            f1()
        </script>

    4、字符串常用方法及属性

    调试的地方可以在google chrome 上进行测试,F12点击"Console"

    obj.trim()  去除空格

    var a = "  fanbingbing  "
    undefined
    a.trimLeft() #去除左边的空格
    "fanbingbing  "
    a.trimRight() #去除右边的空格
    "  fanbingbing"
    a.trim() //去除两边的空格
    "fanbingbing"
    
    a
    "  fanbingbing  "  #这里可以发现我执行了上面的去除空格的命令之后,实际的值是没有改变的
    
    
    b = a.trim()
    "fanbingbing" #但是我们可以通过赋值来改变他
    b
    "fanbingbing"

    obj.charAt(index) 根据索引获取字符串里的字符

    b
    "FanBingBing"
    b.charAt(0)
    "F"
    b.charAt(1)
    "a"
    b.charAt(2)
    "n"

    obj.substring(start,end)  获取字符的子序列,类似于切片

    b
    "FanBingBing"
    b.substring(0,3)
    "Fan"

    obj.indexOf(char) 去字符串找指定的字符的索引值是多少

    b
    "FanBingBing"
    b.indexOf("B")
    3

    obj.length  获取字符串的长度

    b
    "FanBingBing"
    b.length
    11

    5、数组

    声明一个数组和python中的列表类似

    a = [11,22,33,44] #声明一个数组
    [11, 22, 33, 44]

    插入

    a = [11,22,33,44] #声明一个数组
    [11, 22, 33, 44]
    a.push(55) #在数组最后增加一个元素
    #这里是数组的长度
    a
    [11, 22, 33, 44, 55]
    a.unshift(00) #在数组最前面增加一个元素
    #长度
    a
    [00, 11, 22, 33, 44, 55]
    a.splice(3,0,'insert')  #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)
    []
    a
    [00, 11, 22, "insert", 33, 44, 55]
    a.unshift(100)

    移除

    a
    [100, 0, 11, 22, "insert", 33, 44, 55]
    a.pop()  # 从尾部获取
    a.shift() #从开头获取
    a
    [0, 11, 22, "insert", 33, 44]
    a.splice(3,1) #从指定位置获取,括号内参数为(元素的索引,后面为索引后的元素个数,包含本身)
    ["insert"]
    a
    [0, 11, 22, 33, 44]

    切片

    a
    [0, 11, 22, 33, 44]
    a.slice(1,3)
    [11, 22]
    a
    [0, 11, 22, 33, 44]

    合并

    a = [11,22]反转
    [11, 22]
    b = [44,55]
    [44, 55]
    a.concat(b)
    [11, 22, 44, 55]
    a
    [11, 22]
    b.concat(a)
    [44, 55, 11, 22]

    反转

    a
    [11, 22]
    a.reverse()
    [22, 11]
    a
    [22,
    a
    [22, 11]
    a.join('_')
    "22_11"
    a
    [22, 11]
    11]

    字符串格式化

    1 a
    2 [22, 11]
    3 a.join('_')
    4 "22_11"
    5 a
    6 [22, 11]

    数组长度

    a
    [22, 11]
    a.length
    2

     6、字典(没有字典类型,但是可以伪造)

    dict1 = {'k1':123,'k2':234} #定义一个字典
    Object {k1: 123, k2: 234}
    dict1['k1']
    123

    7、循环

    js中的循环有两种方式

    #第一种
    for (var i=0;i<10;i++) {console.log(i)}
    #输出结果,看本代码下第一图
    
    #第二种
    for (var item in a) {console.log(a[item])}
    #输出结果,看本代码下第二图

    8、异常处理

    和python中的异常处理类似,代码如下:

    <script type="text/javascript">
                try{
                    var name = Peony
                }catch(e) {
                    console.log(e)
                }finally{
                    console.log("Peony is a beauty;")
                }
        </script>

    DOM编程:

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

    注:一般说的JS让页面动起来泛指JavaScript和Dom

    1、选择器:

    document.getElementById('id')  查找指定的id,然后我们可以进行操作

    <body>
        <div id="id_1">
        </div>
        
        <script type="text/javascript">
            var i = document.getElementById('id_1'); //查找指定的id
            i.innerText = '456'; //innerText修改指定的字符串
        </script>
    </body>

    显示效果,当我们打开IE的时候123就会被修改为456

    document.getElementsByName('name')

    <body>
        <div name="name_1">
        </div>
    
        <script type="text/javascript">
            var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个
            for (var item in i) {
                i[item].innerText = '456'; //innerText修改指定的字符串
            };
        </script>
    </body>

    document.getElementsByTagName('tagname')

    <body>
        <div>
        </div>
        <div>
        </div>
        <script type="text/javascript">
            var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个
            for (var item in i) {
                i[item].innerText = '456'; //innerText修改指定的字符串
            };
        </script>
    </body>

    2、注册 事件(onclick=”函数”

    常用事件:

    • onclick  
    • onblur
    • onfocus
    • ..................

    举例代码如下:

    写一个input的标签,首先把事件和函数进行绑定,当你一点这个按钮的时候就会自动执行,绑定的函数:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>shuaige_js_file</title>
        <!--导入javascript脚本方法-->
        <!--<script type="text/javascript" src="t1.js "></script>-->
        <style>
            .color_red {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="id_1">
        </div>
    
        <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->
        <input type="button" onclick="edit();" value="修改" />
    
    
        <script type="text/javascript">
            function edit() {
                var i = document.getElementById('id_1');
                i.className = 'color_red';
            }
        </script>
    </body>
    </html>

    再改回去:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--导入javascript脚本方法-->
        <!--<script type="text/javascript" src="t1.js "></script>-->
        <style>
            .color_red {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="id_1">
        </div>
    
        <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->
        <input type="button" onclick="edit();" value="修改" />
        <input type="button" onclick="rollback();" value="回滚"/>
    
        <script type="text/javascript">
            function edit() {
                var i = document.getElementById('id_1');
                i.className = 'color_red';
            }
            function rollback() {
                var i = document.getElementById('id_1');
                i.className = ''; //这里只要给他设置为空即可
            }
        </script>
    
    </body>
    </html>

    事件列表:

    注:一个标签可以绑定多个事件!

    注:onload 和其他的不太一样,他是写在Javascirpt里的

    <script type="text/javascript">
    //        这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.
            window.onload = function () {
                alert("The page Load complete")
            };
            function edit() {
                var i = document.getElementById('id_1');
                i.className = 'color_red';
            }
            function rollback() {
                var i = document.getElementById('id_1');
                i.className = ''; //这里只要给他设置为空即可
            }
        </script>

    3、常用函数

    获取或者修改样式,修改上面的例子

    在标签内注册了之后,如果在函数内i.className = 'color_red'; 这样是给他设置值,如果不设置值呢?

     function edit() {
                var i = document.getElementById('id_1');
                i.className = 'color_red';
            }

    不设置值(在上面修改的基础上再修改回去原样):

      function edit() {
                var i = document.getElementById('id_1');
                console.log(i.className);
            }
    
    function rollback() {
                var i = document.getElementById('id_1');
                console.log(i.className)
            }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--导入javascript脚本方法-->
        <!--<script type="text/javascript" src="t1.js "></script>-->
        <style>
            .color_red {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="id_1">
        </div>
    
        <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->
        <input type="button" onmousemove="edit()" value="修改 "/>
        <input type="button" onclick="rollback()" value="修改 "/>
    
    
        <script type="text/javascript">
    //        这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.
    //        window.onload = function () {
    //            alert("The page Load complete")
    //        };
    
            function edit() {
                var i = document.getElementById('id_1');
                i.className = "color_red";
            }
            function rollback() {
                var i = document.getElementById('id_1');
                console.log(i.className)
            }
        </script>
    
    </body>
    </html>
    例子完整代码

    获取或设置属性:

    获取属性

    <body>
        <div name="Penoy" id="id_1">
            age 18
        </div>
        <input type="button" value="测试" onclick="edit()" />
        <script type="text/javascript">
            function edit() {
                var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
                var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值
                console.log(result); //输出结果在console
            }
        </script>
    </body>

    修改属性:

    <body>
        <div name="Peony" id="id_1">
            age 18
        </div>
        <input type="button" value="测试" onclick="edit()" />
        <script type="text/javascript">
            function edit() {
                var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
                var result = i.setAttribute('name','meihuan'); //修改属性
                var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值
                console.log(result); //输出结果在console
            }
        </script>
    </body>

    获取或修改样式中的属性

    修改样式属性

    <body>
        <div name="Peony" id="id_1" style="font-size:8px;background-color:green">
            age 18
        </div>
        <input type="button"  onclick="edit()" value="测试" />
        <script type="text/javascript">
            function edit() {
                var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
                i.style.backgroundColor = "red";  //修改样式中的属性还有很多,可以测试
            }
        </script>
    </body>

    提交表单:

    <body>
        <form id="form_1" action="https://www.sogou.com/">
            <div>
                <input type="text" name="query"/>
            </div>
            
            <!--第一个submit是可以提交的这个肯定没问题-->
            <input type="submit" value="submit">
            <!--第二个button可以提交吗?-->
            <input type="button" value="button" onclick="go()">
        </form>
    </body>

    上述代码是不支持提交的,那么怎么做到可以提交呢?可以通告修改属性:

    <body>
        <form id="form_1" action="https://www.sogou.com/">
            <div>
                <input type="text" name="query"/>
            </div>
    
            <!--第一个submit是可以提交的这个肯定没问题-->
            <input type="submit" value="submit">
            <!--第二个button可以提交吗?-->
            <input type="button" value="button" onclick="go()">
        </form>
    
        <script type="text/javascript">
            function go() {
                document.getElementById('form_1').submit();
            }
        </script>
    </body>

    跳转页面:

    <body>
        <div>
            跳转范例
        </div>
        <div>
            <!--在同一个标签内打开-->
            <input type="button" onclick="jump()" value="跳转至百度" />
            <!--新起一个标签打开-->
            <input type="button" onclick="jump_new()" value="跳转至百度" />
        </div>
        <script type="text/javascript">
            function jump() {
                window.location.href = 'https://www.baidu.com'
            }
            function jump_new() {
                window.open('https://www.baidu.com')
            }
        </script>
    </body>

    confirm() ,弹出消息提示框,显示“是”或“否”,根据用户的选择返回True 或者 Flase

        <script type="text/javascript">
                var result = confirm('是否继续');
                console.log(result);
        </script>

    setInterval("alert()",2000);    clearInterval(obj)  可以理解为一个计时器

    代码如下:

    setInterval("alert()",2000);设置计时器

    <body>
    
        <script type="text/javascript">
            function f1() {
                console.log("test message print in console")
            }
            setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
                                   //这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!
        </script>
    </body>

    clearInterval(obj);关闭计时器

    <body>
    
        <script type="text/javascript">
            function f1() {
                console.log("test message print in console");
                clearInterval(obj); //这里是关闭计时器,他需要个句柄,所以在下面的函数中,这个obj句柄必须是全局的
            }
            obj = setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
                                   //这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!
        </script>
    </body>

    setTimeout();    clearTimeout(obj) 也是计时器他和interval的区别就是,他只执行一次

    <body>
    
        <script type="text/javascript">
            function f1() {
                console.log("test message print in console");
            }
            obj = setTimeout('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
                                   //这里是setTimeout所以他只执行一次
        </script>
    </body>

    Dom编程之创建标签:

    创建标签的2种方式:

    1、 通过字符串创建

    2、 通过对象创建(常用方法)

    方式一:
        var obj = document.createElement('a');
        obj.href = "http://www.etiantian.org";
        obj.innerText = "老男孩";
     
        var container = document.getElementById('container');
        //container.appendChild(obj);
        //container.insertBefore(obj, container.firstChild);
        //container.insertBefore(obj, document.getElementById('hhh'));
     
    方式二:
        var container = document.getElementById('container');
        var obj = "<input  type='text' />";
        container.innerHTML = obj;
        // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
        //container.insertAdjacentHTML("beforeEnd",obj);

    实例:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset='utf-8' >
     5         <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
     6         <script type='text/javascript'>
     7             function Go(){
     8                 var content = document.title;
     9                 var firstChar = content.charAt(0)
    10                 var sub = content.substring(1,content.length)
    11                 document.title = sub + firstChar;
    12             }
    13             setInterval('Go()',1000);
    14         </script>
    15     </head>
    16     <body>    
    17     </body>
    18 </html>
    跑马灯
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset='utf-8' />
     5         <title></title>
     6         
     7         <style>
     8             .gray{
     9                 color:gray;
    10             }
    11             .black{
    12                 color:black;
    13             }
    14         </style>
    15         <script type="text/javascript">
    16             function Enter(){
    17                var id= document.getElementById("tip")
    18                id.className = 'black';
    19                if(id.value=='请输入关键字'||id.value.trim()==''){
    20                     id.value = ''
    21                }
    22             }
    23             function Leave(){
    24                 var id= document.getElementById("tip")
    25                 var val = id.value;
    26                 if(val.length==0||id.value.trim()==''){
    27                     id.value = '请输入关键字'
    28                     id.className = 'gray';
    29                 }else{
    30                     id.className = 'black';
    31                 }
    32             }
    33         </script>
    34     </head>
    35     <body>
    36         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    37     </body>
    38 </html>
    搜索框

    jQuery

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是更加便捷的开发,并且在兼容性方面十分优秀。

    要想使用jQuery首先得导入代码如下(附加简单应用):

    http://www.php100.com/manual/jquery/

    1、选择器和筛选器

    基本选择器:

    例如:$('#n1').text('123');
            //分解  $('#n1') 找到id为n1的标签,并把里面的内容修改为123
    更多见:http://www.php100.com/manual/jquery/
    http://www.cnblogs.com/wupeiqi/articles/5369773.html
  • 相关阅读:
    3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
    Easyui 正则表达式
    struts 标签
    源码详解Java的反射机制
    MyEclipse8.6安装 spket 插件
    有些路,只能一个人走
    HG8245获取超级管理员(telecomadmin)密码的方法
    easyui doc
    oracle建立自动增长字段
    Java实现二维码QRCode的编码和解码
  • 原文地址:https://www.cnblogs.com/Peony-Y/p/5452119.html
Copyright © 2020-2023  润新知