网站开发之jQuery篇
2018-04-12 本文已影响21人
平安喜乐698
目录
1. 简介
2. 使用
2.1. 获取元素（或元素组）
2.2. 做操作
2.2.1 常用操作
2.2.2 动画
1. 简介
jQuery 是对JavaScript的封装
不是 W3C 标准
有2个版本：
精简版（用于生产）
开发版（用于研究）
主要的jQuery函数：
$()
使用用别的标识符（如：cx）替换$
var cx=jQuery.noConflict()
cx("p").hide();
通过css选择器或直接传入html对象来选取元素
不能使用html对象的属性和方法
$("#myId")
$(body)
写在read函数中
$(document).ready(myFunction);
$(document).ready(function myFunction(){
});
支持链式编程
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
内容保存在单独的.js文件
使用：
方式一（head中引用，大多数）
优势：其他网站引用过则会缓存在浏览器上
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
方式二（下载下来再引用）
举例
// -----------js方式-----------
function myFunction(){
var obj=document.getElementById("myTitle");
obj.innerHTML="Hello jQuery";
}
// onload：页面加载完毕后调用
onload=myFunction;
等价
// -----------jQuery 方式-----------
function myFunction(){
$("#myTitle").html("Hello jQuery")
}
// 等价于onload
$(document).ready(myFunction);
2. 使用
2.1. 获取元素（或元素组）
可以灵活地结合使用
常见
元素为p
$("p")
id为myId的元素
$("#myId")
class为myClass的元素
$(".myClass")
class为myClass且myClass2的元素
$(".myClass.myClass2")
p元素中class为myClass的元素
$("p.myClass")
p元素中id为myId的元素
$("p#myId")
p元素中id为myId的元素的子孙类class为myClass的元素
$("p#myId .myClass")
属性相关
所有带有属性href的元素
$("[href]")
所有带有属性href=#的元素
$("[href='#']")
所有带有属性href!=#的元素
$("[href!='#']")
所有带有属性href以".jpg" 结尾的元素
$("[href$='.jpg']")
第一个p元素
$("p:first")
最后一个p元素
$("p:last")
所有偶数tr元素
$("tr:even")
所有奇数tr元素
$("tr:odd")
第四个li元素
$("ul li:eq(3)")
index大于3的所有li元素
$("ul li:gt(3)")
index小于3的所有li元素
$("ul li:lt(3)")
所有标题元素 <h1> - <h6>
$(":header")
所有动画元素
$(":animated")
包含指定字符串的所有元素
$(":contains('W3School')")
无子（元素）节点的所有元素
$(":empty")
所有隐藏的p元素
$("p:hidden")
所有可见的p元素
$("p:visible")
input相关
所有不为空的 input 元素
$("input:not(:empty)")
所有 <input> 元素
$(":input")
所有 type="text" 的 <input> 元素
$(":text")
所有 type="password" 的 <input> 元素
$(":password")
所有 type="radio" 的 <input> 元素
$(":radio")
所有 type="checkbox" 的 <input> 元素
$(":checkbox")
所有 type="submit" 的 <input> 元素
$(":submit")
所有 type="reset" 的 <input> 元素
$(":reset")
所有 type="button" 的 <input> 元素
$(":button")
所有 type="image" 的 <input> 元素
$(":image")
所有 type="file" 的 <input> 元素
$(":file")
所有激活的 input 元素
$(":enabled")
所有禁用的 input 元素
$(":disabled")
所有被选取的 input 元素
$(":selected")
所有被选中的 input 元素
$(":checked")
父子元素相关
直接父元素
$("span").parent();
所有父元素
$("span").parents();
所有url父元素
$("span").parents("ul");
直到div元素的所有父元素
$("span").parentsUntil("div");
最近定位的父元素
$('span').offsetParent()
所有直接子元素
$("div").children();
所有子元素类型为p且class为myClass的直接子元素
$("div").children("p.myClass");
所有子元素
$("div").find("*");
所有span子元素
$("div").find("span");
第三个
$("body").find("div").eq(2);
最后一个
$("p").find("span").end()
将 p元素中第一个开始共2个 放入b元素中
$("p").slice(0, 2).wrapInner("<b></b>");
所有同级元素
$("h2").siblings();
所有p同级元素
$("h2").siblings("p"); ".hh"
下一个同级元素
$("h2").next();
所有后边的同级元素
$("h2").nextAll();
所有后边直到h6的同级元素
$("h2").nextUntil("h6");
上一个同级元素
$("h2").prev();
之前的所有同级元素
$("h2").prevAll();
所有前边直到h6（不含）的同级元素
$("h2").prevUntil("h6");
id为p的元素一直往上到id为hh（不含）所有dd元素
$("#p").prevUntil(document.getElementById('hh'), "dd")
获取div元素的首个p子元素
$("div p").first();
获取div元素的最后一个p子元素
$("div p").last();
获取div元素的第一个子元素
$("p").eq(0);
获取div元素的class为myClass子元素
$("p").filter(".myClass");
获取div元素的class不为myClass子元素
$("p").not(".myClass");
是否是指定元素（false true）
$("p").is("form")
有则返回该元素
$("ul").has("li")
遍历
$("li").each(function(){
});
获得匹配元素集合中每个元素的子元素，包括文本和注释节点
$("p").contents()
p元素最近的li元素
$("p").closest("li")
包括div
$("div").find("p").andSelf()
第1个p元素
x=$("p").get(0);
x=$("p").index(0);
x=$("p").index();
个数
x=$("p").index()
转为数组
x=$("li").toArray()
名 内容
$("div").text(x.nodeName + ": " + x.innerHTML);
所有元素
$("*")
当前元素
$(this)
举例：
1.当前元素的class为ex的父元素 缓慢隐藏
$(this).parents(".ex").hide("slow");
2.2. 做操作
2.2.1 常用操作
获取/设置 元素位置和大小
位置
x=$("p").position();
x.left x.top
左移
$("div").scrollLeft(100);
上移
$("div").scrollTop(100);
当前偏移
x=$("p").offset();
最近定位的祖先元素
$("p").offsetParent()
获取/设置 元素的宽高（不包括内边距、边框或外边距）
$("#div1").width()
$("#div1").height()
获取/设置 元素的宽高（包括内边距，不包括边框或外边距）
$("#div1").innerWidth()
$("#div1").innerHeight()
获取/设置 元素的宽度/高度（包括内边距，边框或外边距）
$("#div1").outerHeight()
$("#div1").outerWidth()
$(document).width()
$(document).height()
$(window).width()
$(window).height()
获取/修改元素内容
获取/设置 元素中的文本内容
var text=$("#test").text()
$("#test").text("Hello world!");
origText旧的内容
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
获取/设置 元素中的内容（包括标签）
$("#test").html())
$("#test").html("<b>Hello world!</b>")
获取/设置 表单输入值
$("#test").val()
$("#test3").val("Dolly Duck");
获取/设置 元素属性
$("#test").attr("href")
$("#test").attr("href","http://www.w3school.com.cn/jquery");
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
移除属性
$("p").removeAttr("id");
获取/设置 元素样式
是否拥有该类
$("p:first").hasClass("intro");
// ---------方式一（常用）---------
添加样式类
$("h1,h2,p").addClass("blue");
$("#div1").addClass("important blue");
删除样式类
$("h1,h2,p").removeClass("blue");
切换添加删除样式类
$("h1,h2,p").toggleClass("blue");
// ---------方式二---------
$("p").css("background-color");
$("p").css({"background-color":"yellow","font-size":"200%"});
添加/删除 元素
追加置结尾
$("p").append("Some appended text.");
追加置开头
$("p").prepend("<p>hello</p>","<p>world</p>");
$("<b>Hello World!</b>").prependTo("p");
元素之后之前添加
$("img").after("Some text after");
$("img").before("Some text before");
追加hello到p元素
$("<b>Hello World!</b>").appendTo("p");
插入内容在p元素后
$("<span>Hello world!</span>").insertAfter("p");
插入内容在p元素前
$("<span>Hello world!</span>").insertBefore("p");
克隆p元素
$("p").clone()
替换
$("p").replaceAll("<b>Hello world!</b>");
$("p").replaceWith("<b>Hello world!</b>");
包裹p元素
$("p").wrap("<div></div>");
$("p").wrapAll("<div></div>");
$("p").wrapInner("<b></b>");
删除
$("#div1").remove();
删除所有class为italic的p元素
$("p").remove(".italic");
删除所有子元素
$("#div1").empty();
删除所有p元素
$("p").detach();
删除p的所有父元素
$("p").unwrap();
事件
绑定/解绑/切换
绑定事件到元素
$("button").bind("click",function(){
$("p").slideToggle();
});
解绑bind
$("p").unbind();
给元素绑定事件
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
解绑delegate
$("body").undelegate();
给元素绑定事件
$("p").live("click",function(){
$(this).slideToggle();
});
解绑live
$("p").die();
绑定事件
$("p").one("click",function(){
});
切换绑定事件
$("p").toggle(
function(){},
function(){},
function(){}
);
触发select事件
$("input").trigger("select");
$("input").triggerHandler("select");
鼠标相关
鼠标悬停时调用
$(document).mousemove(function(e){
鼠标的坐标
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
鼠标进入
$("p").mouseenter(function(){
});
鼠标离开
$("p").mouseleave(function(){
});
鼠标移开
$("p").mouseout(function(){
});
鼠标位于上方
$("p").mouseover(function(){
});
松开鼠标
$("button").mouseup(function(){
});
滚动
滚动后调用
$("div").scroll(function() {
});
表单
提交表单时调用
$("form").submit(function(e){
});
焦点/编辑相关
获得焦点时调用
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
失去焦点时调用
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
内容改变后调用
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
选中文本后调用
$("input").select(function(){
});
点击后调用
$("button").click(function(){
$("p").slideToggle();
});
$("button").click(function(e) {
事件的类型
$("div").html("Event: " + event.type);
最后一次点击事件返回的内容
$("p").html(e.result);
触发该事件的元素
$("div").html("Triggered by a " + event.target.nodeName + " element.");
事件触发时的时间戳
$("span")html(event.timeStamp);
});
双击后调用
$("button").dblclick(function(){
$("p").slideToggle();
});
按下键盘按钮后调用
$("input").keydown(function(event){
按键的序号
$("div").html("Key: " + event.which);
});
按下并抬起键盘按钮后调用
$("input").keypress(function(){
$("span").text(i+=1);
});
抬起键盘按钮后调用
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
其他
出错时调用
$("img").error(function(){
$("img").replaceWith("Missing image!");
});
$("a").click(function(event){
阻止默认操作
event.preventDefault();
是否阻止了默认操作
alert("Default prevented: " + event.isDefaultPrevented());
});
加载元素时调用
$("img").load(function(){
$("div").text("Image loaded");
});
文档加载完毕后调用（jQuery在此处调用）
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
离开本页时调用（重新加载，关闭浏览器，前进后退，浏览器输入新url，点击链接）
$(window).unload(function(){
alert("Goodbye!");
});
浏览器窗口改变时调用
$(window).resize(function() {
});
其他
li元素的个数
$("li").length
浏览器是否支持jQuery（true false）
jQuery.support.ajax
是否禁止动画
jQuery.fx.off = true;
改变动画帧率
jQuery.fx.interval = 500;
jQuerry版本号
$().jquery;
设置值
$("div").data("key22", "Hello World");
获取值
$("div").data("key22");
删除值
$("div").removeData("key22");
是否存在指定值
var $p = jQuery("p"), p = $p[0];
jQuery.hasData(p);
队列
div.queue("fx");
？删除队列最前端并执行
$(this).dequeue();
停止当前操作
$("#panel").stop();
排队函数队列
$("#panel").queue();
下一个排队函数
$("#panel").dequeue();
设置延迟(所有排队函数（仍未运行）)
$("#panel").delay();
2.2.2 动画
隐藏/显示/来回切换显示隐藏
$(this).hide();
$("p").show();
$("p").toggle();
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
语法：
"slow"、"fast" 或毫秒 或空
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
淡入/淡出/来回切换淡入淡出，淡出到几%
$("#div1").fadeIn();
$("#div1").fadeIn("slow");
$("#div1").fadeIn(3000);
$(selector).fadeIn(3000,function(){});
$("#div1").fadeOut();
$("#div1").fadeOut("slow");
$("#div1").fadeOut(3000);
$(selector).fadeOut(speed , callback);
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
$("#div1").fadeTo("slow",0.15);
下滑/上滑/来回切换上下滑
$("#panel").slideDown();
$(selector).slideDown(speed,callback);
$("#panel").slideUp();
$(selector).slideUp(speed,callback);
$("#panel").slideToggle();
$(selector).slideToggle(speed,callback);
动画
必须使用 Camel 标记法书写所有的属性名
marginRight 而不是 margin-right
CSS 属性，可选："slow"、"fast" 或毫秒，可选：回调
操作位置前应将 position 属性设置为 relative、fixed 或 absolute！
$(selector).animate({params},speed,callback);
例：
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=150px',
width:'150px'
});
停止动画
$("#box").clearQueue();
