jq05--选择器与事件
我们接着来学习一些jq的知识，现在说一下jq选择器与jq事件。
1.jq选择器：
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 $("*") 所有元素
$("#eid") id选择器
$(".ecl") 所有class="ecl"的元素
$("p") 所有<p>元素
$(".intro.demo")所有class="intro"且class="demo"的元素
$("p:first") 第一个<p>元素
$("p:last") 最后一个<p>元素
$("ul li:eq(3)") 列表中的第四个元素(index从0开始)
$("ul li:gt(3)")
$("ul li:lt(3)")
$(":header") 所有标题元素<h1> - <h6>
$("[href]") 所有带有href属性的元素
$("[href='#']") 所有href属性的值等于"#"的元素
$(":input") 所有<input>元素
$(":enabled") 所有激活的表单元素
$(":disabled") 所有被禁用的元素
$(":selected") 所有被选取的元素
$(":checked") 所有被选中的元素
2.事件
2.1 bind() 向匹配元素附加一个或更多事件处理器
$(selector).bind(event,data,function)
//$(selector).bind(event,data,function)
$("button").bind("click",function(){
$("p").slideToggle();
});
//$(selector).bind({event:function, event:function, ...})
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
2.2 blur() 当元素失去焦点时发生blur事件
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
2.3 change() 当元素的值发生改变时发生change事件。该事件仅适用于文本域(text field)，以及 textarea和select元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
注意：onchange与onclick是js事件，可在标签上作为标签属性使用。change与click是jq事件。
2.4 click() dblclick() 点击事件与双击事件
$("button").click(function(){
$("p").slideToggle();
});
$("button").dblclick(function(){
$("p").slideToggle();
});
2.5 focus() 当元素获得焦点时，发生 focus 事件
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
2.6 ready() 文档就绪事件
resize() 调整浏览器窗口的大小时，发生 resize 事件
//ready()函数仅能用于当前文档，因此无需选择器
$(document).ready(function(){
...
});
$().ready(function(){
...
});
$(function(){
...
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
$("span").text(x+=1);
});
});
</script>
</head>
<body>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>
</html>
3.事件与效果：
hide() show()
fadeIn() fadeOut() fadeTo()
slideDown() slideUp() slideToggle()
animate() stop()
toggle()
4.事件与文档操作：
before() after()
append() prepend()
addClass() removeClass() toggleClass()
attr()
remove()
val() html() text()
5.JQuery Ajax：
JQuery.load()
JQuery.get()
JQuery.post()
JQuery.ajax() 执行异步http请求
其中ajax是jQuery底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。
$(document).ready(function(){
$("#b01").click(function(){
var htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
jQuery.ajax([settings])：
options 可选，object类型，ajax请求设置
async Boolean值，默认值为true，异步请求。如果需要发送同步请求，请将此选项设置为 false
cache Boolean值，默认值为true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面
contentType String类型，默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型
context Object类型，这个对象用于设置 Ajax 相关回调函数的上下文。
data object类型。发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式
dataType string类型。预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。可用值有“xml”、“HTML”、“script”、“json”、“text”
success function类型。请求成功后的回调函数
type string类型。默认值: "GET")。请求方式 ("POST" 或 "GET"、“PUT”、“DELETE”)
url string类型。默认值: 当前页地址。发送请求的地址。
