共计 19333 个字符，预计需要花费 49 分钟才能阅读完成。
JQuery
次要内容
Jquery 对象
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，应用 jQuery 将极大的进步编写 javascript 代码的效率，帮忙开发者节俭了大量的工作，让写进去的代码更加优雅，更加强壮，“锦上添花”。同时网络上丰盛的 jQuery 插件也让咱们的工作变成了 ” 有了 jQuery，所有 so easy。” – 因为咱们曾经站在伟人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 公布，吸引了来自世界各地的泛滥 JavaScript 高手退出，由 Dave Methvin 带领团队进行开发。现在，jQuery 曾经成为最风行的 javascript 框架，在世界前 10000 个拜访最多的网站中，有超过 55% 在应用 jQuery。
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 提供的办法。
$ <==> jQuery Dom 对象 与 Jquery 包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的放慢咱们的学习速度。原始的 Dom 对象只有 DOM 接口提供的办法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery 获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象能力应用 jQuery 提供的办法。
Dom 对象
javascript 中获取 Dom 对象，Dom 对象只有无限的属性和办法：
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div"); Jquery 包装集对象
能够说是 Dom 对象的裁减. 在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集, 比方获取蕴含一个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv"); Dom 对象 转 Jquery 对象
Dom 对象转为 jQuery 对象，只须要利用 $()办法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象
mydiv = $(domDiv); Jquery 对象 转 Dom 对象
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> Jquery 选择器
和应用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提供了简便的形式供咱们查找 | 定位元素，称为 jQuery 选择器，选择器能够说是最考验一个人 jQuery 功力的中央，艰深的讲, Selector 选择器就是 ” 一个示意非凡语意的字符串 ”。只有把选择器字符串传入下面的办法中就可能抉择不同的 Dom 对象并且以 jQuery 包装集的模式返回。
jQuery 选择器依照性能次要分为 ” 抉择 ” 和 ” 过滤 ”。并且是配合应用的，具体分类如下。根底选择器把握即可 , 其余用到再查阅。
根底选择器
选择器
名称
举例
id 选择器
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 Dom 操作
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> Jquery 事件
ready 加载事件
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> bind()绑定事件
为被选元素增加一个或多个事件处理程序，并规定事件产生时运行的函数。
$(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)：该事件触发执行的函数
简略的 bind()事件
<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
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
这是一个简略的 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
这是一个简略的 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);
}); $.getJSON
示意申请返回的数据类型是 JSON 格局的 ajax 申请
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){console.log(data); // 要求返回的数据格式是 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
这是一个简略的 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);});
### $.getJSON
示意申请返回的数据类型是 JSON 格局的 ajax 申请
$.getJSON(‘js/cuisine_area.json’,{name:”tom”,age:100},function(data){
console.log(data); // 要求返回的数据格式是 JSON 格局});
