jQuery记录

jQuery 语法实例

$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p>元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

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 元素的背景颜色更改为红色：
$("p").css("background-color","red");

更多的选择器实例

jQuery 效果

1、隐藏和显示

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

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});
$("button").click(function(){
  $("p").toggle();
});

jQuery (chaining)允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）

$("#p1").css("color","red").slideUp(350).slideDown(350);
获取元素 text()、html() 以及 val()
获取属性 attr()

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
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);         // 追加新元素
$("p").after("Some text after");      //追加到前面
$("p").before("Some text before");//追加到后面
}

删除元素

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

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

//删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");

获取并设置 CSS 类

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

//设置
$("p").css("background-color","yellow");
css({"propertyname":"value","propertyname":"value",...});
//获取
$("p").css("background-color");

AJAX get() 和 post() 方法

$.get(URL,callback);
$.post(URL,data,callback);

实例

//get方法
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
//post方法
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

方法|描述