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