1、jquery安装
<head> <script src="jquery-1.10.2.min.js"></script> </head>
2、jquery语法
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
文档就绪:$(document).ready(function(){ //入口编辑代码
// 开始写 jQuery 代码...
});
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏所有 id="test" 的元素
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败
简写:效果同上一样
$(function(){
// 开始写 jQuery 代码...
});
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别:
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
3、选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素
jQuery 中所有选择器都以美元符号开头:$()。
4、jQuery效果
通常都是选择器选中元素,然后函数名称(参数-速度,回调函数-效果完成后运行的自定义函数)
如:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){ $("div").animate({left:'250px'}); });
5、jQuery HTML
获得内容 - text()、html() 以及 val()
获取属性 - attr()
$("#runoob").attr("href")
<a href="http://www.runoob.com" id="runoob">菜鸟教程</a>