• 以后上午就只能这样了么-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(keyvalue);读取:$.cookie(key),删除:$.cookie(keynull)

    其中参数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);

    要回去看中国队的比赛了,明天继续

  • 相关阅读:
    解析Java反射java.lang.IllegalArgumentException: wrong number of arguments
    java中参数" ..."的用法和意思
    Synchronized方法锁、对象锁、类锁区别
    瀚云平台kafka简单原理
    ReflectionUtils.invokeMethod的作用
    实用———springmvc接收参数校验
    卷积神经网络CNN
    第一个TensorFlow程序
    TF从文件中读取数据
    TF基础5
  • 原文地址:https://www.cnblogs.com/andy1202go/p/4971136.html
Copyright © 2020-2023  润新知