0：jQuery是一个JavaScript库，极大的简化了JavaScript编程。例：- <html>
-
<head>
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("p").click(function(){
-
$(this).hide();
-
});
-
});
-
</script>
-
</head>
-
-
<body>
-
<p>If you click on me, I will disappear.</p>
-
</body>
-
-
</html>
- <head>
-
<script type="text/javascript" src="jquery.js"></script>
-
</head>
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery action() 执行对元素的操作
3：文档就绪函数
所有 jQuery 函数位于一个 document ready 函数中：- $(document).ready(function(){
-
-
--- jQuery functions go here ----
-
-
});
元素选择器：
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 元素。
$("p.intro") 选取所有 class="intro" 的 元素。
$("p#demo") 选取 id="demo" 的第一个 元素。
属性选择器：
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS选择器：
$("p").css("background-color","red");
5：jQuery事件
事件处理函数是当 HTML 中发生事件时自动被调用的函数。通常是把 jQuery 代码置于网页 部分的“事件处理”函数中。
jQuery名字冲突解决办法：
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
例：
事件处理：
-
$(document).ready(function) 文档的就绪事件（当 HTML 文档就绪可用）
-
$(selector).click(function) 被选元素的点击事件
-
$(selector).dblclick(function) 被选元素的双击事件
-
$(selector).focus(function) 被选元素的获得焦点事件
-
$(selector).mouseover(function) 被选元素的鼠标悬停事件
效果：
- $(selector).hide() 隐藏被选元素
-
$(selector).show() 显示被选元素
-
$(selector).toggle() 切换（在隐藏与显示之间）被选元素
-
$(selector).slideDown() 向下滑动（显示）被选元素
-
$(selector).slideUp() 向上滑动（隐藏）被选元素
-
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
-
$(selector).fadeIn() 淡入被选元素
-
$(selector).fadeOut() 淡出被选元素
-
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
-
$(selector).animate() 对被选元素执行自定义动画
html操作：
- $(selector).html(content) 改变被选元素的（内部）HTML
-
$(selector).append(content) 向被选元素的（内部）HTML 追加内容
-
$(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容
-
$(selector).after(content) 在被选元素之后添加 HTML
-
$(selector).before(content) 在被选元素之前添加 HTML
CSS操作：
- $(selector).css(name,value) 为匹配元素设置样式属性的值
-
$(selector).css({properties}) 为匹配元素设置多个样式属性
-
$(selector).css(name) 获得第一个匹配元素的样式属性值
-
$(selector).height(value) 设置匹配元素的高度
-
$(selector).width(value) 设置匹配元素的宽度
Ajax操作：
- $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
-
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
-
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
-
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
-
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
-
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
阅读(747) | 评论(0) | 转发(0) |
