第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

时间：2023-03-08 20:42:56

1.jQuery简介

  • 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器
  • 当前流行的JavaScript 库有
    第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
  • jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE。优势如下:
    • 轻量级(压缩后只有几十k)
    • 强大的选择器
    • 出色的DOM 操作的封装
    • 可靠的事件处理机制
    • 完善的Ajax
    • 出色的浏览器兼容性
    • 隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历
    • 文档说明很全
    • 可扩展插件

2.jQuery使用HelloWorld

运行效果

Hello JQuery

隐藏div
显示div

这是一个div

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JQuery</title>
    <!--要使用Jquery需要导入一个第三方的javascript库 jquery.min.js-->
    <!--
        本地引用怎么做呢？
        1. 首先在右侧下载 jquery.min.js
        2. 把 jquery.min.js和测试的html放在同一个目录下
        3. 在测试的html中直接写 src="jquery.min.js"
    -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
    /*
    0. 写法：
            $(function(){
            });
     表示文档加载。看上去略复杂，其实是由下面两种构成：

     $();     -----     function(){}
     合并在一起就是：
            $(function(){
            });

     1. 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
        换句话说，写在这里面的JQuery代码都是文档加载好之后的。
        就不会有获取一个还没有加载好的图片这种问题了。
        一样功能，还有另一个写法

            $(document).ready(function(){
             });
     它也是由两部分组成
            $(document).ready();   ----    function(){}
     2. 与javascript通过id获取元素节点的方式(document.getElementById )不同
        JQuery通过 $("#id") 就可以获取了

        需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
        而通过$("#id") 获取到的是一个 JQuery 对象
    */
    $(function(){
        /*
        3.
         运行效果：
         我是dom节点[object HTMLDivElement]
         我是jQuery对象[object Object]
         jQuery代码：
         document.write('我是dom节点' + document.getElementById("d"));
         document.write("<br/>");
         document.write('我是jQuery对象' + $("#d"));
         */

        /*
        4. JQuery增加click事件的监听

         $("#b1").click(function(){
         alert("点击了按钮");
         });

         这个也是由两部分组成：
            b1按钮的点击事件
                $("#b1").click();
            弹出对话框的函数
                 function(){
                 alert("点击了按钮");
                 }
        */

        $("#b1").click(function(){
            $("#d").hide();
        });
        $("#b2").click(function(){
            $("#d").show();
        });

    });
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>

<table style="border: 1px solid #F40" >123</table>

<div id="d">
    这是一个div
</div>
</body>
</html>

3.JQuery 常见方法

运行效果

<!DOCTYPE html>

常见方法

取值案例1

取值

取值案例2

获取文本内容

这是div的内容
这是div里的span

取值案例3

获取文本内容

这是div的内容
这是div里的span

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见方法</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!--
    val() : 取值
    html() : 获取元素内容,如果有子元素，保留标签
    text() : 获取元素内容,如果有子元素，不包含子元素标签
-->
<h2>取值案例1</h2>
<script>
    $(function () {
        $("#b31").click(function () {
            alert($("#input").val());
        });
    });

</script>
<button id="b31">取值</button>
<br>
<br>
<input type="text" id="input" value="默认值">

<br>
<br>

<h2>取值案例2</h2>
<script>
    $(function(){
        $("#b32").click(function(){
            alert($("#d32").html());
        });
    });

</script>

<button id="b32">获取文本内容</button>

<br>
<br>

<div id="d32">
    这是div的内容
    <span>这是div里的span</span>
</div>

<br>
<br>

<h2>取值案例3</h2>
<script>
    $(function(){
        $("#b33").click(function(){
            alert($("#d33").text());
        });
    });

</script>

<button id="b33">获取文本内容</button>

<br>
<br>

<div id="d33">
    这是div的内容
    <span>这是div里的span</span>
</div>

</body>
</html>

4.jQuery 中对CSS样式的操作

运行效果

<!DOCTYPE html>

jQuery 中对CSS样式的操作

.pink{
background-color:pink;
}

案例1

增加背景色

Hello JQuery

案例2

删除背景色

Hello JQuery

案例3

切换背景色

Hello JQuery

案例4

设置单一样式
设置多种样式

单一样式，只设置背景色
多种样式，不仅设置背景色，还设置字体颜色

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 中对CSS样式的操作</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!--
    addClass : 增加class
    removeClass : 删除class
    toggleClass: 切换class
    css : css函数
-->
<style>
    .pink{
        background-color:pink;
    }
</style>

<h2>案例1</h2>
<script>
    $(function(){
        $("#b41").click(function(){
            $("#d41").addClass("pink");
        });

    });

</script>
<button id="b41">增加背景色</button>
<br>
<br>
<div id="d41">
    Hello JQuery
</div>

<h2>案例2</h2>
<script>
    $(function(){
        $("#b42").click(function(){
            $("#d42").removeClass("pink");
        });

    });
</script>
<button id="b42">删除背景色</button>
<br>
<br>
<div id="d42" class="pink">
    Hello JQuery
</div>

<h2>案例3</h2>
<script>
    $(function(){
        $("#b43").click(function(){
            $("#d43").toggleClass("pink");
        });
    });
</script>
<button id="b43">切换背景色</button>
<br>
<br>
<div id="d43" >
    Hello JQuery
</div>

<h2>案例4</h2>
<script>
    $(function(){
        /*第一个参数是样式属性，第二个参数是样式值*/
        $("#b44").click(function(){
            $("#d44").css("background-color","pink");
        });
        /*参数是 {} 包含的属性值对。*/
        $("#b45").click(function(){
            $("#d45").css({"background-color":"pink","color":"green"});
        });
    });
</script>
<button id="b44">设置单一样式</button>
<button id="b45">设置多种样式</button>
<br>
<br>
<div id="d44" >
    单一样式，只设置背景色
</div>
<div id="d45" >
    多种样式，不仅设置背景色，还设置字体颜色
</div>

</body>
</html>

5.jQuery 选择器

#table{
border-collapse:collapse;//表格单元格间距样式

border:1px solid #0F0;
}
#table tr{border:1px solid #000000;}
#table td{border:0px;padding: 20px;font-weight: 800}

选择器
$("tagName") 元素
$("id") id
$("className") 类
$("selector1 selector2") 层级
:first
:last		 首尾
:odd
:even		 奇偶
:hidden
:visible		 可见性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]		 属性
:input
:button
:radio
:checkbox
:text
:button
:file
:submit
:image
:reset		 表单对象
:enabled
:disabled
:checked
:selected		 表单对象属性
this 当前元素

  • 元素选择器

  • $("tagName")
    • 根据 标签名 选择所有该标签的元素

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}
.blue{
background-color:blue;
}

给所有的div元素增加背景色

Hello JQuery

Hello JQuery

Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
    .blue{
        background-color:blue;
    }
</style>
<script>
    $(function(){
        $("#b51").click(function(){
            $(".h51").addClass("pink");
            $(".h51 p").addClass("blue");
        });

    });

</script>
<button id="b51">给所有的div元素增加背景色</button>
<br>
<br>
<div class="h51">
    Hello JQuery
</div>

<div class="h51">
    <p>Hello JQuery</p>
</div>

<div class="h51">
    Hello JQuery
</div>

</body>
</html>

  • id选择器

  • $("#id")
    • 根据 id 选择元素
    • id应该是唯一的，如果id重复，则只会选择第一个。

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}

给所有的div元素增加背景色

Hello JQuery
Hello JQuery
Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#b52").click(function(){
            $(".h52").addClass("pink");
        });

    });
</script>
<button id="b52">给所有的div元素增加背景色</button>
<br>
<br>
<div class="h52">
    Hello JQuery
</div>
<div class="h52">
    Hello JQuery
</div>
<div class="h52">
    Hello JQuery
</div>
</body>
</html>

  • 类选择器

  • $(".className")
    • 根据 class 选择元素

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}

给class='d53'的div增加背景色

Hello JQuery
Hello JQuery
Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#b53").click(function(){
            $(".d53").addClass("pink");
        });

    });

</script>
<button id="b53">给class='d53'的div增加背景色</button>
<br>
<br>
<div class="d53">
    Hello JQuery
</div>

<div class="d53" >
    Hello JQuery
</div>

<div  >
    Hello JQuery
</div>
</body>
</html>

  • 层级选择器

  • $("selector1 selector2")
    • 选择 selector1下的selector2元素 。

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}

给id='d54'的div 下的 span 增加背景色

Hello JQuery
Hello JQuery
Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#b54").click(function(){
            $("div#d54 span").addClass("pink");
        });

    });
</script>
<button id="b54">给id='d54'的div 下的 span 增加背景色</button>
<br>
<br>
<div class="d">
    <span>Hello JQuery</span>

</div>
<div class="d" >
    <span>Hello JQuery</span>
</div>
<div id="d54" >
    <span>Hello JQuery</span>
</div>
</body>
</html>

  • 首尾选择器

  • $(selector:first) 满足选择器条件的第一个元素

  • $(selector:last) 满足选择器条件的最后一个元素

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}

第一个增加背景色
最后一个增加背景色

Hello JQuery
Hello JQuery
Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#b61").click(function(){
            $("#d63 div:first").addClass("pink");
        });

        $("#b62").click(function(){
            $("#d63 div:last").addClass("pink");
        });
    });
</script>
<button id="b61">第一个增加背景色</button>
<button id="b62">最后一个增加背景色</button>
<br>
<br>
<div id="d63">
<div>
    <span>Hello JQuery</span>
</div>
<div >
    <span>Hello JQuery</span>
</div>
<div >
    <span>Hello JQuery</span>
</div>
</div>
</body>
</html>

  • 奇偶选择器

  • $(selector:odd) 满足选择器条件的奇数元素

  • $(selector:even) 满足选择器条件的偶数元素

  • 因为是基零的，所以第一排的下标其实是0(是偶数)

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}
.green{
background-color:green;
}


切换奇数背景色
切换偶数背景色

Hello JQuery 0
Hello JQuery 1
Hello JQuery 2
Hello JQuery 3
Hello JQuery 4
Hello JQuery 5
Hello JQuery 6

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
    .green{
        background-color:green;
    }
</style>
<script>
    $(function(){
        $("#b71").click(function(){
            $("#d73 div:odd").toggleClass("pink");
        });
        $("#b72").click(function(){
            $("#d73 div:even").toggleClass("green");
        });
    });
</script>
<!--$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)-->
<button id="b71">切换奇数背景色</button>
<button id="b72">切换偶数背景色</button>
<br>
<br>
<div id="d73">
<div>
    <span>Hello JQuery 0</span>
</div>
<div>
    <span>Hello JQuery 1</span>
</div>
<div >
    <span>Hello JQuery 2</span>
</div>
<div >
    <span>Hello JQuery 3</span>
</div>
<div >
    <span>Hello JQuery 4</span>
</div>
<div >
    <span>Hello JQuery 5</span>
</div>
<div >
    <span>Hello JQuery 6</span>
</div>
</div>
</body>
</html>

  • 可见性选择器

  • $(selector:hidden) 满足选择器条件的不可见的元素
  • $(selector:visible) 满足选择器条件的可见的元素
  • 注； div:visible 和div :visible(有空格)是不同的意思
    • div:visible 表示选中可见的div
    • div :visible(有空格) 表示选中div下可见的元素

运行效果

jQuery 选择器

.pink{
background-color:pink;
}

隐藏可见的
显示不可见的

Hello JQuery 1
Hello JQuery 2
Hello JQuery 3
Hello JQuery 4
Hello JQuery 5
Hello JQuery 6

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#b81").click(function(){
            $("#d83 div:visible").hide();
        });
        $("#b82").click(function(){
            $("#d83 div:hidden").show();
        });
    });
</script>
<button id="b81">隐藏可见的</button>
<button id="b82">显示不可见的</button>
<br>
<br>
<div id="d83">
<div>
    <span>Hello JQuery 1</span>
</div>
<div >
    <span>Hello JQuery 2</span>
</div>
<div >
    <span>Hello JQuery 3</span>
</div>
<div >
    <span >Hello JQuery 4</span>
</div>

<div >
    <span>Hello JQuery 5</span>
</div>
<div >
    <span>Hello JQuery 6</span>
</div>
</div>
</body>
</html>

  • 属性选择器

  • $(selector[attribute]) 满足选择器条件的有某属性的元素

  • $(selector[attribute=value]) 满足选择器条件的属性等于value的元素

  • $(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素

  • $(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素

  • $(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素

  • $(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

运行效果

<!DOCTYPE html>

jQuery 选择器

.pink{
background-color:pink;
}
.green{
background-color:green;
}
.border{
border: 1px blue solid;
}
#d99 button{
margin-top:10px;
display:block;
}
#d99 div{
margin:10px;
}

给有id属性的div切换边框
给id=pink的div切换边框
给有id!=pink属性的div切换边框
给有id以p开头的div切换边框
给有id以k结尾的div切换边框
给有id包含ee的div切换边框
id=pink的div
id=green的div
没有id的div

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
    .pink{
        background-color:pink;
    }
    .green{
        background-color:green;
    }
    .border{
        border: 1px blue solid;
    }
    #d99 button{
        margin-top:10px;
        display:block;
    }
    #d99 div{
        margin:10px;
    }
</style>
<script>
    $(function(){
        $("#b91").click(function(){
            $("#d99 div[id]").toggleClass("border");
        });
        $("#b92").click(function(){
            $("#d99 div[id='pink']").toggleClass("border");
        });
        $("#b93").click(function(){
            $("#d99 div[id!='pink']").toggleClass("border");
        });
        $("#b94").click(function(){
            $("#d99 div[id^='p']").toggleClass("border");
        });
        $("#b95").click(function(){
            $("#d99 div[id$='k']").toggleClass("border");
        });
        $("#b96").click(function(){
            $("#d99 div[id*='ee']").toggleClass("border");
        });
    });
</script>
<div id="d99">
<button id="b91">给有id属性的div切换边框</button>
<button id="b92">给id=pink的div切换边框</button>
<button id="b93">给有id!=pink属性的div切换边框</button>
<button id="b94">给有id以p开头的div切换边框</button>
<button id="b95">给有id以k结尾的div切换边框</button>
<button id="b96">给有id包含ee的div切换边框</button>
<br>
<br>
<div id="pink">
    id=pink的div
</div>
<div id="green">
    id=green的div
</div>
<div >
    没有id的div
</div>
</div>
</body>
</html>

  • 表单元素选择器

  • 表单对象选择器 指的是选中form下会出现的输入元素
    • :input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
    • :button 会选择type=button的input元素和button元素
    • :radio 会选择单选框
    • :checkbox会选择复选框
    • :text会选择文本框，但是不会选择文本域
    • :submit会选择提交按钮
    • :image会选择图片型提交按钮
    • :reset会选择重置按钮
  • 注意:
    • $("td[rowspan!=13] "+value).toggle(500);
      • $("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
      • toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒

  • 注： :submit会把元素选中，因为在一些浏览器中，元素的type默认值是submit，所以会选中它。

运行效果

jQuery 选择器

#d101 table{
border-collapse:collapse;
/*列宽由表格宽度和列宽度设定。*/
table-layout:fixed;
width:80%;
}
#d101 table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
#d101 div button{
display:block;
}

切换所有的:input
切换:button
切换:radio
切换:checkbox
切换:text
切换:password
切换:file
切换:submit
切换:image
切换:reset
说明 表单对象 示例
input按钮 :button
button按钮 :button Button按钮
单选框 :radio
复选框 :checkbox
文本框 :text
文本域
密码框 :password
下拉框 Option
文件上传 :file
提交按钮 :submit
图片型提交按钮 :image
重置按钮 :reset

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<style>
    #d101 table{
        border-collapse:collapse;
        /*列宽由表格宽度和列宽度设定。*/
        table-layout:fixed;
        width:80%;
    }
    #d101 table td{
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    #d101 div button{
        display:block;
    }

</style>
<script>
    $(function(){
        $("#d101 .b").click(function(){
            var value = $(this).val();
            /* alert(value);
             console.log(value);*/
            $("#d101 td[rowspan!=13] "+ value).toggle(500);
        });
    });
</script>

<div id="d101">
    <table>
        <tr>
            <td rowspan="13" valign="top" width="150px">
                <div >
                    <button value=":input" class="b">切换所有的:input</button>
                    <button value=":button" class="b">切换:button</button>
                    <button value=":radio" class="b">切换:radio</button>
                    <button value=":checkbox" class="b">切换:checkbox</button>
                    <button value=":text" class="b">切换:text</button>
                    <button value=":password" class="b">切换:password</button>
                    <button value=":file" class="b">切换:file</button>
                    <button value=":submit" class="b">切换:submit</button>
                    <button value=":image" class="b">切换:image</button>
                    <button value=":reset" class="b">切换:reset</button>
                </div>
            </td>
            <td width="120px">说明</td>
            <td width="120px">表单对象</td>
            <td width="">示例</td>
        </tr>
        <tr>
            <td >input按钮</td>
            <td >:button</td>
            <td><input type="button" value="input按钮"/></td>
        </tr>

        <tr>
            <td>button按钮</td>
            <td >:button</td>
            <td><button>Button按钮</button></td>
        </tr>
        <tr>
            <td>单选框</td>
            <td >:radio</td>
            <td><input type="radio" ></td>
        </tr>
        <tr>
            <td>复选框</td>
            <td >:checkbox</td>
            <td><input type="checkbox"  ></td>
        </tr>

        <tr>
            <td>文本框</td>
            <td >:text</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>文本域</td>
            <td ></td>
            <td><textarea></textarea></td>
        </tr>
        <tr>
            <td>密码框</td>
            <td >:password</td>
            <td><input type="password" /></td>
        </tr>
        <tr>
            <td>下拉框</td>
            <td ></td>
            <td><select><option>Option</option></select></td>
        </tr>

        <tr>
            <td>文件上传</td>
            <td >:file</td>
            <td> <input type="file" /></td>
        </tr>

        <tr>
            <td>提交按钮</td>
            <td >:submit</td>
            <td><input type="submit" /></td>
        </tr>
        <tr>
            <td>图片型提交按钮</td>
            <td >:image</td>
            <td><input type="image" src="http://image002.server110.com/20170522/ea5f557daf9f70b7a03eca56555b471a.gif" /></td>
        </tr>

        <tr>
            <td>重置按钮</td>
            <td >:reset</td>
            <td><input type="reset" /></td>
        </tr>

    </table>
</div>

</body>
</html>

  • 表单对象属性选择器

  • :enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
  • :disabled会选择不可用的输入元素
  • :checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option

  • :selected会选择被选中的option元素

运行效果

<!DOCTYPE html>

jQuery 选择器

#d111 table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
#d111 table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
#d111 div button{
display:block;
}
#d111 .border{
border: 1px blue solid;
}

切换:enabled
切换:disabled
切换:checked
:selected数量
说明 表单对象属性 示例
enabled的按钮 :enabled
disabled的按钮 :disabled
选中的复选框 :checked
选中的下拉列表 :selected

香蕉
葡萄
榴莲

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<style>
    #d111 table{
        border-collapse:collapse;
        table-layout:fixed;
        width:80%;
    }
    #d111 table td{
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    #d111 div button{
        display:block;
    }
    #d111 .border{
        border: 1px blue solid;
    }
</style>
<script>
    $(function(){
        $("#d111 .b").click(function(){
            var value = $(this).val();
            $("#d111 td[rowspan!=13] "+value).toggle(500);
        });

        $("#d111 .b2").click(function(){
            var value = $(this).val();
            var options = $("#d111 td[rowspan!=13] "+value);
            alert("选中了"+options.length+"条记录！");
        });

    });

</script>

<div id="d111">
<table>
    <tr>
        <td rowspan="13" valign="top" width="120">
            <div >
                <button value=":enabled" class="b">切换:enabled</button>
                <button value=":disabled" class="b">切换:disabled</button>
                <button value=":checked" class="b">切换:checked</button>
                <button value=":selected" class="b2">:selected数量</button>
            </div>
        </td>
        <td width="120">说明</td>
        <td width="120">表单对象属性</td>
        <td width="100px">示例</td>
    </tr>
    <tr>
        <td >enabled的按钮</td>
        <td >:enabled</td>
        <td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
    </tr>
    <tr>
        <td >disabled的按钮</td>
        <td >:disabled</td>
        <td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
    </tr>
    <td >选中的复选框</td>
    <td >:checked</td>
    <td>

        <input type="radio" checked="checked" ><br>
        <input type="radio" ><br>
        <input type="checkbox" ><br>
        <input type="checkbox" checked="checked" >
    </td>
    <tr>
        <td>选中的下拉列表</td>
        <td >:selected</td>
        <td>
            <select size="3" multiple="multiple">
                <option selected="selected">香蕉</option>
                <option >葡萄</option>
                <option selected="selected">榴莲</option>
            </select>
        </td>
</table>
<form>
</form>
</div>

</body>
</html>

  • 当前元素选择器

  • 在监听函数中使用 $(this)，即表示触发该事件的组件。

运行效果

<!DOCTYPE html>

jQuery 选择器

点击隐藏

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#b121").click(function(){
            $(this).hide();
        });

    });
</script>

<button id="b121">点击隐藏</button>

</body>
</html>
  • 选择器练习

运行效果

<!DOCTYPE html>

jQuery 练习

#banmaxian table{
border-collapse:collapse;
width:90%;
margin: auto;;
}
#banmaxian tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}

#banmaxian td{
width:25%;
text-align:center;
}

#banmaxian .banmaxian{
background-color: lightgray;
}

点击隐藏
id 名称 血量 伤害
1 盖伦 340 58
2 皇子 320 76
3 提莫 380 38
4 蛇女 400 90

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 练习</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#banmaxian #b").click(function(){
            $("#banmaxian #t").toggle(500);
        });

        $("#banmaxian tr:odd").addClass("banmaxian");
    });
</script>

<style>
    #banmaxian table{
        border-collapse:collapse;
        width:90%;
        margin: auto;;
    }
    #banmaxian tr{
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: lightgray;
        height:35px;
    }

    #banmaxian td{
        width:25%;
        text-align:center;
    }

    #banmaxian .banmaxian{
        background-color: lightgray;
    }

</style>
<div id="banmaxian">
<button id="b">点击隐藏</button>
<table id="t" >
    <tr >
        <td>id</td>
        <td>名称</td>
        <td>血量</td>
        <td>伤害</td>
    </tr>
    <tr >
        <td>1</td>
        <td>盖伦</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr >
        <td>2</td>
        <td>皇子</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr >
        <td>3</td>
        <td>提莫</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr >
        <td>4</td>
        <td>蛇女</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>
</div>

</body>
</html>

6.jQuery 筛选器

选择器
first()
last()
eq(num)		 第一个
最后一个第几个
parent()
parents()		 父
祖先
children()
find()		 儿子
后代
siblings() 同级

  • 第一个 最后一个 第几个

  • 首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
    • first() 第1个元素
    • last() 最后一个元素
    • eq(num) 第num个元素
    • 注: num基0

运行效果

<!DOCTYPE html>

jQuery 筛选器

.pink{
background-color:pink;
}

切换第1个div背景色
切换最后1个div背景色
切换第5个div背景色
Hello JQuery 1
Hello JQuery 2
Hello JQuery 3
Hello JQuery 4
Hello JQuery 5
Hello JQuery 6

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<style>
    .pink{
        background-color:pink;
    }
</style>
<script>
    $(function(){
        $("#shaixuanqi #b1").click(function(){
            $("#shaixuanqi div").first().toggleClass("pink");
        });
        $("#shaixuanqi #b2").click(function(){
            $("#shaixuanqi div").last().toggleClass("pink");
        });
        $("#shaixuanqi #b3").click(function(){
            $("#shaixuanqi div").eq(4).toggleClass("pink");
        });
    });
</script>
<div id="shaixuanqi">
<button id="b1">切换第1个div背景色</button>
<button id="b2">切换最后1个div背景色</button>
<button id="b3">切换第5个div背景色</button>
<br>
<br>
<div>
    <span>Hello JQuery 1</span>
</div>
<div >
    <span>Hello JQuery 2</span>
</div>
<div >
    <span>Hello JQuery 3</span>
</div>
<div >
    <span>Hello JQuery 4</span>
</div>
<div >
    <span>Hello JQuery 5</span>
</div>
<div >
    <span>Hello JQuery 6</span>
</div>
</div>

</body>
</html>

  • 父祖先

  • parent() 选取最近的一个父元素

  • parents() 选取所有的祖先元素

运行效果

<!DOCTYPE html>

jQuery 筛选器

#fz6 div{
padding:20px;
}
#fz6 div#grandParentDiv{
background-color:pink;
}
#fz6 div#parentDiv{
background-color:green;
}
#fz6 div#currentDiv{
background-color:red;
}
#fz6 .b{
border: 2px solid black;
}

改变parent()的边框
改变parents()的边框
祖先元素
父元素
当前元素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<style>
    #fz6 div{
        padding:20px;
    }
    #fz6 div#grandParentDiv{
        background-color:pink;
    }
    #fz6 div#parentDiv{
        background-color:green;
    }
    #fz6 div#currentDiv{
        background-color:red;
    }
    #fz6 .b{
        border: 2px solid black;
    }
</style>
<script>
    $(function(){
        $("#fz6 #b1").click(function(){
            $("#fz6 #currentDiv").parent().toggleClass("b");
        });
        $("#fz6 #b2").click(function(){
            $("#fz6 #currentDiv").parents().toggleClass("b");
        });
    });
</script>
<div id="fz6">
<button id="b1">改变parent()的边框</button>
<button id="b2">改变parents()的边框</button>
<div id="grandParentDiv" >
    祖先元素
    <div id="parentDiv">
        父元素
        <div id="currentDiv">当前元素</div>
    </div>
</div>
</div>

</body>
</html>

  • 儿子 后代

  • children(): 筛选出儿子元素 (紧挨着的子元素)
  • find(selector): 筛选出后代元素

  • 注: find() 必须使用参数 selector

运行效果

<!DOCTYPE html>

jQuery 筛选器

#eh6 div{
padding:20px;
}
#eh6 div.grandChildrenDiv{
background-color:pink;
}
#eh6 div.childrenDiv{
background-color:green;
margin:10px;
}
#eh6 div#currentDiv{
background-color:red;
}
#eh6 .b{
border: 2px solid black;
}

改变children()的边框
改变find()的边框
当前元素
儿子元素1
后代元素n
儿子元素2
后代元素n

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#eh6 #b1").click(function(){
            $("#eh6 #currentDiv").children().toggleClass("b");
        });
        $("#eh6 #b2").click(function(){
            $("#eh6 #currentDiv").find("div").toggleClass("b");
        });
    });
</script>
<style>
    #eh6 div{
        padding:20px;
    }
    #eh6 div.grandChildrenDiv{
        background-color:pink;
    }
    #eh6 div.childrenDiv{
        background-color:green;
        margin:10px;
    }
    #eh6 div#currentDiv{
        background-color:red;
    }
    #eh6 .b{
        border: 2px solid black;
    }
</style>
<div id="eh6">
<button id="b1">改变children()的边框</button>
<button id="b2">改变find()的边框</button>
<div id="currentDiv" >
    当前元素
    <div class="childrenDiv">
        儿子元素1
        <div class="grandChildrenDiv">后代元素n</div>
    </div>
    <div class="childrenDiv">
        儿子元素2
        <div class="grandChildrenDiv">后代元素n</div>
    </div>
</div>
</div>

</body>
</html>
  • 同级
  • siblings(): 同级(同胞)元素

运行效果

<!DOCTYPE html>

jQuery 筛选器

#tj6 div{
padding:20px;
background-color:pink;
margin:10px;
}
#tj6 div#parentDiv{
background-color:green;
}
#tj6 div#currentDiv{
background-color:red;
}
#tj6 .b{
border: 2px solid black;
}

给同级加上边框
父元素
当前元素
同级元素
同级元素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 筛选器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#tj6 #b1").click(function(){
            $("#tj6 #currentDiv").siblings().toggleClass("b");
        });

    });
</script>
<style>
    #tj6 div{
        padding:20px;
        background-color:pink;
        margin:10px;
    }
    #tj6 div#parentDiv{
        background-color:green;
    }
    #tj6 div#currentDiv{
        background-color:red;
    }
    #tj6 .b{
        border: 2px solid black;
    }
</style>
<div id="tj6">
<button id="b1">给同级加上边框</button>
<div id="parentDiv" >
    父元素
    <div id="currentDiv">
        当前元素
    </div>
    <div >
        同级元素
    </div>
    <div >
        同级元素
    </div>
</div>
</div>

</body>
</html>

7.jQuery 属性

属性
attr 获取
attr(属性，值) 修改
removeAttr 删除
prop与attr prop与attr的区别
  • 获取

运行效果

<!DOCTYPE html>

jQuery 属性

获取align属性
获取自定义属性 game

居中标题

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#hq7 #b1").click(function(){
            alert("align属性是:" + $("#hq7 #h").attr("align") );
        });
        $("#hq7 #b2").click(function(){
            alert("game属性是:" + $("#hq7 #h").attr("game") );
        });
    });
</script>
<div id="hq7">
<button id="b1">获取align属性</button>
<button id="b2">获取自定义属性 game</button>
<br>
<br>
<h1 id="h" align="center" game="LOL">居中标题</h1>
</div>

</body>
</html>
  • 修改
  • 通过attr(attr,value)修改属性

运行效果

<!DOCTYPE html>

jQuery 属性

修改align属性为right

居中标题

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function () {
        $("#xg7 #b1").click(function () {
            $("#xg7 #h").attr("align", "right");
        });

    });
</script>
<div id="xg7">
    <button id="b1">修改align属性为right</button>
    <br>
    <br>
    <h1 id="h" align="center">居中标题</h1>
</div>

</body>
</html>
  • 删除

运行效果

<!DOCTYPE html>

jQuery 属性

删除align属性

居中标题

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#sc7 #b1").click(function(){
            $("#sc7 #h").removeAttr("align");
        });
    });
</script>
<div id="sc7">
    <button id="b1">删除align属性</button>
    <br>
    <br>
    <h1 id="h" align="center" game="LOL">居中标题</h1>
</div>

</body>
</html>
  • prop与attr的区别
    • 与prop一样attr也可以用来获取与设置元素的属性。区别在于，对于自定义属性和选中属性的处理。选中属性指的是 checked,selected 这2种属性
        1. 对于自定义属性 attr能够获取，prop不能获取
        1. 对于选中属性
    • attr 只能获取初始值， 无论是否变化
    • prop 能够访问变化后的值，并且以true|false的布尔型返回。
    • 所以在访问表单对象属性的时候，应该采用prop而非attr

运行效果

<!DOCTYPE html>

jQuery 属性

button{
display:block;
}

通过attr获取自定义属性 game
通过prop获取自定义属性 game
通过attr获取 checked属性
通过prop获取 checked属性




选中的复选框

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#pa7 #b1").click(function(){
            alert("game属性是:" + $("#pa7 #c").attr("game") );
        });

        $("#pa7 #b2").click(function(){
            alert("game属性是:" + $("#pa7 #c").prop("game") );
        });

        $("#pa7 #b3").click(function(){
            alert("checked属性是:" + $("#pa7 #c").attr("checked") );
        });

        $("#pa7 #b4").click(function(){
            alert("checked属性是:" + $("#pa7 #c").prop("checked") );
        });
    });
</script>
<style>
    button{
        display:block;
    }
</style>
<div id="pa7">
    <button id="b1">通过attr获取自定义属性 game</button>
    <button id="b2">通过prop获取自定义属性 game</button>
    <button id="b3">通过attr获取 checked属性</button>
    <button id="b4">通过prop获取 checked属性</button>
    <br>
    <br>
    <input type="checkbox"  id="c" game="LOL" checked="checked"> 选中的复选框
</div>

</body>
</html>

8.jQuery 常见效果

常见效果
show
hide
toggle		 显示
隐藏
切换
slideUp
slideDown
slideToggle		 向上滑动
向下滑动
滑动切换
fadeIn
fadeOut
fadeToggle
fadeTo		 淡入
淡出
淡入淡出切换
指定淡入程度
animate 自定义动画效果
callback 回调函数
  • 显示 隐藏 切换
    • 显示 隐藏 切换 分别通过show(), hide(),toggle()实现
    • 也可以加上毫秒数，表示延时操作,比如show(2000)

运行效果

jQuery 常见效果

#xyq88 button{
display:block;
}
#xyq88 div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}

立即隐藏
立即显示
立即切换
延时显示
延时隐藏
延时切换
用于演示效果的DIV

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常见效果</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        var div = $("#d");
        $("#xyq88 #b1").click(function(){
            div.hide();
        });
        $("#xyq88 #b2").click(function(){
            div.show();
        });
        $("#xyq88 #b3").click(function(){
            div.toggle();
        });
        $("#xyq88 #b4").click(function(){
            div.show(1000);
        });
        $("#xyq88 #b5").click(function(){
            div.hide(1000);
        });
        $("#xyq88 #b6").click(function(){
            div.toggle(1000);
        });
    });
</script>

<style>
    #xyq88 button{
        display:block;
    }
    #xyq88 div{
        border:solid 1px gray;
        background-color:pink;
        width:300px;
        height:100px;
    }
</style>

<div id="xyq88">
    <button id="b1">立即隐藏</button>
    <button id="b2">立即显示</button>
    <button id="b3">立即切换</button>
    <button id="b4">延时显示</button>
    <button id="b5">延时隐藏</button>
    <button id="b6">延时切换</button>
    <br>
    <br>
    <div id="d">
        用于演示效果的DIV
    </div>
</div>

</body>
</html>
  • 向上滑动 向下滑动 滑动切换
    • 向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
    • 也可以加上毫秒数，表示延时操作，比如slideUp(2000)

运行效果

<!DOCTYPE html>

jQuery 常见效果

#xxh88 button{
display:block;
}
#xxh88 div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}

向上滑动
向下滑动
滑动切换
延时向上滑动
延时向下滑动
延时滑动切换
用于演示效果的DIV

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常见效果</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        var div = $("#xxh88 #d");
        $("#xxh88 #b1").click(function(){
            div.slideUp();
        });
        $("#xxh88 #b2").click(function(){
            div.slideDown();
        });
        $("#xxh88 #b3").click(function(){
            div.slideToggle();
        });
        $("#xxh88 #b4").click(function(){
            div.slideUp(2000);
        });
        $("#xxh88 #b5").click(function(){
            div.slideDown(2000);
        });
        $("#xxh88 #b6").click(function(){
            div.slideToggle(2000);
        });
    });
</script>
<style>
    #xxh88 button{
        display:block;
    }
    #xxh88 div{
        border:solid 1px gray;
        background-color:pink;
        width:300px;
        height:100px;
    }
</style>

<div id="xxh88">
    <button id="b1">向上滑动</button>
    <button id="b2">向下滑动</button>
    <button id="b3">滑动切换</button>
    <button id="b4">延时向上滑动</button>
    <button id="b5">延时向下滑动</button>
    <button id="b6">延时滑动切换</button>
    <br>
    <br>
    <div id="d">
        用于演示效果的DIV
    </div>
</div>

</body>
</html>
  • 淡入 淡出 淡入淡出切换 指定淡入程度
    • 淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
    • 也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
    • fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入

运行效果

<!DOCTYPE html>

jQuery 常见效果

#dddz88 button{
display:block;
}
#dddz88 table div{
border:solid 1px gray;
background-color:pink;
width:80px;
height:50px;
}
#dddz88 div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}

淡出
淡入
淡入淡出切换
延时淡出
延时淡入
延时滑淡入淡出切换
fadeTo
用于演示效果的DIV
用于演示fadeTo 20%
用于演示fadeTo 50%
用于演示fadeTo 80%

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常见效果</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        var div = $("#dddz88 #d");
        $("#dddz88 #b1").click(function(){
            div.fadeIn();
        });
        $("#dddz88 #b2").click(function(){
            div.fadeOut();
        });
        $("#dddz88 #b3").click(function(){
            div.fadeToggle();
        });
        $("#dddz88 #b4").click(function(){
            div.fadeIn(2000);
        });
        $("#dddz88 #b5").click(function(){
            div.fadeOut(2000);
        });
        $("#dddz88 #b6").click(function(){
            div.fadeToggle(2000);
        });
        $("#dddz88 #b7").click(function(){
            $("#dddz88 #d1").fadeTo("slow",0.2);
            $("#dddz88 #d2").fadeTo("slow",0.5);
            $("#dddz88 #d3").fadeTo("slow",0.8);
        });
    });

</script>
<style>
    #dddz88 button{
        display:block;
    }
    #dddz88 table div{
        border:solid 1px gray;
        background-color:pink;
        width:80px;
        height:50px;
    }
    #dddz88 div{
        border:solid 1px gray;
        background-color:pink;
        width:300px;
        height:100px;
    }
</style>

<div id="dddz88">
    <button id="b2">淡出</button>
    <button id="b1">淡入</button>
    <button id="b3">淡入淡出切换</button>
    <button id="b5">延时淡出</button>
    <button id="b4">延时淡入</button>
    <button id="b6">延时滑淡入淡出切换</button>
    <button id="b7">fadeTo</button>
    <br>
    <br>
    <div id="d">
        用于演示效果的DIV
    </div>
    <table>
        <tr>
            <td>
                <div id="d1">
                    用于演示fadeTo 20%
                </div>
            </td>
            <td>
                <div id="d2">
                    用于演示fadeTo 50%
                </div>
            </td>
            <td>
                <div id="d3">
                    用于演示fadeTo 80%
                </div>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • 自定义动画效果
    • 通过animate 可以实现更为丰富的动画效果
    • animate()第一个参数为css样式
    • animate()第二个参数为延时毫秒
    • 注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

运行效果

<!DOCTYPE html>

jQuery 常见效果

#zdydh88 button{
display:block;
}

#zdydh88 div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}

自定义动画

1. 向右移动100px

2. 向左下移动50px，同时高度变小

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常见效果</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        var div = $("#zdydh88 #d");
        $("#zdydh88 #b1").click(function(){
            div.animate({left:'100px'},2000);
            div.animate({left:'0px',top:'50px',height:'50px'},2000);
        });
    });
</script>

<style>
    #zdydh88 button{
        display:block;
    }

    #zdydh88 div{
        background-color:pink;
        width:200px;
        height:80px;
        font-size:12px;
        position:relative;
    }
</style>

<div id="zdydh88">
    <button id="b1">自定义动画</button>
    <br>
    <br>
    <div id="d">
        <p>1. 向右移动100px</p>
        <p>2. 向左下移动50px，同时高度变小</p>
    </div>
</div>

</body>
</html>
  • 回调函数
    • 效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
    • 好在，效果方法都提供对回调函数callback()的支持。
    • 只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

运行效果

<!DOCTYPE html>

jQuery 常见效果

#hdhs88 button{
display:block;
}
#hdhs88 div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}

自定义动画结束时，会有提示框

1. 向右移动100px

2. 向左下移动50px，同时高度变小

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常见效果</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        var div = $("#hdhs88 #d");
        $("#hdhs88 #b1").click(function(){
            div.animate({left:'100px'},2000);
            div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
                alert("动画演示结束");
            });
        });
    });
</script>

<style>
    #hdhs88 button{
        display:block;
    }
    #hdhs88 div{
        background-color:pink;
        width:200px;
        height:80px;
        font-size:12px;
        position:relative;
    }
</style>

<div id="hdhs88">
    <button id="b1">自定义动画结束时，会有提示框</button>
    <br>
    <br>
    <div id="d">
        <p>1. 向右移动100px</p>
        <p>2. 向左下移动50px，同时高度变小</p>
    </div>
</div>

</body>
</html>

9.jQuery 事件

mouseenter()
mouseleave()
mouseover()
mouseout()

事件
$(document).ready()
$()
load()		 加载
click()
dblclick()		 点击
keydown()
keypress()
keyup()		 键盘
mousedown()
mouseup()
mousemove()		 鼠标
focus()
blur()		 焦点
change() 改变
submit() 提交
on() 绑定事件
trigger() 触发事件
  • 1.加载
    • 页面加载有两种方式表示
      1. $(document).ready();
      1. $(); 这种比较常用
    • 图片加载用load()函数

运行效果

<!DOCTYPE html>

jQuery 事件

第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(document).ready(function(){
        $("#jz99 #message1").html("页面加载成功");
    });
    $(function(){
        $("#jz99 #img").load(function(){
            $("#jz99 #message2").html("图片加载成功");
        });
    });
</script>

<div id="jz99">
    <div id="message1"></div>
    <div id="message2"></div>
    <img id="img" src="http://image002.server110.com/20170522/ea5f557daf9f70b7a03eca56555b471a.gif">
</div>

</body>
</html>
  • 2.点击
    • click() 表示单击
    • dblclick() 表示双击
    • 注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

运行效果

<!DOCTYPE html>

jQuery 事件

测试单击和双击

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#dj99 #b").click(function(){
            $("#message").html("单击按钮");
        });
        $("#dj99 #b").dblclick(function(){
            $("#message").html("双击按钮");
        });
    });
</script>

<div id="dj99">
    <div id="message"></div>
    <button id="b">测试单击和双击</button>
</div>

</body>
</html>
  • 3.键盘
    • keydown 表示按下键盘
    • keypress 表示按下键盘
    • keyup 表示键盘弹起
    • 这三者的区别分别表现在发生的 先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
      • 先后顺序： 按照 keydown keypress keyup 顺序发生
      • 键盘按钮值：
        • 通过event对象的which属性获取键盘的值
        • keydown和keyup 能获取所有按键，不能识别大小写
        • keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
      • 文本取值：
        • keydown和keypress：不能获取最后一个字符
        • keyup： 获取所有字符
    • 如图所例，敲入ab
      • 发生的先后顺序是 keydown,keypress,keyup
      • keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
      • keydown和keypress只能取到文本值a, keyup可以取到ab

运行效果

<!DOCTYPE html>

jQuery 事件

#jp99 tr#action div{
border: 1px solid black;
height:50px;
background-color:red;
}
#jp99 tr#value div,tr#key div{

height:50px;
background-color:#d1d1d1;
}
#jp99 td{
width:25%;
}

输入框：
keydown keypress keyup
行为
按键
取值

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    var order = 0;
    var clearTimer=null;
    $(function(){
        $("#jp99 #i").keydown(function(e){
            var selector = "keydown";
            show(selector,e,$(this).val());
        });
        $("#jp99 #i").keypress(function(e){
            var selector = "keypress";
            show(selector,e,$(this).val());
        });
        $("#jp99 #i").keyup(function(e){
            var selector = "keyup";
            show(selector,e,$(this).val());
        });
    });
    function show(selector,e,inputvalue){
        clearTimeout(clearTimer);
        action(selector);
        key(selector,e);
        value(selector,inputvalue);
        clearTimer= setTimeout(clear,4000);
    }
    function action(selector){
        $("#jp99 #"+selector+"Action").css("background-color","green");
        $("#jp99 #"+selector+"Action").html("顺序: " + (++order ) );
    }
    function value(selector,value){
        $("#jp99 #"+selector+"Value").html(value);
    }
    function key(selector,e){
        $("#jp99 #"+selector+"Key").html(e.which);
    }
    function clear(){
        order = 0;
        $("#jp99 tr#action div").css("background-color","red");
        $("#jp99 tr div").html("");
    }
</script>
<style>
    #jp99 tr#action div{
        border: 1px solid black;
        height:50px;
        background-color:red;
    }
    #jp99 tr#value div,tr#key div{

        height:50px;
        background-color:#d1d1d1;
    }
    #jp99 td{
        width:25%;
    }
</style>

<div id="jp99">
    输入框：<input id="i">
    <table width="100%">
        <tr>
            <td></td>
            <td>keydown</td>
            <td>keypress</td>
            <td>keyup</td>
        </tr>
        <tr id="action">
            <td>行为</td>
            <td><div id="keydownAction"></div></td>
            <td><div id="keypressAction"></div></td>
            <td><div id="keyupAction"></div></td>
        </tr>

        <tr id="key">
            <td>按键</td>
            <td><div id="keydownKey"></div></td>
            <td><div id="keypressKey"></div></td>
            <td><div id="keyupKey"></div></td>
        </tr>
        <tr id="value">
            <td>取值</td>
            <td><div id="keydownValue"></div></td>
            <td><div id="keypressValue"></div></td>
            <td><div id="keyupValue"></div></td>
        </tr>
    </table>
</div>

</body>
</html>
  • 4.鼠标
    • mousedown 表示鼠标按下

    • mouseup表示鼠标弹起

    • mousemove表示鼠标进入
    • mouseenter表示鼠标进入

    • mouseover表示鼠标进入

    • mouseleave表示鼠标离开

    • mouseout表示鼠标离开

    • 进入事件有3个 mousemove mouseenter mouseover
      • mousemove ：当鼠标进入元素，每移动一下都会被调用
      • mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
      • mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
    • mouseenter 和 mouseover的区别
      • mouseenter: 当鼠标经过其子元素不会被调用
      • mouseover：当鼠标经过其子元素会被调用
    • mouseleave 和 mouseout的区别
      • mouseleave: 当鼠标经过其子元素不会被调用
      • mouseout：当鼠标经过其子元素会被调用

运行效果

<!DOCTYPE html>

jQuery 事件

#sb99 div{
background-color:pink;
margin:20px;
padding:10px;
}
#sb99 .subDiv{
background-color:green;
margin:10px;
}
#sb99 .parentDiv{
background-color:pink;
height:80px;
}
#sb99 table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
#sb99 td{
border: 1.5px solid #d1d1d1;
vertical-align:top;
padding:20px 0px;
}

事件 效果演示
mousedown
mouseup		 鼠标按下弹起测试
mousemove
mouseenter
mouseover
mouseleave
mouseout
mousemove 当鼠标进入元素，每移动一下都会被调用 次数0
mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数0
mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数0
mouseleave 当鼠标离开元素，调用一下 次数0
mouseout 当鼠标离开元素，调用一下 0
mouseenter
mouseover
mouseenter 经过其子元素不会被调用 次数0
div中的子元素
mouseover 经过其子元素会被调用 次数0
div中的子元素
mouseleave
mouseout
mouseleave 经过其子元素不会被调用 次数0
div中的子元素

mouseout 经过其子元素会被调用 次数0

div中的子元素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#sb99 #downup").mousedown(function(){
            $(this).html("鼠标按下");
        });
        $("#sb99 #downup").mouseup(function(){
            $(this).html("鼠标弹起");
        });
        var moveNumber  =0;
        var enterNumber  =0;
        var leaveNumber  =0;
        var overNumber  =0;
        var outNumber  =0;

        var enterNumber1  =0;
        var overNumber1  =0;

        var leaveNumber1  =0;
        var outNumber1  =0;
        $("#sb99 #move").mousemove(function(){
            $("#move span.number" ).html(++moveNumber);
        });
        $("#sb99 #enter").mouseenter(function(){
            $("#enter span.number" ).html(++enterNumber);
        });
        $("#sb99 #leave").mouseleave(function(){
            $("#leave span.number" ).html(++leaveNumber);
        });
        $("#sb99 #over").mouseover(function(){
            $("#over span.number" ).html(++overNumber);
        });
        $("#sb99 #out").mouseout(function(){
            $("#out span.number" ).html(++outNumber);
        });

        $("#sb99 #enter1").mouseenter(function(){
            $("#enter1 span.number" ).html(++enterNumber1);
        });
        $("#sb99 #over1").mouseover(function(){
            $("#over1 span.number" ).html(++overNumber1);
        });

        $("#sb99 #leave1").mouseleave(function(){
            $("#leave1 span.number" ).html(++leaveNumber1);
        });

        $("#sb99 #out1").mouseout(function(){
            $("#out1 span.number" ).html(++outNumber1);
        });
    });
</script>
<style>
    #sb99 div{
        background-color:pink;
        margin:20px;
        padding:10px;
    }
    #sb99 .subDiv{
        background-color:green;
        margin:10px;
    }
    #sb99 .parentDiv{
        background-color:pink;
        height:80px;
    }
    #sb99 table{
        width:100%;
        border-collapse:collapse;
        table-layout:fixed;
    }
    #sb99 td{
        border: 1.5px solid #d1d1d1;
        vertical-align:top;
        padding:20px 0px;
    }
</style>

<div id="sb99">
    <table >
        <tr>
            <td width="100px">事件</td>
            <td>效果演示</td>
        </tr>
        <tr>
            <td>mousedown <br />
                mouseup<br /></td>
            <td>
                <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button>    </td>
        </tr>
        <tr>
            <td>mousemove<br />
                mouseenter<br />
                mouseover<br />
                mouseleave<br />
                mouseout</td>
            <td>
                <div id="move">mousemove 当鼠标进入元素，每移动一下都会被调用 次数<span class="number">0</span></div>
                <div id="enter">mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
                <div id="over">mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
                <div id="leave">mouseleave 当鼠标离开元素，调用一下 次数<span class="number">0</span></div>
                <div id="out">mouseout 当鼠标离开元素，调用一下 <span class="number">0</span></div>  </tr>
        <tr>
            <td>mouseenter<br />
                mouseover</td>
            <td>

                <div id="enter1" class="parentDiv">
                    mouseenter 经过其子元素不会被调用 次数<span class="number">0</span>

                    <div class="subDiv">div中的子元素      </div>
                </div>

                <div id="over1" class="parentDiv">
                    mouseover  经过其子元素会被调用 次数<span class="number">0</span>

                    <div class="subDiv">div中的子元素      </div>
                </div>    </td>
        </tr>
        <tr>
            <td>mouseleave<br />
                mouseout    </td>
            <td>
                <div id="leave1" class="parentDiv">
                    mouseleave 经过其子元素不会被调用 次数<span class="number">0</span>

                    <div class="subDiv">div中的子元素      </div>
                </div>

                <div id="out1" class="parentDiv">

                    mouseout 经过其子元素会被调用 次数<span class="number">0</span>

                    <div class="subDiv">div中的子元素      </div>
                </div>    </td>
        </tr>
    </table>
</div>

</body>
</html>
  • 5.焦点
    • focus() 获取焦点
    • blur() 失去焦点

运行效果

<!DOCTYPE html>

jQuery 事件

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#jd99 input").focus(function(){
            $(this).val("获取了焦点");
        });
        $("#jd99 input").blur(function(){
            $(this).val("失去了焦点");
        });
    });
</script>
<style>
</style>

<div id="jd99">
    <input type="text" >

    <input type="text" >
</div>

</body>
</html>
  • 6.改变
    • change() 内容改变
    • 注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。

运行效果

<!DOCTYPE html>

jQuery 事件

HTML代码

  • 7.提交
    • submit() 提交form表单

运行效果

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#gb99 #input1").change(function(){
            var text = $(this).val();
            $("#gb99 #message").html("input1的内容变为了"+text);
        });

    });
</script>
<style>
</style>

<div id="gb99">
    <div id="message"></div>
    <input id="input1" type="text" >
    <br>
    <input size="50" id="input2"type="text" value="只有当input1失去焦点的时候，才会触发change事件" >
</div>

</body>
</html>
  • 8.绑定事件
    • 以上所有的事件处理，都可以通过on() 绑定事件来处理

运行效果

<!DOCTYPE html>

jQuery 事件

账号 :

密码:

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#bd99 #form").submit(function(){
            alert("提交账号密码");
        });
    });
</script>
<div id="bd99">
    <form id="form" action="">
        账号 : <input name="name" type=""> <br>
        密码: <input name="password" type=""><br>
        <input type="submit" value="登陆">
    </form>
</div>

</body>
</html>
  • 9.触发事件
    • 触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。

运行效果

<!DOCTYPE html>

jQuery 事件

测试单击和双击

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#cf99 #b").on("click",function(){
            $("#message").html("单击按钮");
        });
        $("#cf99 #b").on("dblclick",function(){
            $("#message").html("双击按钮");
        });
    });
</script>
<div id="cf99">
    <div id="message"></div>
    <button id="b">测试单击和双击</button>
</div>

</body>
</html>

10.JQuery 数组操作

数组操作
$.each() 遍历
$.unique() 去除重复
$.inArray() 是否存在$.inArray
  • 遍历
    • $.each 遍历一个数组
    • 第一个参数是数组
    • 第二个参数是回调函数 i是下标，n是内容

运行效果

<!DOCTYPE html>

jQuery 数组操作

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 数组操作</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    var a = new Array(1,2,3);
    $.each( a, function(i, n){
        document.write( "元素[" + i + "] : " + n + "<br>" );
    })
    document.close();
</script>

</body>
</html>
  • 去除重复
    • $.unique() 去掉重复的元素
      -注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。

运行效果

<!DOCTYPE html>

jQuery 数组操作

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 数组操作</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    var a = new Array(5,2,4,2,3,3,1,4,2,5);
    a.sort();
    $.unique(a);
    $.each( a, function(i, n){
        document.write( "元素[" + i + "] : " + n + "<br>" );
    })
    document.close();
</script>

</body>
</html>
  • 是否存在$.inArray

运行效果

<!DOCTYPE html>

jQuery 数组操作

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 数组操作</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    var a = new Array(1,2,3,4,5,6,7,8);
    document.write($.inArray(9,a));
    document.close();
</script>

</body>
</html>

11.jQuery 字符串操作 $.TRIM()

字符串操作
$.trim() 去除首尾空白
  • 去除首尾空白

运行效果

<!DOCTYPE html>

jQuery 字符串操作

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 字符串操作</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
    document.write($.trim(" Hello JQuery    "));
    document.close();
</script>
</body>
</html>

12.jQuery对象和DOM节点对象进行互相转换

jQuery对象和DOM节点对象进行互相转换
get(0)或者[0] JQuery转DOM
$() DOM转JQuery
  • JQuery转DOM
    • 通过get(0)或者[0] 把JQuery对象转为DOM对象

运行效果

<!DOCTYPE html>

jQuery jQuery对象和DOM节点对象进行互相转换

JQuery对象div转为DOM对象d

.pink{
background-color:pink;
}

Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery jQuery对象和DOM节点对象进行互相转换</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#jdb1212").click(function(){
            var div= $("#jdd1212");
            var d = div[0];
            var s ="JQuery对象是 " + div;
            s +="\n对应的DOM对象是 " + d
            alert(s);
        });
    });

</script>
<button id="jdb1212">JQuery对象div转为DOM对象d</button>
<br>
<br>
<style>
    .pink{
        background-color:pink;
    }
</style>

<div id="jdd1212">
    Hello JQuery
</div>

</body>
</html>
  • DOM转JQuery
    • 通过$() 把DOM对象转为JQuery对象

运行效果

<!DOCTYPE html>

jQuery jQuery对象和DOM节点对象进行互相转换

DOM对象div转为JQuery对象d

.pink{
background-color:pink;
}

Hello JQuery

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery jQuery对象和DOM节点对象进行互相转换</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $("#djb1212").click(function(){
            var div= document.getElementById("djd1212");
            var d = $(div);
            var s ="DOM对象是 " + div;
            s +="\n对应的JQuery对象是 " + d
            alert(s);
        });
    });
</script>
<button id="djb1212">DOM对象div转为JQuery对象d</button>
<br>
<br>

<style>
    .pink{
        background-color:pink;
    }
</style>

<div id="djd1212">
    Hello JQuery
</div>

</body>
</html>