一、简介
1.1、概述
随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScrip...
Attribute:
$("p").addClass(css中定义的样式类型); 给某个元素添加样式
$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map
$("img").attr("src","test.jpg"); 给某个元素添加属性/值
$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值
$("元素名称").html(); 获得该元素内的内容(元素,文本等)
$("元素名称").html("<b>new stuff</b>"); 给某元素设置内容
$("元素名称").removeAttr("属性名称") 给...
以下是代码:【运行代码】【复制代码】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
dl {
margin:10px auto;
width:500px;
line-height:24px;
border-left:1px solid #dcdcdc;
}
dt.active ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
a { color:#CCCCCC}
li { list-style:none;}
span { padding-right:20px; color:#FFFFFF; font-weight:bold;}
</style>
</head>
<body>
<div id="ticker"...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset...
以下是jquery中比较常用的一些操作实现方式:
$("标签名") //取html元素 document.getElementsByTagName("")
$("#ID") //取单个控件document.getElementById("")
$("div #ID") //取某个控件中 控件
$("#ID #ID") // 通过控件ID取其中的控件
$("标签.class样式名") //通过class来取控件
$("#ID").val(); //取value值
$("#ID").val(""); //赋值
$("#ID").hide(); //隐藏&nb...
早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大。决定开始自己的学习Jquery之旅。在这里不是为大家讲解Jquery(深知水平有限),只是将自己的学习成果分享给大家,共同学习和交流。
Jquery简介
我所理解的Jquery就是一个强大的Javascript类库,里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。过多的Jquery在这里就不多介绍了,想必很多人都已经看过了更详细的文档,我就不多啰嗦了。
Selectors (选择器)
JQuery中使用 $ ,可以通过元素的id, css class或 tag name很容易的获取到相应的元素。...
The Basics
This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating a new HTML page with the following contents:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
&l...
jQuery.grep(array, callback, [invert]) 返回值:Array
概述
使用过滤函数过滤数组元素。
此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
参数
array Array
待过滤数组。
callback Function
此函数将处理数组每个元素。第一个参数为当前元素,第二个参数而元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形...
jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.
下载:jQuery Starterkit
(译者Keel注:一定要下载这个包,光看文章不实践肯定是不行的。)
下载后解压缩,然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)
现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.
Hello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready...
前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!废话不多说了贴实例。 首先要下载Jquery、Jquery.form这两个插件以下是代码:【复制】 <script type ="text/javascript" src ="../...
样式代码: 复制代码 代码如下:#div_maskContainer { display: none; } /*蒙版样式*/ #div_Mask{ z-index:1000; filter:alpha(opacity=40); position: absolute; left:0px; top:0px; background-color: #D4D0C8; } /*显示信息样式*/ #div_loading{ width:300px;height: 60px;position: absolute; border: 1px outset #B4E0F2; padding-top: 40px; text-align: center; background-color: #CCE9F9; z-index: 10000; filter:alpha(opacity=100);!important } js控件代码: 复制代码 代码如下:/** 蒙版信息控件 用法: 1.引用 mask.css 2.引用 mask.js 3.调用方法 var obj=new MaskControl(); //显示蒙版提示信息 obj.show("显示...