jQuery 学习笔记

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事件函数
实例
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
});
});
</script>

jquery单独文件中的函数
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>

jquery 名称冲突

var jq = jQuery.noConflict() 使用自己的名称比如jq 来代替 $符号

$(document).ready(function(){}); 将函数绑定到文档的就绪事件（加载时）
$(selector).click(function(){});
$(selector).dbclick(function(){});
$(selector).focus(function(){});
$(selector).mouseover(function(){});

jquery隐藏/显示
hide()/show()

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

speed 参数规定隐藏/显示的速度，可取值"slow", "fast"， 毫秒数
callback 参数是隐藏或显示完成后执行的函数名称。

toggle() 切换hide()和show()方法

toggle(speed, callback);

jquery效果淡入浅出

fadeIn()/fadeOut()/fadeToggle()/fadeTo()

fadeIn(speed, callback)淡入已隐藏的元素
fadeOut(speed, callback)淡出可见元素
fadeToggle(speed，callback) 切换fadeIn() 和 fadeOut()

fadeTo(speed, opacity, callback)允许渐变为给定的不透明度opacity（值介于0和1之间）

jQuery效果滑动
slideDown(speed, callback)向下滑动元素
slideUp(speed, callback)
slideToggle(speed, callback) 切换

jquery效果动画
animate({params}, speed, callback)
params 参数定义形成动画的CSS 属性

操作多个属性
$("button").click(function(){
    $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px',
    });
});
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，
记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

jquery stop()方法用于停止动画或效果
$(selector).stop(stopAll, goToEnd);
stopAll 参数规定是否应该清除动画队列默认false
goToEnd 参数规定是否立即完成动画

jquery Chaining方法链接
$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000);


jQuery HTML


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

获取属性 attr()
$("button").click(function(){
    alert($("#w3s").attr("href"));
});

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

实例
$("#btn1").click(function(){
    $("#test1").text("hello world!");
});

$("#btn2").click(function(){
    $("#text2").html("<b>hello world!</b>");
});

$("#btn3").click(function(){
    $("#text3").val("Dolly Duck");
});

$("#button").click(function(){
    $("#w3s").attr("href", "http://www.baidu.com");
});

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

删除
remove()
empty()

jquery获取并设置CSS类

操作CSS
addClss()-向被选取元素添加；一个或多个类
removeClass()
toggleClass()
css()-设置或返回样式属性

实例
返回CSS属性的值
$("p").css("background-color");

设置CSS属性
$("p").css("background-color","yellow");

设置多个CSS属性
$("p").css({"background-color": "yellow", "font-size": "200%"});

jquery尺寸

width(); -设置或返回元素的宽度（不包括内边距， 边距或外边距）
height(); 
innerWidth();   -(包括内边距)
innerHeight();
outerWidth();   -（包括内边距和边框）
outerHeight();

jquery遍历 祖先
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有的祖先元素

parentUtil() 返回介于两个给定元素之间的所有祖先元素
实例
$(document).ready(function(){
    $("span").parentUtil("div");  //返回介于<span>与<div>元素之间的所有祖先元素
});

jquery遍历 后代
children（） 返回被选元素的所有直接子元素
find()    返回被选元素的后代元素，一路向下直到最后一个元素

实例
$(document).ready(function(){
    $("div").children();
});
$(document).ready(function(){//带参数
    $("div").children("p.className"); //返回类名为"className" 的所有<p> 元素，并且他们是<div>的直接子元素
});

$(document).ready(function(){
    $("div").find("span");    //返回属于<div>后代的所有<span>元素
});
$("div").find("*");    //返回<div> 的所有后代

jquery遍历  同胞（水平遍历）

siblings()   返回被选元素的所有同胞
next()    返回下一个同胞元素
nextAll()    返回被选元素所有跟随的同胞元素
nextUntil()   返回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
preUntil()

实例
$("h2").siblings();
$("h2").siblings("span");    //返回<h2>同胞元素的所有<p>元素

$("h2").nextUtil("h6");    //返回介于<h2>与<h6>元素之间的所有同胞元素

jQuery遍历    过滤

first()    返回被选元素的首个元素
last()
eq()    返回被选元素中带有指定索引号的元素
filter()    允许按照给定标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()    返回不匹配标准的所有元素与filter()相反

实例
$("div p").first();    //返回<div>内部的第一个<p>元素
$("div p").last();

$("p").eq(1);    //选取第二个<p>元素（索引号1）

$("p").filter(".intro");    //返回带有类名"intro"的所有<p>元素

$("p").not（".intro"）;    //返回不带有类名"intro"的所有<p>元素

jquery  AJAX
是与服务器交换数据的艺术，实现局部刷新


load()方法    从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL, data, callback);
//callback 参数是load()方法完成后所执行的回调函数

可以将jquery选择器添加到URL参数
$("#div1").load("demo_test.txt #p1");    //把"demo_test.txt"内容加载到指定的<div>元素中

回调函数可以设置不同的参数
responseTxt  -包含调用成功时的结果内容
statusTxt  -包含调用状态
xhr  -包含XMLHttpRequest对象

实例
$("button").click(function(){
    $("#div1").load("demo_test_txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
        alert("外部内容加载成功！");
    if(statusTxt == "error")
        alert("Error:" + xhr.status + ":" + xhr.satusText);   //显示错误信息
    });
});

get()和post()方法用于通过HTTP GET或POST 请求从服务器请求数据

GET - 从指定的资源请求数据
POST - 向指定资源提交要处理的数据    

$.get(URL, callback);  通过HTTP GET 请求从服务器上请求数据
$.post(URL, data, callback);  通过HTTP POST 请求从服务端请求数据

data : 连同请求一起发送的数据

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
      name = "Donald Duck",
      city = "Duckbury";
     },
    function(data, status){
      alert("data:" + data + "\n status:" + status );
    }
    );
});