这里记录一些关于jquery的一些知识。这里面主要是$().method方法的书写框架以及jquery中each函数的使用。等待太久得来的东西，多半已经不是当初想要的样子了。
一、基于$().method方法的书写
一、框架的写法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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 Worlddiv>
<button onclick="pageTest()">click me pagebutton>
<button onclick="eachTest()">click me eachbutton>
<ul>
<li>fooli>
<li>barli>
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>Documenttitle>
<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 Worlddiv>
- 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("胡红翔"); } } 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>Documenttitle>
<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 1button>
<button onclick="test()">click me 2button>
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( "" ).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()添加到相应的元素当中。
友情链接
转载于:https://www.cnblogs.com/huhx/p/basediary20161122.html