学习笔记也算总结知识点，有些示例可能没有具体到元素，直接给出的语法。大家有基本理解在看可能会好些。
jQuery使用前提，需要安装jQuery库
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
1.<script src="jquery-1.10.2.min.js"></script>
2.jQuery使用的代替方案可以再别的网页服务器上去引用jQuery
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
基本示例：
$(document).ready(function(){
$(".div1").click(function(){(".div2").slideDown("slow");});
});
jQuery的几种选择(选择器)
$(this) 当前
$(“p”) p标签所有
$(“p.test”) p标签中class=test的所有
$(“.test”) 把所有class=test的标签都做改变，不管他是什么标签
$(“#test”) p标签中 id = test 的所有 css样式改变会是全部，但是取值什么的，只能选取第一个标签的元素
$(“p:first”) p标签的第一个元素
$(“ul li:first”) 选取ul标签中第一个li元素
$(“ul li:first-child”) 选取每个ul标签中第一个li元素
$(“[href]”) 选取带有href属性的元素
$(“a[target=’_balnk’]”) 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")选取偶数位置的 <tr> 元素
$("tr:odd")选取奇数位置的 <tr> 元素
Jquery中的事件:
|
鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
|
Click鼠标点击 |
keypress |
submit |
load |
|
Dblclick鼠标双击 |
keydown |
change |
resize |
|
Mouseenter鼠标移到元素 |
keyup |
focus 获得焦点 |
scroll |
|
Mouseleave鼠标离开元素 |
Blur失去焦点 |
unload |
|
|
hover()鼠标悬停,上移/离开 |
|
文档就绪事件 $(document).ready();
****文档就绪时间后面是没有{}的
Jquery效果： $(selector).hide(speed,callback); speed 速度，callback回调
1.jQuery中的隐藏与显示
隐藏hide() 显示show() 隐藏和显示的切换toggle()
隐藏的一个实例:
$(document).ready(function(){
$(".divs .hide").click(function(){//divs是div的class hide是button的class的
$(this).parents(".divs").hide("slow");
});
});
2.淡入淡出
fadeIn()淡入
fadeOut()淡出
fadeToggle()淡入淡出之间的切换
fadeTo(“slow（5000）”,0.5)变换 0.5表示原来的50%
3.滑动
slideDown()向下滑动
slideUp()向上滑动
slideToggle()向上或者向下滑动切换
4.动画
animate();
语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性,并且可以同时操作多个属性，
还可以使用相对值来修改属性 height:'+=150px','+=150px'
Animate使用预定义的值如:hide show toggle
动画的队列功能:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");//定义变量
div.animate({height:'300px',opacity:'0.4'},"slow");//调用
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});});
5.动画的停止stop()
$(“div”).Stop() 停止的是div的东西，但是div中的其他是不包括的，就单纯的停止div
<div>hello world</div> hello world 的改变是不停止改变的
6.举例说明callback回调函数
执行完成后显示，回调:
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("现在被隐藏段落");
});});});这里alert将会在执行完毕后弹出对话框。---
---$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,***);//这里没有进行函数的回调
alert("现在段落被隐藏了");
});
});//执行时会先弹出警告，然后在执行
7.jQuery链
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
8.jQuery中的捕获
值：
$(元素).text()/html()/value()
获取的元素.出要捕获的值就行
其中value()需要捕获的是文本的值：
<p>名称: <input type="text" id="test" value="hello"></p>
$(“#test”).value 显示为hello
属性：#hello id的表示 .hello class的表示
$("#hello").attr("class")); attr(这里是属性比如id,class,href等)
9.jQuery设置同捕获相同，但是设置是把需要改变的写在
$(元素).text(设置内容)/html(设置内容)/value(设置内容)
10.添加元素
append()在所选元素结尾添加元素 prepend()在所选元素开头添加元素
after()在所选元素之后添加 before()在所选元素之前添加
11.删除或清除元素
remove()移除元素 empty()清空元素中的子元素
过滤：$("p").remove(".italic"); remove方法中添加参数，按照css选取规则
12.css类
这其中添加的是css类<style type=”text/css”>.blue{xxx} .red{}</style>
addClass(): $("h1,h2,p").addClass("blue red");多个标签同时添加类,并且可以同时添加很多类
removeClass():移除元素
toggleClass():切换时存在的去掉不存在的添加
css():方法设置或返回被选元素的一个或多个样式属性
返回：
$("p").css("background-color") 返回p标签中background-color属性的属性值
设置：
css(”propertyname”(属性),”value”(属性值));
设置多个属性:$("p").css({"background-color":"yellow","font-size":"200%"});
13.尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
14.遍历
14.1祖先:
parent()返回所选元素的上一层父类
parents()返回所选元素的所有父类：
$("span").parents().css({"color":"red","border":"2px solid red"});
$("span").parents("ul").css({"color":"red","border":"2px solid red"});//筛选
parentsUntil()返回子父辈的所有，span=>div之间的所有
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
14.2后代：
children() 方法返回被选元素的所有直接子元素。指的就是所选元素的下一代
$("div").children().css({"color":"red","border":"2px solid red"});
$("div").children("p.1").css({"color":"red","border":"2px solid red"});//筛选p.1
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span").css({"color":"red","border":"2px solid red"});//筛选span的
$("div").find("*").css({"color":"red","border":"2px solid red"});//div下的所有
14.3同胞:(向下筛选)
siblings() 方法返回被选元素的所有同胞元素。
$("h2").siblings().css({"color":"red","border":"2px solid red"});
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});//筛选同名同胞
next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素。
$("h2").next().css({"color":"red","border":"2px solid red"});
nextAll()方法返回被选元素的所有跟随的同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"});h2之后的全部包含
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
(向下筛选)：prev(), prevAll() & prevUntil()方法同next系列相同
14.4过滤：
.first() 方法返回被选元素的首个元素。
$("div p").first().css("background-color","yellow");
.last() 方法返回被选元素的最后一个元素
$("div p").last().css("background-color","yellow");
.eq() 方法返回被选元素中带有指定索引号的元素
$("p").eq(1).css("background-color","yellow");//需要注意的是索引号是从0开始的
.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("p").filter(".url").css("background-color","yellow");});
$("p").filter(".url").css("background-color","yellow");//筛选class=”url”
.not() 方法返回不匹配标准的所有元素,not() 方法与 filter() 相反。
$("p").not(".url").css("background-color","yellow");//筛选class不是url的
15.jQuery AJAX=>load:
语法：$(selector).load(URL,data,callback);
$("#div1").load("/try/ajax/demo_test.txt");//加载指定文件的全部内容
$("#div1").load("/try/ajax/demo_test.txt #p1");//加载文件中的某个元素的元素内容
函数回调的使用:
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);//函数回调的内容
17.jQuery AJAX=>get/post
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法:$.get(URL,callback);
$.get("/try/ajax/demo_test.php",
function(data,status){alert("数据信息: " + data + " 执行状态: " + status);});
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:$.post(URL,data,callback);
$.post("/try/ajax/demo_test_post.php",
{name:"这是测试",url:"http://www.baidu.com"},
function(data,status){alert("数据信息: " + data + " 执行状态: " + status);});
18.jQuery noConflict()方法：
解决相同页面的jQuery和其他框架的简写符号冲突问题
$.noConflict();//当添加此方法之后$就不在是jQuery所使用的的，需要在jQuery中把$替换成jQuery()
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});});//如果不定义$.noConflict();方法则依然可以使用$符号