- 在head里包含jquery的库
<head>
<script type="text/javascript" src="jquery.min.js">
</script>
</head>
- 基础语法: $(selector).action()
$是jquery的对象名,selector相当于传的参数,action是它的一个属性(方法) - jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
- 元素选择器
//用户点击按钮后,所有 <p> 元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
- #id 选择器
<p id="para">Where is the spinner?
<img id="spinner" src="spinner.gif" height="25"
style="vertical-align: middle; display:none;">//不display
</p>
<a href="#" onclick="$('#spinner').toggle();//toggle是开关,原来不display的display,原来display的不display
return false;">Toggle</a>
- .class 选择器
- 事件:$(document).ready(function(e){…})
-这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
$(document).ready(function(e){
// 开始写 jQuery 代码...
});
- ajax可以异步请求数据,局部更新页面,如
$.post,$.getJOSN
应该发送请求给另一个服务器如另一个php文件,然后在那个PHP文件里echo要返回的值,若不能返回希望返回的值,直接return。然后执行回调函数。可以在回调函数里先判断返回值是否为空,即是否返回的是希望返回的信息,而不是直接return。
发送请求给当前文件会返回一个html,但不会按照这个html的内容更新页面。 - $.post(URL[,data][,回调函数]);
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。可选的 data 参数规定连同请求发送的数据。 - 通过 jQuery,您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
//autoecho.php
<?php
if ( !isset($_POST['val']) ) return;
sleep(5);
echo('You sent: '.$_POST['val']);
<html>
<body>
<p>Change the contents of the text field and
then tab away from the field
to trigger the change event. Do not use
Enter or the form will get submitted.</p>
<form id="target">//没有submit
<input type="text" name="one" value="Hello there"
style="vertical-align: middle;"/>
<img id="spinner" src="spinner.gif" height="25"
style="vertical-align: middle; display:none;">
</form>
<hr/>
<div id="result"></div>
<hr/>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$('#target').change(function(event) {
$('#spinner').show();
var form = $('#target');
var txt = form.find('input[name="one"]').val();
window.console && console.log('Sending POST');
$.post( 'autoecho.php', { 'val': txt },//post
function( data ) {
window.console && console.log(data);
$('#result').empty().append(data);
$('#spinner').hide();
}
).error( function() {
$('#target').css('background-color', 'red');
alert("Dang!");
});
});
</script>
</body>
- event.preventDefault()
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。 - 获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)可以有复杂的格式
val() - 设置或返回表单字段的值
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());//返回#text的html里的内容
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
$(".btn1").click(function(){
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容
});
- on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
$(selector).on(event,childSelector,data,function)
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
</script>
<body>
<p>点击这个段落。</p>
</body>
</html>
- function(参数)里的参数是前一个函数返回的对象
event.data 属性包含当前执行的处理程序被绑定时传递到事件方法的可选数据。
<html>
<head>
<script>
$(document).ready(function(){
$("p").each(function(i){//i是each函数返回的对象,传递给下一个回调函数,之后要用到i
$(this).on("click",{x:i},function(event){//event是click函数返回的对象,传递给下一个回调函数,之后要用到event
alert("序号:" + $(this).index() + "。段落的数据为: " + event.data.x);
});
});
});
</script>
</head>
<body>
<div style="color:red">点击每一个 p 元素返回数据,通过 on() 方法来实现。</div>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>
- append
<div id="edu_fields">
</div>
var source = $("#edu-template").html();
$('#edu_fields').append(source.replace(/@COUNT@/g,countEdu));
<script id="edu-template" type="text">
<div id="edu@COUNT@">
<p>Year: <input type="text" name="edu_year@COUNT@" value="" />
<input type="button" value="-" onclick="$('#edu@COUNT@').remove();return false;"><br>
<p>School: <input type="text" size="80" name="edu_school@COUNT@" class="school" value="" />
</p>
</div>
</script>