jQuery

浏览: 1948

1.jQuery简介及使用

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

下载地址

我用的是jQuery1.12.4版本


uncompressed:未压缩版本,适用于开发环境,方便查看源代码
minified:压缩版本,适用于生产环境

jQueryapi文档

2.jQuery语法

通过 jQuery,可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

基础语法是:$(selector).action()$(“#btn”) == jQuery(“#btn”)

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例:
$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有段落
$(".test").hide() 隐藏所有 class="test" 的所有元素
$("#test").hide() 隐藏所有 id="test" 的元素

3.jQuery选择器

  • jQuery 元素选择器

    jQuery 使用 CSS 选择器来选取 HTML 元素。
    $("p") 选取 <p> 元素。
    $("p.intro")选取所有 class="intro" 的 <p> 元素。
    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

  • jQuery 属性选择器

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取所有带有 href 属性的元素。
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

  • jQuery CSS 选择器

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    下面的例子把所有 div 元素的背景颜色更改为红色:
    $("div").css("background-color","red")
    简洁操作:
    $("#box").css("border", "solid 1px red");
    标准操作:

    $("#box").css({
    "border":"solid 1px red",
    "background":"#efefef"
    })

    注意:样式尽量写在css中,通过标签的class属性来控制使用不同的样式
    如果是动态递增变化的样式,可以通过JS代码进行处理。

  • 内容操作

    常规开始标签和结束标签中间的内容操作
    var $boxValue = $("#box").text();$("#box").text("添加的内容")
    表单元素的数据
    var $name = $("#username").val();

  • 属性操作

    var $id = $("#box").attr("id")$("#box").attr("id", "container")

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有

元素

.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
:first$("p:first")第一个

元素

:last$("p:last")最后一个

元素

:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header")所有标题元素

-


:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:button$(":button")所有 type="button" 的 元素
:image$(":image")所有 type="image" 的 元素
$(this)当前 HTML 元素

4,jQuery 事件函数及效果显示

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中.

$("selector").show显示 HTML 元素
$("selector").hide隐藏 HTML 元素
$("selector").toggle(speed,callback)显示 / 隐藏HTML 元素

  • 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback)

  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

代码操作:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画效果展示</title>
<style type="text/css">
#box{width:200px;height: 200px;background: red;position: absolute;top: 50px;left: 0px;}
</style>
<script src="../jquery-1.12.4.js">
</script>

<script>
$(function(){
$("#btn_show").click(function(){
$("#box").show(1000);
})

$("#btn_hide").click(function(){
$("#box").hide(1000);
})

$("#btn_toggle").click(function(){
$("#box").toggle(1000);
})

$("#btn_slideDown").click(function(){
$("#box").slideDown(1000);
})

$("#btn_slideUp").click(function(){
$("#box").slideUp(1000);
})


$("#btn_slideToggle").click(function(){
$("#box").slideToggle(1000);
})

$("#btn_fadeIn").click(function(){
$("#box").fadeIn(1000);
})

$("#btn_fadeOut").click(function(){
$("#box").fadeOut(1000);
})

$("#btn_fadeToggle").click(function(){
$("#box").fadeToggle(1000);
})

$("#btn_fadeTo").click(function(){
$("#box").fadeTo(1000,0.5);
})

$("#btn_animate").click(function(){
$("#box").animate({left:"500px",top:"100px",width:"100px",height:"50px"},1000)
.animate({top:"400px",left:"300px"},2000)
})
})
</script>

</head>
<body>
<button id="btn_show">显示</button>
<button id="btn_hide">隐藏</button>
<button id="btn_toggle">显示/隐藏 状态切换</button>

<button id="btn_slideDown">卷帘显示</button>
<button id="btn_slideUp">卷帘隐藏</button>
<button id="btn_slideToggle">卷帘显示/隐藏 状态显示</button>

<button id="btn_fadeIn">透明度显示</button>
<button id="btn_fadeOut">透明度隐藏</button>
<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
<button id="btn_fadeTo">切换到指定的透明度</button>

<button id="btn_animate">自定义动画</button>
<div id="box"></div>
</body>
</html>

效果展示

  • 图片轮播特效

代码操作:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图动态展示</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#box{margin:10px auto;padding: 5px;position: relative;left: 400px;}

#box img{position:absolute;border:solid 2px #888;padding:5px;border-radius: 5px;vertical-align:bottom;display:none;}
#box img:nth-child(1){display: block;}
</style>
<script src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var _index = 0; //当前正在展示的图片的下标

//计时函数 2s更换一次图片
setInterval(function(){
var _next = _index + 1; //下一张要展示的图片的下标
if(_next >= 5){
_next = 0;
}

$("img").eq(_index).fadeOut(1000); //隐藏当前图片
$("img").eq(_next).fadeIn(1000); //显示下一张图片

_index ++;
if(_index >= 5){
_index = 0;
}

},2000)

})

</script>

</head>
<body>
<div id="box">
![](images/psb (10).jpg)
![](images/psb (12).jpg)
![](images/psb (3).jpg)
![](images/psb (4).jpg)
![](images/psb (5).jpg)
![](images/psb (6).jpg)
![](images/psb (37).jpg)
![](images/psb (32).jpg)

</div>
</body>
</html>

效果展示:

图片轮播特效

  • 导航栏上下滑动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏滑动卷帘效果</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.nav{list-style: none;height: 50px;background-color: #069}
.nav>li{float: left;height: 50px;font-size: 20px;color: #fff;width: 120px;text-align: center;line-height: 50px;}

.nav > li > ul{list-style: none;width: 120px;background: #E0E0E0;display: none;}
.nav > li > ul > li{height: 50px;line-height: 50px;color: #333;font-size: 18px;width: 120px;}
</style>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>

<script type="text/javascript">
$(function(){
// 这里面的代码,是当页面中的标签加载完成后执行的
$("li").mouseenter(function(){
$(this).children().last().stop(true).slideDown("slow");
});

$("li").mouseleave(function(){
$(this).children().last().stop(true).
slideUp("slow");
})
})

</script>

</head>
<body>
<ul class="nav">
<li><span>首页</span>
<ul>
<li>国内要闻</li>
<li>国际要闻</li>
</ul>
</li>
<li><span>娱乐</span>
<ul>
<li>电竞</li>
<li>影视</li>
<li>明星</li>
<li>综艺</li>
<li>时尚</li>
</ul>
</li>
<li><span>社会</span>
<ul>
<li>财经</li>
<li>互联网</li>
<li>房产</li>
<li>经济</li>
</ul>
</li>
<li><span>图片</span>
<ul>
<li>美女</li>
<li>风景</li>
<li>动漫卡通</li>
<li>汽车</li>
<li>萌宠</li>
</ul>
</li>
<li><span>IT</span>
<ul>
<li>javascript</li>
<li>Html/css</li>
<li>C++</li>
<li>PHP</li>
<li>python</li>
</ul>
</li>
</ul>
</body>
</html>

效果:

导航栏滑动效果展示

  • 图片翻转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片翻转</title>
<!-- <style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 400px;height: 200px;border:solid 2px #888;border-radius: 8px;margin: 20px auto;padding: 3px;position: relative;}

/*#box img{display:block;width:400px;height: 190px;
position: absolute;top:6px;}*/
#box img{width: 400px;border-radius:3px;position:absolute;}

/* #box img:nth-child(2){height:0;}*/
</style> -->


<style type="text/css">
*{margin: 0;padding: 0;}
#box{margin: 50px auto;width: 400px;height: 200px;padding: 5px;border:solid 1px #888;position: relative;}


#box img{width: 400px;height:198px;border-radius:8px;position:absolute;}

#box img:nth-child(2){height:0;}
</style>


<script type="text/javascript" src="../jquery-1.12.4.js"></script>

<script type="text/javascript">
$(function(){
// 当页面中所有标签全部加载完成的时候,执行的代码
$("#box").mouseenter(function(){
var $that = $(this);
// 隐藏第一张图片
$that.children().first().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 显示第二张图片
$that.children().last().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);

});
});

$("#box").mouseleave(function(){
var $that = $(this);
// 隐藏第二张图片
$that.children().last().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 显示第一张图片
$that.children().first().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);
});
});
})

</script>

</head>
<body>
<div id="box">
![](images/bsj1.jpg)
![](images/bsj2.jpg)
</div>
</body>
</html>

效果展示:

图片翻转特效

推荐 0
本文由 一只写程序的猿 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册