jquery基础知识

一段时间没用jquery，都生疏了，摘录下面的基础知识点，以备记忆！

jQuery语法：

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。此是重点，初学一定要知道你学的东西的用途是做什么。

基础语法是：$(selector).action()。所有的jQuery就是围绕这个进行的，选取页面的元素再对元素进行某些操作。

示例

$(this).hide() - 隐藏当前元素

文档就绪函数：

是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。由jQuery的约定，所有的JavaScript代码最好都放在这里面。

$(document).ready(function(){
  
});

jQuery 元素选择器和属性选择器：它们允许您通过标签名、属性名或内容对 HTML 元素进行选择。对应$(selector).action()的前半部分。

jQuery 元素选择器：

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器：

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器：

$("p").css("background-color","red");

如需完整的jquery选择器的参考手册：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery 事件函数：对应$(selector).action()的后半部分。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("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>

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

约定：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){
  $("p#id").show(function(){1000,alert('hello')});
  });
});
</script>
</head>
<body>
<button type="button" id='xian'>显示</button>
<button type="button" id='yincang'>隐藏</button>
<p id="id">这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

可以用 animate() 方法来操作所有 CSS 属性，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script>
</head>

<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;100px;position:absolute;">
</div>

</body>
</html>

jQuery 提供针对动画的队列功能，这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

$("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");
});

可以用下面这种格式代替

div.animate({height:'300px',opacity:'0.4'},"slow").animate({'300px',opacity:'0.8'},"slow");

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>

<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>

<body>

<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

Callback 函数在当前动画 100% 完成之后执行。

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作：

DOM = Document Object Model（文档对象模型）， “W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获取dom中的值：

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置DOM值：

$("#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() 的回调函数， 回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数return 的返回内容作为使用的新值。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

向DOM中添加新的值：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");

$("img").before("Some text before");

删除DOM中的元素：

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#div1").remove();
$("#div1").empty();

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>

<body>

<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>

</body>
</html>

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>
</html>

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值，请使用如下语法

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery处理元素尺寸：

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

下面的例子设置指定的 <div> 元素的宽度和高度：

$("button").click(function(){ $("#div1").width(500).height(500); });

jQuery的移动：

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

在一个家族树中通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

jQuery 提供了多种遍历 DOM 的方法。遍历方法中最大的种类是树遍历（tree-traversal）。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){
$("span").parent();
});

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
$("span").parents("ul");
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素，不包括开始也不包括结尾。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
$("span").parentsUntil("div");
});

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

您也可以使用可选参数来过滤对子元素的搜索。

$(document).ready(function(){

$("div").children("p.1"); //class为1的p元素

});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){
$("div").find("span");
});

下面的例子返回 <div> 的所有后代：

$(document).ready(function(){
$("div").find("*");

});

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

siblings() 方法返回被选元素的所有同胞元素。不包括自身。

您也可以使用可选参数来过滤对同胞元素的搜索。

$(document).ready(function(){
$("h2").siblings("p");
});

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

$(document).ready(function(){
$("h2").next();
});

nextAll() 方法返回被选元素的所有跟随的同胞元素。返回后面的所有元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。不包括两端的元素。

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>               <!--只有这个被选取-->
</div>

<div>
<p>这是 div 中的另一个段落。</p>
</div>

<p>这也是段落。</p>

</body>
</html>

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>                       <!--这个被选中-->       
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>
</html>

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>

</body>
</html>

not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

jquery ajax请求后台的简单例子

jQuery.ajax(url,[settings])

概述

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

demo如下：

html代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("#send").click(function(){
   var cont = $("input").serialize();
   $.ajax({
    url:'ab.php',
    type:'post',
    dataType:'json',
    // data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
    data:cont,
    success:function(data){
     var str = data.username + data.age + data.job;
     $("#result").html(str);
    },
    error:function (XMLHttpRequest, textStatus, errorThrown) {
          alert("请求失败！");

   }
   });
  });  
 });
</script>
</head>
<body>
 <div id="result">一会看显示结果</div>
 <form id="my" action="" method="post">
  <p><span>姓名：</span><input type="text" name="username" /></p>
  <p><span>年龄：</span><input type="text" name="age" /></p>
  <p><span>工作：</span><input type="text" name="job" /></p>
 </form>
 <button id="send">提交</button>
</body>
</html>

php代码：

<?php
header("Content-type:text/html;charset=utf-8");
$username = $_POST['username'];
$age = $_POST['age'];
$job = $_POST['job'];
$json_arr = array("username"=>$username,"age"=>$age,"job"=>$job);
$json_obj = json_encode($json_arr);
echo $json_obj;
?>

简单的对ajax方法的参数进行一些描述

url （必需）规定把请求发送到哪个URL。

data 可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

dataType （可选）规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

ajax注意方式，如下：

1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。

2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

更多ajax知识。