- 浏览: 224078 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
Jquery从入门到精通及附件下载(一)
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE , FF Safari , Opera )。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
版本:
Jquery有对应不同语言有不同的版本,这里只说说java中的jquery
Java jquery最新的版本是:jquery-1.5.1
下面的附件是最新版本的jquery大家可以直接下载。大家也可以登录官网: http://jquery.com/下载。
下载之后直接将jquery文件引入:
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
优点:
其短小精悍,轻量级的js库使用简单方便,性能高效,能极大地提高开发效率,是开发Web应用的最佳的辅助工具之一。
Jquery设计理念:
回忆或想象一下,我们在Web开发中是如何使用JavaScript?绝大多数时间都是采用getElementById在Dom文档中找到DOM元素,然后取值或设定值,采用innerHTML取其内容或设定其内容,或进行事件的监听(如click),在控制样式方面,我们会进行height,width,display等的改变,达到视觉上的效果,对于Ajax方面,也是取到数据在页面的某元素里面去添充内容。
但是这些还是不能满足开发的需要,比如在DOM树中寻找DOM元素,仅仅只能是通过元素的ID,但是我们想要更方便的查找方法,同时还希望能有一个统一的入口,不要太泛,学习曲线过高或难于使用。
jQuery就是从这里出发,把所有一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工作就是如其名一样:query。它强大的查找功能令所有的框架都黯然失色。jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。这样说来jQuery就是查询和操作的统一。查询是入口,操作是结果。
Jquery组成部分:
1、Selector,查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector功能,还包含其对直接查找或间接查找而扩展的一些功能。
2、Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。
3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度,宽度,display等这些常用的CSS的功能。
4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。
5、Event的操作。对Event的兼容做了统一的处理。
6、动画(Fx)的操作。可以看作是CSS样式上的扩展
Jquery的对象:
在jQuery文档中提供了四种方式:jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)四种构寻jQuery对象的方式。其中jQuery可以用$代替。这四种是经常用到。其实jQuery的参数可以是任何的元素,都能构成jQuery对象。
举例说明:
1、$($(“P”))可以看出其参数可以是jQuery对象或ArrayLike的集合。
2、$()是$(document)的简写。
3、$(3)会把3放到jQuery对象中集合中。
Jquery对象转换成DOM对象的方法
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
2、可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象
Jquery中的基本选择器:
1、id选择器 $("#div");
2、class选择器 $(".class");
3、元素选择器器 $("input");
4、* 匹配所有的元素的Jquery对象 $("*");
5、并列选择器 用英文的逗号区分 $("tr,tr.text");
层次元素关系
1、祖先关系 空格符号
2、父子关系 大于符号
3、紧跟的关系 +符号
4、紧跟后的所有兄弟关系 ~符号
CSS样式
1、css("");带有一个参数是获取其属性的值
2、css("","");为其对象设置一个指定的属性和属性值
3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
举例说明:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
/**层级元素选择器的使用方式*/
/**祖先关系 符号为===>空格*/
var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象
/**输出Jquery对象的大小*/
alert("后代个数是:"+$frmipts.size());
/**父子关系 符号为===>>*/
var $ipt = $("form>input");
//为你获取的input添加背景颜色
/**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/
var iptt = $ipt[0];
iptt.style.backgroundColor="red";
alert("-----------改变中介线---------------");
/**采用Jquery对象本身的css方法来设置样式*/
$ipt.css("background-color","blue");
/**匹配所有紧接在某个元素后的某个元素 符号为===> +*/
var $lipts=$("label+input");
/**为其添加背景颜色*/
$lipts.css("background-color","green");
/**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/
var $fipts = $("form~input");
$fipts.css("background-color","yellow");
/**我使用到了CSS样式
.css("")//获取其样式属性的值
案例: $fipts.css("background-color");
.css("","") //为其添加样式属性及属性值
$fipts.css("background-color","yellow");
.css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。
$fipts.css({"background-color":"red","color":"blue"});
*/
alert("获取该Jquery对象的背景颜色值:"+$fipts.css("background-color"));
});
</script>
</head>
<body>
<div>
<div>
<input name="ddd"/>
<h1>
层级选择器的使用方式
</h1>
</div>
<div id="#frm">
邮箱:<input name="test"/>
<form>
<label>
Name:
</label>
<input name="name"/>
<fieldset>
<label>
Newsletter:
</label>
<input name="newsletter" />
</fieldset>
<label>
Age:
</label>
<input name="age"/>
</form>
<label>
周星驰:
</label>
<br/>
姓名:<input name="none" /><br/>
</div>
</div></body>
</html>
Jquery的简单选择器
1、:first 匹配的第一个
2、:last 匹配的最后一个
3、:lt(index) 小于某个的
4、:gt(index) 大于某个的;
5、:eq(index) 等于某个 相当于过滤器中的.eq(index)
6、:even 奇数行
7、:odd 偶数行
8、:header 匹配h1,h2 h3 等标题
9、:not 除去匹配的(剩下的)
过滤器:
.eq(index)匹配某个
属性中html代码
.html()返回整个html文本
属性的文本
.text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
举例说明:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//提示:$(document).ready(function(){});=$(function(){});
$(function (){
var $ses=$(".ses:first");
alert($ses.html());//输出html文本
$ses.css("background-color","blue");//用css样式改变颜色
alert("------");
var $ses1=$(".ses:last");
alert($ses1.text());//输出文本
$ses1.css("background-color","pink");
//even:表示获得偶数的奇数行 及0,2,4
//$("tr:even").css("background-color","green");
//odd:表示获得奇数的偶数行 及1,3,5
//$("tr:odd").css("background-color","red");
//等于某个数
$("tr:eq(1)").css("background-color","red");
//小于 2的数
//$("tr:lt(2)").css("background-color","black");
//大于 3的数
$("tr:gt(2)").css("background-color","yellow");
$(":header").css({"color":"red","font":"18"});
$("tr:not(:first)").css("background-color","black");
});
</script>
</head>
<body>
<div>
<h2>信息显示</h2>
<fieldset>
<table cellpadding="0" cellspacing="0"style="border: 1px solid red; ">
<thead>
<tr id="thed" style="border: 1px solid red; ">
<th>
序号
</th>
<th>
姓名
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tdby">
<tr class="ses">
<td>100 </td>
<td>wangli</td>
<td>111@11.cmm </td>
</tr>
<tr>
<td>1001 </td>
<td>wangli2222</td>
<td>111@11sf.cmm </td>
</tr>
<tr class="ses">
<td>1002</td>
<td>wangliqqq</td>
<td>111@11adsad.cmm </td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</html>
- jquery.rar (208.3 KB)
- 描述: 最新最全
- 下载次数: 65
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1840项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20929(原创)javascript 实现批量打印《简历》 ... -
java+Ckeditor
2012-03-23 18:09 1960CKEditor 二次开发 ---- 为 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1392@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42160异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 28111,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1545概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1954错误信息: javax.servlet.Servle ... -
Json 浅谈及解析
2011-03-25 17:07 2267Json 浅谈及解析 Json简介 ... -
Ajax 实现分页及表与表的级联
2011-03-24 20:57 1484Ajax 实现分页及表与表的级联 时间过的真快转 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1246预测本周五 java 考试题!! 1,加载类有哪几 ... -
DOM总结(三)及综合案例
2011-03-17 20:59 1082DOM总结(三)及综合案例 1,DOM属性-----re ... -
DOM 总结(二)
2011-03-16 20:30 1301DOM 总结(二) 查找元素的方法: 1 ... -
DOM 总结(一)
2011-03-16 20:24 1471DOM 总结(一) ... -
javascript实现全选,反选及全不选
2011-03-15 19:53 1396javascript实现全选,反选及全部选 html 代 ... -
仿谷歌,百度分页计算分析 代码实现
2011-03-10 19:32 2012仿谷歌,百度分页计 ... -
Java反射概念及类的反射的实例应用
2011-03-04 10:32 2346Java反射概念及类的反射的实例 一、反射的概念 : ... -
BeanUtils工具包下载及应用
2011-03-04 10:23 18693BeanUtils工具包下载及应用 ... -
“世界上最复杂的邮件”诞生了
2011-03-04 08:04 1336“世界上最复杂的邮件” ...
相关推荐
jquery、javascript、入门到精通,jquery从入门到精通
"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,我们需要理解jQuery的核心理念是"Write Less, Do More",即用更少的代码实现更多的功能。jQuery通过封装JavaScript的API,使得开发者能够...
jquery 从入门到精通 葵花宝典 ,新手必须掌握的一门技术,里面内容很全很好。
《jQuery:从入门到精通——实战Demo解析》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇将通过介绍jQuery的基础概念、核心功能以及提供的...
《jQuery从入门到精通》是一门深度探讨JavaScript库jQuery的课程,主要针对想要提升Web开发技能,特别是希望简化DOM操作、实现动态效果和交互的开发者。jQuery是JavaScript的一个强大工具,它通过提供简洁的API,...
jquery开发从入门到精通 光盘下载地址 迅 雷:thunder://QUFodHRwOi8vbS5saWJ0b3AuY29tL2QvOS83MDU5ODMwMjc2NzM5LzBaWg==
本教程将带你从零开始,深入理解并熟练运用jQuery。 **jQuery选择器** jQuery的选择器是其强大功能之一,它们基于CSS选择器,但提供了更多的便利性。例如: 1. `$("#id")`:通过ID选择元素,如`$("#myDiv")`。 2....
这个“jQuery 入门到精通”的主题旨在帮助初学者快速掌握jQuery的核心概念,并逐步提升到高级水平。 一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`<head>`标签内添加`<script>`标签来引入jQuery库,...
jQuery入门到精通,前端开发技术,前端javaScript
《jQuery手机开发从入门到精通》是一本专为移动端开发者设计的教程,旨在帮助初学者和有经验的开发者深入理解并掌握使用jQuery进行移动应用开发的技术。jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作...
《jQuery开发从入门到精通》是一本旨在帮助初学者快速掌握jQuery技术的专业书籍,由袁江编著。这本书深入浅出地介绍了如何使用jQuery来简化HTML文档操作、处理事件、执行动画效果以及与Ajax进行交互,是Web开发人员...
《jQuery开发从入门到精通》是由清华大学出版社出版的一本关于jQuery技术的专著,作者是袁江。这本书全面深入地介绍了jQuery这一强大的JavaScript库,旨在帮助读者从零基础开始掌握jQuery,逐步提升到精通水平。...
### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...
《jQuery开发从入门到精通》是一本由袁江编著,清华大学出版社于2013年出版的技术书籍,旨在帮助初学者和有一定基础的开发者深入理解并熟练掌握jQuery这一强大的JavaScript库。jQuery以其简洁易用的API,极大地简化...
《jQuery UI 中文版 入门到精通》是一本针对jQuery UI框架的全面教程,旨在帮助初学者快速掌握这一强大的用户界面库。jQuery UI是基于jQuery JavaScript库的扩展,提供了丰富的交互式组件和设计模式,使得网页开发...
《jQuery实例:入门到精通》是一份专门为JavaScript和jQuery初学者设计的学习资源,也是专业开发者不可或缺的参考资料。jQuery,作为一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等...
JQuery Mobile从入门到精通视频教程,本人重金购买,只是了为整合人脉资源,相互学习