共计 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 格局
});