jQuery的学习

Posted 2021-04-08 胡说八道你也信

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的学习相关的知识，希望对你有一定的参考价值。

[1]为什么学习jQuery(javascript的缺点)

A、JS书写的代码比较的臃肿

B、JS中获得元素对象的方式比较单一

C、JS实现动画效果非常复杂

D、JS的代码对浏览器是有区分的

[2]什么是JQuery

JavaScriptQuery JS的库

目前最流行的JavaScript函数库，对JavaScript进行了封装。

并不是一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

由美国人John Resig在2006年推出，目前最新版本是v3.31。

宗旨：Write less，domore（写更少代码，做更多事情）

官方网址http://jquery.com/

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2017年3月20日）

$的作用

作用1：$(function)$就是jQuery的省略写法

1.相当于window.onload=function(){}

2.功能比window.onload更强大

1) window onload一个页面只能写一个,但是可以写多个$()而不冲突

2) window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），

但是$的执行时间要早

3.完整形式是$(document).ready(…….);

作用2：$(selector)

选择器

jQuery具有强大的选择器功能

其他作用后续用到再总结

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<styletype="text/css">

.datalist{

border:1px solid #007108;

font-family:Arial;

border-collapse:collapse;

background-color:#d9ffdc;

font-size:14px;

}

.data list th{

border:1px solid #007108;

background-color:#00a40c;

color:#FFFFFF;

font-weight:bold;

padding-top:4px;padding-bottom:4px;

padding-left:12px;padding-right:12px;

text-align:center;

}

.data list td{

border:1px solid #007108;

text-align:left;

padding-top:4px;

padding-bottom:4px;

padding-left:10px;

padding-right:10px;

}

</style>

<scriptsrc="js/jquery-1.9.1.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

/*JS实现的方式*/

/*window.onload=function(){

//获得所有的tr标签对象

vartrs=document.getElementsByTagName("tr");

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

if(i%2==0){

trs[i].style.backgroundColor="red";

}

}*/

/*JQ实现操作*/

$(function(){

$("tr:odd").css("background-color","green");

})

$(function(){

alert("123");

})

/*jQuery(function(){

alert("456");

})

$(document).ready(function(){

alert("789");

})*/

</script>

</head>

<body>

<tr>

<thscope="col">Name</th>

<thscope="col">Class</th>

<thscope="col">Birthday</th>

<thscope="col">Constellation</th>

<thscope="col">Mobile</th>

</tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<td>fresheggs</td>

<td>Scorpio</td>

</tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

<td>lovehate</td>

<td>Virgo</td>

</tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<td>shenhuanyan</td>

<td>Aquarius</td>

</tr>

<td>tuonene</td>

<td>Sagittarius</td>

</tr>

<td>ArthurRivers</td>

<td>Pisces</td>

</tr>

<td>reconzansp</td>

<td>Libra</td>

</tr>

<td>linear</td>

</tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<td>dovecho</td>

<td>Sagittarius</td>

</tr>

<td>shanghen</td>

<td>Gemini</td>

</tr>

<td>venessawj</td>

<td>Aries</td>

</tr>

<td>lightyear</td>

<td>Aries</td>

</tr>

</table>

</body>

</html>

基本选择器

标签选择器 $(“a”)

ID选择器 $(“#id”)$(“p#id”)

类选择器 $(“.class”)$(“h2.class”)

通配选择器$("*")

并集选择器$("elem1,elem2,elem3")

$(function(){

/**********基本选择器***********/

//js的方式获得zh--Element

varzh =document.getElementById("zh");

// JS对象---JQ对象

varzz=$(zh);

// Object--[Element1,Element2,Element3...]

//id选择器

varzh1=$("#zh");

//元素选择器--jq没有指定具体的下标默认的是第一个

varinp =$("input");

//JQ对象----JS对象

alert(inp[1].value);

alert(inp.eq(1).val());

//类选择器

varinp2=$(".re");

//所有选择器

$("*").css("background-color","green");

</script>

<p>

账号：<inputtype="text"name="zh"id="zh"class="re" value="123"/>

</p>

<p>

密码：<input type="password"name="pwd"id="pwd" class="re" value="456" />

</p>

层级选择器

后代选择器$(ul li)

父子选择器$(ul>li)

后面第一个兄弟元素（紧跟） prev+ next

后面所有的兄弟元素 prev ~ next

$(function(){

/*********层级选择器***********/

//包含div下所有包含的span

var span= $("div span");

//必须是直系子节点

var span2=$("div > span");

//获得下一个节点对象-- id为span1后面紧跟着的span的对象

var span=$("#span1 + span");

// 获得元素后面的span(同一级别的span)

var span4=$("#span1~span");

alert(span4.length);

})

</script>

<spanid="span1">List Item 2</span><br/>

<p>

</p>

</div>

位置选择器

·：first

·:last

·:odd

·:even

·:eq(index)

·:lt(index)

·:gt(index)

$(function(){

/***********基础选择器****************/

//获得第一个元素

$("ulli").first().css("background-color","red");

$("ulli:first").css("background-color","red");

//获得最后一个元素对象

$("ulli").last().css("background-color","green");

$("ulli:last").css("background-color","green");

//奇数索引从0开始

$("ulli:odd").css("background-color","green");

//偶数索引从0开始

$("ulli:even").css("background-color","green");

//获得具体下标位置

$("ulli:eq(3)").css("background-color","green");

//获得索引小于指定的下标

$("ulli:lt(3)").css("background-color","green");

//获得索引大于指定的下标

$("ulli:gt(3)").css("background-color","green");

})

</script>

<divstyle="height:300px;border:2px solid green;">

<ul>

</ul>

<ul>

</ul>

</div>

·子元素选择器

·:nth-child(index) 这个是从1开始的

·:only-child

·:first-child

·:last-child

$(function(){

/**********子元素选择器*************/

//位置从1开始 ---每一个ul都会看成一个对象

$("ulli:nth-child(1)").css("background-color","green");

// 如果某个元素是父元素中唯一的子元素，那将会被匹配

$("ulli:only-child").css("background-color","green");

//匹配第一个子元素

$("ul li:first-child").css("background-color","green");

//匹配最后一个子元素

$("ul li:last-child").css("background-color","green");

})

</script>

<divstyle="height:300px;border:2pxsolid green;">

<ul>

</ul>

<ul>

</ul>

</div>

属性选择器

·[attribute]

·[attribute1][attribute2]

·[attribute=value]

·[attribute!=value]

·[attribute^=value]

·[attribute$=value

[attribute*=value]

$(function(){

/****属性选择器*********/

$("input[type=text]").css("background-color","red");

//name包含s元素对象

$("input[name^=s]").css("background-color","red");

//只要包含s的元素对象即可

$("input[name*=s]").css("background-color","red");

//以指定元素结尾的对象

$("input[name$=d]").css("background-color","red");

//匹配所有不含有指定的属性，或者属性不等于特定值的元素

$("input[name!='pwd']").css("background-color","red");

})

</script>

<body>

<formaction="doRegister.jsp"method="get">

<tableborder="1"width="40%">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio"name="sex"value="男"/>男

<input type="radio"name="sex"checked="checked"value="女"/>女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="checkbox"name="hobby"value="music"checked/>音乐

<input type="checkbox"name="hobby"value="sports"/>体育

<input type="checkbox"name="hobby"value="art"/>美术

</td>

</tr>

<tr>

<td>

<selectname="professional">

<optionvalue="1">工人</option>

<optionvalue="2">农民</option>

<optionvalue="3"selected="selected">解放军</option>

<optionvalue="4">知识分子</option>

</select>

</td>

</tr>

<tr>

<td>

<textareaname="resume"rows="5"cols="40">请输入简历</textarea>

</td>

</tr>

<tr>

</tr>

<tr>

<tdcolspan="2" align="center">

<inputtype="reset"value="重置"/>

<inputtype="button"value="返回" onclick="alert('back')"/>

</td>

</tr>

</table>

</form>

</body>

表单选择器

·:text:password :radio :checkbox :hidden :file :submit

·:input 匹配所有input, textarea, select 和 button 元素

·:selected :checked :enabled :disabled

·:hidden:visible :not

注意$(“input”)和$(“:input”)的区别

<!DOCTYPE html>

<html>

<head>

<scripttype="text/javascript"src="js/jquery-1.9.1.js"></script>

<scripttype="text/javascript">

$(function(){

/************表单选择器***********/

//获得所有的form表单项

$(":input").length;

//获得标签名称是input 的对象

$("input").length;

// input中type=text所对应的对象

$(":text").css("background-color","red");

$(":password").css("background-color","red");

/*********表单属性选择器**************/

//选择input中含有disabled属性表单项

$("input:disabled").css("background-color","red");

//选择性别只是性别被选择的对象

$("input[name=sex]:checked").eq(0).val();

/*******内容选择器********/

$("td:empty").css("background-color","green");

})

</script>

</head>

<body>

<formaction="doRegister.jsp"method="get">

<tableborder="1"width="40%">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio"name="sex"value="男"/>男

<input type="radio"name="sex"checked="checked"value="女"/>女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="checkbox"name="hobby"value="music"checked/>音乐

<input type="checkbox"name="hobby"value="sports"/>体育

<input type="checkbox"name="hobby"value="art"/>美术

</td>

</tr>

<tr>

<td>

<selectname="professional">

<optionvalue="1">工人</option>

<optionvalue="2">农民</option>

<optionvalue="3"selected="selected">解放军</option>

<optionvalue="4">知识分子</option>

</select>

</td>

</tr>

<tr>

<td>

<textareaname="resume"rows="5"cols="40">请输入简历</textarea>

</td>

</tr>

<tr>

</tr>

<tr>

<tdcolspan="2" align="center">

<inputtype="reset"value="重置"/>

<inputtype="button"value="返回" onclick="alert('back')"/>

</td>

</tr>

</table>

</form>

</body>

</html>

操作元素的属性

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scripttype="text/javascript">

$(function(){

/***********JQ中元素属性操作*****************/

//JQ中事件的绑定

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

//获得姓名的input框

var inp=$("#username");

//获得元素的属性

console.log(inp.attr("type")+"----"+inp.attr("id")+"---"+inp.attr("value"));

//操作元素的属性

inp.attr("type","button");

inp.attr("value","提交");

// inp.attr("value")是对象默认的初始值inp.val()实时输入的值

alert(inp.val());

//返回值是checked

$("#man").attr("checked",false);

//返回值是true/false

alert($("#man").prop("checked"));

//综合的书写方式{key1:value,key2:value}--json

inp.attr({"type":"button","value":"提交"});

})

</script>

</head>

<body>

<h3>JQ中元素属性操作</h3>

<inputtype="button"name=""id="bu1"value="属性操作"/>

<p>

姓名:<inputtype="text"name=""id="username"value="123"/>

</p>

<p>

性别：

男： <inputtype="radio"name=""id="man"value="1"checked="checked"/>

女： <inputtype="radio"name=""id=""value="0"/>

</p>

</body>

</html>

操作元素的样式

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scripttype="text/javascript">

$(function(){

/***********JQ中元素CSS样式操作*****************/

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

//获得div对象

var div1=$("#div1");

//获得对应的css样式

console.log(div1.css("width")+"---"+div1.css("height")+"---"+div1.css("border"))

//[1]直接添加css样式

div1.css("width","300px");

div1.css("height","300px");

div1.css("background-color","pink");

//结合的方式

div1.css({"width":"300px","height":"300px"});

//[2]通过添加类的方式添加css样式

div1.attr("class","div_1");

//直接添加类--如果添加的样式比较多，那么推荐使用第二种形式

div1.addClass("div_1");

//移除类

div1.removeClass("div_1");

})

</script>

<style>

#div1{

width:200px;

height:200px;

border:3pxsolid gray;

}

.div_1{

background-color:darkgoldenrod;

}

</style>

</head>

<body>

<h3>JQ中元素样式的操作</h3>

<inputtype="button"name="bu2"id="bu2"value="样式操作" />

<divid="div1"></div>

</body>

</html>

操作元素的内容

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scripttype="text/javascript">

$(function(){

/**********JQ中元素内容操作***********/

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

//获得div对象

var div2=$("#div2");

//等价于 js中innerHTML

console.log(div2.html());

//等价于 JS中 innerTest

console.log(div2.text());

//操作节点的内容

div2.html(div2.html()+"<b>是一家很优秀的机构</b>");

div2.text("<b>是一家很优秀的机构</b>");

})

</script>

</head>

<body>

<h3>JQ中元素内容的操作</h3>

<inputtype="button"name="bu3"id="bu3"value="内容操作" />

<divid="div2">

<span>北京尚学堂</span>

</div>

</body>

</html>

操作元素的节点

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="js/jquery-1.9.1.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

//获得div对象

var div =$("#div1");

// 增加节点 --内部后

div.html(div.html()+"<p>ListItem6 </p>");

*div.append("<p>ListItem6 </p>");

//增加节点--内部前

*div.prepend("<p>ListItem 0 </p>");

//把一个元素追加到另一个元素中 --现有元素之后

$("#div2").appendTo(div);

//把一个元素追加到另一个元素中 --现有元素之前

$("#div2").prependTo(div);

//增加节点--外部前

div.before("<p>ListItem0</p>");

//增加节点--外部后

div.after("<p>ListItem6</p>");

//内容清空

div.empty();

//元素的移除

div.remove();

})

</script>

<style>

#div1{

height:300px;

border:3pxsolidgoldenrod;

}

#div2{

height:50px;

border: 3px solidred;

}

</style>

</head>

<body>

<divid="div2">

</div>

<divid="div1">

</div>

</body>

</html>

jQuery中的事件

·绑定事件

·方法1：click()、mousemove()、mouseout()、mouseover()

·方法2：bind() 对后来加入的无效

live() 对后来加入的也有效在jQuery1.7及之前的版本中使用,1.9版本中淘汰了

one() 一次事件绑定

trigger() 在每一个匹配的元素上触发某类事件

·解除绑定

·unbind()

不传参表示解除所有事件,

传参表示解除指定的事件

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

/*等价于js中的onload*/

$(document).ready(function(){})

$(function(){})

jQuery(function(){})

$(function(){

/*事件的绑定*/

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

alert("单击事件的绑定");

})

$("#bu1").dblclick(function(){

alert("双击事件的绑定");

})

/******bind事件的绑定*********/

$("#bu2").bind('click',function(){

alert("单击事件的绑定");

})

/*绑定多个事件*/

$("#bu2").bind({

'click':function(){},

dblclick:function(){},

blur:function(){}

})

/****one事件的绑定***********/

$("#bu3").one("click",function(){

alert("单击一次执行效果");

})

/*******trigger事件的使用**************/

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

$("#bu1").trigger("click");

$("#bu3").trigger("click");

})

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

//解绑所有绑定事件

$("#bu1").unbind();

//解绑单个的事件

$("#bu1").unbind("click");

})

/***********live方法介绍********************/

$(".bb").click(function(){

alert("live事件的添加");

})

$(".bb").bind('click',function(){

alert("live事件的添加");

})

$(".bb").live('click',function(){

alert("live事件的添加");

})

$("body").append("<inputtype='button' value='live事件'class='bb' />")

})

</script>

</head>

<body>

<inputtype="button"name="bu1"id="bu1"class="bb"value="单击事件的绑定" />

<inputtype="button"name="bu2"id="bu2"value="bind事件的绑定" />

<inputtype="button"name="bu3"id="bu3"value="one事件的绑定" />

<inputtype="button"name="bu4"id="bu4"value="trigger事件的绑定" />

</body>

</html>

jQuery中的动画

·显示隐藏show() hide() 改变width、height、opacity

·淡入淡出fadeIn()fadeOut()改变opacity

滑入滑出slideDown()slideUp() 改变height（对于img同时改变height和width）

隐藏的显示/显示的隐藏 toggle()

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="js/jquery-1.9.1.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

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

//获得div对象

vardiv1=$("#div1");

/*隐藏的效果*/

div1.hide(3000);

div1.show(3000);

//显示的隐藏-- 隐藏的显示

$("div").toggle(3000);

//滑动上

div1.slideUp(3000);

//滑动下

div1.slideDown(3000);

//淡出

div1.fadeOut(3000);

//淡入

div1.fadeIn(3000);

})

</script>

<style>

#div1{

height:300px;

background-color:red;

}

#div2{

height:300px;

background-color:gold;

}

</style>

</head>

<body>

<inputtype="button"name="bu1"id="bu1"value="动画的测试" />

<divid="div1">

</div>

<divid="div2"></div>

</body>

</html>

jQuery中的表单验证

为什么要进行表单验证

保证数据符合要求

为什么要进行JavaScript或者jQuery表单验证

降低服务器端负担

还可以进行服务器验证（JSP）

为什么使用正则表达式

·简洁的代码

·严谨的验证文本框中的内容

·正则表达式举例

·匹配腾讯QQ号：[1-9][0-9]{4,}

·匹配中国邮政编码：\d{6}

·匹配身份证：\d{15}|\d{18}

·匹配由数字和26个英文字母组成的字符串^[A-Za-z0-9]+$　

·匹配中文字符的正则表达式：[\u4e00-\u9fa5]

·什么是正则表达式

·Regular Expression，在代码中常简写为regex

·正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

·在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

·如何创建正则表达式

·var reg=/china/;

·var reg=new RegExp(" china ");

·var reg=/^\w+$/;

·var reg=newRegExp("^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$";

·正则表达式中常用的符号和用法

https://www.jb51.net/article/76901.htm

·正则表达式的重复字符

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="js/jquery-1.9.1.js"type="text/javascript"charset="utf-8"></script>

/*****验证码产生****************/

function yzm(){

var ran=Math.floor(Math.random()*9000+1000);

//document.getElementById("yzm1").innerHTML=ran;

var span =document.getElementById("yzm2");

span.innerHTML=ran;

}

$(function(){

/*********姓名的校验**************/

$("#uname").blur(function(){

//姓名的正则表达式 2-4位的汉字

var reg=/^[\u4e00-\u9fa5]{2,4}$/;

checkData("uname",reg);

})

/**********密码的校验****************/

$("#pwd").blur(function(){

varreg=/^\d{4,6}$/;

checkData("pwd",reg);

})

/**********邮箱的校验****************/

$("#email").blur(function(){

//邮箱的正则表达式

var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

checkData("email",reg);

})

/**********手机的校验****************/

$("#phone").blur(function(){

var reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

checkData("phone",reg);

})

/**********提取公共的方法***************/

function checkData(id,reg){

//获得用户名的值

var us=$("#"+id);

//获得span对象

var span =$("#span_"+id);

if(us.val()==""||us.val()==null){

span.html("× "+us.attr("alt")+"不能为空").css("color","red").addClass("error");

}elseif(reg.test(us.val())){

//符合要求的格式

span.html("√ "+us.attr("alt")+"合法").css("color","green").removeClass();

}else{

span.html("× "+us.attr("alt")+"不合法").css("color","red").addClass("error");

}

/********爱好的校验***************/

$("input[name=fav]").click(function(){

var che=$("input[name=fav]:checked");

if(che.length>0){

$("#span_fav").html("爱好选择成功").css("color","green").removeClass();

}else {

$("#span_fav").html("请选择爱好").css("color","red").addClass("error");

}

})

/********籍贯的选择***************/

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

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

if(val=="0"){

$("#span_sel").html("请选择籍贯").css("color","red").addClass("error");

}else {

$("#span_sel").html("籍贯选择成功").css("color","green").removeClass();

}

})

/********验证码的校验**************/

$("#yzm1").blur(function(){

//[1]随机产生的验证码

var yz=$("#yzm2").html();

//[2]输入的值

var yz2=$("#yzm1").val();

if(yz==yz2){

$("#yzm3").html("验证码输入正确").css("color","green").removeClass();

}else {

$("#yzm3").html("验证码输入错误").css("color","red").addClass("error");

}

})

/******同意协议*********/

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

var flag=$("#check").prop("checked");

/*if(flag){

$("#sub").prop("disabled",false);

}else {

$("#sub").prop("disabled",true);

}*/

$("#sub").prop("disabled",!flag);

})

/******校验表单的提交***********/

$("form").submit(function(){

$("#uname").trigger("blur");

$("#pwd").trigger("blur");

$("#email").trigger("blur");

$("#phone").trigger("blur");

/*执行两次*/

$("input[name=fav]").trigger("click");

varerr=$(".error");

if(err.length>0){

return false;

}else{

returntrue;

}

})

</script>

<!--

正则表达式学习

^：开始

数字：[0-9]

$：结束

\d：代表[0-9]

\w[0-9][A-Z][a-z]以及下划线

{n}:段域

^[0-9]{7}$

^[0-9]{4,7}$

^\w{5}$

快速去除字符串操作

var a="abcdefg";

var jj=/[b|c]/

while(jj.test(a)){

a= a.replace(jj,"");

}

alert(a);

-->

</head>

<bodyonload="yzm()">

<hr />

<formaction="" method="get" >

<table>

<trheight="35px">

<tdwidth="150px">用户名：</td>

<tdwidth="400px">

<inputtype="text" name="uname" id="uname" value="张三三" alt="用户名" />

<spanid="span_uname"></span>

</td>

</tr>

<trheight="35px">

<td>

<inputtype="password" name="pwd" id="pwd"value="123456" alt="密码"/>

<spanid="span_pwd"></span>

</td>

</tr>

<trheight="35px">

<td>

<inputtype="text" name="phone" id="phone"value="18231932733" alt="手机号" />

<spanid="span_phone"></span>

</td>

</tr>

<trheight="35px">

<td>

<inputtype="text" name="mail" id="email"value="2767501426@qq.com" alt="邮箱" />

<spanid="span_email"></span>

</td>

</tr>

<trheight="35px">

<td>

男：<input type="radio"name="sex" value="1"/>

女：<input type="radio"name="sex" value="0"/>

</td>

</tr>

<trheight="35px">

<td>

<inputtype="checkbox" name="fav" value="1" />唱歌

<inputtype="checkbox" name="fav" value="2" />睡觉

<inputtype="checkbox" name="fav" value="3" />LOL<br />

<inputtype="checkbox" name="fav" value="4" />旅游

<inputtype="checkbox" name="fav" value="5" />高尔夫

<inputtype="checkbox" name="fav" value="6" />篮球

<spanid="span_fav"></span>

</td>

</tr>

<trheight="35px">

<td>

<selectname="adress" id="sel">

<optionvalue="0">--请选择--</option>

<optionvalue="1">河南</option>

<optionvalue="2">湖南</option>

<optionvalue="3">海南</option>

<optionvalue="4">云南</option>

</select>

<spanid="span_sel"></span>

</td>

</tr>

<trheight="35px">

<td>

<inputtype="text" style="width: 100px; height: 60px;"id="yzm1" />

</td>

</tr>

<trheight="35px">

<td>

<textareaname="intro" rows="8"cols="30"></textarea>

</td>

</tr>

<trheight="35px">

<tdcolspan="2">

<inputtype="checkbox" name="" id="check"value="" >是否同一本公司协议

</td>

</tr>

<trheight="35px">

<tdcolspan="2">

<inputtype="submit" id="sub" value="注册" disabled="true"/>

</td>

</tr>

</table>

</form>

</center>

</body>

</html>

jQuery中的树形菜单

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<styletype="text/css">

div{

font-size:12px;

color:#000000;

line-height:22px;

}

img{

vertical-align:middle;

}

font-size:13px;

color:#000000;

text-decoration:none;

}

a:hover{

font-size:13px;

color:#999999

}

.red{

color:#FF0000

}

</style>

<scriptsrc="js/jquery-1.9.1.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

$(".fir").click(function(){

parent()获得父节点对象 next()得到下一个节点

var dis= $(this).parent().next().css("display");

if(dis=="none"){

$(this).parent().next().css("display","block");

children()获得子节点

$(this).children().attr("src","img/minus.gif");

}else {

$(this).parent().next().css("display","none");

find()查找到指定的节点

$(this).find("img").attr("src","img/plus.gif");

}

})

</script>

</head>

<body>

<divid="div1"style="padding-left:100px;">

<div>

<ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a>

</div>

<divid="1"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS系统

<BR>

<imgsrc="img/z-top.gif">共建水木

<BR>

<imgsrc="img/z-top.gif">站务公告栏

<BR>

<imgsrc="img/z-top.gif">妆点水木

<BR>

<imgsrc="img/z-end.gif">申请版主

</div>

<div>

<ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a>

</div>

<divid="1"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS系统

<BR>

<imgsrc="img/z-top.gif">共建水木

<BR>

<imgsrc="img/z-top.gif">站务公告栏

<BR>

<imgsrc="img/z-top.gif">妆点水木

<BR>

<imgsrc="img/z-end.gif">申请版主

</div>

<div>

<ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a>

</div>

<divid="1"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS系统

<BR>

<imgsrc="img/z-top.gif">共建水木

<BR>

<imgsrc="img/z-top.gif">站务公告栏

<BR>

<imgsrc="img/z-top.gif">妆点水木

<BR>

<imgsrc="img/z-end.gif">申请版主

</div>

<div>

<ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a>

</div>

<divid="1"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS系统

<BR>

<imgsrc="img/z-top.gif">共建水木

<BR>

<imgsrc="img/z-top.gif">站务公告栏

<BR>

<imgsrc="img/z-top.gif">妆点水木

<BR>

<imgsrc="img/z-end.gif">申请版主

</div>

</body>

</html>

jQuery的图片放大器插件 jQzoom

官方网址：https://jquery-plugins.net/jqzoom

jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大，使用简便。

支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果，修正IE6的selectbug。

配置参数

·zoomType，默认值：’standard’，另一个值是’reverse’，是否将原图用半透明图层遮盖。

·zoomWidth，默认值：200，放大窗口的宽度。

·zoomHeight，默认值：200，放大窗口的高度。

·xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。

·yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。

·position，默认值：’right’，放大窗口的位置，值还可以是:’right’,’left’ ,’top’ ,’bottom’。

·lens，默认值：true，若为false，则不在原图上显示镜头。

·imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度。

·title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。

·showEffect，默认值：’show’，显示放大窗口时的效果，值可以为:‘show’ ,’fadein’。

·hideEffect，默认值：’hide’，隐藏放大窗口时的效果:‘hide’ ,’fadeout’。

·fadeinSpeed，默认值：’fast’，放大窗口的渐显速度(选项:‘fast’,'slow’,'medium’)。

·fadeoutSpeed，默认值：’slow’，放大窗口的渐隐速度(选项:‘fast’,'slow’,'medium’)。

·showPreload，默认值：true，是否显示加载提示Loadingzoom(选项: ‘true’,'false’)。

·preloadText，默认值：’Loadingzoom’，自定义加载提示文本。

·preloadPosition，默认值：’center’，加载提示的位置，值也可以为’bycss’，以通过css指定位置。

JQuery的jqzoom插件的两种使用方法

第一种实现的方法
注意：本方法用的是jqzoom.pack.1.0.1.js

Js代码

</style>

$(document).ready(function(){

$(".jqzoom").jqzoom({

xzoom: 300, //设置放大 DIV 长度（默认为 200）

yzoom: 300, //设置放大 DIV 高度（默认为 200）

offset: 10, //设置放大 DIV 偏移（默认为 10）

position: "right", //设置放大 DIV 的位置（默认为右边）

preload:1,

lens:1

});

</script>

Html代码

<div>

</a>

</div>

第二种方法

Js代码

div.zoomdiv {

z-index:999;

position: absolute;

top:0px;

left:0px;

width: 200px;

height : 200px;

background: #ffffff;

border:1px solid #CCCCCC;

display:none;

text-align: center;

overflow: hidden;

}

div.jqZoomPup {

z-index : 999;

visibility : hidden;

position: absolute;

top:0px;

left:0px;

width: 50px;

height : 50px;

border: 1px solid #aaa;

background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;

opacity: 0.5;

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

filter: alpha(Opacity=50);

}

</style>

$(document).ready(function(){

$(".jqzoom").jqueryzoom({

xzoom: 300, //设置放大 DIV 长度（默认为 200）

yzoom: 300, //设置放大 DIV 高度（默认为 200）

offset: 10, //设置放大 DIV 偏移（默认为 10）

position: "right", //设置放大 DIV 的位置（默认为右边）

preload:1,

lens:1

});

</script>

Html代码

</div>

以上是关于jQuery的学习的主要内容，如果未能解决你的问题，请参考以下文章

[jQuery学习系列二 ]2-JQuery学习二-数组操作

[jQuery学习系列五 ]5-Jquery学习五-表单验证

从零开始学习jQuery 开天辟地入门篇

前端学习-jQuery源码学习

jQuery学习一（选择器）

[jQuery学习系列二 ]2-JQuery学习二-数组操作