1、jquery语法:
通过jquery可以选取(查询,query)HTML元素,并对他们执行"操作"(actions)。
实例:
$(this).hide();隐藏当前的HTML元素。
$("#test"),hide();隐藏id="test"的元素。
$("p").hide();隐藏所有<p>元素。
$(".test").hide();隐藏所有class="test"的元素
在实例中的所有jQuery函数位于一个document ready函数中:
$(document).ready(function(){});这是为了防止文档在完全加载(就绪之前运行jQuery代码。如果在文档加载之前就运行函数,操作可能失败,
2、jquery选择器:
jQuery元素选择器和属性选择器允许通过表签名、属性名或内容对HTML元素进行选择。选择器允许对HTML元素组或单个元素进行操作。
在HTML DOM()术语中:选择器允许对DOM元素族或单个DOM节点进行操作。
jQuery元素选择器:
jQuery使用css选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取所有id="demo"的<p>元素。
jQuery属性选择器:
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQuery CSS选择器:
jQuery CSS 选择器可用于改变HTML元素的CSS属性。
$("p").css("background-color","red");
更多的选择器实例:
语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery事件:
jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件"触发"或"激发"经常会被使用。
eg:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("button").click(function(){
$("p").hide();
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
在上面的例子中,当按钮的点击事件被触发时会调用一个函数,该方法隐藏所有的<p>元素。
更多的jQuery事件:
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery效果
1、隐藏和显示:通过jQuery可以使用hide()和show()方法来隐藏和显示HTML元素:
eg:$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法:$(selector).hide(speed,callback);$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"、或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
可以属于哪个jQuery的toggle()方法来切换hide()和show()方法。
显示被隐藏的元素,隐藏已显示的元素:
eg: $("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);其参数和show()方法的参数是一样的。
2、淡入和淡出:http://www.w3school.com.cn/jquery/jquery_fade.asp
jQuery fadeIn()用于淡入已隐藏的元素。
jQuery fadeOut()用于淡出已可见元素。
jQuery fadeToggle()可以在fadeIn()与fadeOut()方法之间进行切换。
如果元素已淡出,则fadeToggle()会向元素添加淡入效果。
如果元素已淡入,则fadeToggle()会向元素添加淡出效果。
jQuery fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
语法: $(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
可选的speed参数规定效果的时长。它可以取以下值:"slow","fast"或毫秒。
可选的callback参数是fading完成后所执行的函数名称。
eg:$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$(selector).fadeTo(speed,opacity,callback);
必需的speed参数规定效果的时长。它可以取以下值:"slow","fast"或毫秒。
fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度(值介于0与1之间)。
可选的callback参数是该函数完成后所执行的函数名称。
eg:$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
3、滑上和滑下:http://www.w3school.com.cn/jquery/jquery_slide.asp
jQuery slideDown()方法用于向下滑动元素。
jQuery slideUp()方法用于向上滑动元素。
jQuery slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。
如果元素向下滑动,则slideToggle()可向上滑动它们。
如果元素向上滑动,则slideToggle()可向下滑动它们。
语法:$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
4、jQuery 效果 - 动画:http://www.w3school.com.cn/jquery/jquery_animate.asp
jQuery获得内容和属性:http://www.w3school.com.cn/jquery/jquery_dom_get.asp
jQuery DOM操作:jquery中非常重要的部分,就是操作DOM的能力。
(DOM=Document Object Model 文档对象模型)
获得内容-text()、html()、val()
三个简单实用的用于DOM操作的jQuery方法:
text()-设置或返回所选元素的文本内容。
html()-设置或返回所选元素的内容(包含html标记)
val()-设置或返回表单字段的值
eg:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性-attr()
eg:$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容和属性:http://www.w3school.com.cn/jquery/jquery_dom_set.asp
设置内容-text()、html()、val()
eg:
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html()、val()的回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回希望使用的字符串。
eg:
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
设置属性-attr()用于设置/该表属性值。
eg:
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr()方法同时设置多个属性:
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
jQuery加载
jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的URL参数规定希望加载的URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选callback参数是load()方法完成后所执行的函数名称。回调函数可以设置不同的参数:
responseTxt-包含调用成功时的结果内容。
statusTxt-包含调用的状态。
xhr-包含XMLHttpRequest对象