JQuery基础入门学习，使用方法

huibin

浏览: 757460 次
性别:
来自: 郑州

最近访客更多访客>>

y6cn

allen900625

dameimm

cntip2010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Ajax CSS JavaScript HTML

jQuery 是一种 JavaScript 库，它是开发人员简化动态富 Internet 应用程序(RIA)创建的最佳选择。按我的理解，它可以通过各种标记更方便的检索到页面的元素，并对它们进行操作。jquery的实际应用很强大，
1、在代码中安装 jQuery
<script type="text/javascript" src="jquery.js"></script>
2、正确调用 jQuery 函数
一个页面上可以有任意个 document.ready() 函数，它们将被依次调用。
$(document).ready(function(){
$("div").addClass("a");
});
// - or -
$(document).ready(function(){
myAddClass();
});
function myAddClass()
{
$("div").addClass("a");
}
3、jQuery 的链接性
$("div").addClass("a").show().text("manipulated");
4、jQuery 解决冲突的办法
当使用 jQuery 或任何 JavaScript 库时，它们之间有可能发生冲突。换句话说，在同时使用两个以上的库时，会有一个以上的库同时使用变量 “$”，这意味着在进行 “$” 调用时，引擎将不知道引用哪个库。
j$ = jQuery.noConflict();
j$("div").addClass("a");
5、jQuery查找HTML 标记、ID 或 CLASS
1>HTML标记——直接写标记名
$("div").show(); //检索所有html标记为div的内容
<div></div>
2>ID——#标记名
//检索所有id为sampleText的内容，并将"Hi附给它"
$("#sampleText").html("Hi");
<span id = "sampleText"></span>

//取得id为external_links的内容，并声明单击事件

$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
3>CLASS——.标记名
//检索所有class为redBack的内容，并将redBack这个css中的background的值设置为#ff0000
$(".redBack").css("background", "#ff0000");

<p class="redBack">This is a paragraph</p>
<div class="redBack">This is a big div</div>
4>:——:过滤器
// This will hide every <p> tag on a page
$("p").hide();
// This will hide the first element on a page, no matter its HTML tag
$(":first").hide();
// Notice how these can be used in combination to provide more fine tuning of
// search criteria. This will hide only the first <p> tag on a given page.
$("p:first").hide();
一个 “:text” 搜索过滤器将返回页面上的每个文本字段，而一个 “.largeFont:text” 搜索过滤器仅返回页面上作为 “largeFont” 类的一部分的文本字段。
6、循环加数组
1>each 循环
var increment = 1;
$("p").each(function(){
// now add a paragraph count in front of each of them. Notice how we use the
// $(this) variable to reference each of the paragraph elements individually.
$(this).text(increment + ". " + $(this).text());
increment++;
});
2>其他数组
// the eq() function lets you reference an element in the array directly.
// In this case, it will get the 3rd paragraph (0 referenced of course) and hide it
$("p").eq(2).hide();
// The slice() function lets you input a start and an end index in the array, to
// create a subset of the array. This will hide the 3rd through 5th paragraphs on the
// page
$("p").slice(2,5).hide();
例子
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="./jquery/js/jquery.js"></script>
<script>
function validateForm()
{
$(".validate:text").each(function(){
if ($(this).val()=="")
// We'll loop through each textfield on the page with a class of "validate"
// and if they are blank, we will put text in the <span> immediately afterwards
// with the error message.

$(this).next().html("This field cannot be blank");
});
}
</script>
</HEAD>
<BODY>
<form action = "" method = "post" name = "opr">
<input type=text class=validate><span></span><br/>
<input type=text class=validate><span></span><br/>
<input type=text class=validate><span></span><br/>
<input type = "button" value = "go" onclick = "validateForm();">
</form>
</BODY>
</HTML>
7、事件
blur() - 在 Form 元素失去焦点时调用，例如，用 tab 键移出具有焦点的文本字段
change() - 在 Form 元素失去焦点，并且其值因获得焦点而更改时调用。Internet Explorer 和 Firefox 对此的处理稍微不同。
click() - 当在页面元素（不一定是 Form 元素）上单击时调用
dblclick() - 当在页面元素（不一定是 Form 元素）上双击时调用
error() - 当元素出现内部错误时调用，不同的浏览器对此的处理不同，可能很多人都亲自体验过
focus() - 当某个 Form 元素获得焦点时调用
keydown() - 当页面元素在其上/内发生一个 keypress 时调用
keyup() - 当页面元素在其上/内释放一个 keypress 时调用
keypress() - 当相同的页面元素相继发生 keydown 和 keypress 时调用
select() - 文本在文本字段内被选中时调用，而不是内容在组合框内被选中时（这时发生的是更改事件）调用。
submit() - 提交 Form 时调用
resize(fn) - 对象调整大小时调用
scroll(fn) - iframe 卷起时调用
load(fn)/unload(fn) - 对象在页面上加载/重载时发生
8、属性
1>attr()函数
img src="/images/space.gif" id="spacer" class="a b c" alt="blank">
// Calls to the attr() function will return the following
$("#spacer").attr("src"); // will return "/images/space.gif"
$("#spacer").attr("alt"); // will return "blank"
// Similarly, you can access the ID in the same way
$(img).each(function(){
$(this).attr("id"); // will return "spacer"
});
2>应用 attr()
<td>
<div class="tab" id="/messages.jsp">Messages</div>
</td>
$(".tab").click( function() {
window.parent.frames['content'].location = $(this).attr("id");
});
3>利用 attr(str) 更改属性
// will change the image source, and the image displayed on the page will change
$("img").attr("src", "myimage.jpg");
// will change all the links on the page to go to one specific page
$("a").attr("href", "mypage.html");
// will change the maxLength on all password fields to 10 characters
$(":password").attr("maxLength", "10");
4>val() 函数
// will get the text contained in the text field and check that it's not blank
$(":textfield").each(function(){
// use the val() function to get the text inside the textfield
if ($(this).val() == "")
$(this).next().text("Error");
});

// on a new password page, this will compare the new one with the confirmation,
// to make sure they are equal
if ($("#newPassword").val() != $("#confirmPass").val())
$("#newPassword").next().text("Error");
5>html() 与 text() 的对比
// this will examine every <td> tag, and if the value is blank, it will insert
// a "-" into it, as a placeholder.
$("td").each(function(){
// check the text of the table cell
if ($(this).text() == "")
$(this).text("-");
});
// this will convert every paragraph's text to lowercase
$("p").each(function(){
var oldText = $(this).text();
var newText = oldText.toLowerCase();
$(this).text(newText);
});
<-- This shows the difference between text() and html() -->
<div id="sample"><b>This is the example</b></div>
$("#sample").html(); // will return "<b>This is the example</b>"
$("#sample").text(); // will return "This is an example"
9、CSS 处理
1>css() 函数
// change the background of every div to red
$("div").css("backgroundColor", "#ff0000");
// - or -
$("div").css("backgroundColor", "red");
// - or -
$("div").css({backgroundColor: "#ff0000"}); // notice the braces and lack of quotes
2>addClass() 和 removeClass()函数
$(":textfield").each(function(){
if ($(this).val() == "")
{
$(this).next().text("Error");
// this will turn the text field's border/text red
$(this).addClass("input_error");
}
// this tests if the text field has the class attached already
else if ($(this).hasClass("input_error"))
{
$(this).next().text("");
// this will remove the class, restoring a normal border/text
$(this).removeClass("input_error");
}
});

10、使AJAX变得更简单

$('#stats').load('stats.html'); // 将stats.html加载到id为stats的位置

1>使用 $.post() 或者 $.get()，把一些参数传递给服务器中的某个页面，或取回某个参数

$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});

2>$.ajax() 使 Ajax 由复杂变简单

$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
// do something with xml
}
});

给大家提供两个在线帮助文档：

http://jquery.org.cn/visual/cn/index.xml 1.1

http://www.111cn.cn/jquery/ 1.3

http://thinhunan.cnblogs.com/archive/2008/03/05/1091816.html 大家也可以参考下这篇文章

http://www.cssrain.cn/demo/bbs.html 好多JQuery资料，并提供下载

类别：电脑技术 |

| 添加到搜藏 | 分享到i贴吧 | 浏览(26) | 评论 (0) <script></script>

上一篇：240多个jQuery插件(2) 下一篇：sql部分常用函数

•	jquery 里的each使用方法详解	•	jquery插件之jQuery操作Cookie的...
•	Jquery AJAX 框架的特点和使用方...	•	JQuery基本使用方法
•	jquery ui中文说明(使用方法)	•	JQuery文件上传插件jquery.uploa...
•	(选择器)jQuery里的Selectors使...	•	jquery load使用方法
•	jQuery 中 index() 的使用方法	•	基于jQuery的菜单树(TreeView)的...
更多>>