1、什么是？
jQuery是一个优秀javaScript库，开发人员称之为javaScript框架。诞生于2005年，由John Resign开发，历经13年的发展成为全球最受欢迎的框架之一。它可以帮助用户使用很少的javaScript代码，创建出漂亮的页面效果。jQuery设计的宗旨就是"Write Less,Do More",也就是写更少的代码，做更多的事情。
核心理念：write less，do more
2、jQuery能做什么？
2.1选择页面元素：快捷方便
如果不使用jQuery，直接使用javaScript遍历DOM树，以及查找HTML文档结构中的某个元素，必须写很多的代码。jQuery中提供了可靠而富有效率的选择器。
2.2动态更改页面样式：
使用javaScript控制css受限于不同浏览器的兼容性处理，而jQuery可以弥补这一不足，它提供了跨浏览器的标准解决方案。而且即使在页面已经呈现后，jQuery仍然能够改变文档中某个部分的类或者个别样式属性。
2.3动态更改页面内容：
jQuery能够改变文档内容，使用少量的代码，即可改变网页内容。
Docuemnt.getElemenById(“”).innerHTML=””;
$(“#span”).text(“”);
$("p").css("color","red");
总结:jQuery的语法继承了css3的样子，
2.4控制响应事件
jQuery提供了丰富的页面事件，这些事件简单、易用、易用、易记，不需要考虑浏览器兼容性问题。
2.5提供基本页面特效
jQuery中内置了一批淡入、擦除、移动之类的效果，以及制作新效果的工具包，用户只需要简单地调用动画函数就可以快速的设计出高级动画效果。
2.6快速实现通信-------重点
jQuery对Ajax技术的支持很缜密，它通过消除这一过程中浏览器特定的复杂性，使用户得以专注于服务器端的功能设计。
XMLHTTPRequest实现的异步请求美没有处理网站的兼容性。
$.ajax();$.get();$.post();
A-------CBD
3、jQuery怎么用？
第一步：下载Jquery
第二步：导入Query
本机配置：<script type="text/javaScript" src="js/jquery.main.js"/>
联网配置:<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
版本：jquery.min.js
jquery.js
第三步：测试jQuery
$(function(){ alert("nihao "); });
4、使用选择器
4.1 ID选择器:
javascript中提供了原生的方法document.getElementById("p1").value;
用法：$("#id").css("background","red");
特殊情况需要使用转移字符：$("a\\.b").css ();a:b,[div]
4.2标签选择器：
用法：javascript中提供了原生方法getElementByTagName();
基本用法：$("标签名").css("color","red");
扩展用法：$("input[id='abc']").val();
得到input标签中id为abc的input标签的值。
eg:var divs=$("div");//得到文档中所有匹配的div标签
for(var i=0;i<divs.length;i++){
divs[i].style.color="red";
}
4.3类选择器：
$("div#intro .head") 获取： id="intro" 的 <div> 元素中的所有 class="head" 的元素
4.4通配符选择器
用法：$("body *择器
用法:$(".classNa").css("color","red");//匹配body标签下 所有包含的标签。
4.5组选择器
用法：$("h2,#wrap,span.red,[title='text']").css("color","red");
$(“input[type=’checkbox’]”);
5、伪类选择器
可以看作是一种特殊的类选择器，是能被浏览器自动识别的特殊选择器。伪类选择器最大语法特征就是在选择符中添加“：”标识符。
5.1 特定位置选择器
特定位置选择器主要包括：first、:last和eq(index)3种。
用法如下：$("selector:first");
$("selector:last");
$("selector:eq(index)");
案例：创建一个三行多列的表格：
eg:$("tr:first");
$("tr:eq(1)");
$("tr:last");
5.2 指定范围的选择器
指定范围的选择器主要包括:even,:odd,:gt(index),:lt(index)4种。
用法：$("selector:even")能够在匹配的集合中选择所有偶数行元素。
$("selector:odd");能够在匹配的集合中选择所有奇数行元素。
$("selector:gt(index)");能够在匹配的集合中选择大于给定索引值的元素。
5.3 排除选择器
：not选择器比较特殊，能够在匹配元素集合中排除符合特定匹配规则的元素，
也就是说它以反方向方式快速过滤掉不需要的元素。
注意:gt(index)和lt(index)选择器能够匹配连续的多个元素，而：even和：odd仅能够匹
配非连续的多个元素。这些选择器在表格样式和列表样式设计中应用价值比较大。
6、属性和css操作
属性操作主要包括设置元素的属性、读取元素的属性、删除元素的属性或者修改元素的属性等。
设置属性的值：
attr()能够为匹配的元素设置一个或者更多的属性。
设置css样式
7、读写文本和值
text()使用该方法可以读写指定元素下包含的文本内容。
<input type=”text”value=”123”/>
val()值是一类特殊的文本字符串，主要是指表单元素中value属性设置的值。
<script type="text/javascript">
$(function(){
$("#username").focus(function(){
if($(this).val()=="请输入用户名")
$(this).val("");
});
$("#username").blur(function(){
if($(this).val()=="")
$(this).val("请输入用户名");
});
$("#password").focus(function(){
if($(this).val()=="请输入密码")
$(this).val("");
});
$("#password").blur(function(){
if($(this).val()=="")
$(this).val("请输入密码");
if($("#username").val()!=$("#password").val())
$("#sss").text("两次密码不一样");
});
});
functionyz(){
alert("----2---");
if($("#username").val()!=$("#password").val())
$("#sss").text("两次密码不一样");
}
</script>
<body>
<input type="text"id="username" value="请输入用户名"/><span id="sss"></span>
<input type="text"id="password" value="请输入密码"/>
<input type="button"value="验证" onclick="yz()"/>
</body>
8、事件处理
1、注册事件：
jQuery定义了bind()方法作为统一的接口，用来为每一个匹配的元素绑定事件
处理程序。
用法： bind(events)
案例:分别为每一个p元素绑定单击事件。
$(function(){
$("p").bind("click",function(){
alert("$(this).val()");
});
$("p").click(function(){
alert($(this).text());
});
});
绑定特定事件类型的方法
| blur() | focus() | Mousedown() | Resize() |
| Change() | Keydown() | Mousemove() | Scroll() |
| Click() | Keypress() | Mouseout() | Select() |
| Dblclick() | Keyup() | Mouseover() | Submit() |
| Error() | Load() | Mouseup() | Unload() |
2、事件切换
toggle()方法能为click事件类型绑定两个事件处理函数。
<input type="button"value-"持续单击"/>
$(function(){
$("input").toggle(
function (){
alert("----第一次点击--------");
}，
function (){
alert("----第二次点击---------");
}
);
});
hover()方法：可以模仿悬停事件，及鼠标移动到一个对象上面。以及移出这个对
象的事件交替触发的方法。
<input type="button"value="鼠标切换事件"/>
$(function(){
$("input").hover(
function (){
this.value="鼠标经过";
}，
function(){
this.value="鼠标已移出";
}
);
});
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
