JQuery

zisefeiniao

浏览: 168172 次
性别:
来自: 成都

最近访客更多访客>>

chen8039

yxjsmile

seed2sky

晨晨90

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MLDN魔乐科技跟李兴华老师学JAVA记

jQuery JavaScript json CSS Ajax

1、JQuery的基本语法

为页面加入jquery支持非常容易，只需要通过script标签将支持的js文件导入就可以了。

JQuery语法：

使用JavaScript方式取得的对象被称为DOM对象，而使用JQuery取得的对象，在这里称为JQuery对象。

1、通过JQuery方式取得页面元素。

使用js可以通过getElementById、all.name、form.name等

使用JQuery可以通过以下几种方式取得页面元素：

1）通过 #id的方式取得元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function showValue() {

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

}

</script>

</HEAD>

<BODY>

输入姓名：<INPUT TYPE="text" NAME="name" id="mytext"> <br>

</BODY>

</HTML>

注意需要使用$()将#id括起来，如果要取得value值，需要通过val()方法取得，而无法直接调用value属性。而且必须通过id来取得，而不能使用name属性。

2）通过标签名称取得，直接将标签名放入$()中

function showValue() {

alert($("input").val());

}

</script>

如果页面有多个元素，可以通过数组的方式取得其中的某一个

function showValue() {

alert($("input")[1].value);

}

</script>

但是如果使用.val()取得值会出现错误，因为数组中返回的对象为DOM对象，而不是JQuery对象。所以这里只能按照DOM对象的方式进行处理。

3）依据class样式取得元素，需要将 .class 加入到$()中

function showValue() {

alert($(".err").html());

}

</script>

.err{

color:red;

font-size:12px;

}

</style>

其中.html()方法的功能是取得span或div或td等元素的innerHTML属性，类似的还有.text()

4）取得页面中的所有元素，$(“*”)

2、为元素设置和取得属性（相当于getter与setter方法）

1）特殊属性：

innerHTML、innerText、value、class，对于这四个属性使用专门的方法进行处理。

innerHTML：html()，取得和设置都使用该方法，不传参数的表示取得属性，传参数的表示设置属性

function showValue() {

alert($(".err").html("新的信息"));

}

innerText：text()，value：val()，使用方法与html()相同

class用来处理css样式

使用addClass添加新的样式，使用removeClass删除样式，使用toggleClass来替换新的样式，都需要传入样式名称（注意不要加.）

2）普通的属性

都使用attr方法来取得或设置属性，传一个参数表示取得该名称的属性值，传两个参数，表示为该属性设置一个新的值。

使用removeAttr可以删除某一个属性。

function showValue() {

alert($("input").attr("readOnly",""));

}

</script>

输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

3、事件处理。

可以通过blur()等方法调用或设置某元素的事件

function showValue() {

alert("原有方法");

}

function newValue() {

alert("新的方法");

}

function changeFun() {

$("#subbtn").click(newValue);

}

</script>

.err{

color:red;

font-size:12px;

}

.ok{

color:green;

font-size:20px;

}

</style>

</HEAD>

<BODY>

输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

</BODY>

但是在这里添加了方法后原有的方法并没有被删除，如果要删除，可以使用unbind方法进行删除

function loadInit() {

$("#subbtn").click(showValue);

}

function showValue() {

alert("原有方法");

}

function newValue() {

alert("新的方法");

}

function changeFun() {

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

$("#subbtn").click(newValue);

}

</script>

.err{

color:red;

font-size:12px;

}

.ok{

color:green;

font-size:20px;

}

</style>

</HEAD>

输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

</BODY>

注意：事件必须是通过JQuery绑定的，如果直接使用html进行编写，则无法取消绑定

补充：one方法，将一个事件绑定，但该方法只执行一次（一次性）

JQuery中包含几个特殊事件：$(document).ready()，表示页面加载完成时自动调用的函数，里面需要传入一个function参数

hover()：模仿鼠标悬停事件，实际上就是onMouseOver + onMouseOut，

4、DOM对象与JQuery对象的转换

DOM à JQuery ： $(DOM对象)

JQuery à DOM ： JQuery对象[下标]（如果只有一个，则下标为0）

2、在AJAX中使用JQuery开发，结合JSON

示例：修改之前的菜单联动

修改之前完成的JSONDemo，在列表显示页面，将调用方法修改

这里调用AJAX可以使用getJSON方法进行调用

function showplus(upid) {

// 参数分别为，URL路径、所传递的参数（使用JSON方式进行传递）

$.getJSON("area.do",{"status":"showplus","upid":upid},showplusCallback);

}

Action中的代码不需要修改，

// 返回的值通过obj参数返回，直接返回的就是JSON对象

function showplusCallback(obj) {

// 先将下拉列表清空

var select = document.getElementById("plus") ;

select.options.length = 1 ;

// 循环返回的areaplus数据

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

var areaplus = obj.areapluses[i];

// 建立option

var option = document.createElement("option");

// 设置value属性

option.setAttribute("value",areaplus.id);

// 设置显示内容

option.appendChild(document.createTextNode(areaplus.title));

// 设置下拉列表

select.appendChild(option);

}

测试时发现js出现错误，原因是由于json.js与jquery.js有冲突，因此这里需要将 json.js的导入代码删除。

分享到：

DWR框架 —— 用户注册验证 | AJAX中使用JSON

2009-06-10 21:03
浏览 1220
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery

1、JQuery的基本语法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery

1、JQuery的基本语法

评论

发表评论

相关推荐

本小姐回来啦 —— 超级感谢MLDN

现在开始积极的找工作

素质教育 —— 模拟面试

EJB实体Bean开发的复合主键映射

EJB实体Bean开发

EJB3.0

JBoss服务器配置

Spring结合iBATIS进行开发

ibatis开发框架

WebService分布式开发

北京下雨了

AJAX中使用JSON

AJAX框架 —— JSON基本知识

还应该多帮助同学，才能让自己进步快

业务、业务、业务。。。

IBM Project 继续中ing....

实际开发了

web学习笔记 —— 数据源

SSH（Spring + Struts + Hibernate）

Spring中的控制反转（IOC）

最近访客更多访客>>