这里记录一些关于jquery的一些知识。这里面主要是$().method方法的书写框架以及jquery中each函数的使用。等待太久得来的东西，多半已经不是当初想要的样子了。
一、基于$().method方法的书写
一、框架的写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../jquery-3.1.0.js"></script> <script type="text/javascript" src="js/app2.js"></script> <script type="text/javascript"> function pageTest() { $("#page").paginate({ alert: "hello world", onchange: function(str) { alert(str); } }); } function eachTest() { $("ul li").each(function( index ) { console.log( index + ": " + $(this).text() ); }); } </script> </head> <body> <div id="page">Hello World</div> <button onclick="pageTest()">click me page</button> <button onclick="eachTest()">click me each</button> <ul> <li>foo</li> <li>bar</li> </ul> </body> </html>
二、app2.js的代码：
(function($) { $.fn.paginate = function(options) { var opts = options; return this.each(function() { $this = $(this); $.fn.draw(opts, $this); }); }; $.fn.draw = function(data, obj) { data.onchange(data.alert); }; })(jQuery);
三、运行的效果如下：
- 点击click me page按钮，弹出hello world的alert框。
- 点击click me each按钮，控制台打印0: foo 1: bar字样。
二、简单路由的实现
一、主页面的代码huhx3.html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../jquery-3.1.0.js"></script> <script type="text/javascript" src="js/app3.js"></script> </head> <body> <ul> <li><a href="#/">首页</a></li> <li><a href="#/product">产品</a></li> <li><a href="#/server">服务</a></li> </ul> <div id="content"></div> </body> </html>
其中测试中包含的两个碎片页如下：
- page.html:
<div style="color: red">Hello World</div>
- product.html:
<div style="background-color: #CCCCCC; text-shadow: 2px 2px 4px red">I love you.</div>
关于js的代码如下：app3.js
function load() { var url = window.location.href; // get the router var index = url.indexOf("#"); var routeUrl = url.substring(index, url.length); alert("routeUrl: " + routeUrl); // 比较Router对象，加载页面 if (routeUrl == "#/server") { $("#content").load("page.html"); } else if (routeUrl == "#/product") { $("#content").load("product.html"); } else { $("#content").load("<span>胡红翔</span>"); } } window.addEventListener('hashchange', function() { load(); }, false);
二、运行效果如下：注意到url点击两次，并没有触发hashchange事件。下面我们说一下这个事件，了解这样实现的缺点。
关于，请参考博客：https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
三、回到顶部的js代码
document.documentElement.scrollTop = document.body.scrollTop =0; // 页面回到顶部
四、js中动态添加脚本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function huhxTest() { var script = document.createElement( "script" ); script.text = "function test() {alert('helelo world')}"; document.head.appendChild(script).parentNode.removeChild(script); } </script> </head> <body> <button onclick="huhxTest()">click me 1</button> <button onclick="test()">click me 2</button> </body> </html>
运行效果：点击click me 1之后点击click me 2，会alert出hello world的字样。如果此时刷新，再点击click me 2，没有任何的反应。
alert出hello world的代码并没有包含在页面中，而是出现在以下中。至于原因，不明。
五、js中函数为另一个函数的参数
function funTest(fn, name) { return fn(name); } var normalFun = function(name) { console.log("I love you, " + name); return "I love you, " + name; } alert(funTest(normalFun, "huhx"));
运行效果：先console出"I love you, huhx"的字样，再alert出此字样。
六、$().load()方法
一、使用方法如下：
$("#content").load("product.html", "", function() {
alert("hello world");
});
具体的load函数的代码如下：
jQuery.fn.load = function( url, params, callback ) { var selector, type, response, self = this, off = url.indexOf( " " ); if ( off > -1 ) { selector = jQuery.trim( url.slice( off ) ); url = url.slice( 0, off ); } if ( jQuery.isFunction( params ) ) { callback = params; params = undefined; } else if ( params && typeof params === "object" ) { type = "POST"; } if ( self.length > 0 ) { jQuery.ajax( { url: url, type: type || "GET", dataType: "html", data: params } ).done( function( responseText ) { response = arguments; self.html( selector ? jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) : responseText ); } ).always( callback && function( jqXHR, status ) { self.each( function() { callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] ); } ); } ); } return this; };
可以看到，load有三个参数。第三个callback函数不管成功与否，都会执行。第二个参数是发送请求时的数据。实质上就是根据url，发送ajax的请求，将文件返回的内容通过$().html()添加到相应的元素当中。