jquery笔记

 查询指定XML文档中的所有div元素。
jQuery 代码:
$("div", xml.responseXML)

hide()
隐藏显示的元素。
 

answer.is(':visible')是指可见的answer元素.
如果可见就调用answer.slideUp();使之隐藏.
else则是不可见的元素 调用answer.slideDown();使之显示.
类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover

$("img").attr("src","test.jpg");          attr(key, value)为所有匹配的元素设置一个属性值。
$("input").removeAttr("disabled")     removeAttr(name) 从每一个匹配的元素中删除一个属性。
 $(this).val().length                value  值的长度
onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。
onkeyup 是在用户放开任何先前按下的键盘键时发生。
onkeydown 是在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。

如果输入框中没有输入文本,阻止表单提交。
$("#myform").submit( function() {
 return $("input",   this).val().length > 0;
} );

$("form").submit(); 这个函数不会调用form元素的submit方法!如果需要通过代码来提交表单,必须使用DOM方法,例如:$("form")[0].submit();

slideUp(speed, callback)
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

parent(expr)
取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选。
next(expr)
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素。 可以用一个可选的表达式进行筛选。
 hide(speed,callback)
以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
end()
结束最近的“破坏性”操作,把匹配的元素列表回复到前一个状态。在调用end函数后,匹配的元素列表会回复到上一个操作之前的匹配元素列表状态。

如果前面的操作(对元素列表的状态)没有破坏性,则什么也不改变。

 toggle(even,odd)
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。
$("p").toggle(function(){
  $(this).addClass("selected");   
},function(){
 $(this).removeClass("selected");
});


 css   opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明


$("#orderedlist").addClass("red");改变颜色

$("#orderedlist >li").addClass("blue");  子节点。

当把鼠标放在li对象上面和移开时进行样式切换,但只在li的最后一个li上生效。

$(document).ready(function() {
$("#orderedlist
li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
}

);
});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html(
$(this).html() + " BAM! " + i );
});
});

$(document).ready(function() {
// use this to resetseveral forms at once
$("#testreset").click(function() {                        //全部id为testfrom的重置
$("#testform").each(function(){this.reset();
                        })
});
});

 你想要选择所有的没有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});


这个代码给所有带有name属性的链接加了一个背景色。
$(document).ready(function() {
$("a[@name]").background("#eee");
});

[@href*=/content/gallery]
不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):



$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var
answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像'#faq' 只选择了一次,利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find('dt'),而不需要再写$('#faq').find('dt')。

在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案。
(译者Keel注:这个例子真是太酷了,FAQ中的答案可以收缩!从利用next()的思路到实现这些效果都有很多地方需要我们消化,注意 if (answer.is(':visible'))用法,注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档)

 

你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:

$(document).ready(function() { $("a").toggle(function() {  $(".stuff").animate({   height: 'hide',   opacity: 'hide'  }, 'slow'); }, function() {  $(".stuff").animate({   height: 'show',   opacity: 'show'  }, 'slow'); });});

发布了20 篇原创文章 · 获赞 0 · 访问量 2万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章