jQuery入门总结

最新推荐文章于 2024-07-04 10:38:01 发布

genMudFish

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量398

点赞数

分类专栏： web前端文章标签： jquery 表单校验

本文链接：https://blog.csdn.net/genMudFish/article/details/52497421

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、简介

    jquery是一个轻量级js框架，它兼容css3和各大浏览器，封装domajax、event、animate等简易操作，提供
各种插件的解决方案；它的宗旨是：write less，do more（所谓轻量级框架就是它比较小巧，体积小，用起来
比较简单）

版本：
    1.0：
    2.0：不支持IE6、7、8
没有任何问题）
    非min版：适合阅读查看源代码

引入方式：
    <script type="text/javascript" src="jquery的js代码位置">
    </script>记住引用写在调用之前，因为html的瀑布式加载。

基本语法：
    jQury（选择器）或者$(选择器)  
    获取到的jquery对象建议以$开头

jquery与dom对象转换：
jQuery对象[]或jQuery对象.get（index）获取dom对象。
    dom -- 》 jQuery：用$(dom对象)
    注意：遍历jQuery对象时用[]拿到的是dom对象，不要搞混

一般jquery代码当页面加载完再执行：
    $(function(){});
    $(document).ready(function(){});   （document可有可无）
    这相当于window.onload，但是ready可以写多个，而window.onload只能写一个，写多个后面的会将前面
    的覆盖。

二、选择器

基本选择器：
    元素选择器：$("元素名")
    id选择器：$("#id名")
    class选择器：$(".class名")
    选择所有：$("*");用多个选择器的时候用逗号隔开
层级选择器：
    祖先A下的所有后代B元素：$("A B")
    父A下的所有B子元素：$("A > B")
    紧接在A后的下一个相邻B元素：$("A +　Ｂ")
    Ａ后的所有Ｂ兄弟元素：$("A ~ B")  （A的所有兄弟B元素（包括前后）：$("A").siblings（）；）
属性选择器：  
    含有a属性的B 元素：$("B[a]")
    a属性值等于c的B元素：$("B[a=‘c’]")   （属性单引号可写可不写）
    a属性值不等于c的B元素：$("B[a！=‘c’]")
    a属性值以c开头的B元素：$("B[a^=‘c’]")
    a属性值以c结尾的B元素：$("B[a$=‘c’]")
    a属性值包含c的B元素：$("B[a*=‘c’]")
    如果要在属性中再次选择，可用多个[]如：$(B[a][c=d])
基本过滤选择器：
    第一个:   :first       
    最后一个： ：last
    索引为基数的对象： ：odd
    索引为偶数的对象： ：even  （索引从0开始）
    所有标题元素： ：header
    所有正在执行动画的元素：  ：animated 
    不包含某些元素：  ：not（selector）
    索引大于、小于、等于：  ：gt(num) /  ：lt(num) / ：eq(num)
表单选择器：
    ：text
    ：password
    ：radio
    ：checkbox
    ：reset
    ：submit
    ：image
    ：button
    ：hidden
    ：file
    :input
表单属性选择器:
    :checked
    :selected
    :enabled
    :disabled

    注意：jQuery选择器拿到的都是一个数组对象，即使用id选择器也一样。最常用的选择器三个基本选择器： 
    元素、id、class和两个表单属性选择器：checked和selected。

三、jQuery的dom操作方法：

操作样式：
    获取样式值：css（"css属性名"）
    设置样式值：css（"属性","值"）；
              css（{属性："值"，属性:"值"}）；（json格式）
    css方法将样式加到元素的style属性上

    addClass()
    removeClass（）
    toggleClass（）

html代码/文本/值：html()、text（）、val（）

html属性操作：attr()、prop()；一般用操作属性用attr，prop一般用于checked、selected等单值的获取

创建元素：$("<div></div>")或者$("<div/>") 

删除：remove（） 

插入：添加子元素：append，prepend
      在某一元素前/后插入：before、after

四、动画效果（了解）

show、hide、toggle：显示/隐藏/切换
slideUp、slideDown、slideToggle：高度滑动显示或隐藏
fadeIn、fadeOut、fadeToggle：淡入淡出

五、案例

广告的淡入淡出

页面打开两秒后弹出广告，两秒后广告自动关闭

<div id="image2" style="display:none"> <img src="../1.jpeg"></div>

setTimeout(function(){
    $("#image2").slideDown(3000);
    setTimeout(function(){
        $("#image2").slideUp(3000);
    },2000);
},2000);

表格的隔行换色、悬浮变色、全选、反选

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .oddTr{
                background: pink;
            }
            .evenTr{
                background: yellow;
            }
            .moveTr{
                background: aquamarine;
            }
        </style>
        <script src="../../js/jquery-1.8.3.min.js"></script>
        <script>
            //页面加载完毕事件
            $(function(){
                //获取所有的行，为奇数行绑定一个颜色，偶数行也绑定一个颜色
                $("tr:gt(0):odd").addClass("oddTr");
                $("tr:gt(0):even").addClass("evenTr");
                //为每行绑定鼠标移入移出事件，相当于悬浮效果
                $("tr:gt(0)").mouseover(function(){
                    $(this).addClass("moveTr");
                });
                $("tr:gt(0)").mouseout(function(){
                    $(this).removeClass("moveTr");
                });
                //全选全不选框
                $("#checkAll").click(function(){
$("input[name=checkItem]").prop("checked",$("#checkAll").prop("checked"));
                });
                //选item选中全选框
                var totalLength = $("input[name=checkItem]").length;
                $("input[name=checkItem]").click(function(){
                    var checkedLength = $("input[name=checkItem]:checked").length;
                    $("#checkAll").prop("checked",totalLength == checkedLength)    ;
                });

                //反选
                $("#reverseCheck").click(function(){
                    var $inputs = $("input[name=checkItem]");
                    for(var i=0; i<$inputs.length; i++){
                        //注意：inputs[i]拿到是dom对象
                        $($inputs[i]).prop("checked",!$($inputs[i]).prop("checked"));
                    }
                });
            });


        </script>
    </head>
    <body>
        <div style="width:800px;margin: 10px auto;">
            <input type="button" value="反选" id="reverseCheck" />
            <table align="center" width="100%" border="1" cellspacing="0" cellpadding="3">
                <tr>
                    <th>
                        <input id="checkAll" type="checkbox" />
                    </th>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>商品类别</th>
                    <th>操作</th>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>1</td>
                    <td>魅族手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>2</td>
                    <td>华为手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>3</td>
                    <td>360手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>4</td>
                    <td>一加手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>5</td>
                    <td>中兴手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td>
                        <input name="checkItem" type="checkbox" />
                    </td>
                    <td>5</td>
                    <td>努比亚手机</td>
                    <td>手机数码</td>
                    <td>
                        <a href="#">修改</a>&nbsp;&nbsp;
                        <a href="#">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

六、遍历jquery对象的三种方法

1．原始方式遍历

var $options = $(“option”);
for（var i=0 ; i<$options.length ; i++）{
    alert($option[i].value);
}

2．jquery对象的each方法

var $options = $(“option”);
$options.each（function（index，element）{
    alert(index); //打印索引
    alert(element); //打印$options集合对象中的每一个元素(注意：element是js对象)
}）；

3．jquery的全局each方法

此方法和jquery对象的方法相同，写法不同而已

var $options = $(“option”);
$.each（$options，function（index,element）{
    alert(index); //打印索引
    alert(element); //打印$options集合对象中的每一个元素
}）；

七、jQuery中的事件

1．jquey中常用的事件

jquery的事件与js的事件的功能和意义一样，只是在使用语法上稍微有些差异
这里写图片描述
hover事件：鼠标悬停事件

例如：要为一个<input id=”btn” type=”button” value=“提交”/>按钮绑定点击事件。
1）js代码实现
document.getElementById(“btn”).onclick=function(){
      //逻辑代码... ...
}

2）jquery代码实现
$(“#btn”).click(function(){
    //逻辑代码... ...
});

2、事件的绑定与解绑

绑定一个事件：
$("btn").bind("click", function(){
    alert();
});

绑定多个事件：（json格式）
$("button").bind({
  click:function(){alert()},
  mouseover:function(){alert()},  
  mouseout:function(){alert()}  
});

解绑所有事件：
$("btn").unbind();

解绑指定事件：（多个用空格隔开）
$("button").unbind(“click”);

八、表单校验插件

jQuery的表单校验插件提供了四种手动校验的方法，前三种了解，重点掌握第四种：
表单校验插件依赖于jquery库，所以在引用校验插件前必须先引入jquery库。

<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>

一、检验方式1：class类（了解）

语法:<标签 class=” 类型1 类型2 …”>此方法检验类型种类有限
这里写图片描述

二、属性(了解)

这里写图片描述

三、html5-data(了解)

语法：<标签 data-type-类型=“值”>
这里写图片描述

四、js代码校验

如果将代码写在前面，一般将校验代码写在页面加载完毕事件中：
$(function(){});

语法：(语法中多个值时都用的是json格式，如validate方法中传的是一个json对象，rules和messages也是对应一个json对象，一个校验域对应多个校验规则的话也用的json格式)
$("form表单的选择器").validate({
 rules:{
       表单项name值:校验规则，
       表单项name值:校验规则... ...
 },
 messages:{
       表单项name值:错误提示信息，
       表单项name值:错误提示信息... ...
 }
});

常用的校验规则：
这里写图片描述

自定义校验规则：
这里写图片描述

九、案例

1、省市二级联动

$(function(){
    var cities = [["长沙市","岳阳市","湘潭市"],["武汉市","荆州市","大连市"],["大同市","太原市","临汾市"]];
    $("#country").change(function(){
        $("#city").empty().html("<option value=''>---请选择---</option>");

        var cityArr = cities[$(this).val()];
        for(var i=0; i<cityArr.length; i++){
            $("<option>"+ cityArr[i] +"</option>").appendTo($("#city"));
        }
    });
});


<select id="country">
        <option value="">---请选择---</option>
        <option value="0">湖南省</option>
        <option value="1">湖北省</option>
        <option value="2">山西省</option>
    </select>
    <select id="city">
        <option value="">---请选择---</option>
    </select>

这里写图片描述

2、左右选择

    $(function(){
        $("#LeftToRight").click(function(){
            $("#left option:selected").appendTo($("#right"));
        });
        $("#AllleftToRight").click(function(){
            $("#left option").appendTo($("#right"));
        });
        $("#RightToLeft").click(function(){
            $("#right option:selected").appendTo($("#left"));
        });
        $("#AllRightToLeft").click(function(){
            $("#right option").appendTo($("#left"));
        });
    })


    <div>
        <select multiple="multiple" size="8" id="left">
            <option>111111111</option>
            <option>2222222</option>
            <option>3333333</option>
            <option>44444444</option>
            <option>666665666</option>
        </select>
    </div>
    <div>
        <input type="button" value="--->" id="LeftToRight"><br>
        <input type="button" value="--->>" id="AllleftToRight"><br>
        <input type="button" value="<---" id="RightToLeft"><br>
        <input type="button" value="<<---" id="AllRightToLeft">
    </div>
    <div>
        <select multiple="multiple" size="8" id="right">
        </select>
    </div>

这里写图片描述

3、模拟用户分组

    $(function(){
        $("span").click(function(){
            $(".menus ul").css("display","none");
            $(this).next().css("display","block");
        });
    });



<div id="menu">
        <ul class="menus">
            <li>
                <span>第一组</span>
                <ul>
                    <li>张三</li>
                    <li>李四</li>
                    <li>王五</li>
                </ul>
            </li>
            <li>
                <span>第二组</span>
                <ul>
                    <li>张三2</li>
                    <li>李四2</li>
                    <li>王五2</li>
                </ul>
            </li>
            <li>
                <span>第三组</span>
                <ul>
                    <li>张三3</li>
                    <li>李四3</li>
                    <li>王五3</li>
                </ul>
            </li>
            <li>
                <span>第四组</span>
                <ul>
                    <li>张三4</li>
                    <li>李四4</li>
                    <li>王五4</li>
                </ul>
            </li>
            <li>
                <span>第五组</span>
                <ul>
                    <li>张三5</li>
                    <li>李四5</li>
                    <li>王五5</li>
                </ul>
            </li>
        </ul>
    </div>

这里写图片描述

genMudFish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门总结

一、简介 jquery是一个轻量级js框架，它兼容css3和各大浏览器，封装domajax、event、animate等简易操作，提供各种插件的解决方案；它的宗旨是：write less，do more（所谓轻量级框架就是它比较小巧，体积小，用起来比较简单）版本： 1.0： 2.0：不支持IE6、7、8没有任何问题）非min版：适合阅读查看源代码引入方式：
复制链接

扫一扫

专栏目录