JQuery

最新推荐文章于 2022-10-17 22:07:41 发布

iteye_16360

最新推荐文章于 2022-10-17 22:07:41 发布

阅读量77

点赞数

分类专栏： MLDN魔乐科技跟李兴华老师学JAVA记文章标签： jQuery JavaScript json CSS Ajax ViewUI

MLDN魔乐科技跟李兴华老师学JAVA记专栏收录该内容

92 篇文章 1 订阅

订阅专栏

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的导入代码删除。

iteye_16360

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

1、JQuery的基本语法为页面加入jquery支持非常容易，只需要通过script标签将支持的js文件导入就可以了。&lt;script language="javascript" src="jquery-1.3.1.js"&gt;&lt;/script&gt; JQuery语法：使用JavaScript方式取得的对象被称为DOM对象，而使用JQuery取得...
复制链接

扫一扫

专栏目录