用jquery仿做发微博功能示例_jquery

源代码:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发布框</title>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--
功能描述:当点击输入框时,提示的文字会去掉;当光标离开时,如果没有输入任何内容,提示的文字会恢复;如果有输入文字,将会计算并显示剩余的字数
-->
<script type="text/javascript">

$(function(){
$("#content").focus(function(){
if ($(this).val()==this.defaultValue) {
$(this).val("");
//alert($(this).length-1);
}
}).blur(function(){
if ($(this).val()=='') {
$(this).val(this.defaultValue);
}
})
$("#content").keyup(function(){
//alert($(this).val().length);
var words_num = 140 - $(this).val().length;
if (words_num < 0) {
//被误导了 这样是不会有 return 值的
//$("font").text(function(words_num){
// return "<font color='red'>"+words_num+"</font>";
//});
$("font").css('color','red').text(words_num);
}else{
$("font").text(words_num);
//alert(words_num);
}
})
});

$(function(){
$("#send").click(function(){
$.post("post3.php", {
// username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
// var username = data.username;
var content = data.content;
// var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
var txtHtml = "<div><h3>"+content+"</h3></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
},"json");
})
});
</script>
</head>

<body>
<fieldset style="width:800px; margin-left:300px;">
<legend style="font-sixe:16px; font-weight:600">发布框</legend>
<form action="#" id="form1"><!--enctype="multipart/form-data"-->
您还可以输入<span id="num" style="font-size:28px;font-weight:800"><font color="green">140</font></span>个字
<textarea cols="96" rows="8" id="content">随便写点东西吧.</textarea>
<input type="button" id="send" value="发布"/>
</form>
</fieldset>
<div>你发送的信息是:</div>
<div id="resText">
</div>
</body>
</html>

效果图:
 
遇到的问题:

主要就是jquery库的问题:使用jquery-1.3.1.js这个文件,能实现功能,但是使用jquery-1.7.1.min.js这个文件,就没有效果!害我花了很多时间去源代码找问题!!

时间: 2025-01-03 07:51:19

用jquery仿做发微博功能示例_jquery的相关文章

jquery仿搜索自动联想功能代码_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

jquery获取元素索引值index()示例_jquery

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 复制代码 代码如下: <ul> <

jQuery实现手机号码输入提示功能实例_jquery

本文实例讲述了jQuery实现手机号码输入提示功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

jquery仿百度经验滑动切换浏览效果_jquery

jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

Jquery实现仿腾讯微博发表广播_jquery

前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学习学习Jquery,支持我吧,呵呵,这几天的学习Jquey使我感觉到其实Jquery的使用并不是很难,就我感觉Jquery只要把选择器学的差不多,其他的基本都可以迎刃而解,多了解一些方法,事件等等.所以我在这里实现了一个Jquery实现仿腾讯微薄的广播发表. 1. 首先新建HTML页面和介绍我要实现

jQuery实现的模拟弹出窗口功能示例_jquery

本文实例讲述了jQuery实现的模拟弹出窗口功能.分享给大家供大家参考,具体如下: //初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的页面 var div

jQuery实现的自动加载页面功能示例_jquery

本文实例讲述了jQuery实现的自动加载页面功能.分享给大家供大家参考,具体如下: demo.html: <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"

jQuery实现的简单拖拽功能示例_jquery

本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba

jQuery实现的无限级下拉菜单功能示例_jquery

本文实例讲述了jQuery实现的无限级下拉菜单功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单(无限级)</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none;