JavaScript Dom jQuery学习

时间 2019-11-08

标签 javascript dom jquery 学习栏目 JavaScript 繁體版

原文原文链接

JavaScript javascript

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

一、两种存在形式：css

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         }

二、存在位置：html

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

为何不能放在上面呢？为何css的就能够放在上面呢？java

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

另不一样的浏览器处理请求也不一样：正常来讲当有一个请求过来时候会把js&css一块儿发送过去，我们按照最low的方式理解的话能够这么理解：若是js文件或者js耗时比较久的话，下面的html代码就没法执行了。jquery

三、声明变量和函数（注意：这里一些程序员容易出错）程序员

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

函数chrome

//        普通函数
        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>

四、字符串经常使用方法及属性

调试的地方能够在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

五、数组

声明一个数组和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

六、字典(没有字典类型，可是能够伪造)

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

七、循环

js中的循环有两种方式

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

#第二种
for (var item in a) {console.log(a[item])}
#输出结果，看本代码下第二图

八、异常处理

和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

一、选择器：

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>

二、注册事件（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>

三、经常使用函数

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

在标签内注册了以后，若是在函数内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种方式：

一、经过字符串建立

二、经过对象建立（经常使用方法）

方式一：
    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/

一、选择器和筛选器

基本选择器：

例如：$('#n1').text('123');
        //分解  $('#n1') 找到id为n1的标签,并把里面的内容修改成123
更多见：http://www.php100.com/manual/jquery/http://www.cnblogs.com/wupeiqi/articles/5369773.html