JQuery 学习笔记

xblues · 发表于 23-11-2008 08:32:45

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？FreeOZ用户注册

x

引用JQuery

<script src="jquery.js" type="text/javascript"></script>

复制代码

.........

复制代码

代码片段一

..............

复制代码

$(document).ready(function() {
$('.poemstanza').
addClass('emphasized');
});

复制代码

$() 工厂函数来定位已经加上类的页面的一部分
.addClass() 来对页面的部分加上另外的样式
$(document).ready() 来引发页面加载上执行代码
执行扩展嵌套函数 function(){}
给 .poemstanza 的DOM对象增加属性 emphasized

xblues · 发表于 23-11-2008 08:48:23

在 jQuery 里，$ 是 jQuery 的缩写 (如果有冲突，也可以通过在我们自定义的 jQuery 代码中使用 jQuery 来替换 $)
jQuery 最强有力的方面是它能很容易进行 DOM 遍历

$('#selectedplays > li').addClass('horizontal');

复制代码

给ID名为selectdplays的下一级子DOM对象 LI 增加horizontal属性

$('#selectedplays li:not(.horizontal)').addClass('sublevel');

复制代码

查找ID名为selectdplays的所有子DOM对象 LI ，并给没有horizontal属性的对象增加属性 sublevel

A tag name: $('p')定位所有的标签P
An ID: $('#someid') 查找ID为someid的标签
A class: $('.someclass') 查找所有带有.someclass属性的标签

xblues · 发表于 23-11-2008 09:54:24

$('a[@title]') 选择所有带有 title 属性的链接
$('div[ol]') 所有包含一个 ol 元素的 div 元素

正则表达式的语法来指定一个字符串的开始(^)与结束($)，任意(*)

$('a[@href^="mailto:"]').addClass('mailto'); 以 mailto 开头 (^="mailto:") 的 href 属性 ([@href])
$('a[@href$=".pdf"]').addClass('pdflink'); 以 .pdf 结尾的 href 属性的链接
$('a[@href*="mysite.com"]').addClass('mysite'); 任意包含mysite.com的链接

蒙面超人 · 发表于 23-11-2008 10:02:40

学习学习！

xblues · 发表于 23-11-2008 10:12:20

$('div.horizontal:eq(1)') 从一组匹配选择带有 horizontal 类的 div 中选择第二项

$(document).ready(function() {
$('trdd').addClass('odd');
$('tr:even').addClass('even');
$('td:contains("Henry")').addClass('highlight');

复制代码

用CSS指定样式比直接在每一个超文本标签里写属性简洁，直接用Jquery指定样式到标签，就不用在每个标签里写样式名了，更简洁！

$('td:contains("Henry")') //get every cell containing "Henry"
.parent() //get its parent
.find('td:eq(1)') //find inside the parent the 2nd cell
.addClass(highlight') //add the "highlight" class to that cell
.end() //revert back to the parent of the cell containing "Henry"
.find('td:eq(2)') //find inside the parent the 3rd cell
.addClass('highlight'); //add the "highlight" class to that cell

复制代码

xblues · 发表于 23-11-2008 10:26:19

如果我们想知道 id 为 #myelement 的元素的 tag name 的话，可以用：
var myTag = $('#myelement').get(0).tagName;

jQuery 提供了 .get() 的速记，用
$('#myelement')[0]
来代替
$('#myelement').get(0).tagName

xblues · 发表于 23-11-2008 10:28:26

xblues · 发表于 23-11-2008 12:41:34

ready 的优先级高于 onload，一般使用ready来处理事件（不必等所有相关图片都下载完，只要DOM对象装载好了就可以执行）

看看怎么优化事件处理的编程方式

<javascript>
function doStuff(){
.......................................
}
</javascript>
<body onload="doStuff();">
</body>

复制代码

可以优化为如下，把调用代码和HTML分离

<javascript>
function doStuff(){
.......................................
}
window.onload = doStuff();
</javascript>

复制代码

用JQuery语法写

$(document).ready(function() {
//.........................
});

复制代码

再简化

$().ready(function() {
//...............................
});

复制代码

还可以再简化

$(function() {
//..................
});

复制代码

看一个例子，绑定事件到单击按钮

$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
});
});

复制代码

简写bind 为 click

$(document).ready(function() {
$('#switcher-large').click(function() {
$('body').addClass('large');
});
});

复制代码

xblues · 发表于 23-11-2008 12:54:02

$(this).addClass('selected');

$('#switcher .button').removeClass('selected');

$('body').addClass('narrow').removeClass('large');

$('body').removeClass(); //移除全部类

xblues · 发表于 23-11-2008 13:08:53

toggle 支持两个参数，第一个参数在第一次单击时调用，第二次单击调用第二个参数

$(document).ready(function() {
$('#switcher h3').toggle(function() {
$('#switcher .buton').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');
});
});

复制代码

也可以直接使用toggleClass时间，如果连续两次调用的事件实际上是没有区别的话。

black_zerg · 发表于 23-11-2008 17:23:15

这个我熟，确实省事，而且狂多插件

		自动登录	找回密码
密码			FreeOZ用户注册

FreeOZ

[论坛技术] JQuery 学习笔记

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

CSS选择器

XPath 选择器

:eq()、:odd() 和 :even()

访问 DOM 元素

上面笔记的PDF书

事件处理

关键字this引用的是绑定当前行为的DOM元素

复合事件toggle （折叠）

评分