jQuery 是一种 JavaScript 库，它是开发人员简化动态富 Internet 应用程序(RIA)创建的最佳选择。按我的理解，它可以通过各种标记更方便的检索到页面的元素，并对它们进行操作。jquery的实际应用很强大，
1、在代码中安装 jQuery
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的内容
2>ID——#标记名
//检索所有id为sampleText的内容，并将"Hi附给它"
$("#sampleText").html("Hi");
//取得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");
This is a paragraph
This is a big div
4>:——:过滤器
// This will hide every 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
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();
例子
New Document
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()
Messages
| $(".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
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() -->
This is the example
$("#sample").html(); // will return "This is the example"
$("#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)