jQuery使用
下载： jquery官网
版本：
- jquery.js（开发版） 完整无压缩，用于测试与学习
- jquery.min.js（发布版） 高度压缩，用于实际开发
安装：
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//这里编写你的jQuery代码
</script>
不下载并存放 jQuery，通过 CDN（内容分发网络） 引用它
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
或
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
jquery选择器
jQuery基本选择器
（1）元素选择器；$("元素名")
（2）id选择器； $("#id名")
（3）class选择器； $(".类名")
（4）群组选择器；$("选择器1 , 选择器2 ,……,选择器n")
（5）*选择器; *{padding:0;margin:0;}
jQuery层次选择器
$(“M N”) 后代选择器，选择M元素内部后代N元素（所有N元素）
$(“M>N”) 子代选择器，选择M元素内部子代N元素（所有第1级N元素）
$(“M~N”) 兄弟选择器，选择M元素后所有的同级N元素
$(“M＋N”) 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素
jQuery属性选择器
$(“选择器[attr]”) 选择包含给定属性的元素
$(“选择器[attr=‘value’]”) 选择给定的属性是某个特定值的元素
$(“选择器[attr != ‘value’]”) 选择所有含有指定的属性，但属性不等于特定值的元素
$(“选择器[attr *= ‘value’]”) 选择给定的属性是以包含某些值的元素
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery伪类选择器
:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素（非子元素）
:last或last() 选择某元素的最后一个元素（非子元素）
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
jquery操作元素和样式
jQuery操作元素
- 属性操作
$().attr("属性名") //获取属性
$().attr("属性" , "属性值") //设置属性
$().removeAttr("属性"); //删除属性
- 内容操作
$().html() //获取HTML内容
$().html("HTML内容"); //设置HTML内容
$().text() //获取文本内容
$().text("文本内容") //设置文本内容
$().val() //获取表单元素
$().val("表单元素的值") //设置表单元素
jQuery样式操作
1、CSS属性操作
$().css("属性") //获取CSS属性
$().css("属性","属性值") //设置单个CSS属性
$().css({"属性1":"属性值1","属性2":"属性值2",……}) //设置多个CSS属性
---------------------------------------------------
$("ul li:nth-child(odd)").css("color","red");
等价于
$("ul li:nth-child(odd)").css({"color":"red"});
2、CSS类名操作
$().addClass("类名") // 添加类名
$().removeClass("类名")
$().toggleClass("类名") // 切换类名
toggleClass()方法用于检查元素是否具有某个类名。
如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。
3，元素的宽度高度width()和height()
width() width
innerWidth() width + padding
outerWidth() width + padding + border
$().width(); // 获取---返回数字，例如100--不带单位
$("#box2").width(50); //设置---元素的宽度
$().css("width"); //返回字符串，例如“100px”---带“px”
height() height
innerHeight () height + padding
outerHeight () height + padding + border
4，元素的位置offset()和position()----返回一个数字（不带单位）
$().offset() 返回的是一个坐标对象，该对象有2个属性：top和left。
$().offset().top 获取元素相对于浏览器窗口“顶部”的距离。
$().offset().left 获取元素相对于浏览器窗口“左部”的距离。
$().position() 返回的是一个坐标对象，该对象有2个属性：top和left。
$().position().top 元素相对于被定位的祖辈元素的顶部的垂直距离。
$().position().left 元素相对于被定位的祖辈元素的左部的水平距离。
父元素设置position:relative，子元素相对于父元素的定位position:absolute
jQuery的offset()和position()的结合使用，快速获取元素坐标
5， 滚动条的距离scrollTop()和scrollLeft()----数字（不带单位）
$().scrollTop() //获取滚动距离
$().scrollTop(value) //设置滚动距离
<script type="text/javascript">
$(function () {
var top = $("#box2").offset().top;
$(window).scroll(function () {
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
} else {
$("#box2").css({ "position": "relative" });
}
});
}) </script>
滚动条距离大于box2距离顶部的距离时，设置固定定位；
当滚动条距离大于box2距离顶部的距离时，设置固定定位。
$(this).scrollTop()中的this指的是window，
等价于$(window).scrollTop()，表示获取滚动条距离浏览器窗口顶部的距离。
jquery操作DOM
创建节点
var e = $(html);
$().append(e);
--------------------------------------------
var $li = "<li></li>";
$("ul").append($li);
--------------------------------------------
var $li = '<li><a href="blog.youkuaiyun.com/image_fzx" target="_blank" title="cookie_fzx">cookie_fzx</a></li>';
$("ul").append($li);
由于复杂节点的属性与属性值之间用的是双引号（如target="_blank"），
因此我们构造HTML字符串的时候，最外面就不应该用双引号而是用单引号了
插入节点
$(A).append(B) // 在A内部-同一行的“末尾”插入B
$(A).appendTo(B) // 将A插入B内部的“末尾”
var $strong = "<strong>jQuery入门教程</strong>";
$("p").append($strong);
$($strong).appendTo("p");
（1）append()和appendTo()； 内部末尾插入
（2）prepend()和prependTo()； 内部前面插入
（3）before()和insertBefore()； 外部之前插入
（4）after()和insertAfter() 外部后面插入
删除节点
$("ul li:eq(3)").remove(); // 选择ul元素下的第4个li元素
$(A).detach()
remove()方法不仅元素会被删除，所绑定的事件都会被删除。
detach()方法只有元素被删除，所绑定的事件并不会删除。
$(A).empty()
remove()和detach()都是将某个元素删除。
empty()方法清空元素内部的所有节点
$(A).remove(expression)表示删除符合expression条件的A元素
$("#div3").remove();
$("div").remove("#div3");
复制节点
$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。默认值为false
$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。
随便点击其中一个列表项，该列表项会被复制，并且添加到ul元素内部末尾
$(this).clone().appendTo("ul")
替换节点
该元素所绑定的事件会消失
$(A).replaceWith(B) 用B来替换A。
$(A).replaceAll(B) 用A来替换B
$("p").replaceWith('<a href="blog.youkuaiyun.com/image_fzx" target="_blank">fzx</a>');
等价于
$('<a href="blog.youkuaiyun.com/image_fzx" target="_blank">fzx</a>').replaceAll("p");
包裹节点
$(A).wrap(B) // 将A元素使用B元素包裹起来。单独的包裹, A内B外
$(A).wrapAll(B) // 将所有匹配的元素用一个元素来包裹，A内B外
$("p").wrap("<div></div>")
$("p").wrapAll("<div></div>")
$(A).wrapInner(B) // 将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）
A外--B内
遍历节点
$().each(function(index){
……
})
------------------------------------
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var arr = new Array("HTML", "CSS", "JavaScript", "jQuery", "canvas");
$("li").each(function (index) {
var txt = arr[index];
$(this).text(txt);
});
});
}) </script>
jquery事件
页面载入事件
window.onload与$(document).ready()
$(document).ready()仅仅是DOM元素加载完成就可以执行，
而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。
ready()方法的4种写法
$(document).ready(functin(){ //代码部分 })
jQuery(document).ready(function(){ //代码部分 })
$(function(){ //代码 })
jQuery(function(){ //代码部分 })
在JavaScript中，window.onload方法只能调用1次，
如果多次调用，则执行最后一个window.onload方法中的代码。
但是在jQuery中，$(document).ready()却可以多次执行
jQuery鼠标事件
$("#btn").click(function () { ... } // 单击事件
$("h3").mouseover(function () { ... } //鼠标的“移入”
$("h3").mouseout(function () { ... } //“移出”
mouseover mouseout 所选元素及其后代子元素
mouseenter和mouseleave 所选元素
mousedown和mouseup 鼠标按下和松开事件
键盘事件
*keydown→keypress→keyup
keydown 按下（数字键，功能键）
keypress 按下（数字键）
keyup 放下键（数字键，功能键）
组合键： event.ctrlKey, event.shiftKey, event.altKey
表单事件
focus()相当于JavaScript中的onfocus()方法,作用是获得焦点时触发的事件
和blur()相当于JavaScript中的onblur()方法，作用是失去焦点时触发的事件
用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。
当文本框失去光标时，文本框失去焦点;
具有获得焦点/失去焦点事件/获得onchange事件的元素有3个:
（1）单行文本框text；（2）多行文本框textarea；（3）下拉列表select；
$("#txt").change(function () { ... } // 文本框内字符串的改变将会触发onchange事件
下拉列表列表项的选中触发的事件是change而不是select
$("#txt1").select(function () { ... }
当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件
滚动事件
$(window).scroll(function () { ... } //
scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合
绑定事件
$("#btn").on("click", function () { ... } // 为“已经存在的元素”绑定事件
--------------------------------------------------------
// 为“未来创建的元素”绑定事件
<script type="text/javascript">
$(function () {
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").on("click", function () { alert("fzx"); });
})</script>
------------------------------------------------------------------
// on()方法的兼容性
function addEvent(obj, type, fn) { //定义绑定事件函数
if (obj.attachEvent) { //兼容IE浏览器
obj.attachEvent("on" + type, fn);
} else { //兼容非IE浏览器
obj.addEventListener(type, fn, false);
}
}
解绑事件
$("#btn").off("click");
合成事件
$("#wrapper").hover(function () { }, function () { })
----------------------------------------------------------
$(function () {
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
})
一次事件one()
$("#btn").one("click", function () { ... }
jQuery动画
显示和隐藏
$("img").hide(); // $("img").css("display" , "none");
$("img").show(); // $("img"). css("display" , "block");
$().hide(speed,callback)
$(),show(speed,callback)
$().toggle() //简单的toggle() 切换”元素的“显示状态”
$().toggle(speed , callback); //动画的toggle()
淡入和淡出
show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏
$().fadeIn(speed , callback)
$().fadeOut(speed , callback)
$("#img1").toggle(500); // 通过opacity来实现动画的显示与隐藏
$().fadeTo(speed , opacity , callback)
$("img").hover(function () { $(this).fadeTo(200, 0.8);},
function () { $(this).fadeTo(200, 1.0); })
滑上和滑下
$().slideDown(speed , callback)
$().slideUp(speed , callback)
----------------------------------------------
var flag = 0;
$("h3").click(function () {
if (flag == 0) {
$("p").slideDown();
flag = 1;
}else{
$("p").slideUp();
flag = 0;
}
});
slideToggle(speed , callback)
自定义动画
jquery.color.js这个文件解决animate()方法无法识别color和background-color、border-color等颜色属性值的问题。
由于jquery.color.js是依赖jQuery库而存在的，
因此jquery.color.js文件必须放在jquery.1.12.0.min.js（jQuery库文件）后面引入，不然同样无效
$("#lvye").click(function () {
$(this).animate({ "width": "100px","height":"100px","background-color":"red"}, 1000);
})
累积动画
animate({ "width": "+=100px", "height": "+=100px" }
回调函数
$(this).animate({ "width": "100px"}, 1000).css("border", "5px solid red");
// css()方法并不会加入到“动画队列”中，而是立即执行
$(this).animate({ "width": "100px", }, 1000, function () {
$(this).css("border", "5px solid red");
队列动画
$().animate().animte()…….animte()
$(this).animate({ "width": "100px", "height": "100px" }, 1000)
.animate({ "background-color": "red" }, 1000)
.fadeOut(500);
动画的停止和延迟
stop() 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行
stop(true) 等价于stop(true,false)，停止所有动画，包括当前执行的动画
$().stop(clearQueue,gotoEnd)
参数clearQueue表示是否要清空“未执行”的“动画队列”
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态
$().delay(speed)
$(this).animate({ "width": "200px" }, 1000)
.delay(1000)
.animate({ "height": "200px" }, 1000);
（1）显示和隐藏：通过改变width、height、opacity、display来实现动画的显示和隐藏；
（2）淡入和淡出：通过改变opacity、display来实现动画的淡入和淡出；
（3）滑上和滑下：通过改变height、display来实现动画的滑上和滑下；
判断动画状态
if(!$().is(":animated")){ //如果当前没有进行动画，则添加新动画}
$("#wrapper").hover(function () {
if(!$(" #content", this).is(":animated")){
$(" #content", this).animate({ "bottom": "0px" }, 200);
}}, function () {
if(!$(" #content", this).is(":animated"))
{
$(" #content", this).animate({ "bottom": "-28px" }, 200);
}})
jQuery过滤方法
类过滤hasClass()
if($(this).hasClass("ClassName")){}
下标过滤eq()
$().eq(n) // n是一个正整数，从0开始计算
$("li").eq(4) // $("li:eq(4)")
判断过滤is()
$().is(":visible") //判断元素是否隐藏
$().is(":animated") //判断元素是否处在动画中（非常重要）
$("input[type=checkbox]").is(":checked") //判断复选框是否被选中
$(this).is(":first-child") //判断是否第1个子元素
$().is(":contains('helicopter')") //判断文本中是否包含helicopter这个词
$().is(".red,.blue") //判断是否包含某些类名
快速地重复移入移出时，会出现一个动画累积的bug;
is(":animated")这是用来判断当前所选元素是否处于动画状态
---------------------------------------------------------------------------
$(function () {
$("#wrapper").hover(function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "0px" }, 200);
} }, function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "-28px" }, 200);
} });
})
反向过滤not()
$().not(expression) //
$("ul li").not("#red").css("color", "red");
$("ul li:not(#red)").css("color", "red");
表达式过滤filter()和has()
filter(expression)
$("ul li").filter("#red,#yellow").click(function () {
$(this).css("color", "red"); })
----------------------------------------------------------
filter(fn)
$("ul li")
.filter(function () {return $("span", this).length == 1;})
.css("color", "red");
$("span", this).length == 1 // 表示选择在内部子元素中span长度为1的li元素
-------------------------------------------------------------
$().has(expression) // filter()方法的缩小版, 没有函数过滤的方式
$("ul li").has("span").css("color", "red");
jQuery查找方法
查找祖先元素 parent()、parents()、parentsUntil()
查找后代元素 children()、find()、contents()
向前查找兄弟元素 prev()、prevAll()、prevUntil()
向后查找兄弟元素 next()、nextAll()、nextUntil()
查找所有兄弟元素 siblings()
jQuery AJAX
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
jQuery load() 方法:
$(selector).load(URL,data,callback);
$("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 - AJAX get() 和 post() 方法
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get(URL,callback); // 通过 HTTP GET 请求从服务器上请求数据
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
---------------------------------------------------------------
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素，返回 JSON 数据结构数据。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
