您的位置：首页 > Web前端 > JQuery

第26篇 jQuery 快速学习下

2016-05-12 17:59 681 查看

前面说了下jQuery了，大部分说的都是选择器和过滤器方面的东西，这个写完后，后面就说下剩下的东西了，离目标越来越近了。下面就说说这些东西

事件

传统比较

在js中说了原生js的绑定事件，基本的形式如下：

dom.addEventListener('click', function()
{

console.log("d2");
}, true);
在jQuery中有对现有的方法的封装下面看下事件的绑定的基本形式：

a、利用匿名函数：

$(“#id”).click(function(){});

b、利用bind、on、delegate、one

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src='../jquery-2.1.4.js'></script>
</head>

<body>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<p id="test4"></p>
<p id="test5"></p>
<p id="test6"></p>
</body>

</html>
<style type="text/css" media="screen">
p {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
margin: 10px;
}

.item {
background-color: #FF6666;
}
</style>
<script type="text/javascript">
var p1 = document.getElementById('test1');
p1.addEventListener("click", function() {

p1.setAttribute("class", "item");
});
$("#test2").click(function() {
$("#test2").addClass('item');
});
$("#test3").bind('click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test3").addClass('item');
});
$("#test4").on('click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test4").addClass('item');
});
$("body").delegate('#test5', 'click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test5").addClass('item');
});

$("#test6").one('click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test6").addClass('item');
});
</script>

c、事件取消unbind,undelegate,off

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src='../jquery-2.1.4.js'></script>
</head>
<body>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<p id="test4"></p>
<p id="test5"></p>
</body>

</html>
<style type="text/css" media="screen">
p {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
margin: 10px;
}

.item {
background-color: #FF6666;
}
</style>
<script type="text/javascript">
$("#test2").click(function() {
$("#test2").addClass('item');
});
$("#test2").unbind('click');
$("#test3").bind('click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test3").addClass('item');
});
$("#test3").unbind('click');

$("#test4").on('click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test4").addClass('item');
});

$("#test4").off('click');

$("body").delegate('#test5', 'click', {
foo: "foo"
}, function() {
/* Act on the event */
console.log(arguments[0].data);
$("#test5").addClass('item');
});
$("body").undelegate('#test5', 'click');
</script>

自定义事件

上面说了jQuery的基本的事件绑定方法，当然还有很多自己封装的事件，这里就不多说了，因为这往篇文章不是api,而是快速入门的教程。下面也说说jQuery如何自定义事件：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src='../jquery-2.1.4.js'></script>
</head>
<body>
<p id="test1"></p>
</body>
</html>
<style type="text/css" media="screen">
p {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
margin: 10px;
}
</style>
<script>
$(function(){
$("#test1").click(function(){
alert("ok");
$("#test1").trigger('myEvent');
});
$("#test1").on("myEvent",function(res){
alert("this is myEvent");
});
});
</script>

运行结果为弹出两个两个alert()。

缓存

1、缓存的使用（data)

对于缓存的概念可能大家都很熟悉，在jQuery插件开发的时候常常会是一个利器，很多人在web开发的时候，绑定数据的时候，经常使用对dom对象添加一个属性，如attr({type:”Chart”});取值的时候就直接用attr(“type”)来获取,对于这种情况我们可以采用效率更高的data(至于效率没有实测)

对于data的使用总共有三种形式：

a、储存值：$.data(obj,key,value)，取值：$.data(“dom”,key);

b、储存：$(“selector”).data(key,value); 取值：$(“selector“).data(key);

c、储存：$(“selectot”).data({key1:”value1”,key2:”value”});

看代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../jquery-2.1.4.js"></script>
</head>
<body>
<div id="data"></div>
<div id="data1"></div>
<div id="data2"></div>
<div id="data3"></div>
</body>
</html>
<script type="text/javascript">
//1
var d = $("#data");
$.data(d, "key", "value");
console.log($.data(d, "key"));
//2
$("#data1").data('name', 'value');
console.log($("#data1").data('name'));
//3
$("#data2").data({
"name1": "value1",
"name2": "value2"
});
console.log($("#data2").data("name1"));
console.log($("#data2").data("name2"));
</script>

2、原理

实现的原理：

a、第一个写法就是给当前的obj对象添加一个属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../jquery-2.1.4.js"></script>
</head>
<body>
<div id="data"></div>
</body>
</html>
<script type="text/javascript">
//1
var d = {};
$.data(d, "key", "value");
console.log($.data(d, "key"));
for(var p in d){
console.log(p);
}
</script>

运行的结果如下：

根据上面的内容，我们可以自己实现下，当然这只是一个示例：

//1
var d = {};
$.data(d, "key", "value");
console.log($.data(d, "key"));
console.log(d);
(function($) {
var expando = "jQuery" + ("214" + Math.random()).replace(/\D/g, '');
function get(cache, name) {
return cache[name];
}
function set(cache, name, value) {
cache[name] = value;
}
function getCache(obj) {
obj[expando] = obj[expando] || {};
return obj[expando];
}
$._bddata = function(obj, name, value) {
var cache = getCache(obj);
if (value === undefined) {
return get(cache, name);
} else {
set(cache, name, value);
}
}
})(jQuery);
var a = {};
$._bddata(a, "key", "value");
console.log(a);

运行结果：

从上面的结果可以看出在我们封装的方法的输出结果和官方给出的结果是一样的。好了，关于这个我先说这么多，有兴趣的话可以看看jQuery的源码。

Ajax

1、原始Ajax（伪ajax)

我想对于Web开发的人来说Ajax是一个很熟悉的名字，对于这个作用也是比较简单，下面我们先回顾下原始的Ajax

a.利用图片和javascript的Src属性加载

下面用一个例子表示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<script type="text/javascript">
function CallBack(str){
console.log(str);
}
</script>
<script src="imgAjax.php"></script>

后台代码：

<?php
print_r("CallBack(".$_POST.")");
?>

运行结果如下：

从上面的可以看出在当前的脚本的CallBack函数已经运行了，但是并没有刷新页面，只是去后台请求了下数据。图片的原理也是一样的，这里就不演示了

b.利用iframe实现

先看代码：

下面利用iframe作一个示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<div id="infoDiv">
</div>
<form action="iframe.php" method="post" target="ifmSub" accept-charset="utf-8">
<input name="type1" type="text" />
<input name="type2" type="text" />
<input name="type3" type="text" />
<input name="type4" type="text" />
<input name="type5" type="text" />
<input name="type5" type="submit" value="submit" />
</form>
<iframe src="" name="ifmSub"></iframe>
</body>
</html>
<script type="text/javascript">
function info(info) {
$("#infoDiv").html(info);
}
</script>

后台代码

<?php
print_r($_POST)
?>
<script>
window.parent.info("success");
</script>

运行结果如下

从上面的结果可以看出，这个可以实现ajax的表单数据提交。

2、原生js的ajax

对于原生的js来说，使用Ajax相对来说方便了很多，下面我们看下原生js体现如何实现Ajax:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<div id="infoDiv">
</div>

</html>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("POST", "jsAJax.php", true);
xhr.setRequestHeader('CONTENT-TYPE', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
document.getElementById("infoDiv").textContent = text;
}
}
};
xhr.send("foo='bar'");
</script>

后台代码：

<?php
print_r($_POST);
?>

运行结果是：

从上面的结果可以看出，原生js的提交一个 XMLHttpRequest的对象，用来与后台的交互，虽然这样的写法也比较冗余。下面我们说说jQuery的封装（如果想深入学习的话可以继续研究）。

3、jQuery的封装

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<div id="infoDiv"></div>
</body>
</html>
<script type="text/javascript">
$.post("jQueryAjax.php",{name:"jQuery"},function(res){
$("#infoDiv").html(res);
});
</script>

后台代码：

<?php

print_r($_POST);

?>

从上面的代码可以看出jQuery的封装对Ajax的调用非常的方便，当然写的形式也有很多，可以参考api,上面运行结果如下：

插件开发

这个前面也说了一些，下面再重新说下

1、
静态方法的开发

说来就是在$上面添加方法，如easyui上面的弹出框，$.messger(….);

开发的基本格式为：

(function($, undefine) {

var opt={};//默认属性值

$.Msger = function() {}

})(jQuery);

使用方法就是：$.Msger(…)

2、扩展对象开发

这个与上面对象不一样的，一个是全局的jQuery对象，一个是选择后dom对象，注意这里上选择后的对象（并不是dom）如easyui上面，如果一个下拉框$(“#ddlmb”).combobox();

开发的基本格式

(function($, undefine) {

$.fn.mSelect = function(option) {

var _default = {};

var opt = $.extend(true, _default, option);

this.each(function(index, value) {});//这个是对选择的d对象进行遍历

})(jQuery);

好了，jQuery的事情已经说了差不多了，当然讲的不是很全，还有动画，队列的知识没有去说，这个和后面的插件的开发知识没有太大的关系，如果想深入学习，可以去看下api.下面会分别会说下几个插件开发的实例，以及开发中碰到的问题和技巧。

写于 2015.12.05

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航