Jquery

最新推荐文章于 2025-03-18 20:02:11 发布

有趣的程序Boy

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量223

点赞数

分类专栏：前端文章标签： Jquery 前端

本文链接：https://blog.youkuaiyun.com/yloveyzcl/article/details/82588271

版权

前端专栏收录该内容

7 篇文章

订阅专栏

Jquery

1 Jquery基础

JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素

使用JQuery进行隐藏和显示

$(function(){

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

$("#d").hide();

});

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

$("#d").show();

});

</script>

<button id="b1">隐藏div</button>

<button id="b2">显示div</button>

<br>

这是一个div

</div>

jquery.min.js

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js

理解 $(function(){})

$(function(){

});
表示文档加载。看上去略复杂，其实是由下面两种构成：

$();

function(){

}
合并在一起就是：

$(function(){

});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。
一样功能，还有另一个写法

$(document).ready(function(){

});
它也是由两部分组成

$(document).ready();

function(){

}

$(function(){

document.write("文档加载成功!");

document.close();

});

</script>

通过id获取元素

与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了
需要注意的是，通过 document.getElementById 获取到的是 DOM里的元素节点
而通过$("#id") 获取到的是一个 JQuery 对象

$(function(){

document.write( $("#d") );

document.close();

});

</script>

<div id="d">Hello JQuery</div>

增加监听器

JQuery增加click事件的监听

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

alert("点击了按钮");

});
这个也是由两部分组成：
1. b1按钮的点击事件

$("#b1").click();
2. 弹出对话框的函数

function(){

alert("点击了按钮");

}
与原生javascript需要在html元素上增加监听事件不同的是
JQuery 不需要在html元素上进行操作
这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。

$(function(){

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

alert("点击了按钮");

});

</script>

2 常见方法

取值

通过JQuery对象的val()方法获取值
相当于 document.getElementById("input1").value;

$(function(){

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

alert($("#input1").val());

});

</script>

<br>

获取元素内容,如果有子元素，保留标签

通过html() 获取元素内容,如果有子元素，保留标签

$(function(){

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

alert($("#d1").html());

});

</script>

<button id="b1">获取文本内容</button>

<br>

这是div的内容

<span>这是div里的span

</span>

</div>

获取元素内容,如果有子元素，不包含子元素标签

通过text() 获取元素内容,如果有子元素，不包含标签

$(function(){

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

alert($("#d1").text());

});

</script>

<button id="b1">获取文本内容</button>

<br>

这是div的内容

<span>这是div里的span

</span>

</div>

3 CSS

增加class

通过addClass() 增加一个样式中的class

$(function(){

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

$("#d").addClass("pink");

});

</script>

<button id="b1">增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

Hello JQuery

</div>

删除class

$(function(){

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

$("#d").removeClass("pink");

});

</script>

<button id="b1">删除背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

Hello JQuery

</div>

切换class

通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加

$(function(){

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

$("#d").toggleClass("pink");

});

</script>

<button id="b1">切换背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

Hello JQuery

</div>

css函数

通过css函数直接设置样式

css(property,value)
第一个参数是样式属性，第二个参数是样式值

css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。
属性值对之间用逗号，分割
属性值之间用冒号：分割
属性和值都需要用引号 “

$(function(){

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

$("#d1").css("background-color","pink");

});

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

$("#d2").css({"background-color":"pink","color":"green"});

});

</script>

<button id="b1">设置单一样式</button>

<button id="b2">设置多种样式</button>

<br>

单一样式，只设置背景色

</div>

多种样式，不仅设置背景色，还设置字体颜色

</div>

4 选择器

元素

$("tagName")
根据标签名选择所有该标签的元素

运行效果

$(function(){

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

$("div").addClass("pink");

});

</script>

<button id="b1">给所有的div元素增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

<div >

Hello JQuery

</div>

<div >

Hello JQuery

</div>

<div >

Hello JQuery

</div>

$("#id")
根据 id 选择元素
id应该是唯一的，如果id重复，则只会选择第一个。

$(function(){

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

$("#d1").addClass("pink");

});

</script>

<button id="b1">给id=d1的div增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

Hello JQuery

</div>

Hello JQuery

</div>

Hello JQuery

</div>

类

$(".className")
根据 class 选择元素

$(function(){

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

$(".d").addClass("pink");

});

</script>

<button id="b1">给class='d'的div增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

Hello JQuery

</div>

Hello JQuery

</div>

<div >

Hello JQuery

</div>

层级

$("selector1 selector2")
选择 selector1下的selector2元素。
在本例中选择id=d3的div下的span元素

$(function(){

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

$("div#d3 span").addClass("pink");

});

</script>

<button id="b1">给id='d3'的div 下的 span 增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

<span>Hello JQuery</span>

</div>

<span>Hello JQuery</span>

</div>

<span>Hello JQuery</span>

</div>

最先最后

$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素

$(function(){

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

$("div:first").addClass("pink");

});

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

$("div:last").addClass("pink");

});

</script>

<button id="b1">第一个增加背景色</button>

<button id="b2">最后一个增加背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

<div>

<span>Hello JQuery</span>

</div>

<div >

<span>Hello JQuery</span>

</div>

<div >

<span>Hello JQuery</span>

</div>

奇偶

$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)

$(function(){

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

$("div:odd").toggleClass("pink");

});

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

$("div:even").toggleClass("green");

});

</script>

<button id="b1">切换奇数背景色</button>

<button id="b2">切换偶数背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

.green{

background-color:green;

}

</style>

<div>

<span>Hello JQuery 0</span>

</div>

<div>

<span>Hello JQuery 1</span>

</div>

<div >

<span>Hello JQuery 2</span>

</div>

<div >

<span>Hello JQuery 3</span>

</div>

<div >

<span>Hello JQuery 4</span>

</div>

<div >

<span>Hello JQuery 5</span>

</div>

<div >

<span>Hello JQuery 6</span>

</div>

可见性

$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注； div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素

$(function(){

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

$("div:visible").hide();

});

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

$("div:hidden").show();

});

</script>

<button id="b1">隐藏可见的</button>

<button id="b2">显示不可见的</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

<div>

<span>Hello JQuery 1</span>

</div>

<div >

<span>Hello JQuery 2</span>

</div>

<div >

<span>Hello JQuery 3</span>

</div>

<div >

<span >Hello JQuery 4</span>

</div>

<div >

<span>Hello JQuery 5</span>

</div>

<div >

<span>Hello JQuery 6</span>

</div>

属性

$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素
注：一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName,再次使用 [class=className] 就无法选中了
而.className没有这个问题。

$(function(){

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

$("div[id]").toggleClass("border");

});

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

$("div[id='pink']").toggleClass("border");

});

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

$("div[id!='pink']").toggleClass("border");

});

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

$("div[id^='p']").toggleClass("border");

});

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

$("div[id$='k']").toggleClass("border");

});

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

$("div[id*='ee']").toggleClass("border");

});

</script>

<button id="b1">给有id属性的div切换边框</button>

<button id="b2">给id=pink的div切换边框</button>

<button id="b3">给有id!=pink属性的div切换边框</button>

<button id="b4">给有id以p开头的div切换边框</button>

<button id="b5">给有id以k结尾的div切换边框</button>

<button id="b6">给有id包含ee的div切换边框</button>

<br>

<style>

.pink{

background-color:pink;

}

.green{

background-color:green;

}

.border{

border: 1px blue solid;

}

button{

margin-top:10px;

display:block;

}

div{

margin:10px;

}

</style>

id=pink的div

</div>

id=green的div

</div>

<div >

没有id的div

</div>

表单对象

表单对象选择器指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
注意: 第7行

$("td[rowspan!=13] "+value).toggle(500);
$("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒
注： :submit会把<button>元素选中，因为在一些浏览器中，<button>元素的type默认值是submit，所以会选中它

表单对象属性

:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

当前元素

在监听函数中使用 $(this)，即表示触发该事件的组件。

5 筛选器

第一个最后一个第几个

首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0

$(function(){

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

$("div").first().toggleClass("pink");

});

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

$("div").last().toggleClass("pink");

});

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

$("div").eq(4).toggleClass("pink");

});

</script>

<button id="b1">切换第1个div背景色</button>

<button id="b2">切换最后1个div背景色</button>

<button id="b3">切换第5个div背景色</button>

<br>

<style>

.pink{

background-color:pink;

}

</style>

<div>

<span>Hello JQuery 1</span>

</div>

<div >

<span>Hello JQuery 2</span>

</div>

<div >

<span>Hello JQuery 3</span>

</div>

<div >

<span>Hello JQuery 4</span>

</div>

<div >

<span>Hello JQuery 5</span>

</div>

<div >

<span>Hello JQuery 6</span>

</div>

父祖先

parent() 选取最近的一个父元素
parents() 选取所有的祖先元素

$(function(){

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

$("#currentDiv").parent().toggleClass("b");

});

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

$("#currentDiv").parents().toggleClass("b");

});

</script>

<style>

div{

padding:20px;

}

div#grandParentDiv{

background-color:pink;

}

div#parentDiv{

background-color:green;

}

div#currentDiv{

background-color:red;

}

.b{

border: 2px solid black;

}

</style>

<button id="b1">改变parent()的边框</button>

<button id="b2">改变parents()的边框</button>

祖先元素

父元素

</div>

儿子后代

children(): 筛选出儿子元素 (紧挨着的子元素)
find(selector): 筛选出后代元素
注: find() 必须使用参数 selector

$(function(){

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

$("#currentDiv").children().toggleClass("b");

});

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

$("#currentDiv").find("div").toggleClass("b");

});

</script>

<style>

div{

padding:20px;

}

div.grandChildrenDiv{

background-color:pink;

}

div.childrenDiv{

background-color:green;

margin:10px;

}

div#currentDiv{

background-color:red;

}

.b{

border: 2px solid black;

}

</style>

<button id="b1">改变children()的边框</button>

<button id="b2">改变find()的边框</button>

当前元素

儿子元素1

<div class="grandChildrenDiv">后代元素n</div>

</div>

儿子元素2

<div class="grandChildrenDiv">后代元素n</div>

</div>

同级

siblings(): 同级(同胞)元素

$(function(){

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

$("#currentDiv").siblings().toggleClass("b");

});

</script>

<style>

div{

padding:20px;

background-color:pink;

margin:10px;

}

div#parentDiv{

background-color:green;

}

div#currentDiv{

background-color:red;

}

.b{

border: 2px solid black;

}

</style>

<button id="b1">给同级加上边框</button>

父元素

当前元素

</div>

<div >

同级元素

</div>

<div >

同级元素

</div>

6 属性

获取

通过attr()获取一个元素的属性

$(function(){

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

alert("align属性是:" + $("#h").attr("align") );

});

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

alert("game属性是:" + $("#h").attr("game") );

});

</script>

<button id="b1">获取align属性</button>

<button id="b2">获取自定义属性 game</button>

<br>

修改

通过attr(attr,value)修改属性

$(function(){

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

$("#h").attr("align","right") ;

});

</script>

<button id="b1">修改align属性为right</button>

<br>

删除

通过removeAttr(attr)删除属性

$(function(){

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

$("#h").removeAttr("align");

});

</script>

<button id="b1">删除align属性</button>

<br>

prop与attr的区别

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值，无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

$(function(){

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

alert("game属性是:" + $("#c").attr("game") );

});

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

alert("game属性是:" + $("#c").prop("game") );

});

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

alert("checked属性是:" + $("#c").attr("checked") );

});

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

alert("checked属性是:" + $("#c").prop("checked") );

});

</script>

<style>

button{

display:block;

}

</style>

<button id="b1">通过attr获取自定义属性 game</button>

<button id="b2">通过prop获取自定义属性 game</button>

<button id="b3">通过attr获取 checked属性</button>

<button id="b4">通过prop获取 checked属性</button>

<br>

<input type="checkbox" id="c" game="LOL" checked="checked"> 选中的复选框

7 效果

显示隐藏切换

显示隐藏切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)

向上滑动向下滑动滑动切换

向上滑动向下滑动滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)

$(function(){

var div = $("#d");

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

div.slideUp();

});

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

div.slideDown();

});

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

div.slideToggle();

});

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

div.slideUp(2000);

});

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

div.slideDown(2000);

});

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

div.slideToggle(2000);

});

</script>

<style>

button{

display:block;

}

div{

border:solid 1px gray;

background-color:pink;

width:300px;

height:100px;

}

</style>

<button id="b4">延时向上滑动</button>

<button id="b5">延时向下滑动</button>

<button id="b6">延时滑动切换</button>

<br>

用于演示效果的DIV

</div>

自定义动画效果

通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注：默认情况下，html中的元素都是固定，并且无法改变的位置的。为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

$(function(){

var div = $("#d");

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

div.animate({left:'100px'},2000);

div.animate({left:'0px',top:'50px',height:'50px'},2000);

});

</script>

<style>

button{

display:block;

}

div{

background-color:pink;

width:200px;

height:80px;

font-size:12px;

position:relative;

}

</style>

<button id="b1">自定义动画</button>

<br>

<p>2. 向左下移动50px，同时高度变小</p>

</div>

回调函数

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

$(function(){

var div = $("#d");

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

div.animate({left:'100px'},2000);

div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){

alert("动画演示结束");

});

</script>

<style>

button{

display:block;

}

div{

background-color:pink;

width:200px;

height:80px;

font-size:12px;

position:relative;

}

</style>

<button id="b1">自定义动画结束时，会有提示框</button>

<br>

<p>2. 向左下移动50px，同时高度变小</p>

</div>

8 事件

点击

click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

$(function(){

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

$("#message").html("单击按钮");

});

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

$("#message").html("双击按钮");

});

</script>

<button id="b">测试单击和双击</button>

键盘

keydown 表示按下键盘
keypress 表示按下键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
先后顺序：按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写

鼠标

mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用

焦点

focus() 获取焦点
blur() 失去焦点

$(function(){

$("input").focus(function(){

$(this).val("获取了焦点");

});

$("input").blur(function(){

$(this).val("失去了焦点");

});

</script>

<style>

</style>

改变

change() 内容改变
注：对于文本框，只有当该文本失去焦点的时候，才会触发change事件。

$(function(){

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

var text = $(this).val();

$("#message").html("input1的内容变为了"+text);

});

</script>

<style>

</style>

<br>

提交

submit() 提交form表单

账号 : <input name="name" type=""> <br>

密码: <input name="password" type=""><br>

</form>

$(function(){

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

alert("提交账号密码");

});

</script>

绑定事件

以上所有的事件处理，都可以通过on() 绑定事件来处理

$("selector").on("event",function);

$(function(){

$("#b").on("click",function(){

$("#message").html("单击按钮");

});

$("#b").on("dblclick",function(){

$("#message").html("双击按钮");

});

</script>

<button id="b">测试单击和双击</button>

触发事件

触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。

$("selector").trigger("event");

$(function(){

$("#b").on("click",function(){

$("#message").html("单击按钮");

});

$("#b").on("dblclick",function(){

$("#message").html("双击按钮");

});

$("#b").trigger("dblclick");

});

</script>

<button id="b">测试单击和双击</button>

9 Ajax

提交AJAX请求

参考使用AJAX 通过无刷新验证账号是否存在这个例子,服务端使用JSP进行验证，当用户输入abc的时候提示"已经存在"
完整的 $.ajax 参数比较复杂，这里采用了常见的调用方式。

$.ajax({

url: page,

data:{"name":value},

success: function(result){

$("#checkResult").html(result);

}

});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

输入账号 :<input id="name" type="text">

$(function(){

$("#name").keyup(function(){

var page = "/study/checkName.jsp";

var value = $(this).val();

$.ajax({

url: page,

data:{"name":value},

success: function(result){

$("#checkResult").html(result);

}

});

</script>

使用get方式提交ajax

$.get 是 $.ajax的简化版，专门用于发送GET请求

$.get(

page,

{"name":value},

function(result){

$("#checkResult").html(result);

}

);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

输入账号 :<input id="name" type="text">

$(function(){

$("#name").keyup(function(){

var page = "/study/checkName.jsp";

var value = $(this).val();

$.get(

page,

{"name":value},

function(result){

$("#checkResult").html(result);

}

);

});

</script>

使用post方式提交ajax

$.post 是 $.ajax的简化版，专门用于发送POST请求

$.post(

page,

{"name":value},

function(result){

$("#checkResult").html(result);

}

);
$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

输入账号 :<input id="name" type="text">

$(function(){

$("#name").keyup(function(){

var page = "/study/checkName.jsp";

var value = $(this).val();

$.post(

page,

{"name":value},

function(result){

$("#checkResult").html(result);

}

);

});

</script>

最简单的调用ajax的方式

load比起 $.get,$.post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。在本例中，直接在page里加上了参数列表

输入账号 :<input id="name" type="text">

$(function(){

$("#name").keyup(function(){

var value = $(this).val();

var page = "/study/checkName.jsp?name="+value;

$("#checkResult").load(page);

});

</script>

10 数组操作

遍历

$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容

var a = new Array(1,2,3);

$.each( a, function(i, n){

document.write( "元素[" + i + "] : " + n + "<br>" );

})

document.close();

</script>

去除重复

$.unique() 去掉重复的元素
注意：执行unique之前，要先调用sort对数组的内容进行排序。

var a = new Array(5,2,4,2,3,3,1,4,2,5);

a.sort();

$.unique(a);

$.each( a, function(i, n){

document.write( "元素[" + i + "] : " + n + "<br>" );

})

document.close();

</script>

是否存在$.inArray

$.inArray 返回元素在数组中的位置，如果不存在返回-1

var a = new Array(1,2,3,4,5,6,7,8);

document.write($.inArray(9,a));

document.close();

</script>

11 字符串操作

去除首尾空白

$.trim() 去除首尾空白

document.write($.trim(" Hello JQuery "));

document.close();

</script>

12 对象转换

学习到这里已经使用了大量的JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象不具备这些方法。
同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。
在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换

JQuery转DOM

通过get(0)或者[0] 把JQuery对象转为DOM对象

$(function(){

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

var div= $("#d");

var d = div[0];

var s ="JQuery对象是 " + div;

s +="\n对应的DOM对象是 " + d

alert(s);

});

</script>

<button id="b1">JQuery对象div转为DOM对象d</button>