hi
昨天睡得不錯
為什麼早上還是看不進論文，寧願做這個，也不願認真看論文。感覺上還是下午看論文感覺要好的多。不過最近有三十多篇要看哇。。。管球。。。
1、jQuery
-----jQuery常用插件-----
----表單插件——form
通過表單form插件，調用ajaxForm()方法，實現ajax方式向服務器提交表單數據，並通過方法中的options對象獲取服務器返回數據，調用格式如下：
$(form). ajaxForm ({options})
其中form參數表示表單元素名稱；options是一個配置對象，用於在發送ajax請求過程，設置發送時的數據和參數。
<body>
<form id="frmV" method="post" action="#">
<div id="divtest">
<div class="title">
<span class="fl">個人信息頁</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">用戶名：</span><br />
<input id="user" name="user" type="text" /><br />
<span class="fl">昵稱：</span><br />
<input id="nick" name="nick" type="text" />
<div class="tip"></div>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$(".content").ajaxForm(options);
});
</script>
</body>
----圖片燈箱插件——lightBox
該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式浏覽圖片，調用格式如下：
$(linkimage).lightBox({options})
其中linkimage參數為包含圖片的<a>元素名稱，options為插件方法的配置對象。
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的相冊</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://www.bkjia.com/uploads/allimg/151118/16222640C-0.jpg" title="第1篇風景圖片">
<img src="http://www.bkjia.com/uploads/allimg/151118/16222640C-0.jpg" alt="" />
</a></li>
<li><a href="http://www.bkjia.com/uploads/allimg/151118/1622263I8-1.jpg" title="第2篇風景圖片">
<img src="http://www.bkjia.com/uploads/allimg/151118/1622263I8-1.jpg" alt="" />
</a></li>
<li><a href="http://www.bkjia.com/uploads/allimg/151118/16222BU2-2.jpg" title="第3篇風景圖片">
<img src="http://www.bkjia.com/uploads/allimg/151118/16222BU2-2.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".divPics").lightBox({
overlayBgColor: "#666", //圖片浏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
})
});
</script>
</body>
----圖片放大鏡插件——jqzoom
在調用jqzoom圖片放大鏡插件時，需要准備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果，調用格式如下：
$(linkimage).jqzoom({options})
其中linkimage參數為包含圖片的<a>元素名稱，options為插件方法的配置對象。
<body>
<div id="divtest">
<div class="title">
<span class="fl">圖片放大鏡</span>
</div>
<div class="content">
<a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://www.bkjia.com/uploads/allimg/151118/16222AK2-3.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".content").jqzoom({ //綁定圖片放大插件jqzoom
zoomWidth: 123, //小圖片所選區域的寬
zoomHeight: 123, //小圖片所選區域的高
zoomType: 'reverse' //設置放大鏡的類型
});
});
</script>
</body>
----cookie插件——cookie
使用cookie插件後，可以很方便地通過cookie對象保存、讀取、刪除用戶的信息，還能通過cookie插件保存用戶的浏覽記錄，它的調用格式為：
保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)
其中參數key為保存cookie對象的名稱，value為名稱對應的cookie值。
<body>
<div id="divtest">
<div class="title">
<span class="fl">cookie插件</span>
<span class="fr">
<input id="btnSet" type="button" value="設置" />
</span>
</div>
<div class="content">
<span class="fl">郵箱：</span><br />
<input id="email" name="email" type="text" /><br />
<input id="chksave" type="checkbox" />是否保存郵箱
</div>
</div>
<script type="text/javascript">
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val()), {
path: "/", expires: 7
})
}
else {
$.cookie("email",null), {
path: "/"
})
}
});
});
</script>
</body>
----搜索插件——autocomplete
搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇，調用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox參數為文本框元素名稱，urlData為插件返回的相近字符串數據，可選項參數options為調用插件方法時的配置對象。
<body>
<div id="divtest">
<div class="title">
<span class="fl">搜索插件</span>
</div>
<div class="content">
<span class="fl">用戶名</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var arrUserName = ["王五", "劉明", "李小四", "劉促明", "李淵", "張小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //雙擊空白文本框時顯示全部提示數據
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改變匹配數據顯示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
}
});
</script>
</body>
----右鍵菜單插件——contextmenu
右鍵菜單插件可以綁定頁面中的任意元素，綁定後，選中元素，點擊右鍵，便通過該插件彈出一個快捷菜單，點擊菜單各項名稱執行相應操作，調用代碼如下：
$(selector).contextMenu(menuId,{options});
Selector參數為綁定插件的元素，meunId為快捷菜單元素，options為配置對象。
<body>
<div id="divtest">
<div class="title"><span class="fl">點擊右鍵</span></div>
<div class="content">
<input id="btnSubmit" type="button" value="提交" />
<div class="tip"></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li3"><img src="http://www.bkjia.com/uploads/allimg/151118/16222AE3-4.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://www.bkjia.com/uploads/allimg/151118/16222A417-5.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnSubmit").contextMenu('sysMenu',
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您點擊了“保存”項");
},
'Li4': function (Item) {
$(".tip").show().html("您點擊了“退出”項");
}
}
});
});
</script>
</body>
----自定義對象級插件——lifocuscolor插件
自定義的lifocuscolor插件可以在<ul>元素中，鼠標在表項<li>元素移動時，自定義其獲取焦點時的背景色，即定義<li>元素選中時的背景色，調用格式為：
$(Id).focusColor(color)
其中，參數Id表示<ul>元素的Id號，color表示<li>元素選中時的背景色。
<body>
<div id="divtest">
<div class="title">
<span class="fl">對象級別的插件</span>
</div>
<div class="content">
<ul id="u1">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".content").focusColor("#ccc");//調用自定義的插件
})
</script>
</body>
----自定義類級別插件—— twoaddresult
通過調用自定義插件twoaddresult中的不同方法，可以實現對兩個數值進行相加和相減的運算，導入插件後，調用格式分別為：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述調用格式分別為計算兩數值相加和相減的結果，p1和p2為任意數值。
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定義類級別插件</span>
<span class="fr">
<input id="btnCount" type="button" value="計算" />
</span>
</div>
<div class="content">
兩數相減：
<input id="Text1" type="text" class="txt" />
-
<input id="Text2" type="text" class="txt" />
=
<input id="Text3" type="text" class="txt" />
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.subNum($("#Text1").val(),$("#Text2").val())
);
});
});
</script>
</body>
2、MySQL&PHP
-----php內置MySQL函數（一）-----
----連接數據庫
mysql_connect
mysql_connect('localhost','root','');
也就是說這個函數有3個參數，數據庫名或者ip地址，用戶名，密碼
注意，一般認為mysql_connect在以後的版本不再支持（php5.5以後版本似乎）改用mysqi_connect就可以了
<?php
if(mysqli_connect('localhost','root','')){
echo "連接成功";
}else{
echo "shit";
}
測試代碼如上
連接成功後，會返回mysql連接標識符（用處下面會提到）；失敗的話會返回false
---數據庫擴展
PHP中一個數據庫可能有一個或者多個擴展，其中既有官方的，也有第三方提供的。像Mysql常用的擴展有原生的mysql庫，也可以使用增強版的mysqli擴展，還可以使用PDO進行連接與操作。
不同的擴展提供基本相近的操作方法，不同的是可能具備一些新特性，以及操作性能可能會有所不同。
mysql擴展進行數據庫連接的方法：
$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password');
mysqli擴展：
$link = mysqli_connect('mysql_host', 'mysql_user', 'mysql_password');
PDO擴展
$dsn = 'mysql:dbname=testdb;host=127.0.0.1'; $user = 'dbuser'; $password = 'dbpass'; $dbh = new PDO($dsn, $user, $password);
----關閉數據庫連接
mysql_close
mysql_close($con);關閉上一條的連接,這裡的$con是mysql_connect()成功後返回的標識符
$con=mysqli_connect('localhost','root','','info');
----選擇數據庫
mysql_select_db()
<?php
$con=mysqli_connect('localhost','root','','info');
if($con){
echo "連接成功";
}else{
echo "shit";
}
//mysql_close($con);
if(mysqli_select_db($con, 'info')){
echo "成功";
}else{
echo "shit";
}
由於我的php版本較高，mysql基本不認，所以我都改用mysqli，不過基本用法都差不多，就是參數要注意一下。一般來說，編譯軟件（我用Zend）都是有提示的，不用擔心
----執行SQL語句
mysqli_query()
mysqli_query($con, "INSERT test(name) VALUES('Tom')");
mysqli是要求連接的，$con
---執行MySQL查詢
在數據庫建立連接以後就可以進行查詢，采用mysql_query加sql語句的形式向數據庫發送查詢指令。
$res = mysql_query('select * from user limit 1');
對於查詢類的語句會返回一個資源句柄（resource），可以通過該資源獲取查詢結果集中的數據。
$row = mysql_fetch_array($res); var_dump($row);
默認的，PHP使用最近的數據庫連接執行查詢，但如果存在多個連接的情況，則可以通過參數指令從那個連接中進行查詢。
$link1 = mysql_connect('127.0.0.1', 'code1', '');
$link2 = mysql_connect('127.0.0.1', 'code1', '', true); //開啟一個新的連接
$res = mysql_query('select * from user limit 1', $link1); //從第一個連接中查詢數據
<?php
//連接數據庫
mysql_connect('127.0.0.1', 'code1', '');
mysql_select_db('code1');
mysql_query("set names 'utf8'");
//在這裡進行數據查詢
$res = mysql_query("select * from user limit 1");
$row = mysql_fetch_array($res);
var_dump($row);
---插入新數據到MySQL中
當我們了解了如何使用mysql_query進行數據查詢以後，那麼類似的，插入數據其實也是通過執行一個sql語句來實現，例如：
$sql = "insert into user(name, age, class) values('李四', 18, '高三一班')";
mysql_query($sql); //執行插入語句
通常數據都是存儲在變量或者數組中，因此sql語句需要先進行字符串拼接得到。
$name = '李四';
$age = 18;
$class = '高三一班';
$sql = "insert into user(name, age, class) values('$name', '$age', '$class')";
mysql_query($sql); //執行插入語句
在mysql中，執行插入語句以後，可以得到自增的主鍵id,通過PHP的mysql_insert_id函數可以獲取該id。
$uid = mysql_insert_id();
這個id的作用非常大，通常可以用來判斷是否插入成功，或者作為關聯ID進行其他的數據操作。
<?php
//連接數據庫
mysql_connect('127.0.0.1', 'code1', '');
mysql_select_db('code1');
mysql_query("set names 'utf8'");
//已知的數據變量有
$name = '李四';
$age = 18;
$class = '高三一班';
//在這裡進行數據查詢
$sql="insert into user(name,age,class) value ('$name','$age','$class')";
mysql_query($sql);
$uid=mysql_insert_id();
print_r($uid);
要回去看中國隊的比賽了，明天繼續
