Jquery学习心得

1. 脚本方法外面中的jquery变量是按页面顺序加载的，所以在调用页面中DOM对象时，

要注意在此之前该元素是否已定义(基本过程中)。

2. $(#...)获得的永远时对象，即使网页上没有此元素。Js不同

JQuery判断某个元素在网页中是否存在:$(#...).length>0

4.2 JQuery中的动画

注意：jQuery中的动画方法，都可以指定以下参数

“slow”：600/”normal”：400/”fast”：200/数字；

animate()可以替代一切其他动画方法。

(1).show()和hide()

改变元素的高度、宽度、透明度直至完全显示或消失

show/hide(“slow”：600/”normal”：400/”fast”：200/数字)

(2).fadeIn()和fadeOut()

改变元素的透明度直至完全显示或消失

(3).slideDown()和slideUp()

改变元素由上至下延伸显示或由下至上隐藏

(4).自定义动画方法：animate()

(5).动画回调函数

(6).停止元素的动画stop([clearQuery][,gotoEnd])

(7).交互动画方法 toggle(speed,[callback]);

slideToggle(speed,[callback]);

fadeTo(speed,opacity,[callback])

五、jQuery 对表单、表格的操作及更多的应用

5.1.表单应用

(1).单行文本框应用

获取和失去焦点改变样式

(2).多行文本框应用

高度变化

滚动条高度变化

(3).复选框应用

全选、全不选、反选、获取复选框中值联动复选框选择

(4).下拉框应用

左右下拉框互相移动选项

(5).表单验证

重点应用

5.2.表格应用

(1). 表格变色

隔行变色

单选框控制表格行高亮（end()）

复选框控制表格行高亮

(2).表格展开关闭单位：ms

(3).表格内容刷选

5.3.其他应用

(1).网页字体大小设置

(2).网页选项卡

(3).网页换肤(引入jQuery中Cookie插件)

六、jQuery与Ajax的应用

6.0.Ajax应用原理

6.1.使用javascript实现Ajax应用

6.2.jQuery实现Ajax应用

载入Html 文档

刷选载入的 Html 文档

传替方式

回调函数

$.get()和$.post()

七、插件的使用和写法

7.1.表单验证插件：Validation

Jquery.matedata.js插件

Validata中文验证信息库

自定义验证规则

7.2.表单插件：Form

核心方法：ajaxForm()和ajaxSubmit() 表单提交前验证表单

7.3.动态绑定事件插件：livequery

7.4.jquery UI插件

与后台结合

7.5.管理Cookie的插件：Cookie

7.6.自定义插件

Color插件

去除左侧或右侧空格插件

表格隔行变色插件

7.7jquery的tree

第二篇：jquery实例

想做个jquery 实际例子的集锦。

后台采用php。但其实用其它后台语言也都是一样的。

1、ajax应用 ---- post 提交表单

(1)前台页面

$("#form1").submit

(

function()

...{

return false;

}

);

function login()

...{

var comid = $("#comid").val();

var jobid = $("#jobid").val();

var userid = $("#userid").val();

$.ajax(...{

type: "POST",

url: "../include/ajax.php",

data: "action=1" + "&comid=" + comid + "&jobid=" + jobid + "&userid=" + userid, beforeSend: function()...{

success: function(msg)...{

if(msg=="success")...{

alert("求职信息，已经提交!请等候通知！")

}else ...{

alert("信息已发送，请不要重复提交！");

}

});

}

</script>(2)后台页面 ajax.php

header("Cache-Control: no-cache");

require_once("function.php");

switch ($_POST["action"]){

case 1:

$comid=verify_id($_POST["comid"]);

$jobid=verify_id($_POST["jobid"]);

$userid=verify_id($_POST["userid"]);

$appdate=time();

$hasapp=getValue("select * from csj_appjob where jobid=$jobid and userid=$userid and comid=$comid","id");

if($hasapp==""){

$sql="insert into csj_appjob(comid,jobid,userid,appdate) values($comid,$jobid,$userid,$appdate)";

query($sql);

echo "success";

}else{

echo "wrong";

}

break;

default:

break;

}

2、动态表格、动态表单

<tr>

</tr>

</tr>

</tbody>

</table>

$("#addjobline").css("cursor","pointer");

$("#rmjobline").css("cursor","pointer");

$("#addjobline").click( function() ...{

jobline+=1;

$("#jobline").val(jobline);

var str="";

str+='<tr id="jobline'+jobline+'">'

str+='<td><input type="text" name="brq'+jobline+'"></td>'

str+='<td><input type="text" name="erq'+jobline+'"></td>'

str+='<td><input type="text" name="school'+jobline+'"></td>'

str+='<td><input type="text" name="spe'+jobline+'"></td>'

str+='</tr>';

$("#job").append(str);

} );

$("#rmjobline").click( function() ...{

$("#jobline"+jobline).remove();

jobline-=1;

$("#jobline").val(jobline);

} );

</script>3、输入框"获得焦点 / 点击 / 划过" 时全选

//获得焦点,这个效果最好,点或者按tab,都可以全选

$("#upwd").focus(function()...{this.select();})

$("#uid").focus(function()...{this.select();})

//点击

$("#upwd").click(function()...{this.select();})

$("#uid").click(function()...{this.select();})

//划过全选

$("#upwd").mouseover(function()...{this.select();})

$("#uid").mouseover(function()...{this.select();})

</script>4、ajax应用 ---- 二级联动

数据库表设计 csj_trade

id int(11) auto_increment

tname varchar(100)

tradeType int(11)

其中,id为主键自动索引，tname为行业名称，tradeType为一个标识，为0时，表示这条数据是大类；不为0，而是某个数字的时候，则这个数字表示其父级的id。

（1）主页面

<option value="-1">——所属行业大类——</option>

$res1=result("select * from csj_trade where tradeType=0");

while($rs1=mysql_fetch_array($res1)){

<?}?>

</select>

</select>

</span>

$("#bTrade").change(function()...{

$("#quote").load("../include/getstrade.php?id="+$("#bTrade").val());

});

</script>（2）getstrade.php

require_once("function.php");

header("Cache-Control: no-cache");

$id=verify_id($_GET["id"]);

$res=result("select * from csj_trade where tradeType=".$id);

$rt='<select name="sTrade" id="s_trade">';

while($rs=mysql_fetch_array($res)){

$rt.='<option value="'.$rs["id"].'">'.$rs["tname"].'</option>';

}

$rt.='</select>';

echo $rt;

?>5、CSS 样式表动态选择

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

</HEAD>

<BODY>

<h1>jQuery 是一个新型的JavaScript库. </h1>

<p>jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。

jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。

jQuery支持CSS1-CSS3,以及基本的xPath

jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ </p>

<ul>

<li rel="style1" class="styleswitch">styles1</li>

<li rel="style2" class="styleswitch">styles2</li>

<li rel="style3" class="styleswitch">styles3</li>

</ul>

<SCRIPT LANGUAGE="JavaScript">...

<!--

$('.styleswitch').css("cursor","pointer");

$('.styleswitch').click(function()

...{

switchStylestyle(this.getAttribute("rel"));

return false;

});

var c = readCookie('style');

if (c) switchStylestyle(c);

function switchStylestyle(styleName)

...{

$('link[@rel*=style][@title]').each(function(i)

...{

this.disabled = true;

if (this.getAttribute('title') == styleName) this.disabled = false;

});

createCookie('style', styleName, 365);

}

function createCookie(name,value,days)

...{

if (days)

...{

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name)

...{

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++)

...{

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name)

...{

createCookie(name,"",-1);

}

//-->

</SCRIPT>

</BODY>

</HTML>三个css样式表

1.css

body{background:#000;color:#fff}

h1{font-size:14px;color:#fff;font-weight:bold;}

p{font-size:12px;color:#fff;}

2.css

body{background:#f00;color:#fff}

h1{font-size:15px;color:#fff;font-weight:bold;}

p{font-size:13px;color:#fff;}

3.css

body{background:#fee;color:#000}

h1{font-size:16px;color:#000;font-weight:bold;}

p{font-size:14px;color:#000;}

6、jquery的选择器之变态演示。。。可直接运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

src="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js"></script> </head>

<body>

<br />

<br />

3、<span name="aa">aaa</span>

4、<ul>

</ul>

<br />

5、<span suibian="a">5555555</span>

6、<form mingzi="form1">

</form>

<br />

7、<h1>这个有点变态</h1><br />

<br />

8、试试这个 <br />

<span x="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>

<br />

9、再来，你受的了吗？

<br />

<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>

</ul>

10、最后一个

<ul>

<li><font>aaaaaaaaaaaaaaaaaaaaaaaaa</font></li> <li><kkk>aaaaaaaaaaaaaaaaaaaaaaaaa</kkk></li> <li>我是最后一个li</li>

</ul>

//1

$("a").click(

function()...{

alert("1");

}

);

//2

$(".a").click(

function()...{

alert("2");

}

);

//3

$("span[@name=aa]").click(

function()...{

alert("3");

}

);

//4

$("li").css("cursor","pointer");

$("ul li.u1").click(

function()...{

alert("点了第一个111");

}

);

$("ul li[@name=u2]").click(

function()...{

alert("点了第二个222");

}

);

$("ul #u3").click(

function()...{

alert("点了第三个333");

}

);

$("ul li span").click(

function()...{

alert("点了第四个444");

}

);

//5

$("span[@suibian=a]").click(

function()...{

alert("随便设置个属性也行");

}

);

//6

$("input[@value=点我]").click(

function()...{

alert("中文也行啊？");

}

);

$("input[@value=全消失]").click(

function()...{

$("form[@mingzi=form1]").children().hide(); }

);

//7

$("h1").contains("这个有点变态").click(

function()...{

alert("太变态了");

}

);

$("h1:contains('换个写法')").click(

function()...{

alert("这么写也行");

}

);

//8

$("span[@x]").css("background","red");

//9

$("ul[@y=1] li:odd").css("background","red"); $("ul[@y=1] li:even").css("background","#ff0"); //10

$("ul:last li[font]").click(

function()...{

alert("我有font");

}

);

$("ul:last li[kkk]").click(

function()...{

alert("我有kkk? 靠,kkk也算。。。");

}

);

$("li:last").click(

function()...{

alert("是的，本页最后一个li，就是我！");

}

);

</script>

</body>

</html>7、让连接打开新窗口,一个简单的小效果

Jquery学习心得

第二篇：jquery实例

专栏推荐