jQuery笔记
一、jQuery引用
方法一、<head><script src="jQuery"></script></head>
方法二、<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
二、jQuery 语法
基础语法是：$(selector).action()
---美元符号定义 jQuery
---选择符（selector）“查询”和“查找” HTML 元素
---jQuery 的 action() 执行对元素的操作
示例
$(document).ready(function(){ ---防止文档在完全加载之前运行jQuery代码
$(botton).onclick(function(){
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
});
});
三、jQuery选择器
1、jQuery元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2、jQuery属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
3、jQuery CSS选择器
$('"p").css("background-color","red");
四、事件函数
jQuery 事件
|
Event 函数 |
绑定函数至 |
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
五、JQuery隐藏与显示
1、语法
$("selector").hide(speed,callback); //speed:显示隐藏的速度，slow,fast或毫秒
$("selector").show(speed,callback); //callback:显示或隐藏后执行的函数名
$(selector).toggle(speed,callback); //切换显示和隐藏
六、jQuery淡入淡出
$(selector).fadeIn(speed,callback); //用于淡入已隐藏的元素。
$(selector).fadeOut(speed,callback); //淡出显示的元素。
$(selector).fadeToggle(speed,callback); //淡入淡出
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
七、jQuery上下滑动
$(selector).slideDown(speed,callback); \向下滑动元素
$(selector).slideUp(speed,callback); \向上滑动元素
$(selector).slideToggle(speed,callback); \向上及向下滑动元素
八、jQuery动画
$(selector).animate({params},speed,callback);
--params参数定义形成动画的CSS属性
***如需对位置进行操作，要先把元素的CSS position属性设置为relativefixedabsolute****
实例：
$("button").click(function(){
$("div").animate({
left:'250px'
opacity:'0.5' ---透明度
height:'+=150px' ----相对应用，在原先基础上
'toggle' --预设值，hideshow oggle
//队列animate
var div=$("div")
div.animate({CSS属性},speed,callback);//
div.animate({CSS属性},speed,callback);
})
}
九、停止动画stop()
$(selector).stop(); --停止当前动画，继续下一个动画
$(selector).stop(true); ----停止所有动画
$(selector).stop(true,true); ----停止动画完成当前动画
十、callback的用法
实例
$("p").hide(1000,function(){alert("test");});
十一、jQuery方法、动作连接用法
$(selector).css("color","red").slideUp(100).slideDown(100); ---每个方法可换行，中途不要用分号
十二、jQuery 获取与设置
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值
实例： alert("html:" + $(selector).html());
十二、使用回调函数设置
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
$("button").click(function(){ --同时设置多个属性值
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
十三、在被选元素的位置插入内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
十四、jQuery删除元素
remove() ----删除被选中的元素
empty() ----删除被选中的元素的子元素
$("p").remove(“.cl”) ---删了“p”中class为cl的元素
十五、jQuery --获取并设置CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$(selector).addClass("CSS类名") ---设置多个CSS类以空格隔开
$(selector).removeClass("CSS类名") ---移除CSS类
$(selector).css("propertyname") ----返回CSS属性的值
$(selector).css("propertyname","value") ----设置CSS属性的值
$(selector).css({"propertyname":"value1","propertyname":"value"}); ---设置多个CSS属性值
十六、jQuery 尺寸
jQuery width() 和 height() 方法
$(selector).width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
$(selector).height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
十七、jQuery 遍历
-祖先---可直接在parent().css属性
$("span").parent(); 返回被选元素的直接父元素
$("span").parents(); ------返回被选元素的所有祖先元素
$("span").parents("ul"); ----返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
$("span").parentsUntil("div"); ---返回介于两个给定元素之间的所有祖先元素
十八、jQuery遍历--后代
$("selector").children() -------返回被选元素的所有直接子元素
$("div").children("p.1");-----返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$("div").find("*"); -----返回<div>的所有后代
$("div").find("span"); -----返回属于 <div> 后代的所有 <span> 元素
十九、jQuery遍历--同胞
$("h2").siblings(); ---返回 <h2> 的所有同胞元素
$("h2").siblings("p"); ---返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").next(); --返回被选元素的下一个同胞元素
$("h2").nextAll(); ---返回 <h2> 的所有跟随的同胞元素
$("h2").nextUntil("h6");---返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
prev(), prevAll() & prevUntil() 方法 ---返回为上一个，上面的所有，两个元素之间的同胞元素
二十、jQuery遍历--过滤
$("div p").first();-----选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").last(); -----选择最后一个 <div> 元素中的最后一个 <p> 元素：
$("p").eq(1); -----选取第二个 <p> 元素（索引号 1）;第一个为0
$("p").filter(".intro"); ----返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro"); ----返回不带有类名 "intro" 的所有 <p> 元素
二十一、AJAX
是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
二十二、AJAX load()
$(selector).load(URL,data,callback); --从服务器加载数据，并把返回的数据放入被选元素中
$("#div1").load("demo_test.txt #p1"); --把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
下例在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
二十三、jQuery get()和post()方法
用于通过HTTP GET 或POST请求从服务器请求数据
$.get(URL,callback);
----面的例子使用 $.get() 方法从服务器上的一个文件中取回数据
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + " Status: " + status);
});
});
$.post(URL,data,callback);