JQuery基础知识学习总结

JQuery基础知识学习总结

什么JQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

使用JQuery完成页面定时弹出广告

定时器:

​ setInterval clearInterval

​ setTimeout clearTimeout

显示: img.style.display = “block”

隐藏: img.style.display = “none”

img 对象

​ style属性: style对象

使用JQuery完成表格的隔行换色

获得所有的行

​ table.rows[]

修改行的颜色

​ row.bgColor =”red”

​ row.style.backgroundColor = “black”

​ row.style.background = “red”

​ “background-color:red”

​ “background:red”

使用JQuery完成复选框的全选效果

checked属性

如何获取所有复选框:

​ document.getElementsByName get Elements By Name 数据库里面

使用JQuery完成省市联动效果

​ JS中的数组: [“城市”]

​ new Array()

​ DOM树操作:

​ 创建节点: document.createElement

​ 创建文本节点: document.createTextNode

​ 添加节点: appendChild

使用JQuery完成下列列表左右选择

​ select下拉列表

​ multiple 允许多选

​ ondblclick : 双击事件

​ for循环遍历,一边遍历一边移除出现的问题

使用JQuery完成表单的校验(扩展)

​ 事件:

​ 获得焦点事件: onfocus

​ 失去焦点事件: onblur

​ 按键抬起事件: onkeyup

​ 鼠标移入: onmouseenter

​ 鼠标移出: onmouseout

​ JS引入外部文件 : script

使用JQuery完成页面定时弹出广告

JQ的入门

<script>
            //js文档加载完成的事件
            window.onload = function(){
                alert("window.onload   111");
            }

            window.onload = function(){
                alert("window.onload   222");
            }

            /*文档加载完成的事件*/
            jQuery(document).ready(function(){
                alert("jQuery(document).ready(function()");
            });
            /*
                jQuery  简写成 $
             */
            $(document).ready(function(){
                alert("$(document).ready(function()");
            });

            /*
                最简单的写法 
            */
            $(function(){
                alert("$(function(){");
            });

        </script>

【JQ中根据ID查找元素】

全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

【JQ和JS之间的转换】

• JQ对象,只能调用JQ的属性和方法
• JS对象 只能调用JS的属性和方法

function changeJS(){
                var div = document.getElementById("div1");
//              div.innerHTML = "JS成功修改了内容"
                //将JS对象转成JQ对象
                $(div).html("转成JQ对象来修改内容")
            }

            $(function(){
                //给按钮绑定事件
                $("#btn2").click(function(){
                    //找到div1
//                  $("#div1").html("JQ方式成功修改了内容");
                    //将JQ对象转成JS对象来调用
                    var $div = $("#div1");
//                  var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq转成JS对象成功";
                });
            });

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1. 导入JQ相关的文件
2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

显示和隐藏 img.style.display

【JQ中的动画效果】

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画

步骤分析：

1. 导入JQ的文件
2. 编写JQ的文档加载事件
3. 启动定时器 setTimeout(“”,3000);
4. 编写显示广告的函数
5. 在显示广告里面再启动一个定时器
6. 编写隐藏广告的函数

代码实现

<script>
    //显示广告
    function showAd(){
        $("#img1").slideDown(2000);
        setTimeout("hideAd()",3000);
    }
    //隐藏广告
    function hideAd(){
        $("#img1").slideUp(2000);
    }
    $(function(){        //文档加载完成才这么做
        setTimeout("showAd()",3000);
    });
</script>

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

• ID选择器 : #ID的名称
• 类选择器: 以 . 开头 .类名
• 元素选择器: 标签的名称
• 通配符选择器: *
• 选择器,选择器: 选择器1,选择器2

基本选择器的案例

    <!--
            - ID选择器 :     #ID的名称
            - 类选择器:     以 . 开头  .类名
            - 元素选择器:    标签的名称
            - 通配符选择器:   * 
            - 选择器,选择器:  选择器1,选择器2
        -->
        <script>
            //文档加载事件,页面初始化的操作
            $(function(){
                //初始化操作: 给按钮绑定事件
                $("#btn1").click(function(){
                    $("#two").css("background-color","palegreen");                 
                });

                //找出mini类的所有元素
                $("#btn2").click(function(){
                    $(".mini").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","palegreen");                  
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","palegreen");

                });
                /*选择器分组*/

                //找出mini类 和 span元素
                $("#btn5").click(function(){
                    $(".mini,span").css("background-color","palegreen");
                });
            });
        </script>

JQ中的层级选择器

• 子元素选择器: 选择器1 > 选择器2
• 后代选择器: 选择器1 儿孙
• 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
• 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟

<script>
    //文档加载事件,页面初始化的操作
    $(function(){
        //初始化操作: 给按钮绑定事件
        //找出body下面的子div   
        $("#btn1").click(function(){
            $("body > div").css("background-color","palegreen");                   
        });
        //找出body下面的所有div
        $("#btn2").click(function(){
            $("body div").css("background-color","palegreen");                 
        });
        $("#btn3").click(function(){
            $("#one+div").css("background-color","palegreen");                 
        });
        $("#btn4").click(function(){
            $("#two~div").css("background-color","palegreen");                    
        });

    });
</script>

JQ中的基本过滤器

<script>
    $(function(){
        /<script>
        //文档加载事件,页面初始化的操作
        $(function(){

            //初始化操作: 给按钮绑定事件
            //过滤出所有div中第一个元素
            $("#btn1").click(function(){
                $("div:first").css("background-color","palegreen");                    
            });

            //过滤出所有div中偶数位的div
            $("#btn2").click(function(){
                $("div:even").css("background-color","palegreen");                 
            });
            $("#btn3").click(function(){
                $("div:odd").css("background-color","palegreen");                  
            });
            $("#btn4").click(function(){
                $("div:gt(2)").css("background-color","palegreen");                    
            });

        });
</script>

JQ中的属性选择器

$(function(){
//找到有name属性的input
    $("#btn1").click(function(){
        $("input[name]").attr("checked",true);
    });
    $("#btn2").click(function(){
        $("input[name='accept']").attr("checked",true);
    });
    $("#btn3").click(function(){
        $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
    });
});

JQ中的表单过滤器

<script>
  //1.文档加载事件    
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

使用JQ完成表格的隔行换色

步骤分析:

1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号去修改颜色

代码实现:

    $(function(){
                //获得所有的行 :   元素选择器
                $("tbody > tr:even").css("background-color","#CCCCCC");
                //修改基数行
                $("tbody > tr:odd").css("background-color","#FFF38F");
//              $("tbody > tr").css("background-color","#FFF38F");


            });

使用JQ完成省市联动效果

技术分析:

1. 准备工作 : 城市信息的数据

2. 添加节点 : appendChild (JS)

   1. append : 添加子元素到末尾
   2. appendTo : 给自己找一个爹,将自己添加到别人家里
   3. prepend : 在子元素前面添加
   4. after : 在自己的后面添加一个兄弟

3. 遍历的操作:

   ​

步骤分析:

1. 导入JQ的文件
2. 文档加载事件:页面初始化
3. 进一步确定事件: change事件
4. 函数: 得到当前选中省份
5. 得到城市, 遍历城市数据
6. 将遍历出来的城市添加到城市的select中

代码实现:

$(function(){
                $("#province").change(function(){
//                  alert(this.value);
                    //得到城市信息
                    var cities = provinces[this.value];
                    //清空城市select中的option
                    /*var $city = $("#city");
                    //将JQ对象转成JS对象
                    var citySelect = $city.get(0)
                    citySelect.options.length = 0;*/

                    $("#city").empty();  //采用JQ的方式清空
                    //遍历城市数据
                    $(cities).each(function(i,n){
                        $("#city").append("<option>"+n+"</option>");
                    });
                });
            });

使用JQ完成下拉列表左右选择

步骤分析

1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 :　点击事件　onclick
4. 事件触发函数
1. 移动被选中的那一项到右边

代码实现

        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script>
            $(function(){
                $("#a1").click(function(){
                    //找到被选中的那一项
                    //将被选中项添加到右边
                    $("#rightSelect").append($("#leftSelect option:selected"));
                });

                //将左边所有商品移动到右边
                $("#a2").click(function(){
                    $("#rightSelect").append($("#leftSelect option"));
                });
            });
        </script>

使用JQ完成表单的校验(扩展)

技术分析

• trigger
• triggerHandler
• is()

步骤分析

1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/style.css" />
        <title></title>
        <!--
            1. 首先给必填项,添加尾部添加一个小红点
            2. 获取用户输入的信息,做相应的校验
            3. 事件: 获得焦点, 失去焦点, 按键抬起
            4. 表单提交的事件

            Jq的方式来实现:
                1. 导入JQ的文件
                2. 文档加载事件: 在必填项后天加一个小红点
                3. 表单校验确定事件: blur focus keyup
                4. 提交表单 submit
        -->
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script>

            $(function(){  //默认做一些页面初始化
                //动态在必填项后面添加小红点
                $(".bitian").after("<font class='high'>*</font>");

                //给必填项绑定事件
                $(".bitian").blur(function(){
                    //首先获取用户当前输入的值
                    var value = this.value; //123
                    //清空上一次提示的信息
                    $(this).parent().find(".formtips").remove();

                    //判断当前的值是哪一项输入的值
                    if($(this).is("#username")){  //判断是否是用户名输入项
                        if(value.length < 6){
                            $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
                        }
                    }

                    if($(this).is("#password")){  //判断是否是密码输入项
                        if(value.length < 6){
                            $(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
                        }
                    }
                }).focus(function(){
                    $(this).triggerHandler("blur");
                }).keyup(function(){
                    $(this).triggerHandler("blur");
                })



                //给表单提交绑定事件
                $("form").submit(function(){
                    //触发所有必填项的校验
                    $(".bitian").trigger("focus");
                    //找到错误信息的个数
                    if($(".onError").length > 0){
                        return false;
                    }
                    return true;
                });
            });

        /*  
            $(function(){
                // 在所有必填项后天加一个小红点 *
                $(".bitian").after("<font class='high'>*</font>");

                //事件绑定
                $(".bitian").blur(function(){
//                  var value = this.value;
                    var value = $(this).val();
                    //清空当前必填项后面的span 
//                  $(".formtips").remove();
                    $(this).parent().find(".formtips").remove();
                    //获得当前事件是谁的
                    if($(this).is("#username")){
                        //校验用户名
                        if(value.length < 6){
                            $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
                        }
                    }

                    if($(this).is("#password")){
                        //校验密码
                        if(value.length < 3){
                            $(this).parent().append("<span class='formtips onError'>密码太短了</span>");
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
                        }
                    }
                }).focus(function(){
                    $(this).triggerHandler("blur");
                }).keyup(function(){
                    $(this).triggerHandler("blur");
                });

//              $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

                //给表单绑定提交事件
                $("form").submit(function(){
                    //触发必填项的校验逻辑
                    $(".bitian").trigger("focus");

                    var length = $(".onError").length
                    if(length > 0){
                        return false;
                    }
                    return true;
                });
            });*/

        </script>
    </head>
    <body>
        <form action="../index.html">
            <div>
                用户名:<input type="text" class="bitian" id="username" />
            </div>
            <div>
                密码:<input type="password"  class="bitian" id="password" />
            </div>
            <div>
                手机号:<input type="tel" />
            </div>
            <div>
                <input type="submit" />
            </div>
        </form>
    </body>
</html>

使用JQuery发送请求局部刷新页面

数据交换格式:

​ json

​ xml

• 什么是JSON

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

• JSON格式

  ​ JSON对象

  { key1:value}   
  {"username":"zhangsan","password":"123"}

  ​ JSON数组

  [{ key1:value},{ key1:value},{ key1:value}]

内容总结:

定时器

动画效果: show hide slideDown slideUp fadeIn fadeOut animate

基本选择器:

​ ID选择器: #ID名称

​ 类选择器: .类名

​ 元素选择器: 元素/标签名称

​ 通配符选择器: * 找出所有页面元素 包含页面上所有的标签

​ 选择器分组 : 选择器1, 选择器2 [选择器1,选择器2]

层级选择器:

​ 后代选择器: 选择器1 选择器2 找出所有的后代,儿子孙子曾孙

​ 子元素选择器: 选择器1 >选择器2 找出所有儿子

​ 相邻兄弟选择器: 选择器1+选择器2 : 找出紧挨着自己那个弟弟

​ 兄弟选择器 :　　　选择器1~选择器2 : 找出所有的弟弟

属性选择器:

​ 选择器[属性名称]

选择器[属性名称][属性名名]
选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']

表单选择器:

​ :input 找出所有的输入项 : 不单单找出input textarea select

​ :text 找出type类型为 text

​ :password

基本过滤器:

​ :even

​ :odd

​ :gt

​ :lt

​ :eq

​ :first

​ :last

表单对象属性:

​ :selected

​ :checked

$(function)  : 文档加载完成的事件
css()  :    修改css样式
prop() :    修改属性/ 获取属性
html() :    修改innerHTML

append :    给自己添加子节点
appendTo :  将自己添加到别人家,给自己找一个爹
prepend :   在自己最前面添加子节点
after   :   在自己后面添加一个兄弟
empty   :   清空所有子节点

$(cities).each(function(i,n){

})

$.each(arr,function(i,n){

});