jQuery 快速入门学习索引



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

2.语法
$(selector).action()

3.选择器
3.1元素选择器
$("p")
$("p.classname")
$("p#idname")
3.2属性选择器
$("[href]")
$("[href='#']")
$("[href!='#']")
3.3css选择器
$("P").css("background-color","red")

4.事件
$(document).ready(function(){
$("button").click(function(){
..some code...
});
});

hide(),show(),fadein(),fadeout(),

4.jQuery HTML
4.1获取及设置
.text();.html(),.val()
4.2添加
.append(),.prepend(),.after(),before()
4.3删除
.remove(),empty()
4.4jQuery CSS
.addClass(),.removeClass(),toggleClass(),css()
4.5尺寸
.width(),.height(),.innerWidth(),.innerHeight()
4.6关系
.parent(),.parents(),.parentsUntil()
.children(),.find()
.first(),.last(),.eq()

5.AJAX(Asynchronous JavaScript and XML)
在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示
5.1 load()
$(selector).load(URL,data,callback);
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
•responseTxt - 包含调用成功时的结果内容
•statusTXT - 包含调用的状态
•xhr - 包含 XMLHttpRequest 对象
5.2 get() 请求数据
$.get(URL,callback);

5.3 post()提交数据
$.post(URL,data,callback);

6.JSON
6.1语法
•数据在名称/值对中  "firstName" : "John"
•数据由逗号分隔     "firstName":"John" , "lastName":"Doe"
•花括号保存对象     { "firstName":"John" , "lastName":"Doe" }
•方括号保存数组
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
6.2 使用

<script>
var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
var obj = eval ("(" + txt + ")");

</script>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>


猜你喜欢

转载自blog.csdn.net/samson_www/article/details/79594977