2015年JQuery操作CSS.ppt

文档介绍：JQuery
1
AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHG
内容摘要
JQuery简介
JQuery选择器
JQuery操作CSS
JQuery完成AJAX应用
2
JQuery简介
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。
jQuery的设计会改变你写JavaScript代码的方式。
jQuery的语法特点:
匿名回调函数
对象链式操作
3
Hello, JQuery
<a id='b' href=“">hello</a>
<script src=""></script>
<script>
$(document).ready(function(){
$("a").click(function(){
alert('hello!');
return false;
});
});
4
JQuery选择器
使用CSS选择器
使用JQuery方法选择
5
使用CSS选择器选择对象
$(document).ready(function() {$("#orderedlist li:last").hover(function() {$(this).addClass("green");}, function() {$(this).removeClass("green");});});
6
使用CSS选择器选择对象
$(document).ready(function() {$("a[name]").css('background-color','red');});
$(document).ready(function() {$("a[href*=/content/gallery]").click(function() {// do something withall links that point somewhere to /content/gallery});});
7
使用JQuery方法选择
Find()
Not()
Is()
Filter()
Each()
……
8
使用JQuery方法选择
$(document).ready(function() {$("#orderedlist").find("li").each(function(i) {$(this).html( $(this).html() + " BAM! " + i );});});
$(document).ready(function() {$("li").not("[ul]").css("border", "1px solid black");});
9
综合应用
$(document).ready(function() {$('#faq').find(‘dd').hide().end().find('dt').click(function() {var answer = $(this).next();if ((':visible')) {();} else {();}});});
$(document).ready(function() {$("a").hover(function() {$(this).parents("p").addClass("highlight");}, function() {$(this).parents("p").removeClass("highlight");});});
10