您的位置：首页 > Web前端 > JQuery

JQuery效果应用（动画,滑动,遍历等）

2020-03-29 13:07 1076 查看

1.选择器

基本选择器

  1. 并集选择器：
  • 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

层级选择器

  1. 后代选择器
  • 语法： $("A B ") 选择A元素内部的所有B元素
  1. 子选择器
  • 语法： $(“A > B”) 选择A元素内部的所有B子元素

过滤选择器

  1. 首元素选择器
  • 语法： :first 获得选择的元素中的第一个元素
  1. 尾元素选择器
  • 语法： :last 获得选择的元素中的最后一个元素
  1. 非元素选择器
  • 语法： :not(selector) 不包括指定内容的元素

表单过滤选择器

  1. 可用元素选择器
  • 语法： :enabled 获得可用元素
  1. 不可用元素选择器
  • 语法： :disabled 获得不可用元素

2.DOM操作

  • html(),val(),text();

  • attr(),prop();

  • addClass(),removeClass(),toggleClass();

  • append();prepend();

  • after();before()

JQuery 高级

1. 动画

  1. 三种方式显示和隐藏元素

1. 默认显示和隐藏方式

  1. show([speed,[easing],[fn]])

  2. 参数：

    speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
  3. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
  • swing：动画执行时效果是 先慢，中间快，最后又慢
  • linear：动画执行时速度是匀速的
  1. fn：在动画完成时执行的函数，每个元素执行一次。

  • hide([speed,[easing],[fn]])

  • toggle([speed],[easing],[fn])

    • 2. 滑动显示和隐藏方式

    1. slideDown([speed],[easing],[fn])：往下拉，相当于滑动显示
    2. slideUp([speed,[easing],[fn]])：往上拉，相当于滑动隐藏
    3. slideToggle([speed],[easing],[fn])：切换

    3. 淡入淡出显示和隐藏方式

    1. fadeIn([speed],[easing],[fn])：淡入，相当于显示
    2. fadeOut([speed],[easing],[fn])：淡出，相当于隐藏
    3. fadeToggle([speed,[easing],[fn]])：切换

    4. jQuery 动画 - animate() 方法

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

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

    必需的 params 参数定义形成动画的 CSS 属性。

    **提示：**可以用 animate() 方法来操作所有 CSS 属性吗？

    是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

    可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

    可选的 callback 参数是动画完成后所执行的函数名称。

    $("button").click(function(){
$("#showDiv").animate({left:'250px'});
});

    jQuery animate() - 操作多个属性

    animate(params,[speed],[easing],[fn])

    请注意，生成动画的过程中可同时使用多个属性：

    $("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
function hideFn() {
// $("#showDiv").hide("slow","swing",function () {
//     //alert("隐藏了。。。")
// });

//$("#showDiv").hide(5000,"swing");//5秒之内隐藏

$("#showDiv").slideUp(2000,"swing");
}

function showFn() {
// $("#showDiv").show("slow","swing",function () {
//     //alert("显示。。。")
// });

$("#showDiv").slideDown(3000);
}

function toggleFn(){
//切换显示和隐藏
// $("#showDiv").toggle(4000,"linear",function () {
//
// });

$("#showDiv").fadeToggle(3000);
}

function animateFn(){
$("#showDiv").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},2000);
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<input type="button" value="点击按钮执行动画" onclick="animateFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink;position: absolute">
div显示和隐藏
</div>
</body>
</html>

    2. 遍历

    1. js的遍历方式
    • for(初始化值;循环结束条件;步长)

    1. jq的遍历方式

    2. jq对象.each(callback)

      [ol] 语法：
      jquery对象.each(function(index,element){});

        index:就是元素在集合中的索引，js类型

      • element：就是集合中的每一个元素对象，js类型

      • this：集合中的每一个元素对象，js类型

    3. 回调函数返回值：
    • false:如果当前function返回为false，则结束循环(break)。
    • true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

  • $.each(object, [callback])

  • for…of: jquery 3.0 版本之后提供的方式
    for(元素对象 of 容器对象)

    • [/ol] 
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

$(function () {
//js遍历
var liArr = $("#city li");
// for (var i = 0; i < liArr.length; i++) {
//     alert(i+":"+liArr[i].innerHTML);
// }

//jq对象.each(callback)
// liArr.each(function (index,element) {
//     //3.1,第一种方式 this
//     //alert(this.innerHTML);
//     //3.2,第二种方式,index,element
//
//     //alert(index+":"+element.innerHTML);
//     if($(element).html()=="上海"){
//         //如果返回为false,则结束循环(break)；如果为true,则结束本次循环，继续下次循环(continue)
//         return false;
//     }
//     alert(index+":"+element.innerHTML);
// });

//全局遍历$.each(object, [callback])
$.each(liArr,function () {
alert(this.innerHTML);
});

//jq3.0版本之后提供的方式
//
// for(li of liArr){
//     alert(li.innerHTML);
// }

})

</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>

    ​

    3. 事件绑定

    1. jquery标准的绑定方式
        jq对象.事件方法(回调函数)；
      • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
      • 表单对象.submit();//让表单提交
    2. on绑定事件/off解除绑定
        jq对象.on(“事件名称”,回调函数)
      • jq对象.off(“事件名称”)
      • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
    3. 事件切换：toggle

    • jq对象.toggle(fn1,fn2…)

    • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

    • 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

$(function () {
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor","red");
},function () {
$("#myDiv").css("backgroundColor","green");
});
})

</script>
</head>
<body>

<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>

    4. 案例

    1. 广告显示和隐藏

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>

<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。

分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用  show/hide方法来完成广告的显示
*/

​
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>

<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>

    2. 抽奖

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

<script language='javascript' type='text/javascript'>

/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引

​
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性

*/

</script>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">

​
</body>
</html>

    5. 插件：增强JQuery的功能

    1. 实现方式：
    2. $.fn.extend(object)
    • 增强通过Jquery获取的对象的功能 $("#id")
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jq插件，增强通过Jquery获取的对象的功能
$.fn.extend({
check:function(){
alert("123");

//this：调用该方法的jq对象
//this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});

$(function () {
$("#btn-check").click(function () {
$("input[type='checkbox']").check();
})

$("#btn-uncheck").click(function () {
$("input[type='checkbox']").uncheck();
});
})

</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>
    1. $.extend(object)
    • 增强JQeury对象自身的功能 $/jQuery
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
min:function (a,b) {
return a<=b?a:b;
},
max:function (a,b) {
return a>=b?a:b;
}
});

var max = $.max(2,3);
alert(max);

</script>
</head>
<body>
</body>
</html>

    总结

    1,动画

    默认显示和隐藏的方式

    1. show([speed,[easing],[fn]])

    2. hide([speed,[easing],[fn]])

    3. toggle([speed],[easing],[fn])

    4. 滑动显示和隐藏方式

    5. slideDown([speed],[easing],[fn])

    6. slideUp([speed,[easing],[fn]])

    7. slideToggle([speed],[easing],[fn])

    8. 淡入淡出显示和隐藏方式

    9. fadeIn([speed],[easing],[fn])

    10. fadeOut([speed],[easing],[fn])

    11. fadeToggle([speed],[easing],[fn]])

    animate()

    2，遍历

    1.jq对象.each(callback)

    1. 语法：
      jquery对象.each(function(index,element){});
        index:就是元素在集合中的索引
      • element：就是集合中的每一个元素对象
      • this：集合中的每一个元素对象
    2. 回调函数返回值：
    • true:如果当前function返回为false，则结束循环(break)。
    • false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
    1. $.each(object, [callback])

    3，事件绑定，

    4，插件

    1. 实现方式：
    2. $.fn.extend(object)

    • 增强通过Jquery获取的对象的功能 $("#id")

      $.fn.extend({
方法名:function(){
方法体
},
});

function 调用方法名(){
jq对象.方法名
}
    1. $.extend(object)

    • 增强JQeury对象自身的功能 $/jQuery

      $.extend({
方法名:function (形参列表) {
方法体
},
});
// 调用方法
var max = $.方法名(形参列表);
alert(max);
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    DavinDeng 发布了19 篇原创文章 · 获赞 0 · 访问量 289 私信 关注
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航