1.jQuery简介

为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器
当前流行的JavaScript 库有
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

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

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

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

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

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 事件

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>

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

jQuery系列第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
jQuery 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
ASP.NET MVC 全局过滤器（FilterConfig）、标记在控制器上和方法上的筛选器执行顺序
FilterConfig->控制器上的筛选器-->方法上的筛选器(大-->小,上-->下) 全局-->控制器->个别尝试的时候记得把返回true protecte ...
第三章 C#循环与方法
第一节1-For循环入门语法: for(条件表达式) { 执行语句 } 练习: 第三章作业1.写一个程序打印100到200的值;2.写一个程序从10打印到1:3.写一个程序打印10到30之间的所有偶 ...
第三章 jQuery总结参考文本
jQuery jQuery是javascript的一个函数库,非常方便,非常主流利用jQuery开发步骤: 1导入jQuery库 2在$(function(){})的{}中编写jQuery代码 ①j ...
jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
jquery live()只支持css选择器
昨天在处理过keypress键盘事件后,今天要把用户在页面上动态添加的字段条目加上删除功能,就是在每个字段后面加上一个漂亮的小按钮,当用户点击这个按钮,相应的条目就被从数据库中删除. 为了实现这种功能 ...
vue-loader 调用了cssLoaders方法配置了css加载器属性。
module: { loaders: [ // 这里也是相应的配置,test就是匹配文件,loader是加载器, { test: /\.vue$/, loader: 'vue' }, { test: ...

随机推荐

web客户端与服务器端二进制传输
demo:https://pan.baidu.com/s/1gfEiJ1D 前端采用js,后端采用.net 主要实现js和服务器端之间用二进制通信
数独_erlang解题代码
前几天LP玩数独,玩到大师级各种被虐,我看了看说,分分钟帮你做出来, 结果当然没有做出来. 于是上网搜了下数独的解题代码,看了下C的代码,大多是递归之类的(如http://blog.sina.com. ...
vs环境open读写创建
vs环境openfd = open(save_as_file, O_RDWR|O_CREAT);//创建文件属性为只读fd = open(save_as_file, O_RDWR|O_CREAT, S ...
谈谈Java中的volatile（转载）
内存可见性留意复合类操作解决num++操作的原子性问题禁止指令重排序总结内存可见性 volatile是Java提供的一种轻量级的同步机制,在并发编程中,它也扮演着比较重要的角色.同synch ...
scrapy python2升级python3遇到的坑
换成Python3首先pycharm先执行: 然后看代码自己所需要的第三方库都要重新装然后执行代码: 遇到这样的错如下: SyntaxError: invalid syntax 先检查print 所 ...
linux下使用命令修改IP地址
使用root用户登录进入Linux,打开进去终端在终端中输入:vi /etc/sysconfig/network-scripts/ifcfg-eth0 (最后的eth0是网卡名,我的是Auto_et ...
keras 实现人工神经网络
#encoding=utf-8 import numpy as np from keras.models import Sequential from keras.layers import Dens ...
0913_Python初识及变量
1.Python3不需加utf-8,Python必须加utf-82.单行注释用#,多行注释用""" """3.变量:只能由字母.数字.下划线 ...
MFC VC++ 根据文件名获取程序的Pid
环境:PC Win7 VS VC++ .MFC 使用,输入文件名即可获取程序的pid,进而可以对程序进行操作,比如关闭Porcess等. 头文件: #include <TlHelp32.h> ...
一篇提及如何通过串口读取并提取GPS信号的论文
一篇提及如何通过串口读取并提取GPS信号的论文作者:崔杰梁计春王国军目前,在用计算机进行数据传输时,常用的是串行通信方式.在Visual C++的编程中,既可以用Windows API函数进行 ...

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

1.jQuery简介

2.jQuery使用HelloWorld

3.JQuery 常见方法

取值案例1

取值案例2

取值案例3

4.jQuery 中对CSS样式的操作

案例1

案例2

案例3

案例4

5.jQuery 选择器

6.jQuery 筛选器

7.jQuery 属性

居中标题

居中标题

居中标题

8.jQuery 常见效果

9.jQuery 事件

10.JQuery 数组操作

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

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

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

随机推荐

热门专题