关于前端:JQuery框架的使用

jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，应用 jQuery 将极大的进步编写 javascript 代码的效率，帮忙开发者节俭了大量的工作，让写进去的代码更加优雅，更加强壮，“锦上添花”。同时网络上丰盛的 jQuery 插件也让咱们的工作变成了 ” 有了 jQuery，所有 so easy。” – 因为咱们曾经站在伟人的肩膀上了。

jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 公布，吸引了来自世界各地的泛滥 JavaScript 高手退出，由 Dave Methvin 带领团队进行开发。现在，jQuery 曾经成为最风行的 javascript 框架，在世界前 10000 个拜访最多的网站中，有超过 55% 在应用 jQuery。

http://jquery.com/ 下载

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不反对 ie6 7 8, 如果须要下载 1.X)

（1）完整版 : jquery-2.1.4.js –> 学习版本(学习源码想高手学习是最好学习办法)

（2）压缩版 : jquery-2.1.4.min.js –> 开发版本(压缩版，缩小传输)

目前应用版本：jquery-3.4.1.js

（1）提供了弱小的性能函数

（2）解决浏览器兼容性问题

（3）实现丰盛的 UI 和插件

（4）纠正错误的脚本常识

…

在页面引入即可

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

$ 符号在 jQuery 中代表对 jQuery 对象的援用, “jQuery” 是外围对象。通过该对象能够获取 jQuery 对象，调用 jQuery 提供的办法等。只有 jQuery 对象能力调用 jQuery 提供的办法。

$ <==> jQuery

明确 Dom 对象和 jQuery 包装集的概念, 将极大的放慢咱们的学习速度。原始的 Dom 对象只有 DOM 接口提供的办法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery 获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象能力应用 jQuery 提供的办法。

javascript 中获取 Dom 对象，Dom 对象只有无限的属性和办法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

能够说是 Dom 对象的裁减. 在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集, 比方获取蕴含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom 对象转为 jQuery 对象，只须要利用 $()办法进行包装即可

var domDiv = document.getElementById('mydiv');  // 获取 Dom 对象
mydiv = $(domDiv);

jQuery 对象转 Dom 对象，只须要取数组中的元素即可

// 第一种形式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
// 第二种形式 获取 jQuery 对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的 jquery 对象转为 dom

通过遍历 jQuery 对象数组失去的对象是 Dom 对象，能够通过 $()转为 jQuery 对象

$('#mydiv').each(function() {// 遍历
       var jquery = $(this);    
});

案例：

<div id="mydiv">write less, do more</div>

<script type="text/javascript"> console.log("------------- 获取 dom 对象 ------------------")
    // dom 对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);
    
    console.log("------------- 获取 jquery 对象 ------------------")
    // 获取 jquery 对象
    // 第一种形式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第二种形式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);
    
    console.log("-------------dom 转 jquery------------------")
    // dom 转 jquery 包装集 / 对象
    var obj = $(domDiv);
    console.log(obj);
        
    console.log("-------------jquery 转 dom------------------")
    // jquery 对象转 dom 对象
    var dom = $('#mydiv')[0]; // 获取 jquery 对象转为 dom
    // 或
    var dom2 = jqueryDiv[0]; // 将 jquery 对象转为 dom
    console.log(dom);
    console.log(dom2);
    
    /* this 代表了 dom 对象，不是 jquery 对象 */
    console.log("-------------dom 转 jquery------------------")
    $('#mydiv').each(function() {
   // 通过 id 选择器抉择了 id 为 mydiv 的所有元素而后进行遍历
   // 那么遍历出的每个元素就是 id 为 mydiv 的标签元素
   // 而 this 就代表了以后的这个元素
        var jquery = $(this);    
    });
    
    console.log("-------------jquery 转 dom------------------")
    $('#mydiv').each(function() {var dom3 = this;}); </script>

和应用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提供了简便的形式供咱们查找 | 定位元素，称为 jQuery 选择器，选择器能够说是最考验一个人 jQuery 功力的中央，艰深的讲, Selector 选择器就是 ” 一个示意非凡语意的字符串 ”。只有把选择器字符串传入下面的办法中就可能抉择不同的 Dom 对象并且以 jQuery 包装集的模式返回。

jQuery 选择器依照性能次要分为 ” 抉择 ” 和 ” 过滤 ”。并且是配合应用的，具体分类如下。根底选择器把握即可 , 其余用到再查阅。

选择器

名称

举例

id 选择器

$(“#testDiv”)抉择 id 为 testDiv 的元素

元素名称选择器

element

$(“div”)抉择所有 div 元素

类选择器

.class

$(“.blue”)抉择所有 class=blue 的元素

抉择所有元素

$(“*”)抉择页面所有元素

组合选择器

selector1,selector2,selectorN

$(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素

<style type="text/css"> .blue{background: blue;} </style>

<body>
    <div id="mydiv1">id 选择器 1 <span>span 中的内容 </span></div>
    <div id="mydiv2" class="blue"> 元素选择器 </div>
    <span class="blue"> 款式选择器 </span>
</body>

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> // id 选择器
    console.log("======id====");
    var idSelecter = $('#mydiv1');
    console.log(idSelecter.html());
    console.log(idSelecter.text());    
    // 元素选择器
    console.log("======name====");
    var nameSe = $('div'); // 有多个 div 元素
    nameSe.each(function(){// this 是 dom 对象，$(this)是 jquery 对象
        console.log($(this).text());
    });
    // 类选择器，class
    console.log("======class====");
    var classSe = $('.blue'); // 有多个 class=blue 的元素
    classSe.each(function(){console.log($(this).text());
    });
    // 通用选择器：*
     console.log("====== 所有元素 ====");
     var all = $("*");
     console.log(all.length);
    // 组合选择器
    console.log("====== 组合 ====");
    var unionSe = $('span, .blue,div');
    unionSe.each(function(){console.log($(this).text());
    }); </script>

选择器

名称

举例

后辈选择器

ancestor descendant

$(“#parent div”)抉择 id 为 parent 的元素的所有 div 元素

子代选择器

parent > child

$(“#parent>div”)抉择 id 为 parent 的间接 div 子元素

相邻选择器

prev + next

$(“.blue + img”)抉择 css 类为 blue 的下一个 img 元素

同辈选择器

prev ~ sibling

$(“.blue ~ img”)抉择 css 类为 blue 的之后的 img 元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 档次选择器 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css"> .testColor{background: green;}
            .gray{background: gray;} </style>
    </head>
    <body>
        <div id="parent"> 档次择器
            <div id="child" class="testColor"> 父选择器
                <div class="gray"> 子选择器 </div>
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
            </div>    
            <div>
                选择器 2 <div> 选择器 2 中的 div</div>
            </div>
        </div>
    </body>
    <script type="text/javascript"> console.log("========= 后辈选择器 - 抉择所有后辈 =====");
        var ancestorS = $('#parent div');
        ancestorS.each(function(){console.log($(this).text());
        });
        
        console.log("========= 子代选择器 - 抉择儿子辈 =====");
        var child = $('#parent>div');
        child.each(function(){console.log($(this).text());
        });
        
        console.log("========= 相邻选择器 =====");
        var pre_next = $(".gray + img");
        console.log(pre_next.length);
        
        console.log("========= 同辈选择器, 其后，（弟弟）=====");
        var pre_siblings = $(".gray ~ img");
        console.log(pre_siblings.length); </script>
</html>

Forms

名称

举例

表单选择器

:input

查找所有的 input 元素：$(“:input”)；
留神：会匹配所有的 input、textarea、select 和 button 元素。

文本框选择器

:text

查找所有文本框：$(“:text”)

明码框选择器

:password

查找所有明码框：$(“:password”)

单选按钮选择器

:radio

查找所有单选按钮：$(“:radio”)

复选框选择器

:checkbox

查找所有复选框：$(“:checkbox”)

提交按钮选择器

:submit

查找所有提交按钮：$(“:submit”)

图像域选择器

:image

查找所有图像域：$(“:image”)

重置按钮选择器

:reset

查找所有重置按钮：$(“:reset”)

按钮选择器

:button

查找所有按钮：$(“:button”)

文件域选择器

:file

查找所有文件域：$(“:file”)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 表单验证 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <form id='myform' name="myform"  method="post">        
            <input type="hidden" name="uno" value="9999" disabled="disabled"/>
            姓名:<input type="text" id="uname" name="uname" /><br />
            明码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
            年龄:<input type="radio" name="uage" value="0" checked="checked"/> 小屁孩
                 <input type="radio" name="uage" value="1"/> 你懂得  <br /> 
            喜好:<input type="checkbox" name="ufav" value="篮球"/> 篮球
                 <input type="checkbox" name="ufav" value="爬床"/> 爬床
                 <input type="checkbox" name="ufav" value="代码"/> 代码 <br />
            来自:<select id="ufrom" name="ufrom">
                    <option value="-1" selected="selected"> 请抉择 </option>
                    <option value="0"> 北京 </option>
                    <option value="1"> 上海 </option>
                </select><br />
            简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
            头像:<input type="file"  /><br />
            <input type="image" src="http://www.baidu.com/img/bd_logo1.png" 
                   width="20" height="20"/>
            <button type="submit" onclick="return checkForm();"> 提交 </button>
            <button type="reset" > 重置 </button>        
            
        </form>
    </body>
</html>
<script type="text/javascript"> function checkForm(){
        // 获取 所有的表单元素
        $(":input").each(function(){// console.log($(this)[0]);
            console.log($(this)[0].tagName);
        })
        console.log("------+++++++++++++++++++++--------")
        // 获取 text
        console.log("text-->" + $(":text").length); // 1
        // 获取 password
        console.log("password-->" + $(":password").length); // 1
        // 获取 radio
        console.log("radio-->" + $(":radio").length); // 2
        // 获取 checkbox
        console.log("checkbox-->" + $(":checkbox").length); // 3
        // 获取 file
        console.log("file-->" + $(":file").length); // 1
        // 获取按钮
        console.log("button-->" + $(":button").length); // 2
        // 获取 submit 按钮
        console.log("submit-->" + $(":submit").length); // 1
        // 获取 image 按钮
        console.log("image-->" + $(":image").length); // 1
        // 获取 reset 按钮
        console.log("reset-->" + $(":reset").length); // 1
        return false;        
    } </script>

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的根底之上进行了优化，应用起来更加不便。

罕用的从几个方面来操作，查找元素（选择器曾经实现）；创立节点对象；拜访和设置节点对象的值，以及属性；增加节点；删除节点；删除、增加、批改、设定节点的 CSS 款式等。留神：以下的操作形式只实用于 jQuery 对象。

办法

阐明

举例

attr(属性名称)

获取指定的属性值，操作 checkbox 时，
选中返回 checked，没有选中返回 undefined。

attr(‘checked’)
attr(‘name’)

prop(属性名称)

获取具备 true 和 false 两个属性的属性值

prop(‘checked’)

<form action=""id="myform">
    <input type="checkbox" name="ch" checked="checked"/>    aa
    <input type="checkbox" name="ch" />    bb
</form>
        
<script type="text/javascript"> var ch = $("input[type='checkbox']")
    console.log(ch)
    ch.each(function(idx, em){console.log(idx + "-" + $(em) + "=" + this)
        console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
        console.log('--------------')
    }) </script>

办法

阐明

举例

attr(属性名称，属性值)

设置指定的属性值，
操作 checkbox 时，
选中返回 checked，
没有选中返回 undefined。

attr(‘checked’,’checked’)
attr(‘name’,’zs’)

prop(属性名称，属性值)

设置具备 true 和 false 的属性值

prop(‘checked’,’true’)

办法

阐明

举例

removeAttr(属性名)

移除指定的属性

removeAttr(‘checked’)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 属性操作 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <pre>
            <h5>1.attr()</h5>
            设置或者返回元素的属性 ;
            <h5>2.prop()</h5>
            设置 具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。</pre>
        <hr />
        <a href="http://www.baidu.com" id="a1"> 百度 </a>
        <a href="http://www.sina.com" id="a2"> 新浪 </a>
          <input type="checkbox" name="all" checked="checked"/> 全选 
    </body>
    <script type="text/javascript"> // 获取属性值：attr
        console.log($('#a1').attr('href'));
        console.log($(':checkbox').attr('name'));
        // 若未选中显示 undefined，选中显示 checked
        console.log($(':checkbox').attr('checked'));        
        // 获取属性值：prop
        // 若未选中显示 false，选中显示 true
        console.log($(":checkbox").prop('checked'));         
        console.log($('#a2').prop('href'))
        // 设置属性值
        $('#a1').attr('href','https://jquery.com');
        $(":checkbox").prop("checked",false);
        // 移除属性
        $('#a2').removeAttr('href'); </script>
</html>

对于元素的款式，也是一种属性，因为款式用得特地多，所以对于款式除了当做属性解决外还能够有专门的办法进行解决。

办法

阐明

attr(“class”)

获取 class 属性的值，即款式名称

attr(“class”,”款式名”)

批改 class 属性的值，批改款式

addClass(“款式名”)

增加款式名称

css()

增加具体的款式

removeClass(class)

移除款式名称

减少元素的具体款式，格局：

1）css({‘款式名’:’款式值’,’款式名 2’:’款式值 2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“款式名”,”款式值”)

例：css('color','white')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 设置元素款式 </title>
        <script src="jquery-3.4.1.js" type="text/javascript" ></script>
        <style type="text/css"> div{
                padding: 8px;
                width: 180px;
            }
            .blue{background: blue;}
            .larger{font-size: 30px;}
            .green {background : green;} </style>
    </head>
    <body>
        <h3>css()办法设置元素款式 </h3>
        <div id="conBlue" class="blue larger"> 天蓝色 </div>
         <div id="conRed"> 大红色 </div>
         <div id="remove" class="blue larger"> 天蓝色 </div>
    </body>
    <script type="text/javascript"> // 获取款式名称
        console.log($("#remove").attr("class"));
        // 批改款式，那么 id 为 remove 的元素款式 class 只有 green
        // $('#remove').attr("class","green")
        // 增加款式名称，class 名称 -- 叠加
        // $('#conBlue').addClass("blue larger");
        // 增加元素具体款式
        // {"":"" , "":""}   名: 值     对
        $('#conRed').css({"background-color":"red","color":"#fff"});
        $('#remove').css('color','red');
        // 移除款式
        // $("#remove").removeClass("blue larger"); </script>
</html>

对于元素还能够操作其中的内容，例如文本，值，甚至是 html。

办法

阐明

html()

获取元素的 html 内容

html(“html, 内容”)

设定元素的 html 内容

text()

获取元素的文本内容，不蕴含 html

text(“text 内容”)

设置元素的文本内容，不蕴含 html

val()

获取元素 value 值

val(‘值’)

设定元素的 value 值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 操作内容 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <h3><span>html()和 text()办法设置元素内容 </span></h3>
        <div id="html"></div>
         <div id="text"></div>
        <input type="text" name="uname" value="oop" />
    </body>
    <script type="text/javascript"> // 获取 HTML 内容，包含 HTML 标签
        console.log($('h3').html());
        // 获取文本内容，不包含 HTML 标签
        console.log($('h3').text());
        // 获取 value 值
        console.log($('[name=uname]').val());
        // 设置
        $('#html').html("<p> 应用 html 设置, 看不到标签 </p>");
        $('#text').text("<p> 应用 text 设置, 能看到标签 </p>");
        $('[name=uname]').val("哈哈哈");
        // console.info("abc");
        // console.log("abc");
        // console.warn("abc")
        // console.error("abc"); </script>
</html>

在 jQuery 中创立元素很简略，间接应用外围函数即可

$(‘元素内容’);

$('<p>this is a paragraph!!!</p>');

办法

阐明

prepend(content)

在被选元素外部的结尾插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。

$(content).prependTo(selector)

把 content 元素或内容退出 selector 元素结尾

append(content)

在被选元素外部的结尾插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。

$(content).appendTo(selector)

把 content 元素或内容插入 selector 元素内，默认是在尾部

before()

在元素前插入指定的元素或内容:$(selector).before(content)

after()

在元素后插入指定的元素或内容:$(selector).after(content)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 追加 </title>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css"> div    {margin: 10px 0px;}
            span{
                color: white;
                padding: 8px
            }
            .red{background-color: red;}
            .blue{background-color: blue;}
            .green{background-color: green;} </style>
    </head>
    <body>
        <h3>prepend()办法前追加内容 </h3>
        <h3>prependTo()办法前追加内容 </h3>
        <h3>append()办法后追加内容 </h3>
        <h3>appendTo()办法后追加内容 </h3>
        <span class="red"> 男神 </span>
        <span class="blue"> 偶像 </span>
        <div class="green">
            <span > 小鲜肉 </span>
        </div> 
    </body>
</html>
<script type="text/javascript"> var str ="<span id='mydiv'style='padding: 8px;width: 180px;background-color:#ADFF2F;'> 动态创建 span</span>";
    // 1、应用 prepend 前加内容
    $("body").prepend(str);
    
    // 2、应用 prependTo 前加内容
    $("<b> 结尾 </b>").prependTo('body');
    
    // 3、应用 append 后加内容
    $("body").append(str);
    // $("div").append($('.red')); // 当把已存在的元素增加到另一处的时候相当于挪动
     
    // 4、应用 appendTo 后追加内容
    $(str).appendTo('body');
    // $('.blue').appendTo("div"); </script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 插入元素 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css"> span{
                color: white;
                padding: 8px
            }
            .red{background-color: red;}
            .blue{background-color: blue;}
            .green{background-color: green;} </style>
    </head>
    <body>
        <h3>before() 和 after()办法在元素之前后插入内容 </h3>
        <span class="green"> 财大气粗 </span>
    </body>
</html>
<script type="text/javascript"> var str1 = "<span class='red'> 土豪 </span>";
     var str2 = "<span class='blue'> 暴发户 </span>";
     $(".green").before(str1); // 前置元素
     $(".green").after(str2); // 后存元素 </script>

办法

阐明

remove()

删除所选元素或指定的子元素，包含整个标签和内容一起删。

empty()

清空所选元素的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 删除元素 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css"> span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{background-color: green;}
            .blue{background-color: blue;} </style>
    </head>
    <body>
        <h3> 删除元素 </h3>
        <span class="green">jquery<a> 删除 </a></span>
        <span class="blue">javase</span>
        <span class="green">http 协定 </span>
        <span class="blue">servlet</span>
    </body>
</html>
<script type="text/javascript"> // 删除所选元素 或指定的子元素
    // $("span").remove();
    // 删除款式为 blue 的 span
    // $("span.blue").remove();
    // 清空元素
    // $("span").empty();
    // $(".green").empty(); </script>

each()

$(selector).each(function(index,element)) : 遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是以后的元素，此时是 dom 元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 遍历元素 </title>
        <style type="text/css"> span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{background-color: green;}
            .blue{background-color: blue;} </style>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3> 遍历元素 each()</h3>
        <span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http 协定 </span>
        <span class="green">servlet</span>
    </body>
    <script type="text/javascript"> $('span').each(function (idx , e) {console.log(idx + "--->" + $(e).text());
        }) </script>
</html>

ready()相似于 onLoad()事件

ready()能够写多个，按程序执行

(document).ready(function(){})等价于 (document).ready(function()) 等价于(function(){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ready 事件 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <script type="text/javascript"> // 文档载入完便触发 ready 办法
            $(document).ready(function(){$("div").html("ready go...");
            })
            // $(document).ready(function(){}) == $(function(){}) 
            $(function(){$("p").click(function () {$(this).hide();});
            });
            $(function(){$("#btntest").bind("click",function(){$("div").html("剁吧...");
                });
            }); </script>
    </head>
    <body>
        <h3> 页面载入时触发 ready()事件 </h3>
        <div></div>
        <input id="btntest" type="button" value="剁手" />
        <p>aaa</p>
        <p>bbbb</p>
        <p>ccc</p>
        <p>dddd</p>
    </body>
</html>

为被选元素增加一个或多个事件处理程序，并规定事件产生时运行的函数。

$(selector).bind(eventType [, eventData], handler(eventObject));

eventType：是一个字符串类型的事件类型，就是你所须要绑定的事件。

这类类型能够包含如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格局：{名: 值, 名 2: 值 2}

handler(eventObject)：该事件触发执行的函数

<script type="text/javascript"> $(function(){/*$("#test").bind("click",function(){alert("世界会向那些有指标和远见的人让路！！");
        });*/
        /*
         * js 的事件绑定
             ele.onclick=function(){};
         * */
        // 等同于下面的放办法
        $("#test").click(function(){alert("世界会向那些有指标和远见的人让路！！");
        });
        /*
         1. 确定为哪些元素绑定事件
             获取元素
         2. 绑定什么事件（事件类型）第一个参数：事件的类型
         3. 相应事件触发的，执行的操作
             第二个参数：函数
         * */
        $("#btntest").bind('click',function(){// $(this).attr('disabled',true);
            $(this).prop("disabled",true);
        })
    }); </script>
<body>
    <h3>bind()方简略的绑定事件 </h3>
    <div id="test" style="cursor:pointer"> 点击查看名言 </div>
    <input id="btntest" type="button" value="点击就不可用了" />
</body>

<script type="text/javascript"> $(function(){
        // 绑定 click 和 mouseout 事件
        /*$("h3").bind('click mouseout',function(){console.log("绑多个事件");
        });*/
        // 链式编程
        $("h3").bind('click',function(){alert("链式编程 1");
        }).bind('mouseout',function(){$("#slowDiv").show("slow");// 让 slowDiv 显示
        });
        /*$("#test").click(function(){console.log("点击鼠标了....");
        }).mouseout(function () {console.log("移出鼠标了...");
        });*/
        $("#test").bind({click:function(){alert("链式编程 1");
            },
            mouseout:function(){$("#slowDiv").show("slow");
            }
        });
    }); </script>
<body>
    <h3>bind()办法绑多个事件 </h3>
    <div id="test" style="cursor:pointer"> 点击查看名言 </div>
    <div id="slowDiv">
        人之所以能，是置信能
    </div>
</body>

jquery 调用 ajax 办法：

格局：$.ajax({});

参数：

type：申请形式 GET/POST

url：申请地址 url

async：是否异步，默认是 true 示意异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置申请头

success：申请胜利时调用此函数

error：申请失败时调用此函数

get 申请

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){$('ul').append("<li></li>");
                $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post 申请

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.json",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){$('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

这是一个简略的 GET 申请性能以取代简单 $.ajax。

申请胜利时可调用回调函数。如果须要在出错时执行函数，请应用 $.ajax。

// 1. 申请 json 文件，疏忽返回值
$.get('js/cuisine_area.json');

// 2. 申请 json 文件，传递参数，疏忽返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3. 申请 json 文件, 拿到返回值, 申请胜利后可拿到返回值
$.get('js/cuisine_area.json',function(data){console.log(data);
});

// 4. 申请 json 文件, 传递参数, 拿到返回值 
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){console.log(data);
});

这是一个简略的 POST 申请性能以取代简单 $.ajax。

申请胜利时可调用回调函数。如果须要在出错时执行函数，请应用 $.ajax。

// 1. 申请 json 文件，疏忽返回值
$.post('../js/cuisine_area.json');

// 2. 申请 json 文件，传递参数，疏忽返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3. 申请 json 文件, 拿到返回值, 申请胜利后可拿到返回值
$.post('js/cuisine_area.json',function(data){console.log(data);
});

// 4. 申请 json 文件, 传递参数, 拿到返回值 
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){console.log(data);
});

示意申请返回的数据类型是 JSON 格局的 ajax 申请

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){console.log(data); // 要求返回的数据格式是 JSON 格局
});

关于前端:JQuery框架的使用

JQuery

次要内容

Jquery 对象

Jquery 的下载与装置

下载

版本

长处

装置

Jquery 外围

Dom 对象 与 Jquery 包装集对象

Dom 对象

Jquery 包装集对象

Dom 对象 转 Jquery 对象

Jquery 对象 转 Dom 对象

Jquery 选择器

根底选择器

id

档次选择器

表单选择器

Jquery Dom 操作

操作元素的属性

获取属性

设置属性

移除属性

操作元素的款式

操作元素的内容

创立元素

增加元素

删除元素

遍历元素

Jquery 事件

ready 加载事件

bind()绑定事件

简略的 bind()事件

绑定多个事件

Jquery Ajax

$.ajax

$.get

$.post

$.getJSON

Just My Socks（注册教程 内含优惠码）

Dom 对象与 Jquery 包装集对象

Dom 对象转 Jquery 对象

Jquery 对象转 Dom 对象

Just My Socks（注册教程内含优惠码）