jQuery学习总结-蒲公英云

一、jQuery选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=”intro” 的

元素。

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

$(this)选取当前的html元素（关于this与$(this）的区别下面会讲）

更多的选择器示例，请访问 jQuery 选择器参考手册。

二、jQuery语法

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

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

$(“p”).hide() - 隐藏所有段落

$(“.test”).hide() - 隐藏所有 class=”test” 的所有元素

$(“#test”).hide() - 隐藏所有 id=”test” 的元素

三、JQuery this和$(this)的区别

// this其实是一个Html 元素。
// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。

首先来看看JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($(‘#id’));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。

那么，我们再回过头来说$(this)，这个this是什么呢？假设我们有如下的代码：

$(“#desktop a img”).each(function(index){

alert($(this));

alert(this);

}

那么，这时候可以看出来：

alert($(this)); 弹出的结果是[object Object ]

alert(this); 弹出来的是[object HTMLImageElement]

也就是说，后者返回的是一个html对象(本例中是遍历HTML的img对象，所以为HTMLImageElement)。

很多人在使用jquery的时候，经常this.attr(‘src’); 这时会报错“对象不支持此属性或方法”，这又是为什么呢？其实看明白上面的例子，就知道错在哪里了：很简单，this操作的是HTML对象，那么，HTML对象中怎么会有val()方法了，所以，在使用中，我们不能直接用this来直接调用jquery的方法或者属性。

四、jQuery事件

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

更多jquery事件，请参考 jQuery 事件参考手册。

五、jQuery隐藏和显示

语法：

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

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

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

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法：

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

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

六、jQuery获取以及设置值

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

获取值：

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

$(“#btn1”).click(function(){
alert(“Text: “ + $(“#test”).text());
});
$(“#btn2”).click(function(){
alert(“HTML: “ + $(“#test”).html());
});
$(“#btn3”).click(function(){
alert(“Value: “ + $(“#test”).val());
});

设置值：

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

七、jQuery遍历

jQuery parent() 方法：

parent() 方法返回被选元素的直接父元素。

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

jQuery find() 方法

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

提示：如果只需要返回特定的父级元素或者后代元素，只需要指定选择器即可。

例如：返回div元素下id为btn的元素

$("div").find("#btn");

八、jQuery DOM 元素方法

函数	描述
.get()	获得由选择器指定的 DOM 元素。
.index()	返回指定元素相对于其他指定元素的 index 位置。
.size()	返回被 jQuery 选择器匹配的元素的数量。
.toArray()	以数组的形式返回 jQuery 选择器匹配的元素。

九、jQuery AJAX

1、jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

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

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

示例：

这是示例文件（”demo_test.txt”）的内容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>

效果截图：

2、jQuery - AJAX get() 和 post() 方法

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

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

示例：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("/example/jquery/demo_test.asp",function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>

效果截图：

70 1

提示：

$.get() 的第一个参数是我们希望请求的 URL（”demo_test.asp”）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示：这个 ASP 文件 (“demo_test.asp”) 类似这样：

<%
response.write("This is some text from an external ASP file.")
%>

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

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

示例：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/example/jquery/demo_test_post.asp",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

效果截图：

70 2

提示：

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.asp”)。

然后我们连同请求（name 和 city）一起发送数据。

“demo_test_post.asp” 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示：这个 ASP 文件 (“demo_test_post.asp”) 类似这样：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>