1.选择器

基本选择器

并集选择器：

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

层级选择器

后代选择器

语法： $("A B ") 选择A元素内部的所有B元素

子选择器

语法： $(“A > B”) 选择A元素内部的所有B子元素

过滤选择器

首元素选择器

语法： :first 获得选择的元素中的第一个元素

尾元素选择器

语法： :last 获得选择的元素中的最后一个元素

非元素选择器

语法： :not(selector) 不包括指定内容的元素

表单过滤选择器

可用元素选择器

语法： :enabled 获得可用元素

不可用元素选择器

语法： :disabled 获得不可用元素

2.DOM操作

html(),val(),text();
attr(),prop();
addClass(),removeClass(),toggleClass();
append();prepend();
after();before()

JQuery 高级

1. 动画

三种方式显示和隐藏元素

1. 默认显示和隐藏方式

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

2. 滑动显示和隐藏方式

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

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

fadeIn([speed],[easing],[fn])：淡入，相当于显示
fadeOut([speed],[easing],[fn])：淡出，相当于隐藏
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. 遍历

js的遍历方式

for(初始化值;循环结束条件;步长)

jq的遍历方式
jq对象.each(callback)
1. 语法：
  jquery对象.each(function(index,element){});
  - index:就是元素在集合中的索引，js类型
  - element：就是集合中的每一个元素对象，js类型
  - this：集合中的每一个元素对象，js类型
2. 回调函数返回值：
- false:如果当前function返回为false，则结束循环(break)。
- true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
$.each(object, [callback])
for…of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)

<!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. 事件绑定

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

实现方式：
$.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>

$.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,动画

默认显示和隐藏的方式

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动显示和隐藏方式
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn]])

animate()

2，遍历

1.jq对象.each(callback)

语法：
jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象
回调函数返回值：

true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

$.each(object, [callback])

3，事件绑定，

4，插件

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

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

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

function 调用方法名(){
    jq对象.方法名
}

$.extend(object)

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

$.extend({
    方法名:function (形参列表) {
        方法体
    },
});
// 调用方法
var max = $.方法名(形参列表);
        alert(max);

愛＆有★多遠♀

发布了12 篇原创文章 · 获赞 0 · 访问量 51

私信关注

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