Home > Article > Backend Development > Will this be the only way to do it in the morning from now on - jQuery, in the morning - jquery_PHP tutorial
hi
昨天睡得不错
为什么早上还是看不进论文,宁愿做这个,也不愿认真看论文。感觉上还是下午看论文感觉要好的多。不过最近有三十多篇要看哇。。。管球。。。
1、jQuery
-----jQuery常用插件-----
----表单插件——form
通过表单form插件,调用ajaxForm()
方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:
<strong>$(form). ajaxForm ({options})</strong>
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
6c04bd5ca3fcae76e30b72ad730ca86d
28fdb66594ea256ed9cffe800fc5c033
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45个人信息页54bdf357c58b8a65c66d7c19c8e4d114
de32e529600bc268b64c0f8a591ed0a3
26f872fb5f10da98d6bec01722b14af7
54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
58393c96af41c84121ef0855c81c8c45用户名:54bdf357c58b8a65c66d7c19c8e4d114df250b2156c434f3390392d09b1c9563
14a81344c7e80c750ab2598316ff61f3df250b2156c434f3390392d09b1c9563
58393c96af41c84121ef0855c81c8c45昵称:54bdf357c58b8a65c66d7c19c8e4d114df250b2156c434f3390392d09b1c9563
20453eefd94204ddce0d6bec81f576fe
5292eb4965daecc2c6342c65ae3e140f16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e
4ec11beb6c39d0703d1751d203c17053
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$(".content").ajaxForm(options);
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----图片灯箱插件——lightBox
该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:
<strong>$(linkimage).lightBox({options})</strong>
其中linkimage参数为包含图片的3499910bf9dac5ae3c52d5ede7383485元素名称,options为插件方法的配置对象。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45我的相册54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
459e73d5ae8bd1bc0205e31789a7aa94
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c63c0927c656acf4d8145d0a132c4c9fef
4239df12e04476f106912789c4dfa053
5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6a372330592e6f6144bf301a3db1378ee
7ab598b832488dfb6255712bde21a1c3
5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c63f823d56fc213a0d3bb432c035493eb9
cdfa2ffaf1551f865fe25413e4f09c4c
5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
$(".divPics").lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----图片放大镜插件——jqzoom
在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()
方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:
<strong>$(linkimage).jqzoom({options})</strong>
其中linkimage参数为包含图片的3499910bf9dac5ae3c52d5ede7383485元素名称,options为插件方法的配置对象。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45图片放大镜54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
d6bf5cbf764d3216a7f40cb60d53c943
9d1c3dee01455034b0e658d03cf070de
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
$(".content").jqzoom({ //绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----cookie插件——cookie
使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:
保存:<strong>$.cookie(key</strong><strong>,</strong><strong>value)</strong>
;读取:<strong>$.cookie(key)</strong>
,删除:<strong>$.cookie(key</strong><strong>,</strong><strong>null)</strong>
其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45cookie插件54bdf357c58b8a65c66d7c19c8e4d114
de32e529600bc268b64c0f8a591ed0a3
884324ab0f4a6d232e1f3065692e6e7b
54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
58393c96af41c84121ef0855c81c8c45邮箱:54bdf357c58b8a65c66d7c19c8e4d114df250b2156c434f3390392d09b1c9563
920301a7dc5eae5824422f8a272af4dedf250b2156c434f3390392d09b1c9563
f57c85dbf1fde3f96e84555e4bff6f9c是否保存邮箱
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(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: "/"
})
}
});
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----搜索插件——autocomplete
搜索插件的功能是通过插件的autocomplete()
方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:
<strong>$(textbox).autocomplete(urlData,[options]);</strong>
其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45搜索插件54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
58393c96af41c84121ef0855c81c8c45用户名54bdf357c58b8a65c66d7c19c8e4d114df250b2156c434f3390392d09b1c9563
37d617b8f9099c8623101b7391fc2a36
5292eb4965daecc2c6342c65ae3e140f
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function (data, i, total) {
return "7a282450d175f90c7a1cab18e4a7ad13" + data[0] + "a7d43287c9e69e794166deeac33b9b9c"; //改变匹配数据显示的格式
},
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));
}
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
<strong>$(selector).contextMenu(menuId,{options});</strong>
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d458393c96af41c84121ef0855c81c8c45点击右键54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
914101a7e6c4147b5faa26a6d89ed90d
5292eb4965daecc2c6342c65ae3e140f16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
8d6f2f614ae98d8209cd825a44ae7292
ff6d136ddc5fdfeffaf53ff6ee95f185
c6a1fa17c94a4759e1359fded3e4de82bceec1d4d3a2541c0ec526f8e1c46fea保存bed06894275b65c1ab86501b08a632eb
cbadf3aa6c6626908f8bb093fb9c39d85e757f525126dfba3a17a4ef8ede4907退出bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
$("#btnSubmit").contextMenu('sysMenu',
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
'Li4': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----自定义对象级插件——lifocuscolor插件
自定义的lifocuscolor插件可以在ff6d136ddc5fdfeffaf53ff6ee95f185元素中,鼠标在表项25edfb22a4f469ecb59f1190150159c6元素移动时,自定义其获取焦点时的背景色,即定义25edfb22a4f469ecb59f1190150159c6元素选中时的背景色,调用格式为:
<strong>$(Id).focusColor(color)</strong>
其中,参数Id表示ff6d136ddc5fdfeffaf53ff6ee95f185元素的Id号,color表示25edfb22a4f469ecb59f1190150159c6元素选中时的背景色。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45对象级别的插件54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
57700c08ef1acb841f51d208110cf4d5
25edfb22a4f469ecb59f1190150159c645a2772a6b6107b401db3c9b82c049c2橘子54bdf357c58b8a65c66d7c19c8e4d11445a2772a6b6107b401db3c9b82c049c2水果54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c645a2772a6b6107b401db3c9b82c049c2芹菜54bdf357c58b8a65c66d7c19c8e4d11445a2772a6b6107b401db3c9b82c049c2蔬菜54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c645a2772a6b6107b401db3c9b82c049c2香蕉54bdf357c58b8a65c66d7c19c8e4d11445a2772a6b6107b401db3c9b82c049c2水果54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
$(".content").focusColor("#ccc");//调用自定义的插件
})
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
----自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:
<strong>$.addNum(p1,p2) </strong>
和<strong> $.subNum(p1,p2)</strong>
上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
6c04bd5ca3fcae76e30b72ad730ca86d
769e1d2e93669dbe6da581bd72cdeff1
9e80a1cbb6fa0609753359a9577296d4
58393c96af41c84121ef0855c81c8c45自定义类级别插件54bdf357c58b8a65c66d7c19c8e4d114
de32e529600bc268b64c0f8a591ed0a3
17d31a7bc907b3baf41327f80c7152ad
54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
5d1e94760349a02ec7e3e05385bc999a
两数相减:
93347e0ac1a3e243b0bb1c961f903975
-
3677c433eef07eb477ab5162b681018c
=
d8153ef53d190eb8f57ffe16f6bdbccb
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
4ec11beb6c39d0703d1751d203c17053
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.subNum($("#Text1").val(),$("#Text2").val())
);
});
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
2. MySQL&PHP
-----php built-in MySQL function (1)-----
----Connect to database
mysql_connect
mysql_connect('localhost','root','');
That is to say, this function has 3 parameters, database name or IP address, username, password
Note that it is generally believed that mysql_connect will no longer be supported in future versions (it seems that versions after php5.5) can be replaced by mysqi_connect
if(mysqli_connect('localhost','root','')){
echo "Connection successful";
}else{
echo "shit";
}
The test code is as above
After the connection is successful, the mysql connection identifier will be returned (the use will be mentioned below); if it fails, false will be returned
---Database extension
A database in PHP may have one or more extensions, including official ones and those provided by third parties. Commonly used extensions for Mysql include the native mysql library, you can also use the enhanced mysqli extension, and you can also use PDO for connection and operation.
Different extensions provide basically similar operation methods. The difference is that they may have some new features and the operation performance may be different.
Mysql extension method for database connection:
$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password');
mysqli extension:
$link = mysqli_connect('mysql_host', 'mysql_user', 'mysql_password');
PDO extension
$dsn = 'mysql:dbname=testdb;host=127.0.0.1'; $user = 'dbuser'; $password = 'dbpass'; $dbh = new PDO($dsn, $user, $password);
----Close database connection
mysql_close
mysql_close($con); Close the previous connection, where $con is the identifier returned after mysql_connect() succeeds
$con=mysqli_connect('localhost','root','','info');
----Select database
mysql_select_db()
$con=mysqli_connect('localhost','root','','info');
if($con){
echo "Connection successful";
}else{
echo "shit";
}
//mysql_close($con);
if(mysqli_select_db($con, 'info')){
echo "Success ";
}else{
echo "shit";
}
Since my PHP version is relatively high, mysql basically doesn’t recognize it, so I switched to mysqli. However, the basic usage is similar, but I need to pay attention to the parameters. Generally speaking, the compilation software (I use Zend) has prompts, so don’t worry
----Execute SQL statement
mysqli_query()
mysqli_query($con, "INSERT test(name) VALUES('Tom')");
mysqli requires connection, $con
---Execute MySQL query
After establishing a connection to the database, you can query, using the form of mysql_query plus sql statement to send query instructions to the database.
$res = mysql_query('select * from user limit 1');
For query class statements, a resource handle (resource) will be returned, and the data in the query result set can be obtained through this resource.
$row = mysql_fetch_array($res); var_dump($row);
By default, PHP uses the nearest database connection to execute the query, but if there are multiple connections, you can query from that connection through the parameter command.
$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); //从第一个连接中查询数据
//Connect to the database
mysql_connect('127.0.0.1', 'code1', '');
mysql_select_db('code1');
mysql_query("set names 'utf8'");
//Perform data query here
$res = mysql_query("select * from user limit 1");
$row = mysql_fetch_array($res);
var_dump($row);
---Insert new data into MySQL
After we understand how to use mysql_query for data query, similarly, inserting data is actually achieved by executing a sql statement, for example:
$sql = "insert into user(name, age, class) values('李四', 18, '高三一班')"; mysql_query($sql); //执行插入语句
Usually data is stored in variables or arrays, so the sql statement needs to be string spliced first.
$name = '李四'; $age = 18; $class = '高三一班'; $sql = "insert into user(name, age, class) values('$name', '$age', '$class')"; mysql_query($sql); //执行插入语句
In mysql, after executing the insert statement, you can get the auto-incremented primary key id, which can be obtained through PHP's mysql_insert_id function.
$uid = mysql_insert_id();
This ID is very useful. It can usually be used to determine whether the insertion is successful, or as an associated ID for other data operations.
//Connect to the database
mysql_connect('127.0.0.1', 'code1', '');
mysql_select_db('code1');
mysql_query("set names 'utf8'");
//The known data variables are
$name = '李思';
$age = 18;
$class = 'Class 1, Grade 3';
//Perform data query here
$sql="insert into user(name,age,class) value ('$name','$age','$class')";
mysql_query ($sql);
$uid=mysql_insert_id();
print_r($uid);
I’m going back to watch the Chinese team’s game and will continue tomorrow