- 浏览: 168502 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
gwill_21:
dwr.xml找不到怎么办,难道要自己手写dwr.xml?痛苦 ...
DWR框架 —— 用户注册验证 -
recoba7:
MLDN魔乐科技 Oracle学习笔记 (5) -
lanni2460:
呵呵 尽管现在才看到这个 但是我真的觉得 李老师 讲的很好呢 ...
严重声明,那些恶意诋毁MLDN及李兴华老师的其他培训机构统统走开 -
chian_xxp:
只要把功能实现了,代码结构合理了,代码性能提高了,该注意的注意 ...
业务、业务、业务。。。 -
wzpbb:
密码多少啊??? 给一下啊
MLDN 魔乐科技 Oracle 学习笔记(2)
1、JQuery的基本语法
为页面加入jquery支持非常容易,只需要通过script标签将支持的js文件导入就可以了。
<script language="javascript" src="jquery-1.3.1.js"></script> |
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> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" src="jquery-1.3.1.js"></script> <script language="javascript" > function showValue() { alert($("#mytext").val());
} </script> </HEAD>
<BODY> 输入姓名:<INPUT TYPE="text" NAME="name" id="mytext"> <br> <INPUT TYPE="button" value="提交" onclick="showValue();"> </BODY> </HTML> |
注意需要使用$()将#id括起来,如果要取得value值,需要通过val()方法取得,而无法直接调用value属性。而且必须通过id来取得,而不能使用name属性。
2)通过标签名称取得,直接将标签名放入$()中
<script language="javascript" > function showValue() { alert($("input").val());
} </script> |
如果页面有多个元素,可以通过数组的方式取得其中的某一个
<script language="javascript" > function showValue() { alert($("input")[1].value);
} </script> |
但是如果使用.val()取得值会出现错误,因为数组中返回的对象为DOM对象,而不是JQuery对象。所以这里只能按照DOM对象的方式进行处理。
3) 依据class样式取得元素,需要将 .class 加入到$()中
<script language="javascript" > function showValue() { alert($(".err").html());
} </script> <style type="text/css"> .err{ color:red; font-size:12px; } </style> <span class="err">错误信息</span> |
其中.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可以删除某一个属性。
<script language="javascript" > function showValue() { alert($("input").attr("readOnly",""));
} </script> 输入姓名:<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br> |
3、事件处理。
可以通过blur()等方法调用或设置某元素的事件
<script language="javascript" > function showValue() { alert("原有方法"); } function newValue() { alert("新的方法"); } function changeFun() { $("#subbtn").click(newValue); } </script> <style type="text/css"> .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> <INPUT TYPE="button" value="提交" id="subbtn" onclick="showValue();"> <br> <INPUT TYPE="button" value="切换方法" onclick="changeFun();"> </BODY> |
但是在这里添加了方法后原有的方法并没有被删除,如果要删除,可以使用unbind方法进行删除
<script language="javascript" > function loadInit() { $("#subbtn").click(showValue); }
function showValue() { alert("原有方法"); } function newValue() { alert("新的方法"); } function changeFun() { $("#subbtn").unbind("click"); $("#subbtn").click(newValue); } </script> <style type="text/css"> .err{ color:red; font-size:12px; } .ok{ color:green; font-size:20px; } </style> </HEAD>
<BODY onload="loadInit();"> 输入姓名:<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br> <INPUT TYPE="button" value="提交" id="subbtn"> <br> <INPUT TYPE="button" value="切换方法" onclick="changeFun();"> </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的导入代码删除。
<script type="text/javascript" src="json.js"></script> |
发表评论
-
本小姐回来啦 —— 超级感谢MLDN
2009-08-10 13:24 1578我又回来了!哈哈,报告一个好消息,我已经成功入职博彦科 ... -
现在开始积极的找工作
2009-07-05 19:13 1147学习差不多了,得赶在毕业前找到一个工作啊,本小姐这段时 ... -
素质教育 —— 模拟面试
2009-06-30 19:10 1018今天一天都安排了职业素质的培养,包括简历的指导、技术面 ... -
EJB实体Bean开发的复合主键映射
2009-06-29 21:36 1660复合主键的映射:在Hibernate中是通过一个主键类来完成复 ... -
EJB实体Bean开发
2009-06-29 21:33 967EJB实体Bean开发的数据库连接采用数据源连接池的方式,因此 ... -
EJB3.0
2009-06-28 14:14 1205EJB是SUN公司提出的开发 ... -
JBoss服务器配置
2009-06-25 21:21 2050哦,哦,哦,EJB的准备课程啊。 这里开发使用的是 JB ... -
Spring结合iBATIS进行开发
2009-06-25 21:19 938使用Spring管理iBATIS完全可以参照Spring+Hi ... -
ibatis开发框架
2009-06-25 21:17 1226iBATIS为一个ORMapping框架,可以帮助开发人员完成 ... -
WebService分布式开发
2009-06-24 22:23 1880WebService:用来跨语言传递数据。 数据交互是通过XM ... -
北京下雨了
2009-06-18 19:56 738上次在公交车上,听到电视里放《北京下雨了》,那么北京今天 ... -
AJAX中使用JSON
2009-06-10 21:02 1280在Java开发中,如果要使用JSON进行开发,需要一些支持,这 ... -
AJAX框架 —— JSON基本知识
2009-06-10 21:01 911我真想知道这年头到底有多少种框架。 1、JSON ... -
还应该多帮助同学,才能让自己进步快
2009-06-08 21:57 960今天对于本小姐来讲还真是相对轻松的一天啊,上周完成了任 ... -
业务、业务、业务。。。
2009-06-03 18:41 1119项目就是业务,项目中都是业务,技术就这么点东西,只要把 ... -
IBM Project 继续中ing....
2009-06-02 19:08 845项目就是要坚持的做下去,而且要想到做到最好,虽然框架很好 ... -
实际开发了
2009-06-01 18:17 848今天开始新的项目了,项目老师帮我们搭建好了SVN服务器, ... -
web学习笔记 —— 数据源
2009-05-31 19:56 987使用数据源可以提升数据库的操作性能,当然,不管使用与否,对于程 ... -
SSH(Spring + Struts + Hibernate)
2009-05-31 19:47 2467Spring结合Hibernate ... -
Spring中的控制反转(IOC)
2009-05-30 16:29 757什么控制反转,还弄了一个新名词 —— ioc,说白了就 ...
相关推荐
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. ...
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...
jQuery2.1.4来自jQuery官方网站,jQuery2.1.4包括jQuery2.1.4和jQuery2.1.4压缩版,即:jQuery2.1.4.js和jQuery2.1.4.min.js,jQuery是流行的JS框架! jquery-2.1.4 (注!jquery-2.0以上版本不再支持IE 6/7/8) ...
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jQuery API 3.3.1 中文手册,jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
里面附有: 1.easyUI.rar; 2.jQuery and jQuery UI Reference 1.2 API.zip...9.jquery-ui-1.8.16.custom (jQuery 1.3.2以上版本适用不包含 jQuery 1.3.2).zip; 10.jquery-ui-1.9m3.zip; 11.jquery-ui-17custom.zip;
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版