文档加载结束后执行两种写法两种
第一种
$(document).ready(function(){
代码。。。。
})
第二种
$(function(){
代码。。。
})
注：常用第二种
点击事件
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
var a=$.noConflict();
a(document).ready(function(){
a("button").click(function(){
a("p").text("jQuery 仍在运行！");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
· 1.把所有 jQuery 代码置于事件处理函数中
· 2.把所有事件处理函数置于文档就绪事件处理器中
· 3.把 jQuery 代码置于单独的 .js 文件中
· 4.如果存在名称冲突，则重命名 jQuery 库
Jquery中的隐藏和显示
JQuery中的show()、hide()方法，可以用toggle（）替代，toggle可显示被隐藏的元素，并隐藏已显示的元素。
Jquery中的滑动和隐藏效果
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
注：以上两种方法效果类似，但是实际上有区别
Jquery中的动画效果
Animate（{params},speed,callback）
注：params参数是css的样式，多个属性样式可以使用类似JSON方式书写
Callback：回调函数，在动画执行完成后执行的代码
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
jQuery 方法链接
建议书写格式（jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。这样可以增强代码可读性）
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery DOM 操作
三个简单实用的用于 DOM 操作的 jQuery 方法：
获取值
l text() - 返回所选元素的文本内容
l html() - 返回所选元素的内容（包括 HTML 标记）
l val() - 返回表单字段的值
设置值
l text(“字符串”) - 设置所选元素的文本内容
l html(“字符串”) - 设置所选元素的内容（包括 HTML 标记）
l val(“字符串”) - 设置表单字段的值
操作属性 - attr()
attr(“属性名”)-获取元素属性
attr(“属性名”,”属性值”)-设置属性值
attr() 方法也允许您同时设置多个属性。
实例：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
l append() - 在被选元素的结尾插入内容
l prepend() - 在被选元素的开头插入内容
l after() - 在被选元素之后插入内容
l before() - 在被选元素之前插入内容
注：以上四个 方法能够通过参数接收无限数量的新元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
l remove() - 删除被选元素（及其子元素）
l empty() - 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
实例：$("p").remove(".italic"); //删除class=”italic”的<p>元素
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
l addClass() - 向被选元素添加一个或多个类
l removeClass() - 从被选元素删除一个或多个类
l toggleClass() - 对被选元素进行添加/删除类的切换操作
l css() - 设置或返回样式属性
注：可以在addClass() 方法中规定多个类：
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
注：该方法与attr（）雷同，参考attr（）方法即可，当设置多个样式属性时，可用Json格式去设置
Jquery的遍历
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
您也可以使用可选参数来过滤对祖先元素的搜索。
实例：
$(document).ready(function(){
$("span").parents("ul");
});
找到span的父级元素是ul的
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
实例：
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
l children()
l find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
实例
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
jQuery 遍历 - 过滤
first() 方法返回被选元素的首个元素。
Last()方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。（注：索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。）
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
实例:
$(document).ready(function(){
$("div p").first();
});
下面的例子选取第二个 <p> 元素（索引号 1）：
实例：
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
注：not() 方法与 filter() 相反。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
l GET - 从指定的资源请求数据
l POST - 向指定的资源提交要处理的数据
注：GET与POST从服务器获取数据的区别
l GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
l POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
注：第二个参数是回调函数。第一个回调参数存有被请求页面返回的内容，第二个回调参数存有请求的状态。
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名
实例：
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
