以后上午就只能这样了么-jQuery
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://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
<img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
<img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
<img src="http://img.mukewang.com/52e48a4c00015ad204480275.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://img.mukewang.com/52e4aee700012df702130212.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://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.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);
要回去看中国队的比赛了，明天继续
以后上午就只能这样了么-jQuery的更多相关文章
- 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
- jQuery基础，定时器，工厂函数
这个星期刚刚学的JQuery,下面我来说说我学的这几个例子 jQuery是JavaScript的一个程序库. Jquery的工厂函数$(): 在Jquery中 $符号等价于jquery,作用是将DOM ...
- 错误集：js解析jQuery.post返回的xml之Could not find action or result
js里用jQuery.post去后台查询数据,返回的是xml格式的数据流. js代码: var params = ""; params = encodeURI(params); v ...
- 关于jQuery中的submit()函数
关于jQuery中的submit()函数(绑定event handler or 触发event?) 今天在敲代码的时候无意间碰到了一个比较绕的问题(一个小师弟问的问题),思前想后都不明白,上午百度.谷 ...
- Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用
在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...
- IE8下jQuery改变png图片透明度时出现的黑边问题
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...
- jQuery 日历控件 FullCalendar 初识
最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况. 先看一下效果图 月/周/日视图 ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- 利用图片延迟加载来优化页面性能（jQuery）
图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了. ...
随机推荐
- Html技巧 语义化你的代码
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用. ...
- 将数据导入PostGIS
#!/usr/bin/env python # -*- coding: utf-8 -*- import subprocess # database options db_schema = " ...
- Autodesk Cloud Accelerator Program 开始报名
如果你没有注意到这个消息,那你就会错过一个前往旧金山和硅谷工程师一起工作数周的机会. 摘要一下: 时间: 1月10前提交你的提案,3月飞往旧金山 地点: 旧金山. 包住宿哦~ 不过,既然要去美国,既然 ...
- 如何在Infraworks中创建多树种组成的森林
在Infraworks 2014中,你可以有shp文件导入生成树木和森林,也可以直接在模型中规划一片区域作为森林.美中不足的就是,这些充其量叫树林不能叫森林,因为他们的样式都是一个树种,而真正的森林肯 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q52-Q55)
Question 52You are responsible for rebranding the My Sites section of a corporate SharePoint 2010 fa ...
- ubuntu 安装 swoole 和mac 安装swoole 扩展
ubuntu php 安装swoole 比较容易 1. 从git下载源码 2. 下载pcre http://sourceforge.net/projects/pcre/files/pcre/8.36/ ...
- swift开发多线程篇 - 多线程基础
swift开发多线程篇 - 多线程基础 iOS 的三种多线程技术 (1)NSThread 使用NSThread对象建立一个线程非常方便 但是!要使用NSThread管理多个线程非常困难,不推荐使用 ...
- CoreLocation 定位
前言: 本章会使用OC和Swift分别进行实现,需要了解Swift的小伙伴可以翻一下之前的博文 LBS和SoloMo(索罗门) LBS:基于位置的服务,根据定位展示周边美食.景点等信息(全称:Loca ...
- 关于iOS和OS X废弃的API知识点
今天在查看苹果接口文档时,突然对于接口的声明知识点比较感兴趣,再网络找到下面这个比较不错的文章,记录一下并分享: 如你所知,已废弃(Deprecated)的API指的是那些已经过时的并且在将来某个时间 ...
- IOS整体项目层级构建
在创建IOS项目时,若有一个比较明确的层级架构,将对于今后代码的维护或者功能的扩展很有帮助:本文将通过一个实例来展现我对于层级的一些观点:里面有一些零碎的知识点可能无法全部介绍,到时提供源代码进行下载 ...