lgy的博客

1.jQuery 安装

jQuery库是一个JavaScript文件，可以使用HTML的script标签引用它：

1
2
3

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

2.jQuery 选择器

jQuery 元素选择器

$(“p”) 选取p元素。
$(“p.intro”) 选取所有 class=”intro” 的p元素。
$(“p#demo”) 选取所有 id=”demo” 的p元素。

jQuery 属性选择器

$(“[href]”) 选取所有带有 href 属性的元素。
$(“[href=’#’]”) 选取所有带有 href 值等于”#”的元素。
$(“[href!=’#’]”) 选取所有带有 href 值不等于”#”的元素。
$(“[href$=’.jpg’]”) 选取所有 hrefn值以”.jpg”结尾的元素。

jQuery CSS 选择器
1
$("p").css("background-color","red");

3.jQuery 效果

隐藏和显示

1
2
3

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); // 切换hide()和show()方法

可选的speed参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast”或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

$("#div2").fadeIn("slow"); // 淡入
$("#div3").fadeOut(3000); // 淡出
$("#div3").fadeToggle(3000);
$(selector).fadeTo(speed,opacity,callback); // 必需的speed参数规定效果时长
 // 必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。

滑动

1
2
3

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

动画
jQuery animate() 方法用于创建自定义动画。
1
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
speed,callback可选

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

停止动画

1
2
3

$("#stop").click(function(){
  $("#panel").stop();
});

jQuery Chaining
jQuery允许我们在相同的元素上运行多条jQuery命令，一条接着另一条
1
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

4.jQuery HTML

text()、html()、val()以及attr()
获取：

alert("Text: " + $("#test").text()); // 获得内容
alert("HTML: " + $("#test").html()); // 获得内容
alert("Value: " + $("#test").val()); // 获得输入字段的值
alert($("#w3s").attr("href")); // 获取属性值

设置：

$("#test1").text("Hello world!"); // 
$("#test2").html("<b>Hello world!</b>"); // 
$("#test3").val("Dolly Duck"); // 
$("#w3s").attr("href","http://www.w3school.com.cn/jquery"); // 设置href属性的值

text()、html() 以及 val() 的回调函数：

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

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
$("img").after("Some text after"); // 被选元素之后插入
$("img").before("Some text before"); // 被选元素之前插入

添加多个元素：

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

jQuery 删除元素

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

jQuery操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
1
$("h1,h2,p").addClass("blue");

jQuery css()

1	$("p").css("background-color"); // 返回首个匹配元素的background-color值

jQuery 尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
1
$("#div1").outerWidth()

5.jQuery 遍历

祖先

parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代

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

同胞

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

过滤

first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。

6.jQuery AJAX

jQuery load() 方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
1
$(selector).load(URL,data,callback);

必需的URL参数规定您希望加载的URL。可选的data参数规定与请求一同发送的查询字符串键/值对集合。可选的callback参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

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.statusText);
  });
});

上面的例子会把文件”demo_test.txt”的内容加载到指定的div元素中。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

参考网页：W3school-jQuery教程