jQuery学习笔记

来源：互联网发布：mysql数据库安装包下载编辑：程序博客网时间：2024/06/18 06:11

一引入jQuery库
1 从http://jquery.com/download/上下载jQuery库,然后使用<script type="text/javascript" src="[路径]/jquery.js"></script>

2 使用CDN
Google的CDN：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
Microsoft的CDN:<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

二 jQuery语法
基础语法是：$(selector).action()
$定义jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

三 selector选择器：
this选择器:$(this)
id选择器：$("#test")
标签选择器:$("p")
class选择器:$(".test")
更多参见：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

四文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});
注意：ready() 函数不应与 <body onload=""> 一起使用。

五 jQuery事件函数
$(document).ready(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)
示例：
$("button").click(function(){
$("p").hide();
});
更多参见：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

六 jQuery命名冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
示例：
<script>
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});
</script>

七 jQuery效果-隐藏/显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);//切换隐藏显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
示例：
$("p").hide(1000);
$("p").show(1000);
$("p").toggle();
更多参见：http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

八获得内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值

九添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

十删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

十一操作CSS元素
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

十二尺寸
width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()方法返回元素的宽度（包括内边距）
innerHeight()法返回元素的高度（包括内边距）
outerWidth()outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight()outerHeight() 方法返回元素的高度（包括内边距和边框）

更多内容参考：http://www.w3school.com.cn/jquery/index.asp